electron-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Electron Desktop Developer

Electron桌面应用开发者

Purpose

定位

Provides cross-platform desktop application development expertise specializing in Electron, IPC architecture, and OS-level integration. Builds secure, performant desktop applications using web technologies with native capabilities for Windows, macOS, and Linux.

提供专注于Electron、IPC架构和操作系统级集成的跨平台桌面应用开发专业能力。使用Web技术构建具备Windows、macOS和Linux原生能力的安全、高性能桌面应用程序。

When to Use

适用场景

Building cross-platform desktop apps (VS Code, Discord style)
Migrating web apps to desktop with native capabilities (File system, Notifications)
Implementing secure IPC (Main ↔ Renderer communication)
Optimizing Electron memory usage and startup time
Configuring auto-updaters (electron-updater)
Signing and notarizing apps for app stores

构建跨平台桌面应用（类似VS Code、Discord风格）
将Web应用迁移为具备原生能力的桌面应用（文件系统、通知功能）
实现安全的IPC（主进程↔渲染进程通信）
优化Electron应用的内存占用和启动时间
配置自动更新器（electron-updater）
为应用商店签名并公证应用

2. Decision Framework

2. 决策框架

Architecture Selection

架构选择

How to structure the app?
│
├─ **Security First (Recommended)**
│  ├─ Context Isolation? → **Yes** (Standard since v12)
│  ├─ Node Integration? → **No** (Never in Renderer)
│  └─ Preload Scripts? → **Yes** (Bridge API)
│
├─ **Data Persistence**
│  ├─ Simple Settings? → **electron-store** (JSON)
│  ├─ Large Datasets? → **SQLite** (`better-sqlite3` in Main process)
│  └─ User Files? → **Native File System API**
│
└─ **UI Framework**
   ├─ React/Vue/Svelte? → **Yes** (Standard SPA approach)
   ├─ Multiple Windows? → **Window Manager Pattern**
   └─ System Tray App? → **Hidden Window Pattern**

如何构建应用架构？
│
├─ **安全优先（推荐）**
│  ├─ 上下文隔离？ → **是**（v12版本起的标准配置）
│  ├─ Node集成？ → **否**（绝对不要在渲染进程中启用）
│  └─ 预加载脚本？ → **是**（桥接API）
│
├─ **数据持久化**
│  ├─ 简单设置？ → **electron-store**（JSON格式）
│  ├─ 大型数据集？ → **SQLite**（在主进程中使用`better-sqlite3`）
│  └─ 用户文件？ → **原生文件系统API**
│
└─ **UI框架**
   ├─ React/Vue/Svelte？ → **是**（标准SPA开发方式）
   ├─ 多窗口？ → **窗口管理器模式**
   └─ 系统托盘应用？ → **隐藏窗口模式**

IPC Communication Patterns

IPC通信模式

Pattern	Method	Use Case
One-Way (Renderer → Main)	`ipcRenderer.send`	logging, analytics, minimizing window
Two-Way (Request/Response)	`ipcRenderer.invoke`	DB queries, file reads, heavy computations
Main → Renderer	`webContents.send`	Menu actions, system events, push notifications

Red Flags → Escalate to
security-auditor
:

Enabling
```
nodeIntegration: true
```
in production
Disabling
```
contextIsolation
```
Loading remote content (
```
https://
```
) without strict CSP
Using
```
remote
```
module (Deprecated & insecure)

模式	方法	适用场景
单向（渲染进程→主进程）	`ipcRenderer.send`	日志记录、数据分析、窗口最小化
双向（请求/响应）	`ipcRenderer.invoke`	数据库查询、文件读取、密集型计算
主进程→渲染进程	`webContents.send`	菜单操作、系统事件、推送通知

危险信号 → 升级至
security-auditor
处理：

在生产环境中启用
```
nodeIntegration: true
```
禁用
```
contextIsolation
```
未配置严格的CSP就加载远程内容（
```
https://
```
）
使用已废弃且不安全的
```
remote
```
模块

Workflow 2: Performance Optimization (Startup)

工作流2：启动性能优化

