Введение в Electron

Electron— это фреймворк с открытым исходным кодом, который оборачиваетChromium (браузерный движок) + Node.js (серверные/системные возможности)в оболочку настольного приложения, позволяя использоватьHTML/CSS/JSдля написания кроссплатформенных настольных приложений (Windows, macOS, Linux).

Ключевые моменты:

Фронтенд отвечает за UI (процесс Renderer: как вкладки браузера).
Главный процесс (Main) управляет жизненным циклом приложения, окнами и вызовами нативных API.
Оба взаимодействуют черезIPC (межпроцессное взаимодействие).
В конечном итоге можно упаковать в.exe、.app、.debи другие установочные файлы.

Electron был разработан и поддерживается GitHub, изначально создан для создания редактора Atom.

Кратко:Electron = Chromium + Node.js + Native APIs

Chromium: Предоставляет мощный движок рендеринга, отвечающий за отображение пользовательского интерфейса.
Node.js: Предоставляет возможности бэкенда с доступом к файловой системе, сети и т. д.
Нативные API: Предоставляет функции уровня ОС, такие как меню, уведомления, системный трей и т. д.

Почему стоит выбрать Electron

Electron позволяет веб-разработчикам создавать десктопные приложения без изучения нового языка, значительно снижая порог входа в разработку десктопных приложений.

Простота изучения: Веб-разработчики могут повторно использовать большое количество фронтенд-навыков/компонентов/экосистемы (React/Vue/Angular/TS/CSS).
Кроссплатформенность: Напишите один раз, соберите для трёх платформ (хотя различия систем требуют адаптации).
Мощные локальные возможности: Прямой доступ к файловой системе, процессам и системным API без написания привязок на нативном языке (Node.js достаточно для подавляющего большинства сценариев).
Зрелая экосистема: Множество готовых библиотек, шаблонов и инструментов упаковки (Electron Builder / Forge и т. д.).
Подходит для приложений-инструментов: Редакторы, средства связи, приложения для повышения продуктивности, инструменты отладки и т. д.

Философия дизайна Electron — «Напиши один раз, запускай везде».

Разработчикам нужно написать только одну кодовую базу, чтобы создавать приложения для Windows, macOS и Linux.

Ключевые преимущества:

Разработка настольных приложений с использованием знакомых стеков веб-технологий.
Не нужно изучать платформенно-зависимые языки (такие как C++, Objective-C, Swift).
Единый опыт разработки и единая кодовая база.
Быстрая итерация и развертывание.

сценарии применения

Electron подходит для следующих типов разработки настольных приложений:

Инструменты разработки / редакторы: редакторы кода, терминалы, отладчики (например, VS Code, Postman).
Мессенджеры/социальные приложения: чат-клиенты (например, Discord, Slack).
Кроссплатформенный настольный клиент: Когда нужно быстро превратить веб-продукт в настольную версию.
Прототипы и внутренние инструменты: внутренние операционные инструменты компании, дашборды данных, административные консоли.
Приложения с высокими требованиями к интерфейсу/взаимодействию, но без экстремальной чувствительности к производительности.。

Неподходящие сценарии: проекты, крайне чувствительные к CPU/GPU/памяти, требующие максимально нативного опыта или ориентированные в первую очередь на мобильные устройства (например, крупномасштабный рендеринг графики, игры со сверхнизкой задержкой).

Что может Electron

Electron предоставляет богатые возможности для настольных приложений. Вот основные функции, которые он поддерживает:

Открывать окна, меню, системный трей, уведомления (системные уведомления).
Читать/записывать файлы, работать с локальными базами данных (SQLite, LevelDB и т. д.).
Вызывать локальные команды/исполняемые файлы, запускать дочерние процессы.
Использовать нативные диалоги (открытие/сохранение файлов), буфер обмена, перетаскивание, глобальные сочетания клавиш.
Реализовывать автообновление, горячую перезагрузку, упаковку и распространение.
Загружать локальные или удалённые веб-страницы, поддерживая современные веб-технологии (WebGL, WebRTC и т. д.).
Интегрировать нативные модули (C++/Node Native Addons), подключаясь к аппаратному обеспечению или системным функциям.

