Boost Desktop App Development with Electron: Architecture, Workflow, and Performance Tips

Background

Taro IDE aims to provide a one‑stop development workstation for mobile applications, requiring not only project creation, preview, and compilation but also testing, debugging, and monitoring. To improve developer experience beyond a command‑line tool, the team decided to create a desktop client for Windows and macOS using Electron.

Introducing Electron

Electron, originally created by GitHub for the Atom editor, merges Chromium and Node.js into a single runtime, allowing web code to interact with the operating system and to be packaged for Windows, macOS, and Linux. Although Electron may lag behind native frameworks in performance and bundle size, its cross‑platform packaging and proven success in products like VSCode, Atom, and Slack make it a suitable choice.

For a quick try, developers can use Electron Fiddle or community scaffolds. Compared with NW.js, Electron has a more complex process model, separating a main process (running the package.json main script) and isolated renderer processes for each window.

Development Workflow

The project starts from the community scaffold electron-react-typescript . The src/main/main.ts file is the entry point for the main process, which uses Webpack to bundle both main and renderer code.

import { app, BrowserWindow } from 'electron'

let win
app.on('ready', () => {
  win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL(`http://localhost:2003`)
  // xxx
})

app.on('activate', () => {})
app.on('window-all-closed', () => {})

The renderer process lives in src/renderer/app.tsx; after installing dependencies, running yarn start-dev launches the preview service.

Webpack is used for two reasons: it reduces runtime require calls, improving load performance, and its tree‑shaking removes unused code, shrinking the final package.

Two Webpack configurations are required: one with target: 'electron-main' for the main process and another with target: 'electron-renderer' for the renderer.

For debugging, the team installs Devtron , an Electron devtools extension that exposes IPC communication, dependencies, and events directly in the Chrome DevTools panel.

Additional extensions such as React and Redux can be added via the electron-devtools-installer package:

// main.js
const { default: installExtension, REACT_DEVELOPER_TOOLS, REACT_PERF, REDUX_DEVTOOLS } = require('electron-devtools-installer')
const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS, REACT_PERF]
extensions.forEach(extension => {
  try { installExtension(extension) } catch (e) { console.error(e) }
})

Optimization

Performance

Electron is often criticized for slow window opening and long load times. The team mitigates this by pre‑loading the main window in a hidden state and showing it after user login via IPC, achieving near‑instant display.

Since Electron 5, nodeIntegration is disabled by default, discouraging direct use of native Node modules in the renderer. Instead, developers should load modules asynchronously or invoke them via IPC from the main process. Skeleton screens and other lightweight UI tricks further improve perceived performance.

Atom’s use of V8 snapshots reduced require overhead and improved both load speed and security, as described in the article “How Atom Uses Chromium Snapshots”.

Additional tactics include enabling the asar option in electron‑builder to package source files into a binary archive (reducing require cost but limiting child_process.spawn), and offloading heavy computation to a separate renderer process or a spawned child process.

Size

A bare Electron app can exceed 100 MB after packaging because it bundles Chromium and the entire node_modules tree. To shrink the bundle, the team applies several strategies:

Run yarn autoclean to remove unnecessary files (README, docs, assets, examples) from node_modules . The command generates a default .yarnclean file that lists patterns to prune.

# Example .yarnclean content
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
...

Adopt a double package.json layout: one at the project root for development dependencies and another inside the application folder for production dependencies. Using electron-builder install-app-deps in the app folder’s post-install script ensures only production packages are bundled. electron‑builder v8+ automatically excludes devDependencies , preventing unnecessary code from inflating the final size.

Future

Web‑ify Capabilities

Currently many features are tightly coupled to Electron APIs, limiting reuse. The roadmap includes refactoring core capabilities into plugins that can be migrated to pure web implementations, facilitating cloud‑based development while acknowledging the potential performance trade‑offs.

Crash Handling

Stability improvements will add crash monitoring and reporting, capturing OS information, memory usage, and other diagnostics. When a crash occurs, the system will upload the data and optionally push alerts, helping developers reproduce and resolve issues more efficiently.

Conclusion

Electron dramatically speeds up desktop application development—just a few JavaScript lines can launch a cross‑platform client, lowering the entry barrier. However, developers must address performance and bundle‑size drawbacks early; otherwise, later optimizations become costly. The team plans to continue sharing deeper breakthroughs.

References

Electron: https://www.electronjs.org/

Electron Fiddle: https://www.electronjs.org/fiddle

Scaffold: https://github.com/search?q=electron+boilerplate&ref=opensearch

NW.js: https://nwjs.io/

electron-react-typescript: https://github.com/Robinfr/electron-react-typescript

src/main/main.ts: https://github.com/Robinfr/electron-react-typescript/blob/b50263f06ecd518bfd43421a3c0bc3c3be308b64/src/main/main.ts

src/renderer/app.tsx: https://github.com/Robinfr/electron-react-typescript/blob/b50263f06ecd518bfd43421a3c0bc3c3be308b64/src/renderer/app.tsx#L1

Devtron: https://www.electronjs.org/devtron

How Atom Uses Chromium Snapshots: https://flight-manual.atom.io/behind-atom/sections/how-atom-uses-chromium-snapshots/