How to Develop Cross‑Platform Desktop Applications with Electron: Architecture, Workflow, and Best Practices

The speaker, Lu Ziyang, introduces himself as a front‑end engineer at Zhengcaiyun and presents the topic "How to develop cross‑terminal applications based on Electron".

Electron combines Chromium for UI rendering, Node.js for system access, and Native APIs for cross‑platform capabilities, allowing developers to write desktop apps with HTML, CSS, and JavaScript.

Traditionally, front‑end engineers used a CLI workflow: create a Git repo, clone, run npm install , etc. By integrating Electron into the front‑end engineering platform "Dunhuang", these steps are encapsulated in a GUI, reducing a six‑step process to two clicks and unifying the workflow.

The article compares Electron with native development, Qt, and NW.js, highlighting Electron’s larger community, richer ecosystem, and ease of use for front‑end developers.

A minimal Electron project consists of three files. In package.json the main field points to main.js . In main.js the app listens for the ready event and creates a BrowserWindow that loads index.html . This demonstrates the core main (process) and renderer (process) model.

Inter‑process communication (IPC) is shown with a button that sends a say-hello message via ipcRenderer to the main process, which creates hello.txt using Node’s fs module and shows a Notification .

For updates, Electron’s built‑in autoUpdater (from electron-builder ) checks a CDN‑hosted latest‑mac.yml and zip package, downloads the full package, and prompts the user to restart.

Because full updates are large (~40 MB), the team also uses incremental strategies: static assets of the renderer are CDN‑hosted, optionally cached with a service worker, and version‑controlled to enable UI‑only updates.

The QA section answers questions about hot‑updates, differences between Electron and NW.js, and where update packages are stored.