Основные концепции (технические основы)

Понимание следующих ключевых концепций — ключ к освоению разработки на Electron:

Главный процессГлавный процесс: точка входа Electron, отвечает за создание BrowserWindow, управление жизненным циклом приложения и нативными API. Работает как единственный экземпляр (доступен Node.js).
Процесс рендерингаПроцесс рендеринга: каждый BrowserWindow соответствует одному процессу рендеринга, который запускает веб-страницы (Chromium) и не имеет прямого доступа к Node (ограниченные API можно предоставить через preload).
Скрипт предзагрузки и contextIsolationPreload: рекомендуется использовать preload для внедрения ограниченных API в процесс рендеринга и включить contextIsolation для повышения безопасности.
IPC (ipcMain / ipcRenderer / contextBridge)IPC: механизм связи между главным процессом и процессом рендеринга.
Инструмент упаковки: Electron Builder / Electron Forge / electron-packager и т. д., используются для создания установочного пакета и автоматического обновления.
Автообновление: реализация автоматического обновления приложения (требуется настройка сервера/публикации).

Вопросы безопасности

Electron обладает возможностями как браузера, так и Node.js, поэтому конфигурация безопасности критически важна.

Никогда не включайте напрямую в процессе рендерингаnodeIntegration: true, которая по умолчанию отключена, чтобы XSS не приводил к выполнению произвольных системных команд.

ИспользованиеcontextIsolation + preload + contextBridgeПредоставляйте минимальные контролируемые API.
Строго проверяйте / изолируйте внешнее содержимое (удалённые URL).
Строго проверяйте входные данные, такие как пути к файлам и команды оболочки, чтобы избежать инъекции команд.
По возможности используйте CSP, отключите eval и избегайте ненадёжных сторонних скриптов.

Преимущества и ограничения Electron

В этом разделе представлен всесторонний анализ Electron с точки зрения как преимуществ, так и ограничений, который поможет вам сделать обоснованный выбор технологии.

Основные преимущества

Ниже перечислены ключевые сильные стороны Electron по сравнению с другими подходами к разработке настольных приложений:

1. Удобство кроссплатформенной разработки

С помощью Electron разработчики могут использовать одну и ту же кодовую базу для создания приложений для Windows, macOS и Linux:

Пример

// Путь к файлу: main.js
// Один и тот же код может работать на трёх платформах
const { app, BrowserWindow } = require('electron');

// Создание функции главного окна
function createWindow() {
const win = new BrowserWindow({
width: 800, // Ширина окна (pixels)
height: 600 // Высота окна (pixels)
});
// Загрузить локальный HTML-файл
win.loadFile('index.html');
}

// Создать окно после готовности приложения
app.whenReady().then(createWindow);

Экономия затрат:

Не нужно поддерживать три кодовые базы.
Командам не нужно осваивать технологии разработки для нескольких платформ.
Единые процессы тестирования и развертывания.
Более быстрая итерация функций.

2. Преимущества стека веб-технологий

Богатая экосистема: миллионы пакетов, доступных в npm.
Зрелый фреймворк: можно использовать современные фронтенд-фреймворки, такие как React, Vue, Angular.
Высокая эффективность разработки: горячая перезагрузка, DevTools, богатые инструменты отладки.
Огромный кадровый резерв: огромный пул веб-разработчиков, легко нанимать.
Быстрая разработка прототипов: используйте существующие веб-компоненты и библиотеки.

3. Мощная поддержка возможностей

Полные возможности Node.js (файловая система, сеть, процессы и т. д.).
Нативные функции рабочего стола (меню, уведомления, системный трей и т. д.).
Механизм автоматического обновления.
Доступ к аппаратному обеспечению (камера, USB-устройства и т. д.).
Возможность работы в автономном режиме.

