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

Electron

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

Electron​

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

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

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

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

Безопасность
В 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:

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

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');

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

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

npm install -D electron-builder

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

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

Electron vs Tauri​

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

Подробнее — таблица в 112.md.

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

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).

Освоение главы0%