Создание кроссплатформенных настольных приложений может быть затруднено. Это требует от вас знания конкретных инструментов и технологий для каждой платформы, на которую вы хотите ориентироваться. Разве не было бы замечательно, если бы вы могли писать и поддерживать единую кодовую базу с вашими существующими навыками веб-разработки? Электрон поможет вам сделать это. Это основа для создания кроссплатформенных настольных приложений с использованием JavaScript, HTML и CSS.
Изначально Electron не был отдельным проектом, он был построен для переноса текстового редактора Atom для Mac на разные платформы. Команда Atom в GitHub опробовала такие решения, как Chromium Embedded Framework ( CEF ) и node-webkit (теперь известный как NW.js), но ничего не получалось. Именно тогда Чен Чжао, инженер GitHub, начал новый проект и переписал node-webkit с нуля. Этот проект был Atom Shell, который мы теперь знаем как Электрон. Atom Shell был создан с открытым исходным кодом в 2014 году и переименован в Electron в мае 2015 года.
Чтобы понять, почему так много компаний внедряют Electron, мы приводим слова Дениса Вуйка, опытного программиста и автора книги Electron Projects . Он также рассказывает о том, когда вам следует выбрать Electron, лучшие практики для создания безопасных приложений Electron и многое другое.
Electron Projects — это руководство на основе проектов, которое поможет вам изучить компоненты инфраструктуры Electron и ее интеграцию с другими библиотеками JS для создания 12 реальных приложений с возрастающим уровнем сложности.
Когда Electron лучшая решении, а когда нет!
Многие популярные приложения создаются с использованием Electron, включая VSCode, GitHub Desktop и Slack. Это позволяет разработчикам быстро внедрять новые функции, а также поддерживать кроссплатформенность. Вуйка говорит: «Стоимость и скорость разработки, повторное использование кода — вот основные причины, по которым стоит использовать Electron. Компании могут эффективно использовать существующий код для создания «десктопных» приложений, которые выглядят и ведут себя одинаково на всех платформах. Не нужно иметь отдельные команды разработчиков для разных платформ».
Также Вуйка поведал о том, почему он выбрал Electron: «Исторически я занимался разработкой приложений, для традиционных платформ Windows и Linux. Я не хотел изучать другой стек только для сборки под macOS, поэтому оболочка Electron с веб-контентом была чрезвычайно привлекательной».
«Electron — это хороший выбор, если вы хотите иметь единую кодовую базу и единую команду разработчиков, работающую со всеми основными платформами. Веб-разработчики должны иметь минимальную кривую обучения, чтобы начать разработку на Electron. И кодовая база приложения для настольного компьютера, также может быть использована совместно с веб-сайтом. Это экономит огромное количество времени и денег. Кроме того, интеграция Node.js с миллионами полезных пакетов охватывает все возможные сценарии».
Случай, когда это не удачный выбор, — «если вы просто пытаетесь обернуть функциональность веб-сайта в оболочку рабочего стола. Самым большим преимуществом приложений Electron является доступ к локальной файловой системе и оборудованию».
Приложение Building Electron с использованием Angular, React, Vue
Electron интегрируется со всеми тремя наиболее популярными средами JavaScript: React, Vue и Angular. Все они имеют свои плюсы и минусы. Если вы работаете на JavaScript — React, вероятно, будет хорошим вариантом, поскольку он намного меньше абстрагируется от ванильного JS. Другие преимущества в том, что он очень гибкий, вы можете расширить его основные функции, добавив библиотеки. Vue — это легкий фреймворк, который легче освоить и стать продуктивным. Angular обладает исключительной поддержкой TypeScript и включает внедрение зависимостей, Http-сервисы, интернационализацию, каналы форматирования, рендеринг на стороне сервера, CLI, анимацию и многое другое.
Когда дело доходит до Electron, выбор одного из них зависит от того, какая структура вам удобна и что соответствует вашим потребностям. Вуйка рекомендует: «Существует три довольно крупных лагеря разработчиков: React, Angular и Vue. Все они сосредоточены на веб-компонентах и клиентских приложениях, поэтому если говорить о компаниях, то это вопрос личных предпочтений или так сложилось исторически. Кроме того, каждая инфраструктура JavaScript имеет более одного набора зрелых библиотек пользовательского интерфейса и систем проектирования, поэтому всегда есть варианты на выбор. Для начинающих разработчиков Денис Вуйка рекомендует: «Имейте в виду, что это все еще веб-стек. Выберите то, что вам удобно для создания веб-приложения».
В книге Vuika, Electron Projects, есть специальная глава «Интеграция приложений Electron, с Angular, React и Vue», чтобы помочь вам научиться интегрировать их с вашими приложениями на Electron.
Советы по созданию эффективных и безопасных приложений.
Основными компонентами Electron являются Chromium, точнее библиотека libchromiumcontent, Node.js и движок Chromium Google V8 javascript. Каждое приложение Electron поставляется с собственной изолированной копией Chromium, что может повлиять на объем памяти и размер пакета. Говоря о других причинах выбора Electron, Вуйка сказал: «Он занимает некоторое место в памяти, но, исходя из моего личного опыта, большинство проблем с памятью обычно связаны с реализацией приложений и управлением ресурсами, а не с самой оболочкой Electron».
Вот некоторые из лучших рекомендаций, которые предлагает команда разработчиков Electron: изучение модулей и их зависимостей перед добавлением в ваши приложения, в частности, обеспечение того, чтобы основной процесс не блокировался. Вы можете найти полный контрольный список на официальном сайте Electron.
Вуйка предлагает: «Разработчики Electron имеют весь набор инструментов для разработки, который они используют для веб-разработки : Chrome Developer Tools с отладчиками, профилировщиками и многими другими замечательными функциями. Существуют также инструменты сборки для каждой среды интерфейса, которые позволяют минимизировать, разделять код и расшатывать дерево. Библиотеки маршрутизации позволяют загружать только тот контент, который нужен пользователю в определенный момент. Множество областей для улучшения потребления памяти и ресурсов». В последнее время некоторые разработчики также начали использовать Rust и также рекомендуют использовать WebAssembly с Electron, чтобы минимизировать болевые точки Electron, наслаждаясь его преимуществами.
Говоря о безопасности, Вуйка объясняет: «С Electron веб-приложение может иметь практически полный доступ к локальной файловой системе и ресурсам операционной системы с помощью процесса Node.js. Разработчики должны быть очень осторожны, доверяя веб-контенту, особенно если он использует удаленно предоставляемый контент HTML».
«Команда Electron недавно опубликовала очень хорошую статью о безопасности, которую я настоятельно рекомендую прочитать и оставить в закладках. В этой статье рассказывается об основных подводных камнях безопасности, а также о способах защиты ваших приложений», — рекомендует он.
Между тем, Electron улучшается с каждым последующим обновлением. Начиная с Electron 6.0, команда приступила к созданию «основы для будущего релиза, чтобы собственные модули Node, загружаемые в процессе рендеринга, были либо N-API, либо Context Aware». Ожидается, что это обновление появится в Electron 11.0.