4. Активное сообщество и экосистема

Исчерпывающая официальная документация.
Большое количество проектов с открытым исходным кодом, доступных для ознакомления.
Богатый набор сторонних инструментов и библиотек.
Активная поддержка сообщества.

Основные ограничения

Понимание ограничений Electron помогает определить, подходит ли он для вашего проекта:

1. Накладные расходы на производительность

Приложения Electron должны одновременно запускать Chromium и Node.js, что создаёт дополнительные накладные расходы на производительность:

Использование памяти: Пустое приложение Electron обычно потребляет 50-100MB памяти.
Использование CPU: Движок рендеринга и выполнение JavaScript менее эффективны по сравнению с нативными приложениями.
Время запуска: Более длительное время запуска по сравнению с нативными приложениями.

Сравнение нативных приложений и приложений Electron:

Критерий сравнения	Нативное приложение	Приложение Electron
Использование памяти	10-30MB	80-200MB
Время запуска	< 1 second	2-5 секунд

2. Большой размер установочного пакета

Каждое приложение Electron должно включать в себя полную среду выполнения Chromium и Node.js:

Windows: ~50-70MB (в несжатом виде).
macOS: ~60-80MB (в несжатом виде).
Linux: ~55-75MB (в несжатом виде).

Это означает, что даже у простых приложений установщик не будет меньше 50MB.

3. Вопросы безопасности

Поскольку Electron обладает возможностями как браузера, так и Node.js, неправильная конфигурация может создавать угрозы безопасности:

XSS-атаки могут привести к эксплуатации привилегий системного уровня.
Изоляцию контекста и песочницу необходимо настраивать с осторожностью.
Проблемы безопасности сторонних зависимостей.

4. Различия в нативном опыте

Хотя можно имитировать интерфейсы, выглядящие нативно, в некоторых областях различия остаются:

Невозможно идеально воспроизвести системные нативные элементы управления.
Некоторые функции системного уровня сложно реализовать.
Специфичные для платформы соглашения взаимодействия требуют дополнительной работы.

Фактор	Вес	Описание
Эффективность разработки	Высокая	Electron наиболее эффективен, если у команды есть опыт веб-разработки.
Требования к кроссплатформенности	Высокая	Когда требуется поддержка нескольких платформ, Electron — лучший выбор.
Требования к производительности	Средняя	Приемлемо для обычных приложений, за исключением экстремальных сценариев производительности.
Чувствительность к размеру пакета	Средняя	50-100MB приемлемо в современных сетевых средах.
Требования к безопасности	Высокая	Необходимо строго следовать лучшим практикам безопасности

Сравнение с другими похожими инструментами

Electron — не единственный вариант. Вот сравнение основных подходов к разработке настольных приложений:

Если вы фронтенд/фулстек-разработчик и вам нужнобыстро поставлять веб-продукты или инструменты на рабочий стол, при этом напрямую использовать системные возможности., Electron — это высокопродуктивный выбор с низким порогом входа.

Но если у вас строгие требования к размеру, памяти или максимально нативному опыту, рассмотрите Tauri, Flutter или нативные фреймворки как альтернативы.

Tauri
- Основа: Rust + встроенный в систему WebView (WebView2 / WebKit).
- Преимущества: небольшой размер, низкое потребление памяти, хорошая безопасность, подходит для приложений, ориентированных на легкость и производительность.
- Подходит для: настольных приложений, которые хотят использовать веб-технологии, но нуждаются в чрезвычайно малом размере или чувствительны к производительности.
- Сравнение: Если вы хотите быстро повторно использовать экосистему Node.js, Electron удобнее; если для вас приоритетен небольшой размер, выбирайте Tauri.
NW.js
- Схожее происхождение с Electron (также Chromium + Node), но с другим стилем API.
- Сообщество и инструменты Electron более активны.
Neutralino
- Чрезвычайно лёгкий, использует системный WebView, с меньшим количеством возможностей, чем Electron.
- Больше подходит для простых инструментов или небольших десктопных приложений.
Flutter Desktop
- Рендерится с помощью Dart/Flutter, обеспечивает хорошую нативную производительность и высокую согласованность UI.
- Подходит для проектов, требующих единого кроссплатформенного UI и производительности, но требует заново изучить UI-фреймворк (не веб-технологии).
React Native for Windows/Mac / .NET MAUI / Qt
- Более нативный путь разработки десктопных приложений, подходит для проектов с высокими требованиями к интеграции с системой, производительности и нативному пользовательскому опыту.

