The Prince Academy株式会社 | Best Practices for Web UI in Desktop Apps | 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 the freedom and flexibility of web technologies. When building desktop applications with Electron, it's natural to leverage these same skills. However, the desktop environment presents unique challenges and opportunities. To ensure your Electron app feels native, performs well, and is maintainable, it's crucial to adopt best practices for your web UI.

Embrace a UI Framework/Library: While you can build UIs with vanilla HTML, CSS, and JavaScript, it quickly becomes unwieldy for complex applications. Frameworks like React, Vue, or Angular, or even UI component libraries like Material-UI, Ant Design, or Bootstrap, can significantly streamline development, enforce consistency, and improve maintainability. They provide pre-built components, state management solutions, and a structured approach to building your interface.

import React from 'react';
import Button from '@mui/material/Button';

function MyButton() {
  return (
    <Button variant="contained">Click Me</Button>
  );
}

Consider Native Look and Feel: Users expect desktop applications to behave in certain ways. While you have the freedom to create entirely custom UIs, consider incorporating elements that are familiar to users on their operating system. This can include using standard window controls (minimize, maximize, close), respecting system font sizes, and adhering to platform-specific design conventions where appropriate. Electron's nativeTheme module can help you adapt your app's styling to the user's system theme.

const { nativeTheme } = require('electron');

const isDarkMode = nativeTheme.shouldUseDarkColors;

if (isDarkMode) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.remove('dark-mode');
}

nativeTheme.on('updated', () => {
  // Re-apply theme logic
});

Optimize for Performance: Desktop applications often handle larger datasets and more complex operations than typical web pages. Performance is paramount for a good user experience. This means:
- Efficient DOM Manipulation: Avoid unnecessary re-renders. Frameworks with virtual DOMs (like React and Vue) are excellent for this.
- Lazy Loading: Load components and data only when they are needed.
- Asynchronous Operations: Offload heavy tasks to background processes or the Node.js side of Electron to keep the UI thread responsive.
- Debouncing and Throttling: Use these techniques for event handlers that might fire rapidly (e.g., window resizing, input typing).

graph TD;
    A[User Interaction] --> B{Is it a heavy task?};
    B -- Yes --> C[Send to Main Process/Worker];
    B -- No --> D[Handle in Renderer Process];
    C --> E[Process Data];
    E --> F[Send Result Back to Renderer];
    F --> D;

Manage State Effectively: As your application grows, so does the complexity of its state. Centralized state management solutions (like Redux, Vuex, or Zustand) become invaluable. They provide a single source of truth for your application's data, making it easier to track changes, debug issues, and ensure consistency across different parts of your UI. This is especially important when dealing with data shared between the main and renderer processes.

const { nativeTheme } = require('electron'); const isDarkMode = nativeTheme.shouldUseDarkColors; if (isDarkMode) { document.body.classList.add('dark-mode'); } else { document.body.classList.remove('dark-mode'); } nativeTheme.on('updated', () => { // Re-apply theme logic });

graph TD; A[User Interaction] --> B{Is it a heavy task?}; B -- Yes --> C[Send to Main Process/Worker]; B -- No --> D[Handle in Renderer Process]; C --> E[Process Data]; E --> F[Send Result Back to Renderer]; F --> D;