Перейти к основному содержимому

Electron

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Разработчику Архитектору Инженеру

Как читать эту статью​

Сначала разберите архитектуру процессов (main, preload, renderer), затем выполните минимальный проект и только после этого переходите к сборке и релизу.
Так легче понять, где проходит граница между UI-кодом и доступом к системным возможностям ОС.

Общая теория десктопа — Архитектура десктопных приложений и Особенности разработки. База по JavaScript — раздел JavaScript.

Electron​

Где применяют Electron​

Electron объединяет Chromium (отрисовка UI) и Node.js (доступ к ОС). На нём работают VS Code, Slack, Discord и множество внутренних утилит. Если вы знаете React или Vue, интерфейс пишется теми же технологиями — закрепите компоненты в галерее React (Lab), затем перенесите UI в Electron + React.

Сравнение с Tauri и нативными UI: Особенности разработки десктопных приложений. WebView без полного Chromium: WebView. Node на сервере: Node.js.

Архитектура процессов​

ПроцессРоль
Mainmain.js — окна, меню, tray, диалоги файлов, auto-update
RendererHTML/CSS/JS — то, что видит пользователь (как вкладка браузера)
PreloadМост: безопасно экспортирует API в renderer через contextBridge

Play ITЗагрузка интерактивного демо…

Безопасность

В renderer не включайте nodeIntegration: true без крайней необходимости. Используйте contextIsolation: true и preload.

Минимальный проект​

mkdir my-electron-app && cd my-electron-app
npm init -y
npm install electron --save-dev

package.json:

{
  "name": "my-electron-app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

main.js:

Код ITЗагрузка примера кода…

preload.js:

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  ping: () => ipcRenderer.invoke('ping'),
});

main.js — обработчик IPC (добавьте перед createWindow):

const { ipcMain } = require('electron');
ipcMain.handle('ping', () => 'pong from main');

index.html + renderer.js:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Electron</title>
</head>
<body>
  <h1>Electron работает</h1>
  <button id="btn">Проверить IPC</button>
  <p id="out"></p>
  <script src="renderer.js"></script>
</body>
</html>
document.getElementById('btn').addEventListener('click', async () => {
  const msg = await window.api.ping();
  document.getElementById('out').textContent = msg;
});
npm start

Типичные задачи main-процесса​

const { dialog, shell } = require('electron');

// Открыть файл
const { canceled, filePaths } = await dialog.showOpenDialog({
  properties: ['openFile'],
});

// Открыть ссылку в системном браузере
await shell.openExternal('https://example.com');

Сборка установщика​

Общая логика установщиков (Inno Setup, PowerShell, Python, C#) — в статье Как сделать установщик.

Популярный инструмент для Electron — electron-builder:

npm install -D electron-builder

В package.json добавьте секцию build (платформы, иконки, appId) и скрипт "dist": "electron-builder".

Подпись кода (Windows/macOS) обязательна для доверия пользователей и стора — тема для отдельного production-гайда.

Electron и Tauri​

ElectronTauri
UIВстроенный ChromiumСистемный WebView
ЛогикаJavaScript (Node)Rust + JS
Размер дистрибутиваБольшеМеньше
Зрелость экосистемыОчень высокаяРастёт

Подробнее — таблица в Особенности разработки десктопных приложений.

Частые ошибки​

СимптомПричина
Белый экранНеверный loadFile / путь к index.html
require is not defined в renderernodeIntegration выключен — используйте preload + contextBridge
IPC не доходитРазные каналы в ipcMain и ipcRenderer
Огромный установщикВ bundle попал весь node_modules — настройте files в electron-builder

Что попробовать​

  1. ipcMain.handle('ping') + ipcRenderer.invoke('ping') — запрос-ответ.
  2. Меню приложения через Menu.buildFromTemplate.
  3. Сравните размер дистрибутива с Tauri и проверьте, что функциональность IPC сохранена.

Связанные материалы​

Практика архитектуры Electron-проекта​

Базовые папки, которые упрощают поддержку​

src/
  main/        # создание окна, меню, обновления, файловые диалоги
  preload/     # безопасный API-мост в renderer
  renderer/    # React/Vue/Svelte UI
  shared/      # общие типы каналов IPC и DTO

Такое разделение помогает исключить смешивание Node-кода и UI-кода и снижает риск уязвимостей.

Контракт IPC​

Зафиксируйте список каналов и полезных нагрузок в одном месте (shared/ipc-contract.ts), затем используйте эти типы в main и renderer. Подход уменьшает количество ошибок "не тот канал" и "не та форма данных".

Чек-лист перед релизом​

  1. contextIsolation — true, nodeIntegration — false, sandbox: true там, где возможно.
  2. CSP и запрет небезопасных источников скриптов.
  3. Обновление Electron и аудит зависимостей (npm audit) перед сборкой.
  4. Подпись установщика и проверка обновления приложения на чистой машине.
  5. Smoke-тесты на startup, IPC, файловый диалог, recovery после ошибки.

Маршрут чтения​

  1. WebView — если нужен облегченный встроенный браузер.
  2. Первая программа Electron с React — пошаговый старт.
  3. Особенности разработки десктопных приложений — архитектура, тестирование, DevOps.

Как организовать стабильный Electron-релиз​

Release pipeline для команды​

  1. Проверка зависимостей и security-аудит перед каждой release-веткой.
  2. Автоматическая сборка установщиков для целевых ОС.
  3. Подпись артефактов и smoke-прогон на чистых машинах.
  4. Пошаговый rollout с мониторингом crash rate и откатом по порогу ошибок.

Точки контроля перед публикацией​

  • Все IPC-каналы задокументированы и покрыты тестами.
  • DevTools и debug-флаги отключены в production.
  • Обновление с предыдущей версии проходит без потери пользовательских данных.
Содержание