Что такое Electron

Electron — фреймворк для настольных программ под Windows, macOS и Linux. Интерфейс программы — обычная веб-страница на HTML, CSS и JavaScript, а доступ к файлам, меню и системным окнам даёт Node.js. Одна и та же программа собирается для всех трёх систем.

Из чего он состоит

Внутри Electron два известных вам компонента:

Каждая программа на Electron везёт с собой свою копию Chromium и Node.js. Поэтому она одинаково работает на любом компьютере, но установщик весит от 80–100 МБ.

Кто им пользуется

На Electron написаны Visual Studio Code, Slack, Discord, Figma для компьютера, Obsidian, Postman. Это хорошие примеры того, что веб-технологии подходят и для больших настольных программ.

Версия

Курс рассчитан на актуальные версии Electron (38 и новее). Новая основная версия выходит примерно каждые восемь недель, но API из этого курса между версиями не меняется. Понадобится Node.js 22 или новее:

node -v
npm -v

Обе команды должны вывести номер версии.

Модули: CommonJS

Код главного процесса и скрипта preload в курсе написан в формате CommonJS — с require() и module.exports. Так устроены официальные примеры и шаблоны Electron Forge, а скрипт preload в защищённом режиме по умолчанию вообще не умеет загружать модули ES. Код страницы — обычный браузерный JavaScript.

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

Так выглядят первые строки главного файла программы почти в каждом уроке.

Сквозной пример

Весь курс строится одна программа — «Заметки»: окно со списком заметок и полем ввода. Заметки сохраняются в файл на диске, у программы есть меню, горячие клавиши, значок в трее, а в конце она собирается в установщик.

Частая ошибка

Electron — не способ «упаковать сайт». Если программа просто открывает удалённый сайт в окне, она получает все расходы Electron (размер, обновления, безопасность) и ничего не даёт взамен. Выбирайте Electron, когда программе действительно нужны возможности компьютера: файлы, работа без сети, меню, трей.