Goal: Reduce launch time to < 2s.

Steps:

V8 Snapshot
- Use
```
electron-link
```
  or
```
v8-compile-cache
```
  to pre-compile JS.

Lazy Loading Modules

Don't
```
require()
```
everything at top of
```
main.ts
```
.

javascript

// Bad
import { heavyLib } from 'heavy-lib';

// Good
ipcMain.handle('do-work', () => {
  const heavyLib = require('heavy-lib');
  heavyLib.process();
});

Bundle Main Process
- Use
```
esbuild
```
  or
```
webpack
```
  for Main process (not just Renderer) to tree-shake unused code and minify.

目标： 将启动时间缩短至2秒以内。

步骤：

V8快照
- 使用
```
electron-link
```
  或
```
v8-compile-cache
```
  预编译JS代码。

模块懒加载

不要在
```
main.ts
```
顶部
```
require()
```
所有模块。

javascript

// 错误示例
import { heavyLib } from 'heavy-lib';

// 正确示例
ipcMain.handle('do-work', () => {
  const heavyLib = require('heavy-lib');
  heavyLib.process();
});

主进程打包
- 使用
```
esbuild
```
  或
```
webpack
```
  对主进程进行打包（不只是渲染进程），以摇树优化未使用的代码并压缩。

4. Patterns & Templates

4. 模式与模板

Pattern 1: Worker Threads (CPU Intensive Tasks)

模式1：工作线程（CPU密集型任务）

Use case: Image processing or parsing large files without freezing the UI.

typescript

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

适用场景： 在不冻结UI的情况下处理图像处理或解析大文件。

typescript

// main.ts
import { Worker } from 'worker_threads';

ipcMain.handle('process-image', (event, data) => {
  return new Promise((resolve, reject) => {
    const worker = new Worker('./worker.js', { workerData: data });
    worker.on('message', resolve);
    worker.on('error', reject);
  });
});

Pattern 2: Deep Linking (Protocol Handler)

模式2：深度链接（协议处理器）

Use case: Opening app from browser (

myapp://open?id=123

typescript

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // Parse url 'myapp://...' and navigate renderer
  mainWindow.webContents.send('navigate', url);
});

适用场景： 从浏览器打开应用（

myapp://open?id=123

）。

typescript

// main.ts
if (process.defaultApp) {
  if (process.argv.length >= 2) {
    app.setAsDefaultProtocolClient('myapp', process.execPath, [path.resolve(process.argv[1])]);
  }
} else {
  app.setAsDefaultProtocolClient('myapp');
}

app.on('open-url', (event, url) => {
  event.preventDefault();
  // 解析URL 'myapp://...' 并通知渲染进程导航
  mainWindow.webContents.send('navigate', url);
});

6. Integration Patterns

6. 集成模式

frontend-ui-ux-engineer:

前端UI/UX工程师：

Handoff: UI Dev builds the React/Vue app → Electron Dev wraps it.
Collaboration: Handling window controls (custom title bar), vibrancy/acrylic effects.
Tools: CSS
```
app-region: drag
```
.

交接：UI开发者构建React/Vue应用 → Electron开发者进行封装。
协作：处理窗口控制（自定义标题栏）、毛玻璃/亚克力效果。
工具：CSS属性
```
app-region: drag
```
。

devops-engineer:

DevOps工程师：

Handoff: Electron Dev provides build config → DevOps sets up CI pipeline.
Collaboration: Code signing certificates (Apple Developer ID, Windows EV).
Tools: Electron Builder, Notarization scripts.

交接：Electron开发者提供构建配置 → DevOps工程师搭建CI流水线。
协作：代码签名证书（Apple开发者ID、Windows EV证书）。
工具：Electron Builder、公证脚本。

security-engineer:

安全工程师：

Handoff: Electron Dev implements feature → Security Dev audits IPC surface.
Collaboration: Defining Content Security Policy (CSP) headers.
Tools: Electronegativity (Scanner).

交接：Electron开发者实现功能 → 安全工程师审核IPC接口。
协作：定义内容安全策略（CSP）头。
工具：Electronegativity（扫描工具）。