Электрон состоит из трех основных компонентов:
- Chromium, который обрабатывает весь веб-контент
- Node.js, который обрабатывает взаимодействие с операционной системой.
- Пользовательские API для дополнительной функциональности и решения распространенных проблем при работе с ОС.
Все эти компоненты работают вместе, чтобы упростить настольное приложение.
Кроме того, Electron включает в себя два основных процесса. Основной процесс занимается управлением окнами, всеми взаимодействиями с ОС, а процесс рендеринга отвечает за веб-контент.
Процесс рендерера не может напрямую взаимодействовать с ОС и общается с ней только через процесс Main. В зависимости от приложения может быть несколько процессов визуализации для одного основного процесса. Однако в большинстве случаев используется один основной процесс с одним рендерером, который используется для загрузки веб-приложения.
Разобравшись с объяснением, давайте начнем строить.
Настройка нашего проекта
Чтобы использовать Electron, в вашей среде должен быть установлен Node.js. Мы можем начать с создания нашего проекта npm, запустив
npm init
После настройки нашего проекта мы можем установить Electron с помощью:
npm i -D electron@latest
Создание электронного приложения
Для нашего приложения Electron мы собираемся использовать простую HTML-страницу, чтобы упростить игру в понг. Таким образом, нам просто нужно сосредоточиться на аспектах приложения Electron, а не на самой игре.
Пару недель назад мы сделали Pong, написав всего 100 строк кода, так что мы будем использовать этот проект повторно.
Мы создадим два файла в папке нашего проекта index.js
, которые будут действовать как наш основной процесс узла, и pong.html, который будет действовать как процесс рендеринга для загрузки данных о погоде.
Файл index.js облегчит создание окна для приложения и загрузит соответствующий процесс визуализации. В этом случае наш файл pong.html будет выглядеть так:
Теперь мы можем запустить наше приложение локально с помощью:
electron index.js
И вот оно! Наш HTML-файл работает изначально!
Заключение
Растущая популярность Electron делает его обязательным для начинающих разработчиков. Не говоря уже о том, что если вы веб-разработчик и хотите быстро создать нативную версию своего веб-сайта, Electron, вероятно, будет лучшим вариантом.
Если вы создаете программное обеспечение и хотите устранить узкие места, обратите внимание на Codesphere для ваших потребностей в облачном сервисе! Мы делаем Codesphere самым интуитивным облачным и devops-инструментом на рынке!
Удачного кодирования!