Рекомендации по выбору:

Хотите быстро превратить веб-продукт в десктопное приложение, или команда в основном занимается веб-фронтендом →Electron。
Хотите меньший размер / меньшее потребление ресурсов →Tauri/Neutralino。
Стремитесь к нативному UI и высокой производительности →Flutter/Native/Qt。

Распространённые проблемы производительности и размера

Вот несколько практических советов по оптимизации производительности и размера приложений Electron:

Включите при упаковкеasarПозволяет объединять ресурсы (учитывайте совместимость нативных модулей).
Используйте ленивую загрузку, уменьшайте ресурсы начального рендеринга и минимизируйте тяжёлые ресурсы, загружаемые главным окном.
Избегайте тяжёлых задач, интенсивно использующих CPU, в рендерере; используйтеДочерний процесс / worker / нативный модуль。
Использованиеединственного экземпляра, и регулируйте включение/отключение аппаратного ускорения в зависимости от ситуации.
Оптимизируйте зависимости: сократите ненужные npm-пакеты, избегайте огромных фронтенд-библиотек (или используйте загрузку по требованию).

Примеры быстрого старта

Быстро изучите базовую структуру Electron с помощью минимального проекта.

Структура файлов проекта:

my-electron-app/
├─ package.json    # 项目配置与依赖
├─ main.js         # 主进程入口
├─ preload.js      # 预加载脚本（安全暴露 API）
└─ index.html      # 渲染进程界面

package.json(Минимальная конфигурация):

Пример

{
"name": "my-electron-app",
"version": "0.1.0",
"main": "main.js", // Укажите входной файл главного процесса
"scripts": {
"start": "electron ." // npm start запускает приложение
},
"devDependencies": {
"electron": "latest" // Electron как зависимость для разработки
}
}

main.js(Главный процесс):

Пример

// Путь к файлу: main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

// Создайте главное окно
function createWindow() {
const win = new BrowserWindow({
width: 900,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // Путь к скрипту предзагрузки
contextIsolation: true, // Включите изоляцию контекста (рекомендуется)
nodeIntegration: false // Отключите интеграцию Node для повышения безопасности
}
});
win.loadFile('index.html');
}

// Создать окно после готовности приложения
app.whenReady().then(createWindow);

// macOS: Когда все окна закрыты, не завершайте приложение (следуя соглашениям macOS).
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});

preload.js(Контролируемое предоставление API):

Пример

// Путь к файлу: preload.js
const { contextBridge, ipcRenderer } = require('electron');

