Как работает electron

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

Цель вебинара — познакомиться с Electron framework. Мы проведем разбор архитектуры, узнаем о плюсах и минусах, познакомимся с базовыми функциями. В конце будет небольшое демо создания и запуска десктоп приложения с нуля с использованием JavaScript.

План вебинара
1. Базовая архитектура. Background и renderer слои.
2. Производительность и кроссплатформенность.
3. Нюансы разработки и тестирования.
4. Демо создания десктоп приложения с нуля, используя JavaScript.

Целевая аудитория:
Приветствуются специалисты любого уровня, знакомые с JavaScript.

Покупай подписку с доступом ко всем курсам и сервисам

Библиотека современных IT знаний в удобном формате

Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

Все видеокурсы на 3 месяца
Тестирование по 10 курсам
Проверка 5 домашних заданий
Консультация с тренером 30 мин

Halloween

Все видеокурсы на 1 год
Тестирование по 24 курсам
Проверка 20 домашних заданий
Консультация с тренером 120 мин
Скачивание видео уроков
Возможность приостановки обучения

Все видеокурсы на 6 месяцев
Тестирование по 16 курсам
Проверка 10 домашних заданий
Консультация с тренером 60 мин

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:

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

Здесь создаётся текстовое поле с идентификатором celcius . Когда пользователь вводит в это поле некое значение, которое должно представлять собой температуру в градусах Цельсия, вызывается функция celciusToFahrenheit() .
Текстовое поле с идентификатором fahrenheit , также создаваемое в этом коде, принимает данные от пользователя, которые должны представлять собой температуру в градусах Фаренгейта, после чего вызывается функция fahrenheitToCelcius() .
Функция celciusToFahrenheit() конвертирует температуру, выраженную в градусах Цельсия и введённую в поле celcius , в температуру в градусах Фаренгейта, после чего выводит то, что у неё получилось, в поле fahrenheit .
Функция 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 в папке out\make\squirrel.windows\x64 . Как и команда package , команда make , вызванная без параметров, создаёт установщик для платформы, используемой при разработке.

Итоги

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

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

Пишем настольное JS-приложение с Electron

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

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

Прим. перев. Для создания приложений с использованием Electron не требуется знание таких языков программирования, как C++ и Python, — знания веб-технологий будет достаточно. Если вы не ограничены веб-технологиями, хорошей альтернативой использованию Electron будут GTK+ и Qt: в отличие от «родных» приложений, приложения, написанные с использованием Electron, обладают множеством недостатков, в том числе крайне неэффективно используют свободную оперативную память компьютера. Статью по QT можно посмотреть у нас на сайте.

Что из себя представляет Electron?

Electron — фреймворк для кроссплатформенной разработки настольных приложений с использованием Chromium и Node.js.

С его помощью можно легко написать приложение с использованием HTML, CSS и JavaScript, которое «из коробки» будет совместимо с Mac, Windows и Linux.

Другие встроенные особенности включают:

Автоматические обновления приложений;
Нативные меню и уведомления;
Сообщения об ошибках, которые можно отправлять на удалённый сервер;
Отладка и профилирование — модуль content Chromium ищет места, где проседает производительность. Вы также можете использовать инструменты разработчика в своём приложении;
Быстрое и простое создание установочных пакетов для Windows.

Если вы довольны тем, что предлагает Electron, то давайте займёмся нашим приложением. Однако прежде чем мы начнём, необходимо установить Node.js. Также вам пригодится аккаунт на GitHub, чтобы хранить и обновлять своё приложение. Это делать необязательно, но желательно, так как в наше время важно знать, как работает GitHub.

Принимаемся за работу

Когда вы закончите с подготовкой, откройте терминал и следуйте дальнейшим инструкциям, чтобы клонировать репозиторий Electron Quick Start на ваш компьютер. Именно на основе Electron Quick Start мы и будем писать наше приложение.

# Клонируем репозиторий git clone https://github.com/electron/electron-quick-start # Переходим к нему cd electron-quick-start # Устанавливаем зависимости и запускаем npm install && npm start

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

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

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

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

Структура самая обычная, очень похожая на ту, что используется при создании веб-страниц. У нас есть:

index.html — HTML-страница, отвечает за внешний вид;
main.js — создаёт окна и управляет системными событиями;
package.json — описание пакета (имя, зависимости и т.д.) для npm;
renderer.js — управляет процессами рендеринга.

Возможно, вы задаётесь вопросом: «Что за звери эти процессы рендеринга и основной процесс?» Давайте разбираться.

