# Electron — Build Cross-Platform Desktop Apps with Web Tech

> Electron is a framework for building cross-platform desktop apps with JavaScript, HTML, and CSS. Powers VS Code, Slack, Discord, Notion, Figma, GitHub Desktop, and many other household apps. Chromium + Node.js bundled together.

## Install

Save in your project root:

## Quick Use

```bash
npm create @quick-start/electron@latest my-app
cd my-app
npm install
npm run dev
```

Minimal main process:
```js
// main.js
const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { preload: __dirname + "/preload.js" },
  });
  win.loadURL("http://localhost:5173");
}

app.whenReady().then(createWindow);
app.on("window-all-closed", () => app.quit());
```

## Intro

Electron is a framework built by GitHub (now maintained by the OpenJS Foundation) for creating native desktop applications with web technologies. Bundles Chromium and Node.js into a single runtime, letting you ship a single codebase to Windows, macOS, and Linux.

- **Repo**: https://github.com/electron/electron
- **Stars**: 120K+
- **Language**: C++ (runtime), JavaScript (API)
- **License**: MIT

## What Electron Does

- **Main process** — Node.js environment, OS APIs (filesystem, network, child processes)
- **Renderer process** — Chromium window, your web app
- **IPC** — bridge between main and renderer via `ipcMain`/`ipcRenderer`
- **Native menus** — Menu, MenuItem, Tray, dock icon
- **Auto-updater** — Squirrel-based updates
- **Notifications** — native OS notifications
- **Power/clipboard/crash reporting** — OS-level primitives
- **Packaging** — electron-builder / electron-forge

## Architecture

One main process launches one or more BrowserWindows (renderers). Chromium renders HTML; Node.js runs in main (and optionally renderer via contextIsolation). IPC messages cross the boundary. Security rule: renderer is untrusted, always validate inputs.

## Self-Hosting

Package locally then distribute:
```bash
npm run build
npx electron-builder --mac --win --linux
```

Distribute binaries via your site or auto-update server (like Nucleus, Hazel, or GitHub Releases).

## Key Features

- Cross-platform (Win/Mac/Linux)
- Full Node.js in main process
- Native menus, tray, notifications
- Auto-updater
- Code signing support
- Crash reporter
- DevTools extensions
- MAS (Mac App Store) signing
- v28+ drops Node 18, uses ESM

## Comparison

| Framework | Binary Size | Runtime | Language | Memory |
|---|---|---|---|---|
| Electron | ~150MB | Chromium + Node | JS | ~200MB idle |
| Tauri | ~3-10MB | OS WebView + Rust | Rust + JS | ~80MB idle |
| Neutralino | ~2MB | OS WebView | JS (no Node) | ~50MB |
| NW.js | ~150MB | Chromium + Node | JS | ~200MB |
| Wails | ~8MB | OS WebView + Go | Go + JS | ~80MB |

## 常见问题 FAQ

**Q: 包体积为什么这么大？**
A: Chromium (~100MB) + Node.js (~30MB) 都打进每个应用。这是跨平台一致性的代价。

**Q: 安全问题？**
A: 启用 `contextIsolation`、关闭 `nodeIntegration`、用 preload 暴露受限 API。禁止执行远程代码。

**Q: 何时选 Tauri？**
A: 追求小体积+性能+Rust 生态时选 Tauri；需要完整 Node 生态或 Chromium 精确一致性时选 Electron。

## 来源与致谢 Sources

- Docs: https://www.electronjs.org/docs
- GitHub: https://github.com/electron/electron
- License: MIT

---
Source: https://tokrepo.com/en/workflows/70e59e04-35a3-11f1-9bc6-00163e2b0d79
Author: AI Open Source