как собрать 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-приложений
Кое-кто люто ненавидит Electron-приложения. То, что приложение включает в себя браузер Chromium, кажется, мягко говоря, странным. Это ощущение усиливается в ходе работы с такими приложениями. Они потребляют много памяти, медленно загружаются и не отличаются особенно высокой скоростью реакции на воздействия пользователя. Непросто разработать хорошее приложение для веба. Зачем же веб-технологии притащили в настольную среду? Ведь возникает такое ощущение, что в этой среде они создают кучу проблем?
Некоторые из проблем Electron (большие размеры файлов, медленная загрузка) являются наследием технологий, на которых основана эта платформа. Их надо решать на низком уровне. Более серьёзные проблемы (потребление памяти, неповоротливость интерфейсов) могут быть решены на том уровне, на котором разрабатывают Electron-приложения. Однако решать эти проблемы непросто. Что если есть некий секрет, зная который можно, в автоматическом режиме, минимизировать эти недостатки?
Если вы любите читать программный код — можете сразу же заглянуть в этот репозиторий. Тут находится проект, который будет рассмотрен в этом материале.
Суть секрета
Секрет разработки качественных Electron-приложений заключается в выполнении основного объёма вычислений на локальной системе, в фоновых процессах. Чем меньше вы полагаетесь на облачные сервисы, и чем больше работы выносите в фоновые процессы, тем сильнее вы сможете ощутить следующие позитивные эффекты:
Взгляните на то, какой объём памяти потребляет моё Electron-приложение — менеджер личных финансов Actual. Эта программа хранит все свои данные локально. Синхронизация данных между разными устройствами — это необязательная возможность, она не влияет на основной функционал. Полагаю, если учитывать то, что это приложение предназначено для работы с большими объёмами данных, его показатели потребления памяти говорят сами за себя.
Потребление памяти приложением Actual
Приложение, которое не выполняет каких-либо активных действий, занимает, в целом, 239.1 Мб памяти. Этот показатель может быть и больше, он зависит от того, что именно происходит в приложении, но за базу можно принять именно указанное число. Это — не идеально, но не так уж и плохо. По крайней мере — лучше, чем те 1371 Мб памяти, которые требуются на моём компьютере Slack. Надо сказать, что Slack — это нетипичный пример Electron-приложения, характеризующийся специфическими проблемами. Вокруг Electron из-за Slack поднялась некоторая шумиха. Другие приложения, вроде Notion или Airtable, потребляют примерно 400-600 Мб памяти. А это значит, что моё приложение неплохо выигрывает в этом плане и у них.
Надо сказать, что показатель в 239.1 Мб получен мной до проведения каких-либо оптимизаций. Я планирую переписать некоторые из чрезвычайно важных и требовательных к памяти фрагментов приложения на Rust. Это должно значительно уменьшить потребности приложения в памяти.
Фоновый сервер может оптимизировать собственное потребление памяти, загружая в память только нужные в некий момент времени данные. Лучше всего для хранения данных пользоваться чем-то вроде SQLite. Эта СУБД уже серьёзно оптимизирована для решения подобных задач (серьёзно — просто пользуйтесь SQLite). Кроме того, надо отметить, что перемещение различных вычислений в фоновые процессы позволяет пользовательскому интерфейсу приложения реагировать на воздействия пользователя настолько быстро, насколько это возможно.
Оказалось, что использование в Electron-приложении фонового сервера даёт разработчику интереснейшие возможности. В следующем разделе мы поговорим обо всех тех невероятных вещах, которые можно делать с его использованием.
Даже если ваше приложение серьёзно завязано на облачные данные — вам может понадобиться фоновый процесс в том случае, если вы собираетесь работать с API Node.js. Спокойно взаимодействовать с этими API можно только из фоновых процессов. Собственно говоря, каким бы ни было ваше Electron-приложение, я полагаю, что знакомство с проектом, который мы сейчас рассмотрим, способно дать вам какие-то полезные идеи.
Приложение electron-with-server-example
Я создал приложение electron-with-server-example для того чтобы на его примере показать всё, что нужно настроить для разработки по-настоящему локальных Electron-приложений. Сделал я это в стремлении увлечь программистов созданием подобных проектов. Мне бы хотелось встретить подобный проект в то время, когда я только начинал работать с Electron.
Клиентская и серверная части приложения
Да, так оно и есть. После того, как я научился запускать фоновые процессы, я понял, во-первых, то, что в моём распоряжении имеются инструменты разработчика Chromium. А во-вторых — я понял, что я, в отладочных целях, могу пользоваться ими для отладки Node.js-кода. В результате я и говорю о том, что с Node.js можно взаимодействовать через браузер. Это позволяет использовать богатый набор инструментов разработчика браузера, основанного на Chromium, для отладки серверного кода.
А теперь давайте посмотрим на всё то интересное, что мы можем сделать благодаря применению вышеописанной схемы запуска приложения.
Использование консоли
Я добавил в файл server-ipc.js команды логирования запросов и ответов. Исследовать их я могу с помощью консоли браузера.
Отладка Node.js-приложения в консоли браузера
Пошаговое выполнение кода
При отладке серверной части приложения с помощью браузера можно пользоваться пошаговым выполнением кода. Нельзя сказать, что это нечто совершенно фантастическое. Но очень удобно то, что эта возможность всегда под рукой и не требует использования дополнительных программ.
Пошаговое выполнение кода
Профилирование
Возможно это — мой любимый инструмент. Речь идёт о блестящем стандартном средстве для исследования производительности кода, которое позволяет профилировать серверную часть приложения.
Исследование производительности серверного кода
С помощью инструментов разработчика браузера можно даже исследовать то, что происходит при запуске фонового процесса (это, скорее всего, самая «тяжёлая» часть запуска приложения).
Для того чтобы это сделать достаточно запустить процесс записи показателей и перезагрузить окно. Перезагрузка приведёт к перезапуску сервера. Это ведёт нас к следующему шагу.
Перезагрузка сервера с помощью комбинации клавиш Cmd+R или Ctrl+R
Ещё одна из возможностей отладки серверного кода в браузере заключается в том, что, так как отладка сервера выполняется в окне браузера, простая перезагрузка содержимого окна приводит к перезапуску сервера! Достаточно воспользоваться комбинацией клавиш Cmd+R (или, для Windows, Ctrl+R ), и в вашем распоряжении оказываются самые свежие изменения, внесённые в серверный код. При этом данные фронтенда сохраняются. Это значит, что с клиентской частью приложения можно продолжить работу, но, после перезапуска сервера, клиентская часть уже будет работать с новой версией серверного кода. Это напоминает нечто вроде «горячей» замены кода на работающем сервере.
Исследование работающей серверной части приложения и «горячая» замена кода
Обычно я, отлаживая сервер, просто добавляю в нужные места кода команды console.log() и перезапускаю его. Но иногда, в особо сложных случаях, бывает так, что крайне полезно было бы заглянуть в то, что происходит в работающем сервере, а не перезагружать его. Возможно, что и не только «заглянуть» внутрь сервера, но и что-то в нём поменять для того чтобы посмотреть на то, как это повлияет на проблему.
Создадим систему для хранения состояния сервера. В нашем случае это будет список всех данных, переданных функции make-factorial (серверное состояние реального приложения будет устроено гораздо сложнее):
Исследование состояния сервера
Итоги
Взгляните на репозиторий electron-with-server-example для того, чтобы почитать о деталях реализации проекта и посмотреть код серверной части Electron-приложения.
Если вы пользуетесь Visual Studio Code, то вы, возможно, привыкли к качественной интеграции инструментов разработчика с Node.js-сервером. При таком подходе вы можете самостоятельно, отдельно от Electron-приложения, запустить сервер. После этого можно сообщить Electron о том, что нужно подключиться к процессу, владельцем которого является VS Code. Однако я предпочитаю использовать существующие инструменты разработки Electron.
Это означает, что у программиста появляется возможность применять любые сторонние инструменты для редактирования кода и при этом иметь полный доступ ко всем инструментам разработчика браузера.
Последние несколько лет я, разрабатывая приложение Actual, постоянно пользуюсь тем, о чём только что рассказал. И хочу сказать, что всё это мне очень нравится. Возможно, работа над Node.js-частью этого приложения стала источником самых приятных из когда-либо испытанных мной впечатлений от программирования.
Кроме того, очень важно то, что вышеописанные принципы помогают нам разрабатывать по-настоящему локальные приложения. Все необходимые для этого технологии у нас уже есть. Главное — правильно ими воспользоваться.
Уважаемые читатели! Как вы относитесь к приложениям, основанным на Electron?
Electron: от мотивации до публикации
— Хотел бы я иметь приложение, которое умеет что-то такое, что мне надо. Жаль такого нет.
— А почему бы тебе его самому не написать?
— Это сложно, мне потребуется куча времени, чтобы понять теорию, приступить к практике и, скорее всего, ничего хорошего не выйдет. А вообще я frontend-разработчик и привык к HTML, CSS и JS. Этот стек не позволяет писать десктопные приложения.
— Electron!
Уверен, большинство из нас обмениваются скриншотами. Существует большое количество приложений, способных делать скриншоты и как-то их редактировать (обрезать, рисовать что-то итд). Первые 3, которые мне приходят на ум: Joxy, Monosnap, Gyazo.
Казалось бы, чего ещё желать, когда есть задача и инструменты для неё? Но нет, всё не так просто.
Критерии, по которым я искал приложение
Сохранение скриншота на сервере
Намного удобнее скинуть ссылку на скриншот, чем искать, куда приложение сохранило картинку, а потом прикреплять её. Конечно, некоторым не понравится идея хранить скриншоты неизвестно где. Но, с другой стороны, это позволяет быстро решить задачу — поделиться скриншотом. Такая модель поведения приложения мне вполне подходит.
Рисование на скриншоте
По своему опыту могу сказать, что стрелка у меня присутствует чуть ли не на каждом скриншоте. Намного проще указать на какую-то деталь, чем писать что-то вроде: «Вот эта вот штука между. ». Также в стандартный набор инструментов для рисования на скриншоте, по моему мнению, должны входить карандаш, прямоугольник и текст. При этом должна присутствовать возможность переместить, перевернуть и удалить нарисованный элемент.
Версия для Linux
Как оказалось, не так и много приложений существует для этой задачи под Linux. Долгое время я использовал Gyazo и использовал бы дальше, если бы за «рисовашки» на скриншоте не приходилось платить.
Из коробки
Приложение должно сразу работать так как мне надо. Я не хочу что-либо настраивать, регистрироваться на всяких Imgur и т. д. Просто хочу захватить скриншот, кропнуть, сохранить и поделиться ссылкой на него.
На протяжении года я периодически занимался поиском, но в итоге так и не нашёл приложение, удовлетворяющее моим требованиям.
Electron
Время шло и я решил поближе познакомиться с Electron, чтобы понять что он умеет в принципе. Для тех кто не в курсе, Electron — технология, позволяющая создавать десктопные приложения, используя HTML, CSS и JavaScript.
И вот одной из демок демонстрировалось получение скриншота экрана пользователя. Это означало следующее:
Куда идти, с чего начать, как оно работает
Эти вопросы я задаю себе каждый раз, когда хочу изучить что-то новое. Зачастую решение одно и то же — документация и какой-нибудь официальный «Get started». У Electron и с тем, и с другим всё в полном порядке. По крайней мере они так пишут на сайте проекта — «It’s easier than you think». Это действительно так! Единственное, что надо сразу понять — приложение составляют 2 процесса: Main и Renderer. В Main мы работаем с окнами приложения, меню и т.д., а в Renderer у нас по-сути просто наша страничка.
С чего начать приложение
Сперва давайте создадим проект со следующей структурой:
— package,json
— main.js
— scripts
— renderer.js
Что в итоге мы сделали? Мы подключили Electron, создали само приложение и описали два обработчика. Когда наше приложение будет готово, мы вызовем функцию создания нового окна. А в тот момент, когда все окна будут закрыты — убьём процесс приложения.
Окей, теперь у нас есть сам процесс приложения. Теперь хотелось бы создать для него окно. Помните мы вызывали функцию createWindow();? Так вот пришла пора описать её.
Также необходимо подключить:
Таким образом мы создали окно с заданными размерами. Очень просто, не правда ли?
У окна есть очень много свойств, методов и событий, связанных с ним. К примеру: title, icon, x, y, show(), hide(), close(), minimize, closed, restore, resize. Перечислять весь список бесполезно, поэтому вот ссылка на Browser WIndow.
Но смотреть на пустое окошко не очень весело, да? Давайте подгрузим туда какую-нибудь простую страничку, которая содержит заголовок «Hello, world!». На уровне с main.js создаём файл index.html, который выглядит как самая обычная страница с
Hello, World!
Запускаем наше приложение и видим:
Прям какая-то магия 🙂 Но на секундочку о грустном.
Дебаг
Пока что всё что мы получили — это страничка в окне. Хочется как-то взаимодействовать с ней, к примеру, с помощью меню. Для этого в Electron есть специальный класс Menu. Поставим себе задачу — создать меню из одного элемента, при нажатии на который мы увидим системное всплывающее окно с тайтлом «Hello», сообщением: «Do you like this?» и вариантами ответа [‘Yes’, ‘No’].
И создаём файл appMenu.js в директории scripts. Внутри себя он содержит следующий код:
Идём далее. В app.on(‘ready’. дописываем:
После запуска приложения мы увидим, что наше меню стало меньше и теперь содержит один элемент. Нажав на него, мы увидим следующее:
Согласитесь, не очень удобно каждый раз заходить в меню за инструментами которые вы часто используете (кроп, стрелка и т.д.). Решить данную проблему можно созданием панельки в области страницы, на которую их и вынести. Уже удобнее (не надо пробираться через громоздкое меню), но всё ещё не идеально (тянуться-то надо).
Можно лучше?
Конечно, можно! Давайте использовать контекстное меню. Его будет вызывать клик правой кнопкой мыши в области окна. Такое меню будет состоять из пунктов, каждый из которых при нажатии вызовет свою функцию. К примеру, я разместил в этом меню следующие элементы:
Этот набор инструментов даст воспользоваться практически всеми возможностями приложения.
А может ещё лучше?
Общение процессов
Как видите, всё очень просто!
Полезно чтобы приложение не висело свёрнутым или, что хуже, было просто открыто. Для решения этой проблемы существует трей. И Electron даёт возможность поработать и с ним через класс Tray.
Что по сути такое приложение в трее? Это иконка и меню, вызываемое кликом правой клавиши мыши. Интересно подметить, что конструктор класса Tray принимает ровно один параметр — иконку. Если этот параметр отсутствует, то будет выброшена ошибка. Сначала это ничуть меня не удивило. Есть в конструкторе обязательный параметр, будь добр — передай. Чуть позже расскажу почему в дальнейшем обязательность этого параметра мне показалась странной.
Иконка приложения
Моя страничка может достучаться до системы?
Очень важно понимать, что ваше приложение на Electron — это не просто страничка в стандартном окошке, а вполне себе полноценное приложение.
«There is no built-in support for auto-updater on Linux, so it is recommended to use the distribution’s package manager to update your app».
Проще говоря, на LInux это не работает, так что выкручивайтесь. Например, я делаю запрос на сервер, который возвращает мне номер текущей актуальной версии и, если он не совпадает с версией приложения, вывожу сообщение с просьбой его обновить.
Подводные камни
Вроде, звучит всё круто, должен же быть подвох. Безусловно, есть некоторые неприятные моменты:
Не всё кроссплатформенно
Minimize
Очень много времени я потратил на разрешение проблемы с этим. Суть её такова: когда мы сворачиваем окно приложения — срабатывает событие minimize, и окно сворачивается. Вроде всё окей. Но приложение, висящее и в трее, и в доке — это уже странно. Поэтому хотелось бы отлавливать minimize и как-то убирать приложение из дока, оставляя лишь в трее. Для этого есть метод hide(). Пишем обработчик для minimize, вызываем hide — всё отлично. Затем я захотел добавить возможность из меню трея развернуть приложение обратно, и сразу же нашёл метод show(). Всё логично show/hide, но нет. Когда я пытаюсь развернуть приложение из трея, оно намертво зависает. Очень долго я думал, что упускаю что-то важное, но никаких ошибок в консоли не видел. В том числе, выводил само окно перед тем как вызывать show() — окно существует. В общем, отказался от подобного механизма работы приложения и решил попробовать вызвать hide(), когда окно приложения открыто. И да, чудо свершилось. Всё заработало ровно так, как надо. Несколько часов было потрачено на поиск ответа на вопрос: «Да почему ты не работаешь?», а в итоге решение мне подсказал Telegram. Я просто добавил в меню пункт «minimize to tray», а заодно и хоткей повесил на него.
В общем-то для меня подводные камни Electron’а закончились. Скорее всего, мне просто повезло…
Сборка
Настало время поговорить об ещё одной достаточно занимательной вещи — сборке. Electron даёт вам возможность собрать своё приложение и потом проинсталлировать его в различных ОС. Пользователь даже может не догадываться что вы написали своё приложение на web-технологиях. Давайте приступим!
Стандартный подход
На официальном сайте в разделе документации есть 3 ссылки на инструкции по сборке (Linux, MacOS, WIndows). Так как приложение изначально затачивалось под Linux, то сначала я открыл ссылку для него. Первое системное требование сразу же напугало меня: «At least 25GB disk space and 8GB RAM» (не менее 25GB свободного места и 8GB оперативки). «Ладно, что поделать?» — подумал я и начал пытаться собрать приложение из примера. В итоге, сам процесс сборки занял у меня минут 20-30, более того, пользоваться компьютером было невозможно! Я очень рад, что не продолжил работать с этим сборщиком, т.к. узнал об одной пренеприятнейшей вещи: чтобы собрать приложение под какую-то ось, его надо собирать именно из под этой оси!
«Должен быть другой способ,» — говорил я себе. И да, действительно он существует.
Electron builder
Достаточно было просто загуглить «electron builder» и перейти по первой ссылке. С тех самых пор я и использую это сборщик, и вот почему:
Всё что вам остаётся — правильно дополнить свой проект.
Подготовка проекта
Этот процесс можно разбить на 2 этапа:
Иконки
Приложения, будучи установленными, хотят иметь свои иконки. Для этого в корневой директории проекта необходимо создать директорию «build», которую заполнить по следующей схеме:
— build
—— icons
——— 32×32.png
——— 32×32.png.ico
—— icon.icns
—— icon.ico
Package.json
Если вы просто попробуете собрать свой проект, то консоль начнёт плеваться в вас ошибками. Это происходит по той причине, что в файле должны содержаться стандартные строки:
Затем надо описать «build» и «scripts». Я намеренно быстро пробежался по этим двум пунктам, т.к. запоминать, что внутри, не требуется, да и вряд ли возможно, особенно если учесть, что есть огромное количество настроек (для «build»), которые могут зависеть от ОС, к которой он и собирается. Например, для Windows можно собрать portable-версию своего приложения и указать gif-файл, который будет отображаться в момент запуска.
В общем, рекомендую использовать именно Electron builder для сборки. Это сэкономит вам кучу нервов, поверьте.
Добавляем своё приложение на сайт Electron
Я считаю неплохой идеей рассказать о своём проекте на Electron на сайте самого Electron. Для этого достаточно послать им pull request, содержащий:
Опять же, в этом нет ничего сложного. После отправки pr необходимо лишь запастись терпением и ждать когда его примут (в моём случае это заняло около недели).
Подробную инструкцию по добавлению можно найти здесь.
Подводя итог
Первый коммит был сделан 24 сентября 2016 года, а первый релиз вышел 17 октября того же года. Это значит, что спустя всего 24 дня я получил версию приложения, которую уже можно было использовать. Это достаточно быстро, если учесть, что я работаю и люблю отдыхать. Так что вперёд, всё в ваших руках!