Что есть процесс?

Когда вы видите слово «процесс», думайте о процессе в операционной системе. По сути, это экземпляр программы, работающей в системе.

Если запустить наше Electron-приложение и заглянуть в Диспетчер Задач в Windows, Мониторинг Активности в macOS или Системный Монитор в Linux, то можно увидеть процессы, связанные с приложением.

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

Допустим, мы хотим написать цикл в процессе рендеринга:

var a = 1; for ( a = 1; a

Этот код никак не повлияет на основной процесс.

Основной процесс

Этот процесс контролирует происходящее в приложении. В него встроен полноценный Node.js API. Из него создаются процессы рендеринга и открываются диалоговые окна. Также он отвечает за разное взаимодействие с операционной системой, запускает и закрывает приложение.

Файл с этим процессом принято называть main.js , но вы можете дать ему любое имя. Также вы можете менять файл основного процесса через package.json . Чтобы проверить, как это работает, откройте файл package.json , замените строку «main»: «main.js» на «main»: «mainTest.js» и попробуйте запустить приложение.

Имейте в виду, что основной процесс может быть только один.

Процесс рендеринга

Этот процесс представляет собой окно браузера в вашем приложении. В отличие от основного процесса, процессов рендеринга может быть несколько и каждый из них будет независим от остальных. За счёт этого ошибка в одном из них никак не повлияет на другие. Скажем за это спасибо многопроцессорной архитектуре Chromium. Также эти окна можно спрятать или изменить, так как они работают как HTML-файлы.

Но в Electron у нас также есть доступ к Node.js API. Это значит, что мы можем открывать диалоговые окна и взаимодействовать с операционной системой прочими способами.

Представить происходящее можно следующим образом:

Остаётся один вопрос. Можно ли как-нибудь связать эти процессы?

Эти процессы выполняются одновременно и независимо. Однако им всё равно нужно как-то взаимодействовать. Особенно учитывая то, что они отвечают за разные задачи.

Специально для таких целей существует межпроцессное взаимодействие (IPC). Его можно использовать для передачи сообщений между основным процессом и процессами рендеринга.

Вот мы и разобрались с основами процессов для создания Electron-приложения. Возвращаемся к коду!

Добавим индивидуальности

Поменяем название папки с нашим приложением на более подходящее. Измените название папки с electron-quick-start на hear-me-type-tutorial . Откройте папку заново в текстовом редакторе или IDE. Теперь похимичим с файлом package.json . Он содержит важную информацию о нашем приложении: имя, версию, автора, лицензию и многое другое.

Давайте укажем, кто является автором приложения. Для этого найдите параметр author и замените его значение на своё имя. Должно получиться что-то такое: «author»: «Carol Pelu» . Также вы можете изменить и другие параметры вроде name и description , которые отвечают за название приложения и его описание соответственно. В итоге должно получиться примерно так:

Помните, что вы всегда можете ввести npm start в терминале, чтобы запустить приложение и посмотреть на внесённые изменения.

Пора идти дальше и добавить в наше приложение функциональность.

Добавляем функциональность

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

Для этого мы создадим элементы audio со своим id для каждой клавиши. Затем напишем switch-конструкцию, чтобы понять, какая клавиша была нажата. После этого воспроизведём звук, привязанный к этой клавише. Если это звучит сложно — не беспокойтесь, мы разберёмся со всем пошагово.

Скачайте этот архив с нужными нам аудиофайлами. Пора встраивать аудио в наше приложение.

Откройте index.html и внутри создайте новый элемент с классом audio .

Затем внутри этого создайте элемент с id равным «A» , src равным «sounds/A.mp3» и атрибутом preload равным «auto» .

Мы используем preload=»auto» , чтобы сказать приложению, что оно должно загрузить весь аудиофайл после загрузки страницы. Главным файлом нашего приложения является index.html , и все аудио загрузятся после запуска приложения.

В итоге код должен выглядеть так:

Теперь index.html имеет примерно такой вид:

Сейчас указывает на неизвестный файл. Давайте создадим папку sounds и поместим туда все аудиофайлы.

Отлично! Теперь нам не хватает только JavaScript-кода.

Создадим новый файл functions.js . Давайте запросим его в файле index.html , чтобы JS-код был готов к использованию, когда приложение будет запущено.

Следуя примеру require(./renderer.js’) , добавим строку require(‘./functions.js’) прямо под ней.

Проект теперь должен иметь такой вид:

Отлично! Теперь, когда уже почти всё готово, наступает момент истины.

Откроем functions.js и добавим туда следующий код:

document.onkeydown = function(e) < switch (e.keyCode) < case 65: document.getElementById('A').play(); break; default: console.log("Клавиша на обнаружена!"); >>;

Откройте консоль, убедитесь, что вы находитесь в директории проекта и введите npm start для запуска приложения.

Сделайте звук погромче и нажмите клавишу «А» на клавиатуре.

JS-код довольно простой. Мы используем событие onkeydown для объекта document , чтобы выяснить, к какому HTML-элементу мы обращаемся. Имейте в виду, что объектом document является главное окно нашего приложения.

В анонимной функции мы используем switch-выражение, которое выясняет Unicode-значение нажатой клавиши. Если это значение правильное, то воспроизводится звук. В противном случае в консоль выводится сообщение: «Клавиша не обнаружена!».

Как вы могли заметить, у нас есть файлы для клавиш от A до Z и от 0 до 9. Поэтому давайте используем и их, чтобы «А» было не так одиноко.

Вернёмся к index.html и создадим элемент для всех клавиш, к которым у нас есть аудио. Да, можете просто скопипастить:

Потрясающе! Теперь давайте провернём то же самое в functions.js .

Код для каждой клавиши можно найти здесь. Но вы по-прежнему можете просто скопировать:

document.onkeydown = function(e) < switch (e.keyCode) < case 48: document.getElementById('0').play(); break; case 49: document.getElementById('1').play(); break; case 50: document.getElementById('2').play(); break; case 51: document.getElementById('3').play(); break; case 52: document.getElementById('4').play(); break; case 53: document.getElementById('5').play(); break; case 54: document.getElementById('6').play(); break; case 55: document.getElementById('7').play(); break; case 56: document.getElementById('8').play(); break; case 57: document.getElementById('9').play(); break; case 65: document.getElementById('A').play(); break; case 66: document.getElementById('B').play(); break; case 67: document.getElementById('C').play(); break; case 68: document.getElementById('D').play(); break; case 69: document.getElementById('E').play(); break; case 70: document.getElementById('F').play(); break; case 71: document.getElementById('G').play(); break; case 72: document.getElementById('H').play(); break; case 73: document.getElementById('I').play(); break; case 74: document.getElementById('J').play(); break; case 75: document.getElementById('K').play(); break; case 76: document.getElementById('L').play(); break; case 77: document.getElementById('M').play(); break; case 78: document.getElementById('N').play(); break; case 79: document.getElementById('O').play(); break; case 80: document.getElementById('P').play(); break; case 81: document.getElementById('Q').play(); break; case 82: document.getElementById('R').play(); break; case 83: document.getElementById('S').play(); break; case 84: document.getElementById('T').play(); break; case 85: document.getElementById('U').play(); break; case 86: document.getElementById('V').play(); break; case 87: document.getElementById('W').play(); break; case 88: document.getElementById('X').play(); break; case 89: document.getElementById('Y').play(); break; case 90: document.getElementById('Z').play(); break; default: console.log("Key is not found!"); >>;

Прим. перев. Как вы, вероятно, заметили, такая switch-case конструкция выглядит довольно громоздко. А как вы бы оптимизировали этот участок кода? Делитесь своими вариантами в комментариях.

Вот мы и закончили наше приложение! Поздравляем!

Основная функциональность в приложении присутствует, но его ещё можно доработать.

Дополняем приложение

Да, у нас всё работает, но всё равно то тут, то там чего-то не хватает. Например, в index.html вы можете изменить заголовок приложения и содержимое основного окна. Кроме того, у нас нет никакого дизайна, нет красивых цветов и нет картинок с котиками. Включите воображение и попробуйте улучшить внешний вид приложения.

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

Тестируем, тестируем и ещё раз тестируем

Хорошее ПО должно быть тщательно протестировано. Попробуйте нажать каждую клавишу, чтобы увидеть, что произойдёт. В лучшем случае вы услышите звук для каждой клавиши, указанной в коде. Но что если вы нажмёте много клавиш подряд так быстро, как только можете? А что насчёт клавиш вроде Home и NumLock, для которых у нас нет звука?

Если вы свернёте приложение и нажмёте клавишу, вы услышите звук? А если окно приложения неактивно, и вы нажмёте клавишу, то что-нибудь произойдёт?

К сожалению, ответ — нет.

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

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

В файле functions.js было использовано устаревшее событие. Сможете его найти? Когда найдёте, подумайте, как его заменить без изменения функциональности приложения.

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

Electron JS: краткое руководство

В этой статье — вся важная информация, необходимая для того, чтобы решить, подходит ли Electron JS для вашего проекта.

Есть веская причина, по которой вы постоянно слышите о разработке на Electron: создание приложений с помощью этого фреймворка происходит быстро, эффективно и экономично. Но что именно вы можете построить с помощью Electron? И зачем выбирать его для своего проекта? Чтобы ответить на эти вопросы, нам сначала нужно поближе познакомиться с фреймворком и объяснить, чем он отличается от традиционных технологий разработки для настольных компьютеров.

Что такое Электрон?

Electron JS — это фреймворк с открытым исходным кодом, который позволяет разработчикам создавать кроссплатформенные настольные приложения с помощью JavaScript, HTML и CSS, которые на сегодняшний день являются тремя основными веб-технологиями. Он разработан и поддерживается GitHub. На своем веб-сайте Electron обещает, что любой, кто может создать веб-сайт, может использовать его для создания настольного приложения.

Почему? Поскольку все сложные части, такие как автоматические обновления, собственные меню и уведомления, отчеты о сбоях и отладка, выполняются механизмом рендеринга Chromium (часть браузера Chrome с открытым исходным кодом) и Node.js (среда выполнения JavaScript). построен на движке Chrome V8 JavaScript). Естественно, Electron привлекает веб-разработчиков, которые могут использовать его для разработки мощных кроссплатформенных настольных приложений без предварительного изучения множества новых навыков.

Ключевые особенности Electron.js

Любое написанное вами веб-приложение может работать на Electron.js. Точно так же любое приложение Node.JS, которое вы пишете, может использовать эту технологию. Electron JS использует веб-технологии, такие как простой HTML, CSS и JavaScript. Это не требует скиллов сеньора, если, конечно, вам не нужно что-то продвинутое. Фреймворк может быть разработан для одного браузера. Его файловая система принадлежит API-интерфейсам Node.js и работает в Linux, Mac OS X, Windows. Electron JS использует модуль npm, который широко используется для JavaScript. Он состоит из собственного меню для диалогов и уведомлений. Установщики Windows не нуждаются в какой-либо настройке.

Он также имеет возможность автоматического обновления и создания отчетов о сбоях в Windows и Mac с помощью Squirrel. Отчеты о сбоях отправляются на удаленный сервер для дальнейшего анализа. За действиями по отслеживанию контента, такими как отладка и профилирование, следит Chromium.

Немного об архитектуре

Теперь давайте прольем свет на то, на что похожа архитектура Electron.js. Если вы говорите, что Electron.js — это пицца, а Node.JS — это основа, то Chrome — это сыр, а V8 JavaScript Engine — начинка.

Chrome — это веб-браузер с открытым исходным кодом, созданный Google, который предоставляет оконный менеджер с вкладками или оболочку для Интернета. Он имеет минималистичный пользовательский интерфейс и использует V8 в качестве движка JavaScript и blink в качестве движка компоновки. Libchromiumcontent — это библиотека рендеринга Chromium, которая является основой с открытым исходным кодом для браузера Google Chrome.

Node.JS — это среда выполнения JavaScript с открытым исходным кодом, в которой используется движок JavaScript V8. Он позволяет вам запускать JavaScript вне браузера, а также предоставляет интерактивную оболочку, в которой вы можете выполнять необработанный код JavaScript.

V8 JavaScript Engine также является движком JavaScript с открытым исходным кодом, разработанным Google, написанным на C++ и JavaScript.

Electron JS — почему стоит выбрать фреймворк для создания настольного приложения

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

Когда мы пишем приложение для веб-браузера, мы в основном пишем код, который будет выполняться на чужом компьютере. Мы не знаем, какие браузеры будут использовать наши целевые пользователи. Это может быть последняя версия Chrome или устаревшая версия Internet Explorer. Следовательно, не остается большого выбора, кроме как быть консервативными в технологиях, которые мы выбираем для реализации, и в типе кода, который нужно набросать. Когда вы создаете свои приложения с помощью Electron, вы упаковываете определенную версию Chromium и Node.JS, поэтому вы можете полагаться на любые функции, доступные в этих версиях.

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

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

Разработка на Electron имеет наибольший смысл при создании многоплатформенных настольных приложений, которым не нужно придерживаться строгих требований к использованию памяти и подчеркивать дизайн UX и UI.

Кроссплатформенные настольные приложения с HTML, CSS и JavaScript

