Electron 是什么？桌面应用开发的王者框架
前言
说到桌面应用开发，Electron 绝对是绕不开的话题。VSCode、Slack、Discord、Figma、Notion... 这些我们每天使用的应用，都是用 Electron 构建的。
我第一次接触 Electron 是在 2017 年，当时想开发一个跨平台的桌面工具，尝试了各种技术栈后，最终选择了 Electron。从那时起，我见证了 Electron 从小众框架成长为桌面应用开发的王者。
今天，我想和大家聊聊 Electron——这个改变了桌面应用开发格局的框架。
什么是 Electron？
官方定义
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。它由 GitHub 开发，现在由 OpenJS 基金会维护。
通俗理解
简单来说，Electron 让你能够：
- 用 Web 技术开发桌面应用 - 如果你会做网页，就会做桌面应用
- 一次编写，处处运行 - Windows、macOS、Linux 三端通吃
- 访问系统底层功能 - 文件系统、系统通知、硬件等
- 快速开发和迭代 - 利用庞大的 npm 生态系统
Electron 的核心优势
1. 强大的技术栈
Electron = Chromium + Node.js + Native APIs
Chromium：提供现代化的 Web 渲染引擎
Node.js：提供服务器端 JavaScript 运行环境
Native APIs：提供系统级功能访问这意味着你可以：
- 使用最新的 Web 标准（ES2022+、CSS3、WebGL 等）
- 使用 npm 上的百万级模块
- 直接调用系统 API
2. 跨平台支持
javascript
// 同一套代码，在三个平台上运行
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)一次开发，部署到：
- Windows 7/8/10/11
- macOS 10.11+
- Linux（各种发行版）
3. 成熟的生态系统
流行的前端框架支持
bash
# React
npx create-react-app my-app
electron my-app
# Vue
vue create my-app
electron my-app
# Angular
ng new my-app
electron my-app丰富的工具链
bash
# 打包工具
electron-builder # 最流行
electron-packager # 简单易用
electron-forge # 官方推荐
# 开发工具
electron-devtools # 调试工具
electron-reload # 热重载
spectron # 测试框架4. 活跃的社区
GitHub Stars: 110k+
npm 周下载量: 500k+
活跃贡献者: 1000+
生产应用: 10000+Electron 的架构设计
双进程模型
┌─────────────────────────────────────────────┐
│ 主进程 (Main Process) │
│ - 应用生命周期管理 │
│ - 创建和管理窗口 │
│ - 系统级 API 访问 │
│ - Node.js 完整功能 │
└───────────┬─────────────────────────────────┘
│
├────────┬────────┬────────┐
│ │ │ │
┌───────▼─────┐ │ │ │
│ 渲染进程 1 │ │ │ │
│ (Renderer) │ │ │ │
│ - Chromium │ │ │ │
│ - Web 页面 │ │ │ │
└─────────────┘ │ │ │
│ │ │
┌────────▼────┐ │ │
│ 渲染进程 2 │ │ │
│ (Renderer) │ │ │
└─────────────┘ │ │
│ │
┌─────────▼────┐ │
│ 渲染进程 3 │ │
│ (Renderer) │ │
└──────────────┘ │
│
┌────────────▼────┐
│ 预加载脚本 │
│ (Preload) │
└─────────────────┘主进程（Main Process）：
- 每个 Electron 应用只有一个
- 运行 package.json 中的 main 脚本
- 可以访问 Node.js 和 Electron 的所有 API
- 负责创建和管理窗口
渲染进程（Renderer Process）：
- 每个窗口对应一个渲染进程
- 运行 Web 页面代码
- 默认情况下与主进程隔离
- 通过 IPC 与主进程通信
进程间通信（IPC）
javascript
// 主进程 (main.js)
const { ipcMain } = require('electron')
ipcMain.handle('get-data', async (event, arg) => {
// 处理数据
return { result: 'success' }
})
// 渲染进程 (renderer.js)
const { ipcRenderer } = require('electron')
const result = await ipcRenderer.invoke('get-data', someData)
console.log(result) // { result: 'success' }知名的 Electron 应用
开发工具
1. Visual Studio Code
微软开发的代码编辑器
用户量: 1400万+
为什么用 Electron: 跨平台、可扩展、快速迭代2. Atom
GitHub 开发的代码编辑器
Electron 的诞生地
已停止维护，但影响深远3. WebStorm / IntelliJ IDEA
JetBrains 部分工具使用 Electron
用于某些组件和界面通讯工具
1. Slack
企业协作工具
用户量: 1000万+
日活跃用户: 1200万+2. Discord
游戏玩家通讯平台
用户量: 1.5亿+
日活跃用户: 3000万+3. Microsoft Teams
微软企业协作工具
用户量: 2.7亿+
与 Office 365 深度集成设计工具
1. Figma Desktop
UI/UX 设计工具
设计师首选
实时协作2. Notion
笔记和知识管理工具
用户量: 2000万+
多功能集成3. Obsidian
本地优先的笔记应用
Markdown 支持
插件生态丰富其他应用
- WhatsApp Desktop
- Skype
- Twitch
- GitHub Desktop
- Postman
- MongoDB Compass
- Hyper TerminalElectron vs 其他方案
vs 原生开发
| 特性 | Electron | 原生 (Qt/WPF/.NET) |
|---|---|---|
| 学习曲线 | ⭐⭐ (Web技术) | ⭐⭐⭐⭐ (各平台技术栈) |
| 开发速度 | ⭐⭐⭐⭐⭐ | ⭐⭐ |
| 性能 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 体积 | 150MB+ | 10-50MB |
| 跨平台 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| UI 美观度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
vs Tauri
| 特性 | Electron | Tauri |
|---|---|---|
| 语言 | JavaScript/TypeScript | Rust + JS/TS |
| 体积 | 150MB+ | 5-10MB |
| 内存占用 | 300MB+ | 50-100MB |
| 启动速度 | 1-3秒 | 0.3-0.8秒 |
| 生态成熟度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 学习曲线 | ⭐⭐ | ⭐⭐⭐⭐ |
| 社区支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
vs Web 应用
| 特性 | Electron | Web 应用 |
|---|---|---|
| 离线使用 | ⭐⭐⭐⭐⭐ | ⭐⭐ (PWA) |
| 系统集成 | ⭐⭐⭐⭐⭐ | ⭐ |
| 分发方式 | 下载安装 | 浏览器访问 |
| 更新成本 | 中等 | 低 |
| 用户体验 | 原生感 | Web 感 |
Electron 的优势场景
✅ 最适合的场景
1. 企业内部工具
优势：
- 快速开发
- 统一体验
- 易于维护
- 团队熟悉 Web 技术2. 内容创作工具
优势：
- 丰富的 UI 交互
- 实时预览
- 多媒体处理
- 插件扩展3. 通讯协作应用
优势：
- 实时通信
- 多窗口管理
- 系统通知
- 文件传输4. 开发者工具
优势：
- 代码高亮
- 终端集成
- Git 集成
- 扩展性强⚠️ 不太适合的场景
1. 性能敏感应用
- 3D 游戏
- 视频编辑器
- CAD 软件
- 高频交易系统2. 资源受限场景
- 嵌入式设备
- 低配置电脑
- 移动设备（虽然技术上可行）3. 超大型企业应用
- 复杂的业务逻辑
- 极致的性能要求
- 严格的安全标准Electron 的挑战
1. 体积问题
bash
# 一个简单的 Hello World
打包后: ~150MB (Windows)
~200MB (macOS)
~120MB (Linux)
# 为什么这么大？
- Chromium: ~100MB
- Node.js: ~30MB
- 应用代码: ~20MB解决方案：
- 使用 asar 压缩
- 移除不需要的 Node 模块
- 使用 electron-builder 优化
- 考虑在线更新方案
2. 内存占用
一个简单的 Electron 应用:
- 主进程: ~50MB
- 渲染进程: ~80-150MB 每个
- 多窗口会累加
VS
Chrome 标签页:
- 每个标签: ~60-100MB优化建议：
- 减少同时打开的窗口
- 使用 WebView 代替新窗口
- 及时释放不用的资源
- 优化前端代码
3. 安全性
javascript
// ❌ 危险的做法
new BrowserWindow({
webPreferences: {
nodeIntegration: true, // 不要这样做！
contextIsolation: false // 不要这样做！
}
})
// ✅ 安全的做法
new BrowserWindow({
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
})Electron 的未来
1. 性能持续优化
Electron 最新版本改进:
- 更快的启动速度
- 更低的内存占用
- 更好的渲染性能2. 更好的开发体验
- TypeScript 原生支持
- 更完善的调试工具
- 更简单的配置
- 更好的文档3. 更强的安全性
- 默认启用上下文隔离
- 更严格的权限控制
- 更安全的 IPC 机制学习路径建议
入门（1-2周）
1. 了解 Electron 基本概念
2. 搭建开发环境
3. 创建第一个应用
4. 学习主进程和渲染进程
5. 理解 IPC 通信进阶（2-4周）
1. 窗口管理和菜单
2. 原生功能集成
3. 文件系统操作
4. 系统通知和托盘
5. 数据持久化高级（1-2个月）
1. 性能优化
2. 安全最佳实践
3. 自动更新
4. 打包和分发
5. 生产环境部署开始学习资源
官方资源
官方文档: https://www.electronjs.org/
GitHub: https://github.com/electron/electron
示例项目: https://github.com/electron/electron-quick-start
API 文档: https://www.electronjs.org/docs/latest/api/app社区资源
Awesome Electron: 精选资源列表
Electron Fiddle: 在线实验平台
Discord 社区: 实时讨论
Stack Overflow: 问题解答推荐书籍
- 《Electron in Action》
- 《Cross-Platform Desktop Applications》
- 《Building Electron Applications》总结
Electron 作为桌面应用开发的王者框架，有其独特的优势：
✅ 核心优势：
- 使用熟悉的 Web 技术
- 真正的跨平台支持
- 丰富的生态系统
- 强大的社区支持
- 快速的开发迭代
- 大量成功案例
❌ 主要挑战：
- 应用体积较大
- 内存占用较高
- 启动速度一般
- 需要注意安全性
适合人群：
- Web 开发者转型桌面开发
- 需要快速开发企业应用
- 重视开发效率的团队
- 需要跨平台支持的项目
什么时候选择 Electron？
- ✅ 开发周期紧张
- ✅ 团队熟悉 Web 技术
- ✅ 需要跨平台支持
- ✅ UI 交互复杂
- ✅ 需要快速迭代
什么时候不选择 Electron？
- ❌ 性能要求极高
- ❌ 体积限制严格
- ❌ 资源受限环境
- ❌ 移动端为主
Electron 不是完美的，但它确实是当前桌面应用开发的最佳选择之一。如果你正在考虑开发桌面应用，Electron 绝对值得认真考虑。
下一篇文章，我们将详细介绍如何搭建 Electron 开发环境，开始你的 Electron 开发之旅！
相关文章推荐：
有问题欢迎留言讨论，我会及时回复大家！
参考资料：