Что за программа electron

Около года назад на Canonium вышла статья, в которой рассказывалось о построении node-webkit приложения. Эта статья стала одной из самых популярных у меня в блоге и даже пару раз мелькала в крупных пабликах в ВК, приводя всё больше и больше читателей.

С того времени изменилось многое: от Node.js отделился io.js, node-webkit сменил имя на nw.js, GitHub выпустил стабильную версию своего редактора кода Atom, а вскоре случилось явление Electron широкой публике.

Если говорить кратко, то Electron — это альтернатива NW.js, представляющая собой среду выполнения для построения настольных приложений, написанных, разумеется, на JavaScript.

Нужно заметить, что Electron предоставляет практически равные с NW.js возможности, кроме некоторых особенностей, о которых в рамках этой серии статей я говорить не буду. Следует сказать, что Electron обладает более сдержанной и качественной документацией, которую хочется читать, в отличие от того же NW.js.

Основные отличия

Далее Electron я буду называть «Электроном».

Ни для кого не секрет, что io.js вернулся в состав Node.js, который теперь регулируется Linux Foundation. Дело в том, что io.js сыграл злую шутку с NW.js, поманив его создателя на свою сторону. Создатели Электрона тоже не оставались в стороне, но, к счастью, уже успели вернуться на Node.js и успешно его поддерживают, в то время как NW.js 12-ой и 13-ой версии всё ещё базируются на io.js, причем не первой свежести.

Electron. Как работает самый современный desktop framework?

В NW.js главный файл — это html-файл, указанный в package.json , в то же время в Электроне главным файлом является сценарий, написанный на JavaScript. Это позволяет писать приложения, скажем так, на более низком уровне, не прибегая лишний раз к скриптам в самом браузере. На самом деле, говорить так не совсем корректно, но таким образом упрощается маршрутизация по страницам внутри приложения. Как говорится в документации, в какой-то мере Электрон здесь представляет собой подобие Node.js.

GitHub создал Atom. Вместе с Atom родился Atom Shell. Atom Shell переродился в Электрон. В этой небольшой цепочке событий есть ключевое слово — GitHub. Да, Intel поддерживает NW.js, да, NW.js медленно, но развивается.

Однако, GitHub будет поддерживать свою разработку столько, сколько будет существовать редактор Atom.

На самом деле, это не все отличия Электрона от NW.js, есть и другие — более технические. С полным списком можно ознакомиться в документации проекта.

Принцип работы

Принцип работы Электрона основан на двух типах процессов:

Первый тип — основной процесс, который отвечает за интеграцию и взаимодействие с GUI операционной системы. Под этим понятием скрывается интеграция в док на OS X или панель задач на Windows, а также сворачивание в трей, полноэкранный режим и прочие обыденные и нативные для ОС штуки. Такой процесс может быть запущен только один раз на всю жизнь приложения.

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

Tauri vs Electron. Будущее десктоп-приложений на веб-технологиях

Для того, чтобы породить основной процесс используется следующая схема рождения приложения:

• Электрон читает package.json и ищет в нём секцию main, в которой определен основной файл приложения. Этот файл далее в статье я буду называть «точкой входа».
• Затем происходит обработка «точки входа» и создаётся основной процесс, который в свою очередь, при желании разработчика, открывает какую-либо страницу или страницы, то есть создаёт окно браузера. А если говорить точнее, то порождает процесс или процессы рендеринга.

Если попытаться графически изобразить жизнь приложения, построенного на Электроне, то она будет иметь следующий вид:

Возможности Electron

Перед тем, как приступить к написанию js-файла, который будет выступать в роли точки входа для всего приложения, необходимо взглянуть на доступный разработчику API (набор модулей), чтобы позднее можно было ссылаться на модуль без приведения его описания.

Для компактности статьи я вынес описание доступных API Электрона версии 0.33.3 в отдельный Gist.

Настройка окружения

Думаю, не стоит упоминать, что для работы с Электроном вам нужен Node.js и пакетный менеджер npm актуальной версии. Кроме этого, я рекомендую глобально установить пакет electron-prebuilt, который позволит автоматически загружать актуальную версию Электрона и запускать приложения без необходимости предварительной сборки.

$ npm i -g electron-prebuilt

После установки пакет автоматически загрузит текущую стабильную версию Электрона. Теперь, для того, чтобы запустить приложение, необходимо всего лишь выполнить команду electron . в директории проекта. Для последующей автоматизации процесса разработки я советую добавить эту команду в секцию скриптов в package.json :

. «scripts»: < «start»: «electron .» >, .

Эта запись даст возможность инициировать запуск приложения по команде npm start .

При желании можно загружать последнюю или любую другую версию Электрона вручную. Подробнее об этом написано в документации.

К слову, вы можете установить этот пакет локально, но в этом случае команда electron . преобразуется в страшный и некрасивый набор символов:

./node_modules/.bin/electron .

Кроме самого Электрона я также советую установить пакет XO, который является оберткой над ESLint:

$ npm i -g xo

ESLint является самым передовым линтером js-кода, разрабатываемый Николасом Закасом.

Настройка WebStorm

Из коробки WebStorm не умеет автоматически дополнять, предлагать методы, да и вообще работать с Electron. Чтобы исправить эту несправедливость нужно выполнить пару нехитрых операций.

Сначала необходимо перейти к настройке библиотек и фреймворков и, после этого, выбрать там наш любимый JavaScript:

File → Settings → Languages «name»: «app», «version»: «0.1.0», «main»: «./main.js», «scripts»: < «start»: «xo electron .», «test»: «xo» >, «xo»: < «space»: 2, «rules»: < «object-curly-spacing»: [2, «always»], «space-before-function-paren»: 0 >, «envs»: [ «node», «browser» ], «ignores»: [ «dist/**» ] >, «devDependencies»: < «xo»: «^0.9.0» >>

Я также добавил и изменил несколько правил проверки кода, чтобы линтер соответствовал моим личным требованиям и был удобен в использовании.

Самое время создать какой-нибудь простенький html-файл, который в последствии будет загружаться при старте приложения. Как мне кажется, нет ничего лучше, чем вывести на экран версию Node.js, Electron и Chrome. Для этого обратимся к модулю process, который был расширен Electron. Теперь, помимо информации о текущем процессе, он также может предоставлять информацию о типе процесса (основной или рендер), версию Chrome и Electron, а также путь до исполняемого js-файла.

Hello World! var versions = < ‘node’: process.version, ‘electron’: process.versions[‘electron’], ‘chrome’: process.versions[‘chrome’] >; document.write(`Node: $ | Electron: $ | Chrome: $`);

Забыл сказать, что при написании приложения я буду по возможности и желанию использовать некоторые фишки из ES2015 (ES6).

Файл main.js является «точкой входа» для всего приложения. В нём будут создаваться окна и обрабатываться системные события.

Сначала необходимо подключить модуль app, отвечающий за управление жизненным циклом приложения и browser-window, создающий новое окно браузера.

var app = require(‘app’); var BrowserWindow = require(‘browser-window’); var path = require(‘path’);

Далее создаётся ссылка на объект Window. Это делается для того, чтобы окно не закрывалось автоматически, когда объект будет обработан сборщиком мусора.

var mainWindow = null;

При закрытии всех окон приложения следует из него выйти. В OS X это событие является общим для приложений и их баров меню, поэтому здесь присутствует условие, отбрасывающее эту платформу.

app.on(‘window-all-closed’, function() < if (process.platform !== ‘darwin’) < app.quit(); >>);

После того, как Электрон полностью будет инициализирован, станет доступным API управления приложением. Ниже представлен код, который создаёт новое окно браузера размерами 800 на 600 пикселей. Затем в этом окне загружается ранее созданный нами html-файл.

Важно заметить, что даже если вы не загрузите ни один из html-файлов, процесс рендеринга всё равно будет запущен, так как ранее уже было создано окно браузера.

app.on(‘ready’, function() < mainWindow = new BrowserWindow(< width: 800, height: 600 >); mainWindow.loadUrl(path.join(‘file://’, __dirname, ‘/index.html’)); mainWindow.on(‘closed’, function() < mainWindow = null; >); >);

В конце вешается обработчик события closed, которое всплывает тогда, когда окно браузера уже было закрыто. После того, как вы получили данное событие, необходимо удалить ссылку на окно и больше его не использовать.

К слову, не стоит путать событие closed с похожим на него событием close, которое посылается, когда окно будет закрыто, то есть перед closed.

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

• will-finish-launching
• ready
• browser-window-created
• page-title-updated
• close
• before-quit
• will-quit
• quit
• window-all-closed
• closed

События, событиями, но вернемся к нашему приложению — самое время запустить его, используя команду npm start .

В итоге мы имеем окно, в котором отображается текущая версия Node.js, Electron и Chrome. Кроме того, окно приложениия имеет служебное меню с небольшим набором стандартных пунктов. Служебным оно называется из-за того, что после сборки проекта, как вы увидите позднее, оно исчезает.

Распространение приложения

В отличие от статьи про NW.js я дам самый необходимый материал сразу же в первой статье, чтобы самые активные читатели уже имели возможность начать изучать этот инструмент самостоятельно.

Для сборки приложения я предлагаю воспользоваться пакетом electron-packager. Сначала установим его глобально:

$ npm i -g electron-packager

В этот раз мы обойдемся без планировщика задач, наподобие Grunt или Gulp. Мы же взрослые люди? — думаю, да!

. «scripts»: < «start»: «xo electron .», «test»: «xo», «build»: «electron-packager . myApp —platform=win32 —arch=x64 —version=0.33.3 —app-version=0.1.0 —out=dist —ignore=dist —prune» >, .

Теперь, выполнив команду npm run build вы получите сборку своего приложения под операционную систему Windows. Если же вам необходима сборка под все три платформы, то команда будет иметь вид:

electron-packager . myApp —all —version=0.33.3 —app-version=0.1.0 —out=dist —ignore=dist —prune

После сборки приложения под все три платформы будет создано, как это ни странно, пять директорий:

• app-darwin-x64
• app-linux-ia32
• app-linux-x64
• app-win32-ia32
• app-win32-x64

Но самое забавное, что полностью собранный «комплект» весит всего лишь каких-то жалких 500Мб.

Кроме явного указания имени приложения и версии Электрона в команде, можно воспользоваться данными из package.json . Создадим два поля, которые будут содержать имя публикуемого приложения и версию, с помощью которой необходимо будет собрать его:

После этого в команде станут доступны переменные:

• $npm_package_publishName
• $npm_package_electronVersion

Разумеется, что вам никто не запрещает использовать поле name как имя приложения:

• $npm_package_name
• $npm_package_version

В итоге команда может принять вид:

$ electron-packager . $npm_package_publishName —all —version=$npm_package_electronVersion —app-version=$npm_package_version —out=dist —ignore=dist —prune

К сожалению, на Windows я так и не смог заставить electron-packager использовать $npm_package_* . Зато на OS X это замечательно работает.

Сейчас я предлагаю немного подробнее остановиться на аргументах, передаваемых в пакет electron-packager . Шаблон команды выглядит следующим образом:

$ electron-packager —platform= —arch= —version=

Доступные для пользователя аргументы:

Обязательные

• platform — платформа ( all или win32 , linux , darwin )
• arch — разрядность ( all или ia32 , x64 )
• version — версия Электрона для сборки

Опциональные

• all — эквивалент —platform=all —arch=all
• out — директория, в которую будут помещены сборки
• icon — иконка приложения ( .icns или .ico )
• app-bundle-id — идентификатор приложения в plist
• app-version — версия приложения
• build-version — версия сборки приложения для OS X
• cache — директория, в которой будет располагаться кэш приложения
• helper-bundle-id — идентификатор приложения для помощника plist
• ignore — исключение файлов из сборки
• prune — запуск команды npm prune —production в приложении
• overwrite — перезапись уже созданных сборок
• asar — упаковка исходников приложения в asar-архив
• asar-unpack — распаковка указанных файлов в директорию app.asar.unpacked
• sign — идентификатор для входа в codesign (OS X)
• version-string — ключи для сборки (Windows). Список ключей смотрите в документации пакета

О том, как добавлять иконки, что вообще следует делать перед распространением приложения и как создать установщик для сборки, я расскажу в заключительной части этой серии статей.

Список литературы

По традиции оставляю ссылки на то, что можно почитать, чтобы расширить свой кругозор в рамках этой статьи. На русском языке ничего нет, так как у нас Электрон как-то не особо популярен.

Статьи

• Список приложений, написанных на Electron, и всяких вкусняшек для него
• Странное сравнение Electron и NW.js
• Объёмная статья по созданию приложения на Electron

Модули

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Источник: canonium.com

Electron: разработка настольных приложений с использованием HTML, CSS и JavaScript

Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.

Electron

Electron — это фреймворк для разработки настольных приложений с использованием HTML, CSS и JavaScript. Такие приложения могут работать на различных платформах. Среди них — Windows, Mac и Linux.

В основе Electron лежат проекты Chromium и Node.js, объединённые в единую среду, обеспечивающую работу приложений. Это даёт возможность применять веб-технологии при разработке настольных программ.

Electron — серьёзный проект, который использован при создании множества популярных приложений. Среди них — мессенджеры Skype и Discord, редакторы для кода Visual Studio Code и Atom, а также — ещё более 700 приложений, сведения о которых опубликованы на сайте Electron.

Electron Forge

Для разработки приложения с использованием Electron этот фреймворк надо настроить. Это касается и тех случаев, когда в приложении планируется применять другие фреймворки или библиотеки, например — Angular, React, Vue, или что-то другое.

Инструмент командной строки Electron Forge позволяет серьёзно упростить процесс настройки Electron. Он даёт в распоряжение разработчика шаблоны приложений, основанных на Angular, React, Vue, и на других фреймворках. Это избавляет программиста от необходимости настраивать всё вручную.

Кроме того, Electron Forge упрощает сборку и упаковку приложения. На самом деле, это средство обладает и многими другими полезными возможностями, узнать о которых можно из его документации.

Рассмотрим процесс разработки простого приложения на Electron с использованием Electron Forge.

Предварительная подготовка

Для того чтобы приступить к разработке Electron-приложений с использованием Electron Forge вам понадобится система с установленной платформой Node.js. Загрузить её можно здесь.

Для глобальной установки Electron Forge можно воспользоваться следующей командой:

npm install -g electron-forge

Создание шаблонного приложения

Для того чтобы создать шаблонное приложение с использованием Electron Forge выполним следующую команду:

electron-forge init simple-desktop-app-electronjs

Эта команда инициализирует новый проект приложения, имя которого — simple-desktop-app-electronjs . На выполнение этой команды понадобится некоторое время. После того, как шаблонное приложение будет создано, запустить его можно так:

cd simple-desktop-app-electronjs npm start

Здесь мы переходим в его папку и вызываем соответствующий npm-скрипт.

После этого должно открыться окно, содержимое которого похоже на то, что показано на следующем рисунке.

Окно приложения, созданного средствами Electron Forge

Поговорим о том, как устроено это приложение.

Структура шаблонного приложения

Материалы, из которых состоит шаблонное приложение, создаваемое средствами Electron Forge, представлены набором файлов и папок. Рассмотрим важнейшие составные части приложения.

▍Файл package.json

Этот файл содержит сведения о создаваемом приложении, о его зависимостях. В нём имеется описание нескольких скриптов, один из которых, start , использовался для запуска приложения. Новые скрипты в этот файл можно добавлять и самостоятельно.

В разделе файла config.forge можно найти специфические настройки для Electron. Например, раздел make_targets содержит подразделы, описывающие цели сборки проекта для платформ Windows ( win32 ), Mac ( darwin ) и Linux ( linux ).

В package.json можно найти и запись следующего содержания: «main»: «src/index.js» , которая указывает на то, что точкой входа в приложение является файл, расположенный по адресу src/index.js .

▍Файл src/index.js

В соответствии со сведениями, находящимися в package.json , основным скриптом приложения является index.js . Процесс, который выполняет этот скрипт, называется основным процессом (main process). Этот процесс управляет приложением. Он используется при формировании интерфейса приложения, в основе которого лежат возможности браузера.

На нём же лежит ответственность за взаимодействие с операционной системой. Интерфейс приложения представлен веб-страницами. За вывод веб-страниц и за выполнение их кода отвечает процесс рендеринга (renderer process).

▍Основной процесс и процесс рендеринга

Цель основного процесса заключается в создании окон браузера с использованием экземпляра объекта BrowserWindow . Этот объект использует процесс рендеринга для организации работы веб-страниц.

У каждого Electron-приложения может быть лишь один основной процесс, но процессов рендеринга может быть несколько. Кроме того, можно наладить взаимодействие между основным процессом и процессами рендеринга, об этом мы, правда, здесь говорить не будем. Вот схема архитектуры приложения, основанного на Electron, на которой представлен основной процесс и два процесса рендеринга.

Архитектура Electron-приложения

На этой схеме показаны две веб-страницы — index.html и abcd.html . В нашем примере будет использоваться лишь одна страница, представленная файлом index.html .

▍Файл src/index.html

Скрипт из index.js загружает файл index.html в новый экземпляр BrowserWindow . Если описать этот процесс простыми словами, то оказывается, что index.js создаёт новое окно браузера и загружает в него страницу, описанную в файле index.html . Эта страница выполняется в собственном процессе рендеринга.

▍Разбор кода файла index.js

Код файла index.js хорошо прокомментирован. Рассмотрим его важнейшие части. Так, следующий фрагмент кода функции createWindow() создаёт экземпляр объекта BrowserWindow , загружает в окно, представленное этим объектом, файл index.html и открывает инструменты разработчика.

// Создаём окно браузера. mainWindow = new BrowserWindow(< width: 800, height: 600, >); // и загружаем в него файл приложения index.html. mainWindow.loadURL(`file://$/index.html`); // Открываем инструменты разработчика. mainWindow.webContents.openDevTools();

В готовом приложении строку кода, открывающую инструменты разработчика, имеет смысл закомментировать.

В коде этого файла часто встречается объект app . Например — в следующем фрагменте:

// Этот метод будет вызван после того, как Electron завершит // инициализацию и будет готов к созданию окон браузера. // Некоторые API можно использовать только после возникновения этого события. app.on(‘ready’, createWindow);

Объект app используется для управления жизненным циклом приложения. В данном случае после завершения инициализации Electron вызывается функция, ответственная за создание окна приложения.

Объект app используется и для выполнения других действий при возникновении различных событий. Например, с его помощью можно организовать выполнение неких операций перед закрытием приложения.

Теперь, когда мы ознакомились со структурой Electron-приложения, рассмотрим пример разработки такого приложения.

Разработка настольного приложения — конвертера температур

В качестве основы для этого учебного приложения воспользуемся ранее созданным шаблонным проектом simple-desktop-app-electronjs .

Для начала установим пакет Bootstrap, воспользовавшись, в папке проекта, следующей командой:

npm install bootstrap —save

Теперь заменим код файла index.html на следующий:

Temperature Converter

Temperature Converter

Celcius: Fahrenheit:

Вот как работает этот код:

1. Здесь создаётся текстовое поле с идентификатором celcius . Когда пользователь вводит в это поле некое значение, которое должно представлять собой температуру в градусах Цельсия, вызывается функция celciusToFahrenheit() .
2. Текстовое поле с идентификатором fahrenheit , также создаваемое в этом коде, принимает данные от пользователя, которые должны представлять собой температуру в градусах Фаренгейта, после чего вызывается функция fahrenheitToCelcius() .
3. Функция celciusToFahrenheit() конвертирует температуру, выраженную в градусах Цельсия и введённую в поле celcius , в температуру в градусах Фаренгейта, после чего выводит то, что у неё получилось, в поле fahrenheit .
4. Функция fahrenheitToCelcius() выполняет обратное преобразование — берёт значение температуры, выраженное в градусах Фаренгейта и введённое в поле fahrenheit , преобразует его в значение, выраженное в градусах Цельсия, после чего записывает то, что у неё получилось, в поле сelcius .

function celciusToFahrenheit() < let celcius = document.getElementById(‘celcius’).value; let fahrenheit = (celcius* 9/5) + 32; document.getElementById(‘fahrenheit’).value = fahrenheit; >function fahrenheitToCelcius()< let fahrenheit = document.getElementById(‘fahrenheit’).value; let celcius = (fahrenheit — 32) * 5/9 document.getElementById(‘celcius’).value = celcius; >

Как видите, каждая из этих функций получат значение соответствующего поля страницы, выполняет преобразование полученного значения и записывает то, что получилось, в другое поле. Функции это очень простые, в частности, значения, с которыми они работают, никак не проверяются, но в нашем случае это неважно.

Будем считать, что приложение готово. Испытаем его.

Запуск приложения

Для того чтобы запустить приложение, воспользуемся следующей командой:

npm start

После её успешного выполнения будет открыто окно приложения со следующим содержимым.

Окно приложения-конвертера

Поэкспериментируйте с приложением, вводя в поля различные значения.
Теперь, когда мы убедились в том, что приложение работает так, как ожидается, пришло время его упаковать.

Упаковка приложения

Для того чтобы упаковать приложение, воспользуйтесь следующей командой:

npm run package

На выполнение этой команды системе понадобится некоторое время. После того, как её работа завершится, загляните в папку out , которая появится в папке проекта.

Эксперимент по разработке Electron-приложения, описанный здесь, проводился на компьютере, работающем под управлением ОС Windows. Поэтому в папке out была создана папка simple-desktop-app-electronjs-win32-x64 . В этой папке, кроме прочего, можно найти .exe -файл приложения. В нашем случае он называется simple-desktop-app-electronjs.exe . Для запуска приложения достаточно обычного двойного щелчка мышью по этому файлу.

Разберём имя папки, в которую попал исполняемый файл приложения. А именно, он построен по шаблону имя приложения — платформа — архитектура . В нашем случае его структура раскрывается так:

• Имя приложения — simple-desktop-app-electronjs .
• Платформа — win32 .
• Архитектура — x64 .

Предположим, вам нужно упаковать приложение для какой-то другой платформы и архитектуры. Для этого можно воспользоваться расширенным вариантом вышеописанной команды. Структура этой команды выглядит так:

npm run package — —platform= arch=

Например, для того чтобы сформировать пакет приложения для Linux, можно воспользоваться следующей командой:

npm run package — —platform=linux —arch=x64

После завершения её работы в папке проекта out появится директория simple-desktop-app-electronjs-linux-x64 с соответствующим содержимым.

Создание установочных файлов приложений

Для того чтобы создать установочный файл приложения воспользуйтесь следующей командой:

npm run make

Результаты её работы окажутся в уже знакомой вам папке out . А именно, запуск этой команды в вышеприведённом виде на Windows-машине приведёт к созданию установочного файла приложения для Windows в папке outmakesquirrel.windowsx64 . Как и команда package , команда make , вызванная без параметров, создаёт установщик для платформы, используемой при разработке.

Итоги

В этом материале мы рассмотрели основы архитектуры Electron-приложений и написали простую программу. Если вы подумывали о том, чтобы разработать собственное приложение, основанное на Electron, теперь у вас есть базовые знания, самостоятельно расширив и дополнив которые, вы сможете создать то, что вам хочется.

Уважаемые читатели! Пользуетесь ли вы фреймворком Electron для разработки настольных приложений?

• Блог компании RUVDS.com
• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

Источник: habr.com

Electron — создание десктопного приложения с помощью веб-технологий

В данной статье мы расскажем, что такое Electron, как решать проблемы с закрытием процесса визуализации, как передавать информацию из основного процесса в процесс визуализации, а также как предотвратить запуск более одного экземпляра E lectron-приложения.

Что такое Electron

Electron — библиотека с открытым исходным кодом, разработанная GitHub, позволяет разрабатывать нативные графические приложения для десктопных операционных систем с помощью веб-технологий : HTML, CSS, и JavaScript. Electron достигает этого путем объединения Chromium и Node.js в единую среду выполнения, а приложения могут быть собраны для выполнения под Mac, Windows и Linux .

Стоит отметить преимущество, которое нам даёт разработка десктопных приложений с помощью Electron — лёгкое создание пользовательского интерфейса с помощью веб-технологий и богатый API, благодаря которому можно создавать и настраивать окно приложения под любые нужды.

Давайте рассмотрим как работает и из чего состоит Electron-приложение.

В Electron-приложении существует два типа процессов: основной процесс и процесс визуализации.

Основной процесс (main process) — это процесс, который запускается из package.json. Скрипт, запущенный в основном процессе, может отображать GUI используя веб-страницы. В Electron-приложении всегда есть один главный main process. Основной процесс управляет процессами визуализации.

Процесс визуализации ( renderer process ) отвечает за запуск пользовательского интерфейса вашего приложения, или, другими словами, веб-страницы, являющейся экземпляром webContents (отвечает за рендеринг и управление веб-страницей) . Все API-интерфейсы DOM, API-интерфейсы node.js и подмножество API библиотек Electron доступны в данном процессе.

Решение проблемы с закрытием процесса рендеринга

Из-за многопроцессорной архитектуры Chromium мы столкнулись с проблемой, что при закрытии или аварии в процессе визуализации, приложение продолжает выполняться, но в окне ничего не отображается (процесс визуализации мертв), однако нам было необходимо, чтобы процесс визуализации работал постоянно.

Решением данной проблемы является перехват события ‘crashed’ (возникает при сбое или завершении процесса рендеринга ) для объекта webContents, который можно получить из BrowseWindow (класс, который дает возможность создать окно браузера).

Пример закрытия приложения при аварии в render process:

browseWindow.webContents.on(‘crashed’, () => app.exit() >)

Передача информации в основной процесс из процесса визуализации

В Electron некоторые графические модули(например: меню, формат окна приложения, размер, прозрачность и т.д.) доступны только в основном процессе, но не в процессе визуализации. Управление этими модулями из процесса визуализации осуществляется при помощи модуля ipc , этот модуль позволяет отправлять асинхронные межпроцессорные сообщения.

Для большей наглядности продемонстрируем вызов функциональности основного процесса из процесса визуализации на примере. При нажатии пользователем на кнопку «выйти», приложение должно перейти в режим киоска — пользовательский интерфейс, который ограничивает доступ к функционалу приложения и системы. В решении поставленной задачи используем модули ipcMain и ipcRenderer.

Модуль ipcMain обрабатывает асинхронные и синхронные сообщения, отправленные из процесса визуализации в основном процессе. Для этого воспользуемся методом on(channel, listener), который слушает канал channel, и при появлении нового сообщения вызовется listener.

Ниже приведен пример кода, который слушает канал ‘logout’ на появление новых сообщений, и при появлении нового сообщения переведёт приложение в режим киоска:

const ipcMain> = require(‘electron’); ipcMain.on(‘logout’, () => mainWindow.setKiosk(true); >);

Модуль ipcRenderer позволяет отправлять асинхронные и синхронные сообщения из процесса визуализации в основной процесс.

Нами была реализована функция userLogout, которая отвечает за логику завершения сеанса пользователя. В числе прочего, сделаем сигнал(отправим пустое сообщение) о переходе приложения в режиме киоска, по каналу ‘logout’:

export const userLogout = () => // other logic ipcRenderer.send(‘logout’); >;

Предотвращение запуска более одного экземпляра Electron-приложения

Для того, чтобы предотвратить запуск более одного экземпляра Electron-приложения, существует метод makeSingleInstance из модуля app, который возвращает значение true — в случае, если текущее приложение является не первым запущенным экземпляром, и false — в случае, если первым.

В OS X система автоматически сконфигурирована на то, что пользователь не может запустить больше одного экземпляра приложения. В случае запуска второго экземпляра приложения, оно будет закрыто. Однако механизм единственного экземпляра в OS X не работает, когда пользователь запускает приложение из командной строки. Чтобы Electron-приложению добиться единственного экземпляра в OS X, нужно добавить в приложение код, приведенный ниже. Когда происходит старт второго экземпляра он блокируется и фокус происходит на запущенный первый экземпляр Electron-приложения.

let shouldQuit = app.makeSingleInstance((commandLine, workingDirectory) => if (mainWindow) if (mainWindow.isMinimized()) mainWindow.restore(); mainWindow.focus(); > >); if (shouldQuit) app.quit(); return; >

Electron является конкурентоспособным решением при разработке кроссплатформенных приложений. Не требует от команды разработки знания таких языков программирования как C++ и Python, позволяет создавать приложения, используя богатые возможности веб-технологий HTML, CSS, JS, а также Node.js.

Главная причина, почему Electron настолько популярен: не нужно переписывать уже написанное. Имея уже веб-приложение, вам не потребуется много сил для перевода его на Electron. Electron из коробки предоставляет разнообразный функционал по работе с окном приложения. Также большим преимуществом фреймворка является то, что этот проект распространяется как open source и имеет активное комьюнити.

Главным недостатком Electron является большое потребление оперативной памяти и большой вес даже минимального приложения.

Источник: jazzteam.ru