Electron

В данной статье описан процесс разработки и сборки приложений на Electron.

Необходимые инструменты

Для разработки на Electron обязательно наличие в системе Node.js и npm. Достаточно установить пакеты node и npm.

В качестве среды разработки можно использовать редактор VS Code, имеющий возможность отладки Electron-приложений. Пакет редактора называется code.

Создание Electron-приложений

Инициализация проекта

В корне проекта нужно выполнить:

$ npm init

Утилита предложит ввести несколько значений, описывающих проект. Можно ничего не вводить, а просто нажать Enter. Данная команда сгенерирует файл package.json, содержащий информацию о приложении и его npm-зависимостях. Если проект имеет закрытый исходный код, то поле license из package.json можно удалить, а вместо него поставить "private": true. Установить Electron можно следующей командой:

$ npm install --save-dev electron

Эта команда установит Electron локально, для данного проекта. Далее, в объект scripts в package.json нужно добавить команду для запуска приложения:

"start": "electron ."

Аргумент, передаваемый electron'у - путь к корню проекта, где лежит package.json. Electron запускает скрипт, указанный в поле main файла package.json. Создадим файл index.js (или любое другое имя, указанное в поле main в package.json). Точка входа как правило содержит типовой код для инициализации приложения, его можно взять из Hello World-примера на Electron: пример index.js Далее нужно создать минимальную html-страницу (index.html), которая будет загружаться в окне. После этого можно попробовать запустить приложение:

$ npm start

Должно открыться окно, в котором отобразится созданная html-страница.

Разработка

Приложение на Electron имеет основной процесс (Main) и по процессу на каждое окно браузера (Renderer). Чаще всего, в приложении будет Main и один Renderer.

Main управляет окнами, имеет возможность создания нативных диалоговых окон и меню. Внутри это обычное Node.js-приложение.
Renderer является, по сути, браузером Chromium без каких-либо дополнительных элементов интерфейса.

Доступны Chrome DevTools, которыми можно осуществлять отладку Renderer-процесса. Важным отличием от обычного браузера является доступ к Node.js-модулям при помощи require, что делает возможным, к примеру, взаимодействие с файловой системой или базами данных.

Общение между Main и Renderer осуществляется посредством встроенного в Electron механизма IPC. Альтернативный вариант - использование модуля remote.

Для Electron-приложений может быть оправданным применение некоторых технологий, применяемых для разработки одностраничных веб-приложений (SPA), например: Babel, TypeScript, SCSS и т. д. Все эти технологии подразумевают этап сборки и компиляцию исходников в JS/CSS. Чаще всего для этого применяются сборщики вроде Webpack или Browserify, а также утилиты Grunt и Gulp. Однако, в Electron можно отказаться от этих инструментов в пользу electron-compile, позволяющего компилировать файлы на лету, а для production-сборок делать это заранее.

Сборка Electron-приложений

Для автоматизации сборки существует несколько инструментов, например, electron-builder, однако они предназначены для создания инсталляторов и пакетов со встроенным бинарником electron. Для того, чтобы собрать приложение без встроенного electron, а использовать системный (пакет electron), можно просто указать системному electron на каталог с приложением:

$ electron /path/to/app

При сборке приложения рекомендуется собирать его исходники вместе с зависимостями в специальный архив (asar). Для этого в devDependencies приложения нужно добавить утилиту asar. Порядок действий для создания asar-архива такой:

Копируем исходники и package.json во временный каталог.
В нём выполняем npm install --production (чтобы избежать попадания туда ненужных devDependencies).
Пакуем при помощи asar pack и получаем архив, где есть только то, что нужно для работы самого приложения.

Запускаем системный Electron, в качестве аргумента указывая полученный asar-файл, например:

$ electron /path/to/app.asar