Разработка десктоп-приложения на Electron

Разработка десктоп-приложения на Electron

Electron — фреймворк для создания кросс-платформенных десктоп-приложений на базе Chromium и Node.js. VS Code, Slack, Figma, GitHub Desktop — всё написано на Electron. Главное преимущество: одна кодовая база, три платформы. Главный недостаток: размер дистрибутива от 80 МБ.

Архитектура: Main и Renderer процессы

Electron разделяет код на два изолированных процесса:

Main process — Node.js среда, имеет доступ к файловой системе, ОС, нативным API. Управляет окнами, системным треем, нативными меню.

Renderer process — Chromium, рендерит веб-контент. Без прямого доступа к Node.js (если не включён nodeIntegration: true, что небезопасно). Общение с main — только через IPC.

main.js (Node.js)
├── BrowserWindow
│   └── renderer (Chromium + preload script)
├── Tray
├── Menu
└── IPC handlers

Минимальная структура проекта

my-app/
├── package.json
├── main/
│   ├── index.js         # точка входа main process
│   ├── preload.js       # мост между main и renderer
│   └── ipc-handlers.js  # IPC обработчики
├── renderer/            # React/Vue/обычный HTML
│   ├── index.html
│   └── src/
└── resources/
    └── icon.png

{
  "main": "main/index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "^31.0.0",
    "electron-builder": "^24.0.0"
  }
}

Main process: создание окна

// main/index.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    titleBarStyle: 'hiddenInset', // macOS — кастомный заголовок
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,    // обязательно для безопасности
      nodeIntegration: false,    // отключить для безопасности
      sandbox: true
    }
  });

  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000');
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
  }

  mainWindow.on('closed', () => { mainWindow = null; });
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

Preload script: безопасный мост

// main/preload.js
const { contextBridge, ipcRenderer } = require('electron');

// Экспортируем только нужное API в renderer
contextBridge.exposeInMainWorld('electronAPI', {
  // Файловая система
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  saveFile: (content) => ipcRenderer.invoke('fs:saveFile', content),

  // Системные функции
  getVersion: () => ipcRenderer.invoke('app:getVersion'),
  minimize: () => ipcRenderer.send('window:minimize'),
  maximize: () => ipcRenderer.send('window:maximize'),
  close: () => ipcRenderer.send('window:close'),

  // Подписка на события из main
  onUpdateAvailable: (callback) => {
    const listener = (_, info) => callback(info);
    ipcRenderer.on('update:available', listener);
    return () => ipcRenderer.removeListener('update:available', listener);
  }
});

// main/ipc-handlers.js
const { ipcMain, app, dialog, BrowserWindow } = require('electron');
const fs = require('fs/promises');

ipcMain.handle('dialog:openFile', async () => {
  const { canceled, filePaths } = await dialog.showOpenDialog({
    filters: [
      { name: 'Text Files', extensions: ['txt', 'md'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  });
  if (canceled) return null;
  const content = await fs.readFile(filePaths[0], 'utf-8');
  return { path: filePaths[0], content };
});

ipcMain.handle('app:getVersion', () => app.getVersion());

ipcMain.on('window:minimize', (event) => {
  BrowserWindow.fromWebContents(event.sender)?.minimize();
});

Интеграция с React (Vite + Electron)

Наиболее удобная связка — electron-vite:

npm create @quick-start/electron my-app
# Выбираем React + TypeScript

Конфигурация electron.vite.config.ts из коробки настраивает три точки входа: main, preload, renderer.

Для существующего Vite-проекта:

npm install electron-vite --save-dev

Упаковка и дистрибуция

electron-builder — стандарт для сборки инсталляторов:

# electron-builder.yml
appId: com.yourcompany.myapp
productName: My Application
directories:
  output: release/
files:
  - main/**
  - renderer/dist/**
  - '!**/*.map'

mac:
  category: public.app-category.productivity
  icon: resources/icon.icns
  target:
    - dmg
    - zip

win:
  icon: resources/icon.ico
  target:
    - nsis
    - portable

linux:
  icon: resources/icons/
  target:
    - AppImage
    - deb
    - rpm

# Сборка для всех платформ
npm run build -- --mac --win --linux

# Только для текущей платформы
npm run build

Производительность: снижение размера бандла

Electron включает весь Chromium — 80-150 МБ минимум. Снизить можно:

• electron-builder с compression: maximum
• Исключение неиспользуемых node_modules через files конфигурацию
• ASAR архивирование (включено по умолчанию)

Для приложений, где размер критичен, рассмотрите Tauri (~5 МБ) как альтернативу.

Типичный таймлайн разработки

Базовое приложение с UI + File I/O + Auto-update: 1-2 недели. Полноценное приложение с нативными меню, треем, нотификациями, обновлениями и сборкой под все платформы: 3-6 недель в зависимости от функциональности.