Электрон состоит из трех основных компонентов:

  • 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-инструментом на рынке!

Удачного кодирования!