Введение в ElectronJS

Что такое ElectronJS?

ElectronJS - это фреймворк с открытым исходным кодом, который позволяет разработчикам создавать кроссплатформенные настольные приложения с использованием веб-технологий, таких как HTML, CSS и Javascript. Он был разработан и выпущен на GitHub в 2013 году и с тех пор завоевал огромную популярность среди разработчиков благодаря простоте использования и возможности создавать высокопроизводительные приложения, работающие на Windows, macOS и Linux.

Чем известен ElectronJS?

Одним из наиболее значимых преимуществ ElectronJS является то, что он позволяет разработчикам создавать настольные приложения с веб-основой. Это означает, что разработчики могут использовать те же навыки веб-разработки, которыми они уже обладают, для создания мощных настольных приложений, которые легко работают в различных операционных системах.

Еще одним ключевым преимуществом ElectronJS является то, что он предоставляет доступ к мощным нативным API, которые позволяют разработчикам создавать многофункциональные приложения. Разработчики могут использовать эти API для доступа к файловой системе, манипулирования окнами, создания иконок в системном трее и многого другого.

Когда был выпущен ElectronJS?

ElectronJS был первоначально выпущен под названием “Atom Shell” в 2013 году на GitHub. Целью было создание фреймворка для настольных приложений, который можно было бы использовать для создания редактора кода Atom. В 2016 году Atom Shell был переименован в ElectronJS и выпущен как проект с открытым исходным кодом.

Некоторые приложения, созданные с помощью ElectronJS

ElectronJS использовался для создания многих популярных настольных приложений. Некоторые из наиболее известных приложений, созданных с использованием ElectronJS, включают:

Visual Studio Code - популярный редактор кода
Slack - инструмент для совместной работы на экзамене
Discord - приложение для голосового и текстового чата для геймеров
Atom - настраиваемый текстовый редактор
Skype - приложение для голосовых и видеозвонков
Postman - популярный инструмент для разработки API
GitHub Desktop - графический пользовательский интерфейс для Git
Trello - инструмент продуктивности для организации задач и проектов
Microsoft Teams - платформа для общения и совместной работы
Figma - инструмент совместного проектирования для создания пользовательских интерфейсов и прототипов.

Использование ElectronJS

ElectronJS относительно прост в использовании, особенно для разработчиков, знакомых с веб-разработкой. Поскольку ElectronJS использует веб-технологии, разработчики могут использовать те же инструменты и библиотеки, которые они уже знают для создания настольных приложений! Кроме того, ElectronJS предоставляет массу встроенных функций и API, которые позволяют быстро создавать мощные приложения.

Давайте создадим быстрое настольное приложение

Здесь мы рассмотрим быструю настройку настольного приложения, которое является хорошим началом знакомства с ElectronJS.

Во-первых, нам нужно создать новый каталог и инициализировать его файлом package.json:

mkdir hello-world
cd hello-world
npm init -y

Далее нам нужно установить ElectronJS в качестве зависимости:

npm install electron

Теперь мы можем создать наш файл main.js, который будет содержать код для нашего окна:

First: touch main.js
Insert into main.js: 
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

Этот код устанавливает новое приложение ElectronJS с главным окном шириной 800 пикселей и высотой 600 пикселей.

Он также загружает в окно HTML-файл под названием “index.html”.
Мы можем создать этот файл в том же каталоге и добавить следующий код:

Create index.html: touch index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

В файле package.json вы хотите добавить скрипт для запуска вашего приложения:

"start": "electron ."

После выполнения этой команды должно появиться новое окно с текстом “Hello World!” в центре.

Заключение

ElectronJS - это мощный и универсальный фреймворк, который позволяет разработчикам создавать высокопроизводительные настольные приложения, используя веб-технологии. Он позволяет разработчикам легко перейти к созданию настольных приложений, а тот факт, что ElectronJS был большой частью некоторых повседневных приложений, которые мы, разработчики, используем, показывает нам, что мы тоже способны создавать удивительные приложения.

Поделиться: