Создание настольных приложений с помощью Electron. Руководство для начинающих
Поверите ли вы мне, если я скажу, что настольные приложения Slack, VSCode, Atom, Skype, Discord и Whatsapp, которыми вы сегодня пользуетесь, были написаны с использованием HTML, CSS и JavaScript? Вероятно, нет. Потому что обычно эти языки мы используем только для разработки веб-сайтов.
Но как быть в том случае, если в настольном приложении применяется браузер в виде графического интерфейса (то, что видит пользователь)? Тогда мы могли бы применять эти языки для визуализации пользовательского интерфейса приложения. Именно этот вариант и действует в указанных выше приложениях. Эти приложения используют скрытый браузер для визуализации пользовательского интерфейса, поэтому для рисования можно использовать HTML и CSS, а для интерактивности — JavaScript.
Хотя проектирование графического интерфейса с использованием HTML, CSS и JavaScript кажется простым, вам все равно нужен мост между собственными системными API и браузером (в приложении) для ввода-вывода (файловая система), доступа к сети, оборудованию и другим компонентам системы. Без доступа к системным ресурсам наше настольное приложение было бы просто веб-сайтом.
В приложении мы могли бы использовать Node.js, чтобы он действовал как мост между системными ресурсами и браузером. Если код JavaScript, запущенный в браузере, нуждается в доступе к некоторым файлам из системы, он может сделать такой запрос Node.js. Поскольку Node.js может получить доступ к общесистемным ресурсам без каких-либо ограничений, он идеально подходит для работы с бэкендом приложения, без всяких доработок.
Теоретически это похоже на идеальный метод. Но когда дело доходит до реального создания приложения, необходимы познания о разработке собственных настольных приложений, об интеграции с браузером, API-интерфейсах браузера, интеграции Node.js и о многих других вещах. Но не стоит пугаться, ведь у нас есть Electron.
Electron — это инструмент для создания кросс-платформенных настольных приложений с веб-технологиями. Electron использует Node.js для бэкенда приложения и браузер Chromium для фронтенда. Мы можем написать графический интерфейс приложения с помощью HTML, CSS и JavaScript. Electron обеспечивает интеграцию между JavaScript, работающим в браузере, и JavaScript, работающим в Node.js.
На самом деле, указанные выше приложения созданы с помощью Electron. Он имеет огромное сообщество, множество сторонних модулей, большинство компаний полагаются на него в своих настольных приложениях. Вот список таких приложений. В нем вы также можете найти Twitch, Zeplin и WebTorrent.
💡 Подобно Electron, для создания настольных приложений вы также можете применять NW.js. Я лично не считаю, что с NW.js комфортно работать. А чтобы узнать различия между этими двумя инструментами, вы можете ознакомиться с этой документацией.
Архитектура Electron
BrowserWindow — это просто интерфейс высокого уровня для отображения и управления веб-страницей, но сам он не может отображать веб-страницы. Интерфейс webContent — это низкоуровневый API, который отвечает за визуализацию и управление веб-страницей с помощью процесса визуализации Chromium.
Процесс Main против Renderer
Совершенно очевидно, что процесс main управляет состоянием приложения, а процессы renderer управляют пользовательским интерфейсом приложения. Хотя, есть несколько элементов, к которым процесс renderer не может иметь доступ.
💡 Причина, по которой Electron не предоставляет доступ к API-интерфейсам Node.js из процессов renderer по умолчанию, заключается в том, что вредоносный сторонний код JavaScript, например сторонняя библиотека, может получить доступ к системе пользователя, вызвав API-интерфейсы Node. Поэтому будьте осторожны.
Взаимодействие между процессами
Теперь, когда мы выяснили, что процесс main предназначен для координации работы приложения и связи между системными ресурсами и приложением, а процесс renderer для визуализации пользовательского интерфейса приложения, осталось выяснить, как мы можем справиться с ограничениями.
💡 Эти коммуникации могут происходить синхронно или асинхронно в зависимости от методов модуля.
Фоновые задания
Для выполнения фоновых и ресурсоемких задач некоторые специалисты могут предложить окна frameless transparent, которые пользователи не видят. Однако, когда есть способы получше, такик уловки следует избегать.
💡 Хотя мы можем получить доступ ко всем API-интерфейсам Node.js внутри веб-воркера, получить доступ к собственным API-интерфейсам Electron невозможно. Для получения дополнительной информации о многопоточности в Electron прочтите эту документацию.
Общее описание
Все, что мы обсуждали до сих пор — это просто обзор архитектуры Electron. А для тех, кто хочет знать больше, можно почитать вот эту документацию. Подведем итог проведенному обсуждению с помощью упрощенной диаграммы.
Создание приложения с помощью Electron
Есть еще один важный момент, который нельзя забывать. Точкой входа в приложение Electron является файл JavaScript. Этот файл JavaScript выполняется внутри процесса main и открывает окна приложений. Итак, создадим внутри проекта файл main.js :
💡 Переменная process поступает из Node.js, поскольку процесс main всегда имеет доступ к API-интерфейсам Node.js. Следовательно process.platform дает название базовой платформы (ядра или ОС), на которой выполняется Node.js.
Событие activate специфично для macOS и запускается при нажатии значка приложения на док-станции (и в других местах). Поскольку закрытие всех окон в macOS не приводит к закрытию приложения (процесс main ), нам нужно будет открыть окно (если ни одно из них не открыто) при повторной активации приложения.
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 можно воспользоваться следующей командой:
Создание шаблонного приложения
Для того чтобы создать шаблонное приложение с использованием Electron Forge выполним следующую команду:
Здесь мы переходим в его папку и вызываем соответствующий npm-скрипт.
После этого должно открыться окно, содержимое которого похоже на то, что показано на следующем рисунке.
Окно приложения, созданного средствами Electron Forge
Поговорим о том, как устроено это приложение.
Структура шаблонного приложения
Материалы, из которых состоит шаблонное приложение, создаваемое средствами Electron Forge, представлены набором файлов и папок. Рассмотрим важнейшие составные части приложения.
▍Файл package.json
В разделе файла config.forge можно найти специфические настройки для Electron. Например, раздел make_targets содержит подразделы, описывающие цели сборки проекта для платформ Windows ( win32 ), Mac ( darwin ) и Linux ( linux ).
▍Файл src/index.js
▍Основной процесс и процесс рендеринга
У каждого Electron-приложения может быть лишь один основной процесс, но процессов рендеринга может быть несколько. Кроме того, можно наладить взаимодействие между основным процессом и процессами рендеринга, об этом мы, правда, здесь говорить не будем. Вот схема архитектуры приложения, основанного на Electron, на которой представлен основной процесс и два процесса рендеринга.
Архитектура Electron-приложения
▍Файл src/index.html
▍Разбор кода файла index.js
В готовом приложении строку кода, открывающую инструменты разработчика, имеет смысл закомментировать.
Объект app используется для управления жизненным циклом приложения. В данном случае после завершения инициализации Electron вызывается функция, ответственная за создание окна приложения.
Объект app используется и для выполнения других действий при возникновении различных событий. Например, с его помощью можно организовать выполнение неких операций перед закрытием приложения.
Теперь, когда мы ознакомились со структурой Electron-приложения, рассмотрим пример разработки такого приложения.
Разработка настольного приложения — конвертера температур
Для начала установим пакет Bootstrap, воспользовавшись, в папке проекта, следующей командой:
Теперь заменим код файла index.html на следующий:
Вот как работает этот код:
Как видите, каждая из этих функций получат значение соответствующего поля страницы, выполняет преобразование полученного значения и записывает то, что получилось, в другое поле. Функции это очень простые, в частности, значения, с которыми они работают, никак не проверяются, но в нашем случае это неважно.
Будем считать, что приложение готово. Испытаем его.
Запуск приложения
Для того чтобы запустить приложение, воспользуемся следующей командой:
После её успешного выполнения будет открыто окно приложения со следующим содержимым.
Окно приложения-конвертера
Поэкспериментируйте с приложением, вводя в поля различные значения.
Теперь, когда мы убедились в том, что приложение работает так, как ожидается, пришло время его упаковать.
Упаковка приложения
Для того чтобы упаковать приложение, воспользуйтесь следующей командой:
Предположим, вам нужно упаковать приложение для какой-то другой платформы и архитектуры. Для этого можно воспользоваться расширенным вариантом вышеописанной команды. Структура этой команды выглядит так:
Например, для того чтобы сформировать пакет приложения для Linux, можно воспользоваться следующей командой:
После завершения её работы в папке проекта out появится директория simple-desktop-app-electronjs-linux-x64 с соответствующим содержимым.
Создание установочных файлов приложений
Для того чтобы создать установочный файл приложения воспользуйтесь следующей командой:
Итоги
В этом материале мы рассмотрели основы архитектуры Electron-приложений и написали простую программу. Если вы подумывали о том, чтобы разработать собственное приложение, основанное на Electron, теперь у вас есть базовые знания, самостоятельно расширив и дополнив которые, вы сможете создать то, что вам хочется.
Уважаемые читатели! Пользуетесь ли вы фреймворком Electron для разработки настольных приложений?
Создание десктопного приложения с помощью Electron и веб-технологий
Знакомство с Electron
Изначально Electron был разработан для редактора Atom компанией GitHub.
Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.
Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Таким образом это не что иное как среда в которой будет выполнятся наше веб приложение.
На текущий момент Electron v0.35.0 включает в себя:
Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.
Интерфейсом взаимодействия с пользователем является созданная нами веб-страница. В данном случае мы не ограничены системным набором элементов интерфейса нашей платформы и можем создавать нужные нам UI элементы с помощью веб-технологий. А учитывая, что в коробочке у нас один из самых продвинутых браузеров, мы можем использовать самые новые веб-технологии.
Я предполагаю, что вы будете использовать ваш основной текстовый редактор (или IDE), и у вас установлен Node.js/npm. Я также надеюсь, что у вас есть знания HTML/CSS/JavaScript (знания Node.js не помешали бы, но не является обязательными) так что я могу не беспокоится о вашем понимании создания веб-страниц. Если же таких знаний нет, то вы, наверное, будете чувствовать себя несколько потерянными, и я рекомендую вам вначале изучить основы веб-разработки.
Итак, как же работает Electron.
Входной точкой является основной файл определенный в файле package.json, именно он и выполняется, когда стартует ваше приложение. В этом основном файле (который обычно называется main) создаются окна приложения, в которых происходит рендеринг и отображение веб-страниц с дополнительною возможностью взаимодействия с нативным GUI вашей операционной системы. Процесс, который запускает основной скрипт, называется основной процесс (main process).
Electron использует Chromium для отображения веб-страниц, мульти-процессорная архитектура Chromium тоже используется. Каждая веб-страница в Electron запускается в своем собственном процессе, который называется рендер процессом (renderer process).
В обычном браузере веб-страницы запускаются в закрытом окружении (так называемой песочнице) и не имеют доступ к нативным ресурсам. Пользователи Electron, однако, имеют возможность использовать Node.js API на веб-страницах, имея доступ к взаимодействию с операционной системой на низком уровне.
Исходя из того, что мы уже знаем, для создания самого простого приложения нам нужно всего три файла:
package.json
main.js
index.html
Напишем простое приложение Hello world
Наше первое приложение будет выводит информацию о версиях тех частей, которые входят в Electron.
package.json в нашем случае будет выглядеть так:
«name»: «electron-simple-app» — это имя для вашего приложения;
«version»: «0.0.1» — это его версия, соответственно;
«main»: «main.js» — и основной скрипт.
Если поле main не будет указано в pakage.json, то по умолчанию Electron будет пытаться загрузить index.js файл.
В main.js мы должны создать окно нашего приложения и обрабатывать системные события, вот так будет выглядеть основной скрипт нашего приложения:
index.html — это веб-страница которую мы хотим отобразить:
Когда вы создадите все файлы или склоните репозиторий, вы захотите попробовать запустить ваше приложение локально и проверить, работает ли оно как задумано.
Для запуска приложения нам понадобится модуль electron-prebuilt.
Его мы можем с помощью npm поставить глобально или локально в наше приложение.
В случае глобальной установки для запуска приложения мы выполняем в корне нашего приложения команду:
В случае локальной установки выполняем:
В подготовленном мной репозитории для запуска приложения вам нужно установить зависимости:
и запустить скрипт с помощью npm:
Пример запуска созданного приложения можно посмотреть на видео ниже:
Electron это Flash для десктопа
Почему в настольном приложении Slack, скорее всего, есть драйвер для работы игрового контроллера Xbox и чего, действительно, плохого в использовании Electron для построения настольных приложений.
На скриншоте ниже, согласно профайлеру, Slack занимает почти все ресурсы процессора. Интересно, чем это он там занимается?
Процесс был запущен в фоне когда это произошло. Я даже не взаимодействовал со Slack — я был на встрече. И заметил я это только из-за шума системы охлаждения моего ноутбука. Перезапуск Slack в этот раз решил проблему.
Но это нормально для Slack. В фоновом режиме Slack часто потребляет 5% процессора. Что он делает? Я без понятия.
Я готов поспорить, что команда разработчиков Slack тоже не знает. Сколько строк кода им пришлось написать чтобы их клиент работал? Я думаю в районе 50 тысяч. Возможно, 100 тысяч. Но Slack — не нативное приложение. Или не обычное нативное приложение. Он работает поверх Electron, а это значит, что когда вы его скачиваете, вы на самом деле скачиваете полную копию Google Chrome (скорее, Chromium — прим. пер.). Chrome на момент написания содержит 15 миллионов строк кода, не являющимися комментариями. Код непосредственно Slack составляет менее 1% объема загрузки.
Chrome сам по себе — тот ещё боров. Он большой и сложный. Он использует ОЗУ и процессор как будто больше на них никто не претендует и сильно уменьшает время жизни от батареи.
Вы можете думать о Slack как о маленькой программе на JavaScript, которая работает внутри другой операционной системы (виртуальной машины) Chrome, которую вы запускаете чтобы, в сущности, пользоваться аналогом IRC. Даже если сам Chrome у вас уже запущен, то каждое приложение на Electron разворачивает свою, дополнительную копию.
И называть Chrome операционной системой — это не преувеличение. По количеству строк кода Chrome практически такого же размера как ядро Linux. Как и у ядра Linux у него есть API для различного оборудования, включая OpenGL, VR, MIDI. Он содержит встроенную копию SQLite, систему управления памятью и свой собственный диспетчер задач. На macOS в нём даже есть драйвер USB для игрового контроллера Xbox 360. (Я знаю что он там, потому что я его и написал. Извините.)
Содержит ли Slack мой код для контроллера Xbox? Знает ли команда Slack об этом? Знает ли об этом хоть кто-то? Slack занимает 160 Мб на диске. Это порядка 70 несжатых копий Властелина Колец. Другие приложения Electron на моем компьютере — Spotify (200 Мб) и Atom (260 Мб). Linux я впервые установил при помощи дискет. Понадобится 450 дискет, чтобы записать эти три простых приложения. Все вместе они весят как настольный дистрибутив Ubuntu. Который, думаю, содержит в себе клиент IRC, текстовый редактор и музыкальный проигрыватель. Полноценная операционная система, пользовательское окружение и веб-браузер.
Вы скажете, что дисковое пространство сейчас ничего не стоит. Да, но не оперативная память. Новенький блестящий MacBook Pro по умолчанию укомплектован 8 Гб ОЗУ. В связи с продолжительностью работы от батареи вы не можете приобрести модель с более чем 16 Гб. И прямо сейчас Slack находится где-то между 300 Мб и 1 Гб в памяти моего ноутбука:
Come on. Это приложение для обмена текстом.
Другая вещь, которой всегда не хватает — заряд батареи. Современные процессоры сохраняют заряд путём остановки когда это возможно (когда нет никаких задач). Проклятие power management это программы, которые постоянно используют процессор всего на пару процентов. Они заставляют процессор постоянно просыпаться, разгоняться и снова останавливаться. Это идеальный способ уничтожить драгоценный заряд батареи. Если у кого-то есть время (просто оставьте их запущенными) — я бы посмотрел как сильно Spotify, Slack и Atom уменьшают время работы от батареи на современных ноутбуках. Это невероятно.
И нет, Spotify не проигрывает музыку. Он просто… запущен. Делает свои загадочные хромовские дела. И он тоже использует несколько процентов процессора. Просто, чтобы существовать.
(Во время написания этой заметки Chrome в отместку решил занять 100% ресурсов процессора. Во встроенном диспетчере задач это был загадочный процесс «Browser». Спасибо, Chrome.)
Если быть честным, то JavaScript вне браузера не является проблемой. На самом деле я думаю, что API, которые предоставляет современный веб гораздо лучше существующих API операционных систем. Мы должны ими пользоваться.
Но нам необходимо найти возможность использовать эти новые парадигмы (React и его друзья) на настольных платформах без необходимости запускать больше чертовых копий Chrome. Мне просто не настолько интересно ваше приложение, чтобы это оправдывало запуск очередного инстанса Chrome. Разработчику легко попасть в ловушку ощущения того, что ваше приложение или сайт это подарок человечеству и самое важное, чем они могут заниматься. Почему бы не воспользоваться избыточными ресурсами? Нам нужно бороться с таким образом мышления. Такой путь приводит к миру, где у нас не может быть хороших вещей. Такой путь приводит к миру, где батареи наших ноутбуков должны вырасти, чтобы обеспечивать питанием процессоры, чтобы они выполняли ещё больше бесполезной работы. Такой путь приводит к возвращению Shockwave Flash и нагревающихся в карманах телефонов, которые загадочным образом оказываются разряжены когда мы хотим ими воспользоваться. К паранойе по отношению к заряду батареи и закрытию приложений как только мы закончили с ними работать. (Я смотрю на вас, iTunes и Mischief.)
Разработчики, не позволяйте своим друзьям писать приложения на Electron. Если вы хотите использовать JS и React — воспользуйтесь React Native. Это как Electron, но только у вас нет необходимости распространять копию Chrome всем пользователям и запускать ещё одну копию Chrome чтобы использовать ваше приложение. Оказывается, современные операционные системы уже имеют хорошие и быстрые UI библиотеки. Используйте их, олухи!
Другой печальный факт это то, что даже многие разработчики и понятия не имеют что происходит в их компьютерах. Они пользуются Slack, но не знают насколько он прожорлив. Это твоя ответственность, как разработчика, знать всё это. Практикуйтесь. Изучите средства для профилирования. Воспользуйтесь iStatMeters или одним из бесплатных аналогов. Вы не можете улучшить то, что не измеряете.
Может, мы должны покупать более медленные компьютеры, чтобы почувствовать боль. Facebook намеренно ограничивала скорость интернета в своих офисах раз в неделю, чтобы вызвать сочувствие их пользователям в других странах третьего мира (кхе-Австралия-кхе). Может, как разработчики, мы должны тоже делать это со своими компьютерами, например, заставлять код работать гораздо медленнее, чем обычно, чтобы вооружиться интуицией в отношении производительности. Пару лет назад я оставил свой ноутбук на работе на долгие выходные. Вместо поездки за ним я решил подключить мой Raspberry Pi (чертовски медленное 1 поколение) и использовать его для разработки. Внезапно, множество операций, которые осуществлялись мгновенно на моём обычном ноутбуке с i7 стали ужасно медленными. И я потратил выходные, чтобы сделать свой рабочий процесс более гладким. Все эти твики производительности также переносятся и на обычные устройства. Уменьшение времени запуска с 5ти секунд до 2х на Raspberry Pi ощущалось невероятным прыжком. Это исправление точно так же стало прыжком с 0.5 секунд до 0.2 или вроде того. Это всё равно очень заметно для пользователя. Время запуска в 0.5 секунд достаточно мало, чтобы упустить этот факт при разработке, но падение до 0.2 очевидно ощущается как намного быстрее.
Пользователи: Пожалуйста, жалуйтесь на медленные программы. На дворе 2016 год (… — прим. пер.). Мы носим суперкомпьютеры в наших карманах. Для программ недопустимо быть медлительными.
Разработчики: Производительность имеет значение. Память имеет значение. Мне не важно, что ты самая привлекательная девушка на танцполе, Slack. Я закрываю тебя как только покидаю офис. Я удаляю тебя с компьютера как только имею такую возможность. Медлительность это баг. Самая быстрая программа это та, которую ты не запускаешь. Так что хватит встраивать целый Chrome в своё приложение.
И все вы, веб-разработчики: Выучите С или Rust или что-то в этом духе. Ваши программы выполняются на компьютере. Пока вы не знаете как работает компьютер вы обречены. И убирайтесь с моей лужайки пока не узнаете! *трясёт кулаком*
И да, почитайте про кризис ожирения сайтов (перевод на Habr). Это очень смешно. И очень грустно. И очень жизненно.
Edit: Spotify на самом деле использует Chromium Embedded Framework вместо запуска через Electron. Но он всё равно встраивает Chrome. Я не знал об этом когда писал статью, но не забираю свои слова по поводу конечной производительности.
