The Prince Academy株式会社 | Structuring Your UI Code | Chapter 3: Building User Interfaces with Web Technologies | Getting Started with Electron: Building Desktop Apps for Web Developers

As web developers, we're accustomed to structuring our frontend applications using HTML for structure, CSS for styling, and JavaScript for interactivity. Electron leverages these same technologies, allowing you to build desktop application UIs with the skills you already possess. However, just like in web development, how you structure your UI code significantly impacts maintainability, scalability, and developer experience. Let's explore some effective strategies for organizing your UI code in Electron applications.

Think of your Electron UI as a series of independent, self-contained components. This approach, often referred to as component-based architecture, mirrors popular frontend frameworks like React, Vue, and Angular. Each component manages its own HTML, CSS, and JavaScript, making it easier to develop, test, and reuse.

For instance, you might have a 'Sidebar' component, a 'ContentArea' component, and a 'Toolbar' component. These can then be composed together to form the overall application window.

graph TD
    A[App Window]
    A --> B(Sidebar Component)
    A --> C(ContentArea Component)
    A --> D(Toolbar Component)
    B --> B1{Sidebar HTML}
    B --> B2{Sidebar CSS}
    B --> B3{Sidebar JS}
    C --> C1{Content HTML}
    C --> C2{Content CSS}
    C --> C3{Content JS}
    D --> D1{Toolbar HTML}
    D --> D2{Toolbar CSS}
    D --> D3{Toolbar JS}

Within your Electron project, you can establish a clear directory structure to house these components. A common pattern is to have a renderer directory at the root of your project, and within that, a components folder. Each component can then have its own subdirectory containing its specific files.

.
└── src
    ├── main
    │   └── index.js
    └── renderer
        ├── index.html
        ├── index.css
        ├── index.js
        └── components
            ├── Sidebar
            │   ├── Sidebar.html
            │   ├── Sidebar.css
            │   └── Sidebar.js
            ├── ContentArea
            │   ├── ContentArea.html
            │   ├── ContentArea.css
            │   └── ContentArea.js
            └── Toolbar
                ├── Toolbar.html
                ├── Toolbar.css
                └── Toolbar.js

When you're using a framework like React or Vue, this component structure becomes even more streamlined. The framework's build tools will handle the bundling and compilation of your component code, often resulting in a single JavaScript file for each component.

For example, with React, your Sidebar.js file might contain both the JSX for the HTML structure and the JavaScript logic. Styling can be handled through various methods, such as CSS modules, styled-components, or a global stylesheet that targets specific class names within your components.

graph TD A[App Window] A --> B(Sidebar Component) A --> C(ContentArea Component) A --> D(Toolbar Component) B --> B1{Sidebar HTML} B --> B2{Sidebar CSS} B --> B3{Sidebar JS} C --> C1{Content HTML} C --> C2{Content CSS} C --> C3{Content JS} D --> D1{Toolbar HTML} D --> D2{Toolbar CSS} D --> D3{Toolbar JS}

. └── src ├── main │ └── index.js └── renderer ├── index.html ├── index.css ├── index.js └── components ├── Sidebar │ ├── Sidebar.html │ ├── Sidebar.css │ └── Sidebar.js ├── ContentArea │ ├── ContentArea.html │ ├── ContentArea.css │ └── ContentArea.js └── Toolbar ├── Toolbar.html ├── Toolbar.css └── Toolbar.js