С Electron можно написать приложение только один раз и распространять его повсюду без дублирования усилий по разработке. Мультиплатформенный характер Electron может значительно сократить процесс разработки и привести к существенной экономии средств. Более того, поскольку приложения Electron создаются с использованием трех основных веб-технологий — JavaScript, HTML и CSS, — разработчики могут использовать единую кодовую базу как для веб-приложений, так и для настольных приложений.

Инструменты для разработчиков Electron.js

Это инструменты, необходимые Electron.js для создания приложения.

Electron — устанавливает готовые двоичные файлы Electron для использования в командной строке с помощью npm.
Электронная компиляция — использует ES2015, CoffeeScript, LESS, SCSS в вашем приложении без этапа предварительной компиляции.
Electron-packager — упаковывает файлы и распространяет их в вашем приложении.
Devtron — это официальное расширение DevTools.
Spectron — тестирует приложения Electron с помощью ChromeDriver.

Electron с точки зрения бизнеса

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

Когда разработка Electron не подходит?

Поскольку приложения Electron, по сути, представляют собой окна браузера с сервером Node.js, работающим в фоновом режиме, они, как правило, потребляют значительный объем памяти. Из-за этого нет особого смысла использовать Electron для простых утилит. Приложения Electron также могут быть очень большими по сравнению с их родными аналогами. Разница в размере может быть особенно заметна, когда речь идет о приложениях, которые не содержат слишком много функций. Однако по мере того, как память и дисковое пространство с каждым годом дешевеют, доводы против использования Electron для создания простых утилит постепенно теряют свою актуальность.

Например, Etcher — это простое в использовании приложение для записи образов, способное записывать образы ОС на SD-карты и USB-накопители и проверять их функциональность. В отличие от большинства других подобных утилит, Etcher имеет красивый пользовательский интерфейс, который есть практически у всех приложений Electron.

Примеры электронных приложений

Электронная разработка сделана правильно — настольное приложение Slack

Отличным примером популярного приложения, которое иллюстрирует, когда разработка Electron имеет смысл, является Slack, центр совместной работы, где команды могут работать вместе, чтобы добиться цели. Slack был первоначально выпущен в 2013 году, всего через месяц после Electron, и стал одним из самых популярных инструментов для совместной работы в мире. Slack упрощает совместную работу, включая постоянные чаты, поддержку обмена файлами и интеграцию с большим количеством сторонних сервисов, включая Google Drive, Trello, Dropbox и многие другие. Хотя не секрет, что кроссплатформенное настольное приложение Slack построено на Electron, может быть не очевидно, что это гибридное приложение, созданное на основе веб-приложения (slack.com). Это одно из самых привлекательных преимуществ Electron — вы можете не только создать кроссплатформенное настольное приложение с нуля с помощью известных и любимых веб-технологий, но и расширить уже существующее веб-приложение новыми и мощными возможностями.

Простая утилита, но созданная с помощью Electron — Etcher

Etcher разработан Balena (ранее Resin.io), компанией, которая предоставляет полный набор инструментов для создания, развертывания и управления парками подключенных устройств Linux. Смущенная состоянием приложений для написания изображений, на которые полагались ее клиенты, Balena решила что-то с этим сделать, и так появился Etcher. История Etcher служит прекрасным свидетельством того, насколько просто разработать приложение с помощью Electron.

Когда IoT-компания может использовать Electron для разработки того, что сейчас является одним из самых популярных приложений для создания изображений в свободное время, нет никаких ограничений для того, чего могут достичь профессиональные разработчики Electron.

Новое изобретение колеса — Visual Code Studio

Зная об универсальности Electron, Microsoft использовала фреймворк для переопределения редактирования кода с помощью Visual Studio Code. Это легкий редактор кода, который работает везде и может быть превращен в полноценную IDE с расширениями. С момента его выпуска число разработчиков, использующих Visual Studio Code, резко возросло, что показывает, как можно применить новую технологию, чтобы заново изобрести колесо и улучшить его в процессе.

Альтернативы Electron: фреймворки для кроссплатформенных настольных приложений

Некоторое время назад было невозможно создавать настольные приложения с помощью JavaScript. Теперь разработчики JS могут выбирать из нескольких фреймворков.

NW.js дает разработчикам свободу выбора фреймворков и инструментов и позволяет вызывать модули Node.js непосредственно из DOM.
Meteor быстр, но он не создает приложения сам по себе — его нужно использовать с Cordova или подобными инструментами.
Proton Native использует тот же синтаксис, что и React Native (можно сказать, что он делает то же самое для настольных компьютеров, что React Native делает для мобильных устройств). Proton Native работает с Redux и совместим с Node.js.