Desktop Development with Electron: Technology Selection, Build Process, Performance Optimization, Quality Assurance, and Security

The article presents a comprehensive technical investigation and practical guide for building desktop applications using Electron, covering background, technology selection, development stack, build process, performance tuning, update mechanisms, quality assurance, and security.

Background : The team required desktop capabilities such as offline usage and OS‑level integration. Desktop development is defined as software for Windows, macOS, and Linux. After comparing native, Qt, Flutter, NW, Electron, and Tarui, the final choice was Electron , which combines Chromium, Node.js, and native APIs.

Electron Architecture : It follows a multi‑process model consisting of a single main process and multiple renderer processes. Communication between them uses IPC (inter‑process communication) via ipcMain in the main process and ipcRenderer in renderer processes.

Example of IPC usage:

import { ipcMain } from 'electron';
ipcMain.on('my-channel', (event, args) => {
  // handle message from renderer
});

// In renderer
import { ipcRenderer } from 'electron';
ipcRenderer.send('my-channel', data);

Technology Stack :

Programming Language – TypeScript : Provides static typing, ES2020+ features, better maintainability, and OOP support.

Build Tool – Electron‑Forge : Simple yet powerful; configuration example to keep binary resources outside the asar archive: const os = require('os'); const platform = os.platform(); const config = { packagerConfig: { extraResource: [`./src/main/ffmpeg/`] } };

Web Stack – Vue 3 + Vite : Modern front‑end framework and fast bundler.

Monorepo – pnpm + Turbo : Uses pnpm for dependency management and turbo for task orchestration. Example of a pnpm workspace configuration is omitted for brevity.

Database – lowdb : Chosen for its JSON‑based storage, lodash/rambda support, and lightweight nature. Other candidates (sqlite3, nedb, electron‑store) are discussed.

Scripting – zx : Provides a Node‑based shell with built‑in fetch , chalk , etc.

Build Process :

Application icon generation – tools such as icofx3 or online generators.

Binary packaging – using electron‑forge to bundle the app. Binary resources (e.g., ffmpeg) must be excluded from the asar archive and referenced at runtime. Example configuration to keep ffmpeg outside the archive: const os = require('os'); const platform = os.platform(); const config = { packagerConfig: { extraResource: [`./src/main/ffmpeg/${platform}`] } };

On‑demand binary inclusion – only the required platform binary is packaged, reducing size.

Build size optimization – move web‑only dependencies to devDependencies , prune unused code, perform on‑demand binary packaging, and clean node_modules (e.g., yarn autoclean -I ).

Update Mechanisms :

Full update : Download the whole package or zip and replace all files. The flow involves a server API returning the latest version, renderer fetching the version via axios , IPC to main process, and electron‑updater handling the replacement.

Incremental update : Only the renderer layer is replaced, reducing download size. The main process checks for updates, pulls the new renderer bundle, swaps it, and notifies the user to restart.

Performance Optimization :

Build optimization : Already covered in the build section.

Startup optimization : Use v8-compile-cache to cache compiled code, load core features first, defer non‑essential modules, leverage multi‑process/threading, and keep the app packaged as asar . Example to enable the cache: require('v8-compile-cache');

Runtime optimization : Optimize renderer performance (e.g., lazy loading, code splitting) and keep the main process lightweight. Example of lazy loading a module: export function share() { const kun = require('kun'); kun(); }

Quality Assurance :

Automated testing : Unit, integration, and end‑to‑end tests using vitest or spectron .

Crash monitoring : Detect renderer crashes, prompt reload, use preload scripts for global handlers, simulate crashes with process.crash() , and collect logs.

Crash handling : Upgrade Electron promptly, record user actions and system info, reproduce issues, and leverage community support.

Security :

Source leakage : asar archives can be unpacked, so they provide limited protection.

Source protection hierarchy : asar → code obfuscation → WebAssembly → language bindings (C++/Rust). The article demonstrates using napi‑rs to write native Rust functions, compile them to a Node binary, and import them in Electron: fn sum(a: f64, b: f64) -> f64 { a + b } use napi_derive::napi; #[napi] fn sum(a: f64, b: f64) -> f64 { a + b } import { sum as rsSum } from '@rebebuca/native'; console.log(rsSum(2, 5)); // 7

Application security : Prevent clone attacks by binding user credentials to device fingerprints (implementation can use the native Rust module above).

Code security : Apply common web protections (XSS, CSRF), restrict Node integration, enable Electron security options, and limit navigation.

In summary, the article documents the entire workflow of selecting Electron for desktop development, configuring the toolchain, optimizing build size and performance, implementing reliable update strategies, ensuring quality through testing and crash handling, and strengthening security at both the source‑code and application levels.