// Предоставьте безопасный API процессу рендеринга через contextBridge.
// Процесс рендеринга может получить доступ через window.electronAPI
contextBridge.exposeInMainWorld('electronAPI', {
// Отправьте сообщение главному процессу (разрешены только каналы из белого списка)
send: (channel, data) => {
const validChannels = ['ping']; // Белый список: разрешённые каналы
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
// Получайте сообщения от главного процесса (разрешены только каналы из белого списка)
on: (channel, func) => {
const validChannels = ['pong']; // Белый список: разрешённые каналы
if (validChannels.includes(channel)) {
// Удалите параметр event, передавайте в колбэк только бизнес-данные
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
});

index.html(Интерфейс процесса рендеринга):

Пример

<!doctype html>
<html>
<body>
<h1>Привет, Electron</h1>
<button id="ping">Пинг главного процесса</button>
<script>
// Нажмите кнопку, чтобы отправить ping-сообщение главному процессу
document.getElementById('ping').addEventListener('click', () => {
window.electronAPI.send('ping', { time: Date.now() });
});
// Прослушивайте ответное pong-сообщение от главного процесса
window.electronAPI.on('pong', (msg) => alert('received pong: ' + JSON.stringify(msg)));
</script>
</body>
</html>

Прослушивайте IPC в главном процессе (добавьте в main.js):

Пример

// Путь к файлу: main.js (добавленное содержимое)
const { ipcMain } = require('electron');

// Прослушивать ping-сообщения из процесса рендеринга, отвечать pong
ipcMain.on('ping', (event, data) => {
console.log('Received ping, data:', data);
event.sender.send('pong', { reply: 'ok', received: data });
});

Запустите:

# 安装依赖
npm install

# 启动应用
npm start

Упаковка и распространение

После разработки вам понадобится инструмент упаковки, чтобы распространять приложение среди пользователей.

Сравнение распространённых инструментов упаковки:

Инструменты	Особенности	Применимые сценарии
Electron Builder	Мощный, поддерживает автоматическое обновление и многоплатформенные установщики.	Продакшен-проекты, требующие комплексного решения для дистрибуции
Electron Forge	Удобный для разработчиков, со встроенными шаблонами и процессами сборки	Быстрый старт для новых проектов
electron-packager	Только упаковывает, но не создаёт установщик.	Простые требования к упаковке

Типичные шаги упаковки:

Конфигурацияpackage.jsonполе build (или используйте конфигурацию каждого инструмента).
Используйте CI/CD для сборки под разные платформы (Windows требует упаковки в среде Windows или использования сервиса кросс-компиляции).
Разверните сервер обновлений или используйте GitHub Releases + electron-updater.

Практические советы и чек-лист лучших практик

Следующие рекомендации основаны на реальном опыте проектов и помогут избежать типичных ошибок:

На старте: использование TypeScript + каркаса упаковки (Forge/Builder) снижает будущие затраты на сопровождение.
Безопасность: принудительноcontextIsolation: true, минимизируйте API, доступный рендереру.
Архитектура: размещайте бизнес-логику в рендерере (UI) или бэкенд-сервисах, а системные операции и операции с разрешениями оборачивайте через главный процесс.
Обновления: используйте electron-updater для автоматических обновлений, но обращайте внимание на подписывание и стратегии выпуска (macOS требует подписывания, и Windows также нуждается в подписывании кода).
Тестирование: тестируйте на реальных машинах на нескольких платформах (особенно права доступа к файлам, пути, переменные среды).
Ресурсы: регулярно проверяйте версии Chromium и Electron и обращайте внимание на патчи безопасности (уязвимости Chromium могут повлиять на ваше приложение).

Когда не стоит использовать Electron

Следующие сценарии не рекомендуются для Electron:

Вам нужно крайне низкое потребление памяти или очень маленький установщик (например, встраиваемые устройства или минималистичные инструменты).
Нужен максимально нативный UI и нативная производительность (например, AAA-игры или сложные CAD).
Если команда незнакома с веб-технологиями, но знакома с нативной разработкой, нативный фреймворк может подойти больше.

Введение в Electron

Почему стоит выбрать Electron

сценарии применения

Что может Electron

Основные концепции (технические основы)

Вопросы безопасности

Преимущества и ограничения Electron

Основные преимущества

Пример

Основные ограничения

Рекомендация по компромиссам

Сравнение с другими похожими инструментами

Распространённые проблемы производительности и размера

Примеры быстрого старта

Пример

Пример

Пример

Пример

Пример

Упаковка и распространение

Практические советы и чек-лист лучших практик

Когда не стоит использовать Electron

Рекомендуемые пути обучения и ресурсы