How to Build Cross‑Platform PC Clients with Electron: A Practical Guide

Technical Selection

Wenku required a desktop client for Windows and macOS. After evaluating Flutter and Electron, Electron was selected because its web‑based rendering could directly reuse the existing document‑page technology.

Electron Framework Overview

Electron combines Chromium and Node.js, allowing UI rendering with web technologies while providing access to native system APIs. It solves three cross‑platform challenges: UI rendering, native API calls, and client packaging.

2.1 Multi‑Process Architecture

Electron adopts Chromium’s multi‑process model: a main process runs native services and manages windows, while each window runs in an isolated renderer process. This isolation prevents a single page crash from terminating the whole application. Communication between processes uses IPC, exposed through ipcMain and ipcRenderer.

2.2 Chromium and Node.js Integration

Electron merges the two event loops by running Node’s loop in a separate thread and polling it from Chromium, avoiding the earlier libuv‑based approach. The implementation is illustrated in the source file node_bindings.cc. The file can be examined at:

https://github.com/electron/electron/blob/master/shell/common/node_bindings.cc

Practical Implementation

Multi‑Process Solution

The main process handles native services and window management. Two renderer processes are used: a main window and a reusable content window. Reusing the content window reduces loading time and memory consumption, enables page‑state restoration, and supports off‑screen rendering.

Rapid Iteration via Code Injection

Since PC pages mirror online pages, JavaScript is injected into BrowserWindow or WebView after the page‑load event to adapt layout, mask views, and ensure responsiveness. The injected script is fetched from a cloud service, allowing frequent online changes without rebuilding the client.

Debug vs. Release

During development, the client runs in Debug mode using the Node service for fast feedback. Release mode compiles and packages the application, providing a “what‑you‑see‑is‑what‑you‑get” experience.

Conclusion and Outlook

Beyond Electron, the team is also exploring Flutter for both mobile and desktop. With Flutter 2.0’s improved desktop support, a unified code base targeting Windows, macOS, Android, and iOS becomes feasible.