How Yuque’s Desktop App Achieves Fast, Secure, and Scalable Performance with Electron

Yuque’s desktop client, launched over two years ago, has seen rapid iteration and healthy growth. The article shares the technical architecture decisions, common desktop‑app solutions, and practical experiences behind the product.

Yuque Desktop Introduction

Yuque, a note‑taking and knowledge‑base tool incubated by Ant Experience Technology, released a desktop client to provide creators with an immersive, system‑level experience.

No Distraction : Offers an immersive writing environment without browser tabs or windows.

System‑Level Resident : Faster launch via one‑click start or shortcut tools.

OS Integration : Multi‑window, system menus, shortcuts, file I/O, and software integration boost productivity.

Offline : Enables seamless creation under weak or no network conditions.

Desktop Architecture Overview

The architecture consists of three layers. The bottom layer relies on Yuque’s backend cloud services, security capabilities, and storage modules. The middle layer encapsulates application‑level features, including the main process, UI‑related modules, and management utilities. The top layer hosts business‑logic modules and sub‑applications.

Key Points

Compared with typical web apps, the desktop client emphasizes security, software upgrades, and foundational desktop capabilities.

Security

Security is critical for a productivity tool like Yuque.

Basic Security

Secure download of installation packages to prevent tampering.

Keep Electron up‑to‑date, following major releases and referencing leading apps such as VS Code.

Encrypt locally downloaded files (images, attachments) for offline use.

Startup Security

Antivirus Compatibility : Sign binaries to avoid being blocked and optionally whitelist with security vendors.

Debugging Prevention : Disable developer tools in the renderer.

Database Key Management : Encrypt local database files so that stolen copies cannot be read.

Application Security

Whitelist webview content to block malicious pages.

Disable Node.js in the renderer and enable context isolation.

Apply web security best practices within Electron.

Software Upgrade

Desktop apps require explicit upgrade processes. Yuque’s client consists of Electron/Node.js runtime packages plus business code.

Mac OS : Uses a disk image (hdiutil) for manual installation.

Windows : After download, the main process launches an installer UI for step‑by‑step installation.

Early full‑package upgrades caused high bandwidth consumption (~100 MB per user) and poor Windows installation experience.

Massive bandwidth usage leads to cost alerts.

Windows users complained about the cumbersome reinstall flow.

To address this, an incremental update scheme was adopted: only the business code changes are delivered as patches.

On macOS, incremental code is simply replaced. On Windows, two challenges arise:

File Locking : Running files cannot be deleted; a helper .exe closes the app, updates files, and restarts Yuque.

UAC Permission : Writing to protected locations (e.g., C:\) requires elevation; a PowerShell script prompts the user for admin rights.

Additional details such as path encoding and custom environment variables were also handled.

Foundational Capability Consolidation

Several reusable, business‑agnostic components were extracted:

Multi‑window management for opening, closing, and monitoring windows.

Webview lifecycle management for embedded editors and sub‑apps.

Offline/online status detection, with a more accurate implementation for Windows.

Desktop Architecture Highlights

Three criteria evaluate the architecture: delivery efficiency, performance, and stability.

Delivery Efficiency

Over 60 % of desktop features mirror the web version, leading to a shared codebase approach.

Common code moved to a shared directory in the monorepo.

Webpack aliasing adapts modules for different platforms.

Defined multi‑platform development standards to avoid pitfalls.

Challenges of Shared Code

Dependency issues when migrating to the common directory.

Lack of dynamic capabilities causing lag between web and desktop releases.

Cross‑platform compatibility problems (environment dependencies).

Absence of isolated sandboxes leading to memory leaks or style pollution.

Sub‑Application Mode

To improve modularity, the codebase was refactored into sub‑applications, each running inside a container similar to mini‑programs.

Rapid Iteration : Independent release cycles without waiting for the main client.

Native Desktop Capabilities : Sub‑apps inherit JSBridge features automatically.

Isolated Sandbox : Process‑level isolation ensures stable memory usage.

Optimized Loading : Webview pre‑warming and caching mitigate initial load delays.

Performance

Performance is continuously optimized from multiple angles.

Startup Speed : Cache main‑process code, show early loading UI, and parallelize tasks.

Main‑Process Load : Minimize work in the main process to avoid UI jank.

Web Optimizations : Apply lazy loading, module bundling, and other web‑side techniques.

Webview Optimizations : Pre‑heat webviews and enforce performance controls.

Ongoing Performance Tasks

Performance work is a long‑term effort, supported by:

Daily monitoring of key metrics during development.

Automated long‑run simulations to catch memory leaks.

A performance dashboard for real‑time online monitoring and gray‑release focus.

Stability

Desktop stability requirements exceed those of web apps.

Unit & Integration Tests : Automated tests improve overall reliability.

UI Automation (UIA) : Custom UIA framework (Macaca) simulates user actions for regression testing.

Additional measures include a stability dashboard, real‑time alerts, and a weekly preview release cycle to reduce integration risk.

Conclusion

Select an architecture that matches current business scale and team expertise; newer options like Flutter or Tauri may be considered.

Performance and stability optimizations are continuous; establish metrics and observability early.

Delivery efficiency and quality are often overlooked but are crucial for evaluating architectural choices.