Building a Cross‑Platform Desktop IDE with Electron: Architecture & Optimization

Background

Taro IDE is a one‑stop mobile development workbench. In addition to supporting the full lifecycle of Taro projects—creation, preview, compilation—it must also integrate testing, debugging, and monitoring workflows. To improve developer experience, a desktop client for Windows and macOS is required.

Introducing Electron

Electron, originally built by GitHub for the Atom editor, combines Chromium and Node.js in 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, it powers successful cross‑platform apps such as VSCode, Atom, and Slack, making it suitable for our needs.

For a quick try, developers can use Electron Fiddle or community scaffolds.

Electron’s architecture consists of a main process (running the

package.json

main

script) and isolated renderer processes for each window.

The main process can use Node APIs and interact directly with the OS (notifications, file system, hardware). Renderer processes normally handle only web content; enabling nodeIntegration gives them Node access, but they still rely on IPC/remote calls for system features.

Development Workflow

We start from the community scaffold electron-react-typescript . The src/main/main.ts file is the entry point of the main process. Webpack bundles both the main and renderer processes.

The main process creates windows via the BrowserWindow class and controls the app lifecycle with the app object. Example 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 side ( src/renderer/app.tsx) is a normal React page. After installing dependencies, yarn start-dev launches the preview service.

Webpack reduces runtime require calls, improving load performance, and its tree‑shaking removes unused code, shrinking the final bundle.

Two separate webpack configs are needed: one with target: 'electron-main' for the main process, and another with target: 'electron-renderer' for the renderer.

For debugging, we install Devtron , which adds a panel to the DevTools for inspecting IPC, dependencies, and events.

Additional extensions (React, Redux, etc.) can be added from the main process:

// 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) }
})

With the environment set up, business code development can begin.

Optimization

Performance

Electron’s performance is often criticized for slow window opening and long load times. Pre‑loading solves this by creating a hidden main window and loading its static assets in advance; the window is shown instantly after login.

Requiring Node modules in the renderer is expensive. Since Electron 5, nodeIntegration is disabled by default, discouraging direct native module usage. Instead, load modules asynchronously or via IPC from the main process, and use lightweight UI tricks such as skeleton screens.

Atom improves performance by using V8 snapshots, eliminating many require calls and boosting both speed and security (see “How Atom Uses Chromium Snapshots”).

Other techniques include enabling asar in electron‑builder to package source files into a binary archive, reducing require overhead, and off‑loading heavy computation to separate renderer processes or child processes via require('child_process').spawn.

Size

A bare Electron app can exceed hundreds of megabytes because it bundles Chromium and all node_modules. To shrink the bundle:

Run yarn autoclean to remove unnecessary files (README, docs, etc.) from node_modules. The command creates a default .yarnclean file, e.g.:

# default .yarnclean
__tests__
test
powered-test
docs
doc
website
assets
example
examples
...

Adopt a double package.json layout: one for development dependencies and one for production dependencies. Use electron-builder install-app-deps in the production

package.json

post‑install

script. Electron‑builder v8+ automatically excludes devDependencies from the final package.

Future

Web‑ify Capabilities

Currently many features are tightly coupled to Electron. We plan to modularize core capabilities into plugins, making them reusable and enabling potential cloud‑based development, though this will introduce additional performance considerations.

Crash Handling

Stability improvements include adding crash monitoring that records OS info, memory usage, and other diagnostics, then reports them on crashes to aid debugging and alert developers.

Summary

Electron offers great efficiency for desktop app development—just a few JavaScript lines can launch a client, lowering the entry barrier. However, its performance and bundle size drawbacks require careful early‑stage planning; otherwise, costly optimizations are needed later. Our current optimizations are only a start, and future breakthroughs will be shared.

References

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

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

Scaffolds: 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/