Frontend Development 16 min read

Technical Architecture and Implementation of the HaKnight Desktop Application Using Electron

The article details HaKnight’s new desktop client architecture built with Electron, Vite, and React, explaining the choice of Electron over native frameworks, the custom scaffold, use of axios, lowdb, log4js‑node, and electron‑builder for packaging, signing, notarization, and update mechanisms, and outlines reusable components that enable cross‑platform task scheduling and reporting.

HelloTech
HelloTech
HelloTech
Technical Architecture and Implementation of the HaKnight Desktop Application Using Electron

This article introduces the technical architecture and practical solutions adopted for the new version of the HaKnight desktop client, a terminal security application developed by Hello.

Why choose Electron Electron enables developers to build cross‑platform desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js, it allows front‑end developers to create Windows, macOS, and Linux applications without deep native development experience, greatly improving development speed.

Comparison with other frameworks Native (C++/C#/Objective‑C) offers the best performance but has a high learning curve. Qt provides good performance and cross‑platform support but still requires C++ knowledge. NW.js has a smaller ecosystem, and Tauri is emerging but less mature. Electron stands out because its UI layer (Chromium) and logic layer (Node.js) are clearly separated, allowing up to 80% code reuse across platforms.

Ecosystem and mature cases Electron’s ecosystem is rich, with many libraries and tools. Popular applications such as Postman, Skype, and VS Code are built with Electron. To list Electron‑based apps on macOS, you can run the following command: for app in /Applications/*; do;[ -d $app/Contents/Frameworks/Electron\ Framework.framework ] && echo $app; done

Scaffold selection Official scaffolds include Electron Forge, Electron Fiddle, and electron‑quick‑start, suitable for simple projects. Open‑source options like electron‑vue or vue‑cli‑plugin‑electron‑builder provide more features but may be less flexible for enterprise projects. The team decided to create a custom scaffold based on Vite, Electron, and React, starting from package.json .

Network module selection Three approaches were considered: (1) separate fetch (renderer) and net (main) modules, (2) unified net module in the main process, and (3) using axios for both environments. The team chose axios for its simplicity and familiarity.

Local database selection After comparing electron‑store, lokijs, lowdb, nedb, and realm, lowdb was selected for its synchronous API and ease of use.

Log tool selection Both electron‑log and log4js‑node were evaluated. log4js‑node offers richer APIs and configurable log file paths, so it was recommended.

Build tool selection electron‑builder, electron‑forge, and electron‑packager were compared. electron‑builder was chosen for its comprehensive packaging, signing, and distribution capabilities.

Core architecture overview The framework is built on Electron + Vite, with a layered design that separates the renderer, main, and task processes. Key points include using writeBundle to launch Electron after bundling, spawning the Electron process via Node’s child_process.spawn , configuring rollupOptions.external for Electron, and injecting global variables for page loading.

Packaging and updating Packaging uses electron‑builder. Windows signing employs a PFX certificate; macOS signing uses an Apple developer certificate with custom entitlements. Notarization is performed with electron-notarize using the following plist snippet: com.apple.security.cs.allow-unsigned-executable-memory The notarization script is implemented as: const { notarize } = require("electron-notarize"); exports.default = async function notarizing(context) { const { electronPlatformName, appOutDir } = context; if (electronPlatformName !== "darwin") { return; } const appName = context.packager.appInfo.productFilename; console.log(`公证中...`); return await notarize({ appBundleId: "mac.hellobike.knight", appPath: `${appOutDir}/${appName}.app`, appleId: "[email protected]", appleIdPassword: "XXXXX", }); }; Updates on Windows use electron-updater . On macOS, a custom update script works around the built‑in updater’s lifecycle by terminating the existing updater process before applying the new version.

Core capabilities The team distilled several reusable components: local database management (lowdb), bridge layer (jsBridge, native DLL/Dylib, Rust bridge), unified HTTP request library (axios), and task management utilities.

Application capability These foundations enable a strategy engine that schedules and distributes tasks based on backend policies, reporting execution results back to the server.

Conclusion Electron proved to be the most suitable framework for HaKnight’s goals, significantly improving delivery efficiency. Future work will focus on performance optimization, comprehensive logging, and incremental update mechanisms.

Cross-PlatformarchitectureelectronNode.jsViteDesktop Applicationelectron-builder
HelloTech
Written by

HelloTech

Official Hello technology account, sharing tech insights and developments.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.