Пишем настольное JS-приложение с Electron


Оглавление (нажмите, чтобы открыть):

Пишем настольное JS-приложение с Electron

Ваше первое приложение на Electron

Electron позволяет создавать десктоп-приложения на чистом JavaScript, предоставляя среду выполнения с богатым выбором нативных API (взаимодействующих с операционной системой). Electron можно рассматривать как среду выполнения, схожую с Node.js, но которая ориентирована на десктоп-приложения, а не веб-серверы.

Это не значит, что Electron представляет собой JavaScript, который связывает код с библиотеками графического пользовательского интерфейса (GUI). Вместо этого, Electron использует веб-страницы для создания GUI, и поэтому Electron можно рассматривать как мини браузер Chromium, управляемый с помощью JavaScript.

Примечание: Данный пример также доступен в качестве репозитория который вы можете скачать и запустить прямо сейчас.

Если посмотреть на приложение, созданное на базе Electron, то оно по своей сути является Node.js приложением. Начальной точкой приложения является package.json файл, идентичный одноименному модулю Node.js. Самое простое Electron приложение будет иметь следующую структуру папок:

Теперь давайте создадим пустую папку для вашего Electron приложения. Для этого откройте свой клиент командной строки и запустите npm init из папки, созданной ранее.

npm будет вести вас на протяжении создания базового package.json файла. Скрипт, указанный в поле main , является стартовым скриптом для вашего приложения, который будет запускать весь процесс. Например, ваш файл package.json может выглядеть следующим образом:

Примечание: Если в package.json отсутствует поле main , тогда Electron сделает попытку загрузить index.js (так же, как и Node.js). Если это было простое Node приложение, вам нужно добавить start скрипт, который будет «говорить» node выполнить текущий пакет:

Превратить такое Node приложение в Electron приложение довольно-таки легко — нужно заменить node в поле start на electron .

Сейчас вам нужно будет установить сам electron . Рекомендуемым для этого путем является его установка в качестве зависимости в вашем приложении, что позволяет вам работать с многими приложениями, используя разные версии Electron. Для этого вам нужно запустить следующую команду из директории вашего приложения:

Также существуют другие способы установки Electron. Пожалуйста, посетите гайд по установке для получения дополнительных знаний об использовании прокси, зеркал и собственных кэшей.

Разработка Electron в двух словах

Разработка Electron приложения ведется на JavaScript, при использовании тех же принципов и методов, которые можно найти в разработке на Node.js. Все особенности API и сам API Electron’а доступен через electron модуль, который может быть использован как и любой Node.js модуль:

Модуль electron предоставляет специальные особенности в пространстве имен (namespaces). Например жизненный цикл приложения контролируется через electron.app , окна могут быть созданы при использовании класса electron.BrowserWindow . Простой файл main.js может просто ждать пока приложение не будет готово и после этого открыть окно приложения:

Файл main.js должен создавать окна и перехватывать все события системы, с которыми ваше приложение может столкнуться. Более сложная версия примера выше должна открывать инструменты разработчика, ждать когда окно будет закрыто или открыто заново на macOS если пользователь кликнул на иконку приложения.

Наконец index.html — веб-страница, которую вы хотите показать:

Запуск Вашего приложения

Создав файлы main.js , index.html , и package.json , вы можете попробовать запустить свое приложение, написав npm start в командной строке из директории, где ваше приложение находится.

Попробуйте этот пример

Склонируйте и запустите код, приведенный в данном обучающем посте, из electron/electron-quick-start репозитория.

Заметка: Для запуска требуется Git и npm.

Посетите Boilerplates and CLIs documentation для получения списка шаблонов и инструментов для быстрого старта вашей разработки.

Документация Electron 7.1.1

Docs / Gu > electron@master (d3622f)

Ваше первое приложение на Electron

Electron позволяет создавать десктоп-приложения на чистом JavaScript, предоставляя среду выполнения с богатым выбором нативных API (взаимодействующих с операционной системой). Electron можно рассматривать как среду выполнения, схожую с Node.js, но которая ориентирована на десктоп-приложения, а не веб-серверы.

Это не значит, что Electron представляет собой JavaScript, который связывает код с библиотеками графического пользовательского интерфейса (GUI). Вместо этого, Electron использует веб-страницы для создания GUI, и поэтому Electron можно рассматривать как мини браузер Chromium, управляемый с помощью JavaScript.

Примечание: Данный пример также доступен в качестве репозитория который вы можете скачать и запустить прямо сейчас.

Если посмотреть на приложение, созданное на базе Electron, то оно по своей сути является Node.js приложением. Начальной точкой приложения является package.json файл, идентичный одноименному модулю Node.js. Самое простое Electron приложение будет иметь следующую структуру папок:

Теперь давайте создадим пустую папку для вашего Electron приложения. Для этого откройте свой клиент командной строки и запустите npm init из папки, созданной ранее.

npm будет вести вас на протяжении создания базового package.json файла. Скрипт, указанный в поле main , является стартовым скриптом для вашего приложения, который будет запускать весь процесс. Например, ваш файл package.json может выглядеть следующим образом:

Примечание: Если в package.json отсутствует поле main , тогда Electron сделает попытку загрузить index.js (так же, как и Node.js). Если это было простое Node приложение, вам нужно добавить start скрипт, который будет «говорить» node выполнить текущий пакет:

Превратить такое Node приложение в Electron приложение довольно-таки легко — нужно заменить node в поле start на electron .

Writing Your First Electron App

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn’t mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

Note: This example is also available as a repository you can download and run immediately.

As far as development is concerned, an Electron application is essentially a Node.js application. The starting point is a package.json that is identical to that of a Node.js module. A most basic Electron app would have the following folder structure:

Create a new empty folder for your new Electron application. Open up your command line client and run npm init from that very folder.


npm will guide you through creating a basic package.json file. The script specified by the main field is the startup script of your app, which will run the main process. An example of your package.json might look like this:

Note: If the main field is not present in package.json , Electron will attempt to load an index.js (as Node.js does). If this was actually a simple Node application, you would add a start script that instructs node to execute the current package:

Turning this Node application into an Electron application is quite simple — we merely replace the node runtime with the electron runtime.

Установка Electron

Сейчас вам нужно будет установить сам electron . Рекомендуемым для этого путем является его установка в качестве зависимости в вашем приложении, что позволяет вам работать с многими приложениями, используя разные версии Electron. Для этого вам нужно запустить следующую команду из директории вашего приложения:

Также существуют другие способы установки Electron. Пожалуйста, посетите гайд по установке для получения дополнительных знаний об использовании прокси, зеркал и собственных кэшей.

Installing Electron

At this point, you’ll need to install electron itself. The recommended way of doing so is to install it as a development dependency in your app, which allows you to work on multiple apps with different Electron versions. To do so, run the following command from your app’s directory:

Other means for installing Electron exist. Please consult the installation guide to learn about use with proxies, mirrors, and custom caches.

Разработка Electron в двух словах

Разработка Electron приложения ведется на JavaScript, при использовании тех же принципов и методов, которые можно найти в разработке на Node.js. Все особенности API и сам API Electron’а доступен через electron модуль, который может быть использован как и любой Node.js модуль:

Модуль electron предоставляет специальные особенности в пространстве имен (namespaces). Например жизненный цикл приложения контролируется через electron.app , окна могут быть созданы при использовании класса electron.BrowserWindow . Простой файл main.js может просто ждать пока приложение не будет готово и после этого открыть окно приложения:

Файл main.js должен создавать окна и перехватывать все события системы, с которыми ваше приложение может столкнуться. Более сложная версия примера выше должна открывать инструменты разработчика, ждать когда окно будет закрыто или открыто заново на macOS если пользователь кликнул на иконку приложения.

Наконец index.html — веб-страница, которую вы хотите показать:

Electron Development in a Nutshell

Electron apps are developed in JavaScript using the same principles and methods found in Node.js development. All APIs and features found in Electron are accessible through the electron module, which can be required like any other Node.js module:

The electron module exposes features in namespaces. As examples, the lifecycle of the application is managed through electron.app , windows can be created using the electron.BrowserWindow class. A simple main.js file might wait for the application to be ready and open a window:

The main.js should create windows and handle all the system events your application might encounter. A more complete version of the above example might open developer tools, handle the window being closed, or re-create windows on macOS if the user clicks on the app’s icon in the dock.

Finally the index.html is the web page you want to show:

Мастер Йода рекомендует:  Основы Oracle

Запуск Вашего приложения

Создав файлы main.js , index.html , и package.json , вы можете попробовать запустить свое приложение, написав npm start в командной строке из директории, где ваше приложение находится.

Running Your App

Once you’ve created your initial main.js , index.html , and package.json files, you can try your app by running npm start from your application’s directory.

Попробуйте этот пример

Склонируйте и запустите код, приведенный в данном обучающем посте, из electron/electron-quick-start репозитория.

Заметка: Для запуска требуется Git и npm.

Посетите Boilerplates and CLIs documentation для получения списка шаблонов и инструментов для быстрого старта вашей разработки.

Trying this Example

Clone and run the code in this tutorial by using the electron/electron-quick-start repository.

Note: Running this requires Git and npm.

For a list of boilerplates and tools to kick-start your development process, see the Boilerplates and CLIs documentation.

Создаем настольное приложение с помощью Electron

Build a desktop application with Electron

Electron — это фреймворк, который упрощает создание кросс-платформенных настольных приложений с JavaScript, HTML и CSS. Инструменты Electron и open-source предоставляют вам все необходимое для создания привлекательного настольного приложения — таких элементов пользовательского интерфейса, как меню и диалоги, установщики, автоматические обновления и т. Д. Этот курс научит вас основным концепциям Electron, чтобы вы могли использовать его для создания своего собственного настольного приложения для macOS и Windows.

  • Создание пользовательских интерфейсов в Electron (как на основе HTML, так и на родной);
  • Понимание многопроцессорной архитектуры Electron;
  • Отправка приложения пользователям.

Создаём «ToDo» приложение с помощью Electron

Мы будем создавать приложение ToDo с помощью библиотеки Electron. Мы затронем следующие темы: хранение данных, использование нескольких окон, взаимодействие между браузерами.

Что необходимо для этого


Я рассчитываю, что вы уже имеете представление об основных процессах и процессах браузера.

  • Основы JavaScript.
  • Понимание HTML/CSS.
  • Установленный NodeJS.
  • Базовое представление о процессах Electron.

Весь код этого проекта можно скачать на GitHub.

Настройка проекта

Чтобы не начинать с чистого листа, возьмём за основу шаблон Electron.

Примечание: рекомендую вам создать собственное, похожее приложение, после прочтения статьи. Существует много способов создать такое приложение, будет более эффективно если вы сделаете это по-своему (к тому же, трудно работать над проектом по учебнику).

  1. Загрузите шаблон
  2. Запустите npm install и установите все дополнительные пакеты, которые вам нужны (я установил Standard JS стиль для линтинга)
  3. Просмотрите все файлы. Везде есть комментарии, объясняющие работу кода.

Так выглядит мой package.json файл. Мы разберём остальные файлы, когда начнём добавлять в них код.

И наконец, запустите npm start , чтобы убедиться что всё работает (я внёс изменения в HTML, чтобы отобразить текст).

Настройка

Начнём настраивать шаблон (весь код есть на GitHub).

Use Strict

Я добавил “use strict” в начало каждого JS файла, чтобы использовать строгий JavaScript. С правилами строгого режима можно ознакомиться здесь.

Объектно-Ориентированный код

Мы будем применять ООП, используя классы, например класс Window для создания окон браузера (не путайте с глобальным объектом window). Вы можете добавлять дополнительные классы для других окон мы же сделаем два окна.

Этот класс позволяет создавать окна с конфигурацией по умолчанию, загружать HTML-файл, открывать devtools в новом окне и корректно отображать окно, когда оно готово к показу. В нём также есть все методы BrowserWindow и всё, что мы добавим сверху.

После завершения рендеринга страницы, срабатывает событие ready-to-show . Это предотвращает мерцание на странице, когда подгружается много контента. Подробнее об этом можно прочитать здесь.

Если вы незнакомы с объектами JavaScript, рекомендую этот краткий обзор.

Примечание: вам решать, как проектировать своё приложение. Вам не обязательно использовать классы. Старайтесь писать «чистый» код и избегайте утечек памяти.

Подчищаем Main.js

Я удалил большую часть кода из шаблона, чтобы было наглядней. Кроме того, я добавил функцию main, которая на данный момент служит только для создания нового окна.

Системный шрифт в CSS

Подключить системный шрифт довольно просто, используйте font: caption в CSS (я добавил тег прямо в HTML).

Окончательная структура файлов

Структура файлов будет выглядеть так:

  • index.html — HTML код Todo List Window
  • index.js — JS рендер для Todo List Window
  • add.html — HTML код Add Todo Window
  • add.js — JS рендер для Add Todo Window
  • style.css — все CSS стили
  • DataStore.js — обрабатывает данные JSON
  • main.js — точка входа основного процесса
  • Window.js — класс для создания окон

Что делает это приложение

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

Todo List Window

  • Отображает Задачи.
  • Отправляет данные о событиях в основной процесс, например delete todo .
  • Отправляет запрос на создание окна « Add Todos» в main process при создании новой Задачи.

Add Todos Window

  • Input для добавления Задачи.
  • Отправляет данные о новой Задаче в main process.

Main process (основной процесс)

  • Вносит и удаляет Задачи.
  • Считывает Задачи.
  • Отправляет Задачи в окно Todo List при загрузки приложения и обновлении.
  • Принимает данные из обоих окон. Управляет обменом данными между окнами.
  • Создаёт окна Todo List и Add Todo, когда поступает запрос из главного окна.

Хранение данных

У нас есть несколько вариантов хранения данных.

  • Local Storage API — хранилище браузера.
  • Disk Storage — хранение на диске пользователя в любом формате, например JSON, CSV и т.д.
  • Database — хранение в базе данных, локально или на сервере.

Каждый вариант имеет свои плюсы и минусы. Мы рассмотрим их все.

Поток данных

В целом поток данных/событий выглядит примерно так:

Эта схема выглядит как бомба с кучей проводов, которые нужно перерезать … постарайся не пугаться. Есть и другие способы доступа к main process, чтобы непосредственно добавлять/модифицировать Задачи, например можно использовать простую модель или electron.remote .

Предварительный просмотр

На данном этапе у приложения минимум стилизации, сейчас нас интересует поток данных. После закрытия приложения, Задачи сохраняются.

Пишем менеджер данных

Займёмся данными. Я уже упоминал, что есть три способа хранить данные: local storage API , на диске или в базе данных.

Локальное хранилище и базы данных

Их можно легко переносить на веб-сайт и обратно. В этом приложении вы будете обрабатывать данные с помощью JS рендера, вот так:

В случае с базой данных, код будет выглядеть похожим образом, используйте вызов API либо на рендер, либо на main process. Мы сосредоточимся на хранении файлов.

Хранение данных в файловой системе

Где мы будем хранить наши данные? Чаще всего они хранятся в папке «AppData», её расположение отличается в каждой операционной системе. Мы будем хранить данные здесь:

/Library/Application Support/
Windows: C:\Users\ \AppData\Local\

Чтобы вернуть корректный адрес, в Electron можно использовать метод app.getPath(‘userData’) . Чтобы сохранять данные на диск, можно написать функцию или воспользоваться библиотекой.

Используем библиотеку для хранение данных

Сохранять данные в Node довольно просто — нужно конвертировать данные в строку и использовать fs.writeFile . Так как мы используем Electron, то будем использовать библиотеку, созданную специально для него.

Эта библиотека отвечает за создание файла JSON, а также за чтение и запись в него. Например:

DataStore.js

Обратите внимание, что electron-store использует конструктор объекта для Store . Давайте расширим этот объект ( так же, как мы сделали с BrowserWindow ), чтобы мы могли хранить несколько списков Задач, если захотим.

Класс DataStore будет выглядеть так:


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

Методы get и set относятся к модулю electron-store, они обрабатывают файл JSON.

Возвращать this не обязательно, но это хороший приём, который позволяет создать цепочку вызовов. Вот так, DataStore выглядит на практике:

Вот что происходит в папке приложения (это Linux):

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

Посмотрим на новую схему

Давайте наконец соединим все кусочки. Помните эту схему?

На данный момент мы уже создали Data Manager ( DataStore.js ) и можем создавать окна с помощью класса Window. Остались только обработчики событий (линии на схеме).

Я убрал «Complete to do», чтобы было проще.

Структура файлов

Хочу напомнить, как выглядит структура файлов на данный момент:

Прослушиватели событий в Main Process

Используем ipcMain.on() для прослушивания и myWindow.webContents.send() для отправки событий из основного процесса.

Согласно нашей схеме, нам нужно прослушивать:

  • Create Todo
  • Delete Todo
  • Add Todo
  • Create Todo Window

Так выглядит окончательная версия main.js, в который я добавил необходимые прослушиватели:

Здесь всё предельно просто, разве что, можно немного подчистить. Мы прослушиваем событие, после чего используем экземпляр todosData из DataStore , для обработки данных.

Обработчики событий для Todo List Window

Вот куда мы будем отправлять все события, которые мы слушаем в main.js. Здесь будет задействован выбор элементов DOM, поэтому в первую очередь, давайте посмотрим на HTML.

Для стилизации, я использую Spectre.css. Здесь нужно обратить внимание на button id и ul id.

JS файл для окна Todo List:

После нажатия на кнопку мы отправляем событие ‘add-todo-window’ в main process, который в свою очередь открывает Add Todo Window.

Далее, мы прослушиваем событие ‘todos’, которое передаётся из main process при первой загрузки окна, и когда в Задачу вносятся изменения.

После этого мы генерируем HTML для этих Задач и добавляем прослушиватели событий, которые обрабатывают клик по элементу, отправляя событие ‘delete-todo’ в main process.

Обработчики событий для Add Todo Window

Здесь всё очень просто.

Основная часть HTML — это форма:

Как только форма отправлена, мы передаём введённый текст. После этого очищаем поле input, чтобы можно было ввести другие значений.

Резюме

Мы рассмотрели следующие темы:

  • Хранение файлов.
  • Local Storage API и База данных (кратко).
  • Где хранить данные.
  • Несколько окон.
  • Коммуникация между окнами (add todo window → main process → todo list window).
  • Поток данных в приложении, созданном на electron.
  • ООП для расширения объектов.

5 лучших JavaScript-фреймворков для десктопных приложений

Перевод статьи Бианки Плющевской «5 Best JavaScript Frameworks for Desktop Apps».

Еще не так давно построить десктопное приложение с помощью JavaScript было невозможно. К счастью, те времена прошли, и теперь JS-разработчики могут применить свои знания и опыт в веб-разработке для создания десктопных приложений.

Как всегда, легче сказать, чем сделать. Занимаясь поиском материала, мы заметили, что существует много путаницы относительно того, как на самом деле построены десктопные приложения на JavaScript, и того, как они работают. Также довольно сложно подобрать правильные инструменты для работы над подобным проектом.

В этой статье мы поближе познакомимся с пятью самыми известными JavaScript-фреймворками для десктопных приложений.

#1 Electron

Electron это фреймворк с открытым исходным кодом. Изначально он был создан GitHub для редактора Atom, и произошло это в 2013 году. Эта библиотека позволяет вам создавать GUI десктопных приложений с помощью таких веб-технологий как JavaScript, HTML и CSS.


Десктопные приложения, созданные с помощью Electron, ведут себя, как веб-приложения, но могут читать и записывать данные в файловой системе компьютера. На рынке есть много десктопных приложений, построенных на Electron. Например, Skype для Linux или Slack. Если хотите узнать больше о популярных десктопных приложениях, построенных с помощью Electron, почитайте эту статью.

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

Если вы – JavaScript-разработчик, вам нужно будет изучить совсем немного относительно простых вещей о том, как работает Electron и его API. Скорее всего вы сумеете создать свое первое десктопное приложение всего за несколько дней.

Electron это состоявшаяся технология с растущим сообществом, благодаря чему может считаться отличным рабочим окружением. Благодаря движку Chromium для UI-рендеринга вы получаете доступ к таким инструментам как Developer Tools и Storage Access.

#2 NW.js

Следующим в нашем списке идет NW.js, прежде известный как node-webkit. Он был создан в Центре технологий с открытым исходным кодом компании Intel путем комбинирования фреймворка Node.js и движка Chromium (прежде известного как Webkit).

Благодаря комбинации Node.js и Chromium вы можете создать приложение, которое будет не только загружать локальный вебсайт в окне приложения, но также коннектиться к OS через JavaScript API. Подобное решение позволяет вам контролировать такие параметры как размеры окна, панель инструментов и пункты меню, а также обеспечивает доступ к локальным файлам на компьютере.

NW.js не догматичен; он предоставляет вам свободу выбора фреймворков и библиотек, которые вы хотели бы использовать в своем проекте. Он дает возможность вызывать модули Node.js прямо из DOM, поддерживает все особенности браузера, обеспечивает защиту исходного кода JavaScript. Доступен для Linux, Mac OS и Windows.

#3 AppJS

AppJS это простой, но мощный инструмент. С его помощью можно создавать кросс-платформенные приложения, и для этого вам не придется изучать новые языки. Подобно уже упомянутым библиотекам, для работы с AppJS вам понадобятся только знания HTML, CSS и JavaScript.

Если сравнивать AppJS, Electron и NW.js, то AppJS это старейший Node.js-Chromium фреймворк. Но он даже отдаленно не такой зрелый, как его собратья. И поскольку он «выдохся», то может быть не лучшим выбором для новых проектов.

С AppJS вы получаете:

  • JS, HTML5, CSS, SVG, WebGL от Chromium
  • зрелые http/https-сервера и клиентские API – Node
  • файловую систему, DNS, шифрование, подпроцессы, OS APIs – Node
  • виртуальные машины со средой для изолированного выполнения кода – Node
  • инструменты для отображения встроенных привязок C++ к JavaScript – Node

#4 Meteor

Meteor рекламирует себя как «быстрейший способ создания JavaScript-приложений» и «платформу с открытым кодом для мобильной, десктопной и веб-разработки». Этот кросс-платформенный фреймворк написан на Node.js.

Хотя у вас и не получится создавать десктопные приложения с помощью одного лишь Meteor, вы можете использовать его совместно с Cordova или другими похожими инструментами.

Meteor использует MongoDB, протокол распределенных данных (Distributed Data Protocol) и шаблон публикации-подписки для автоматической рассылки изменений без вмешательства разработчика. В нем есть фронтенд- и бэкенд-модули, включая API, инструменты, пакеты Node.js.

#5 Proton Native

Proton Native выпущен недавно. Он стал доступен на GitHub в начале 2020. Proton Native для разработки десктопных приложений делает примерно то же, что React Native сделал для мобильной. Узнать больше о разнице между React.js, React Native и React VR можно здесь.

Это один из лучших JavaScript-фреймворков для десктопных приложений, поскольку позволяет вам управлять состоянием и без заминок строить кросс-платформенные пользовательские интерфейсы. Его работа отличается от работы Electron, который запускает целый браузер Chromium для управления маленьким GUI. Proton Native, в свою очередь, использует собственные инструменты, занимает меньше места и потребляет меньше ресурсов.

У этого решения есть и другие преимущества: Proton Native использует тот же синтаксис, что и React Native, работает с библиотеками React (включая Redux) и совместим с Node.js.

Итоги

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

  1. Фреймворки для создания десктопных приложений на базе веб-браузеров – в их основе лежат Node.js и Chromium (Electron, NW.js, AppJS).
  2. Фреймворки, нуждающиеся в дополнительных инструментах типа Cordova (Meteor).
  3. Фреймворки, использующие исключительно собственные инструменты для создания десктопных приложений (Proton Native).

Выбор зависит только от вас и в основном зависит от типа проекта, над которым вы работаете.

Надеемся, что этот краткий список поможет вам обратить внимание на данные инструменты и облегчит процесс принятия решения.

Быстрый старт

Electron позволяет Вам делать приложения для рабочего стола на чистом JavaScript, предоставляя среду с богатым API. Можете представлять его как Node.js приложение, которое ориентировано для рабочего стола, а не для веб сервера.

Однако это не значит, что Electron — лишь привязка к GUI билиотекам. На деле Electron использует веб-страницы как интерфейс, так что Вы можете считать его небольшим Chroumium браузером, который контролируется с помощью JavaScript.

Главный процесс

В Electron процесс, который запускает main из package.json называется главным процессом. Скрипт, который работает в главном процессе может показывать GUI, создавая веб-страницы.

Процесс-рендерер

Так как Electron использует Chromium для показа веб-страниц, мульти-процессовая архитектура показа страниц Chromium тоже используется. Каждая веб-страница в Electron работает в своём собственном процессе, который называется процесс-рендерер.

В обычных браузерах веб-страницы обычно запускаются в «песочнице» и им недоступны реальные ресурсы компьютера. Пользователи Electron напротив могут использовать API Node.js на страницах, что допускает более низкоуровневую работу с операционной системой.

Разница между главным процессом и процессом-рендерером

Главный процесс создаёт веб-страницы используя BrowserWindow . Каждый экземпляр BrowserWindow показывает веб-страницу через свой собственный процесс-рендерер. Если экземпляр BrowserWindow уничтожается, то и соответствующий процесс-рендерер тоже завершается.

Главный процесс управляет всеми веб-страницами и соответствующими им процессами-редерерами. Каждый процесс-рендерер изолирован и управляет только своей веб-страницей.


На веб-страницах не позволяется вызывать нативные API, которые управляют GUI, потому что это очень опасно и может легко вызвать утечку ресурсов. Если вы хотите выполнить действия с GUI на странице, процесс-рендерер этой страницы должен «попросить» главный процесс сделать эти действия.

В Electron есть несолько способов общения между процессам. Например, модули ipcRenderer и ipcMain используются для отправки сообщений, а remote — для коммуникации в RPC стиле. В FAQ также есть пункт о том, как разделять информацию между страницами

Первое приложение на Electron

Как правило, приложение Electron структурировано следующим образом:

Формат package.json точно такой же, как у модулей Node и скрипт, объявленый как main , будет выполняться при запуске вашего приложения, работая в главном процессе. Например, Ваш package.json может выглядеть вот так:

Заметка: Если поле main отсутствует в package.json , Electron попробует загрузить index.js .

main.js должен создавать окно и управлять системными событиями, типичный пример:

Наконец, index.html , страница, которую Вы хотите показать:

Запуск вашего приложения

После того как Вы создали main.js , index.html и package.json Вам скорее всего захочется запустить приложение, чтобы проверить, что оно работает так, как надо.

electron-prebuilt

electron-prebuilt — npm модуль, который содержит прекомпилированную версию Electron.

Если вы установили Electron глобально через npm , то Вам нужно будет всего лишь запустить сдедующее в папке вашего проекта:

Если Вы установили Electron локально, то выполните это:

Исполняемые файлы Electron, скачанные вручную

Если Вы скачали Electron вручную, то Вы можете использовать исполняемые файлы прямо в папке вашего проекта.

Windows

Linux

macOS

Electron.app — часть реализного пакета Electron, Вы можете скачать его тут.

Запустить как дистрибутив

Когда Вы закончили написание вашего приложения, Вы можете создать дистрибутив, следуя инструкциям отсюда и затем запустить полученное приложение.

Попробуйте этот пример

Скопируйте и запустите этот обучающий код, используя репозиторий atom/electron-quick-start

Electron – создание десктопного приложения с помощью веб-технологий

February 13, 2020 Jazz Team Технические статьи , 0

В данной статье мы расскажем, что такое Electron, как решать проблемы с закрытием процесса визуализации, как передавать информацию из основного процесса в процесс визуализации, а также как предотвратить запуск более одного экземпляра E lectron-приложения.

Что такое Electron

Electron — библиотека с открытым исходным кодом, разработанная GitHub, позволяет разрабатывать нативные графические приложения для десктопных операционных систем с помощью веб-технологий : HTML, CSS, и JavaScript. Electron достигает этого путем объединения Chromium и Node.js в единую среду выполнения, а приложения могут быть собраны для выполнения под Mac, Windows и Linux .

Стоит отметить преимущество, которое нам даёт разработка десктопных приложений с помощью Electron — лёгкое создание пользовательского интерфейса с помощью веб-технологий и богатый API, благодаря которому можно создавать и настраивать окно приложения под любые нужды.

Давайте рассмотрим как работает и из чего состоит Electron-приложение.

В Electron-приложении существует два типа процессов: основной процесс и процесс визуализации.

Основной процесс (main process) — это процесс, который запускается из package.json. Скрипт, запущенный в основном процессе, может отображать GUI используя веб-страницы. В Electron-приложении всегда есть один главный main process. Основной процесс управляет процессами визуализации.

Процесс визуализации ( renderer process ) отвечает за запуск пользовательского интерфейса вашего приложения, или, другими словами, веб-страницы, являющейся экземпляром webContents (отвечает за рендеринг и управление веб-страницей) . Все API-интерфейсы DOM, API-интерфейсы node.js и подмножество API библиотек Electron доступны в данном процессе.

Решение проблемы с закрытием процесса рендеринга

Из-за многопроцессорной архитектуры Chromium мы столкнулись с проблемой, что при закрытии или аварии в процессе визуализации, приложение продолжает выполняться, но в окне ничего не отображается(процесс визуализации мертв), однако нам было необходимо, чтобы процесс визуализации работал постоянно.

Решением данной проблемы является перехват события ‘crashed’ (возникает при сбое или завершении процесса рендеринга ) для объекта webContents, который можно получить из BrowseWindow (класс, который дает возможность создать окно браузера).

Пример закрытия приложения при аварии в render process:

Передача информации в основной процесс из процесса визуализации

В Electron некоторые графические модули(например: меню, формат окна приложения, размер, прозрачность и т.д.) доступны только в основном процессе, но не в процессе визуализации. Управление этими модулями из процесса визуализации осуществляется при помощи модуля ipc , этот модуль позволяет отправлять асинхронные межпроцессорные сообщения.


Для большей наглядности продемонстрируем вызов функциональности основного процесса из процесса визуализации на примере. При нажатии пользователем на кнопку «выйти», приложение должно перейти в режим киоска — пользовательский интерфейс, который ограничивает доступ к функционалу приложения и системы. В решении поставленной задачи используем модули ipcMain и ipcRenderer.

Модуль ipcMain обрабатывает асинхронные и синхронные сообщения, отправленные из процесса визуализации в основном процессе. Для этого воспользуемся методом on(channel, listener), который слушает канал channel, и при появлении нового сообщения вызовется listener.

Ниже приведен пример кода, который слушает канал ‘logout’ на появление новых сообщений, и при появлении нового сообщения переведёт приложение в режим киоска:

Модуль ipcRenderer позволяет отправлять асинхронные и синхронные сообщения из процесса визуализации в основной процесс.

Нами была реализована функция userLogout, которая отвечает за логику завершения сеанса пользователя. В числе прочего, сделаем сигнал(отправим пустое сообщение) о переходе приложения в режиме киоска, по каналу ‘logout’:

Предотвращение запуска более одного экземпляра Electron-приложения

Для того, чтобы предотвратить запуск более одного экземпляра Electron-приложения, существует метод makeSingleInstance из модуля app, который возвращает значение true — в случае, если текущее приложение является не первым запущенным экземпляром, и false — в случае, если первым.

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

Заключение

Electron является конкурентоспособным решением при разработке кроссплатформенных приложений. Не требует от команды разработки знания таких языков программирования как C++ и Python, позволяет создавать приложения, используя богатые возможности веб-технологий HTML, CSS, JS, а также Node.js.

Главная причина, почему Electron настолько популярен: не нужно переписывать уже написанное. Имея уже веб-приложение, вам не потребуется много сил для перевода его на Electron. Electron из коробки предоставляет разнообразный функционал по работе с окном приложения. Также большим преимуществом фреймворка является то, что этот проект распространяется как open source и имеет активное комьюнити.

Главным недостатком Electron является большое потребление оперативной памяти и большой вес даже минимального приложения.

Превращаем SoundCloud в мобильное приложение с помощью крутейшего JS-фреймворка Electron

Содержание статьи

Electron позволяет создавать кросс-платформенные приложения для настольных компьютеров с использованием чистого JavaScript . Поддерживаются основные операционные системы: macOS, Linux, Windows. Он сочетает в себе лучшие стороны Node.js и Chromium , но при этом ориентирован на разработку десктопных приложений.

Само собой напрашивается сравнение Electron с проектом Cordova , который аналогичным образом позволяет превратить веб-приложение в мобильное приложение для основных мобильных платформ. Так когда же нам может пригодиться именно Electron ? Варианты следующие:

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

Что будем делать

Мы возьмем готовый виджет, «обернем» его в приложение Electron и добавим стандартные элементы интерфейса операционной системы, такие как иконка в области уведомлений, стандартные системные диалоги, вызов внешнего приложения, главное меню, горячие клавиши.

Для наших экспериментов возьмем готовый виджет платформы SoundCloud , популярной площадки для публикации музыкальных композиций и другого аудиоконтента. Этот виджет обладает несложным API, да и можно будет немного поразвлечься прослушиванием музыки. Мы превратим его в простой проигрыватель для настольного компьютера с привычными элементами управления.

Подготовка

Иконки

Для приложения нам понадобится несколько иконок. Я брал их из набора ie_Bright с сайта iconfinder.com; можно взять другие на свой вкус. Для изображений, используемых для иконки в области уведомлений под Windows , рекомендуются файлы .ico , но мы для простоты возьмем только PNG-файлы.

Имя файла Назначение Изображение
player.png Иконка приложения player.png
play.png Начать проигрывание play.png
pause.png Приостановить pause.png
prev.png Предыдущая композиция prev.png
next.png Следующая композиция next.png

Поместим иконки в подкаталог assets/img/ проекта.

Node.js

Предполагается, что на компьютере установлен Node.js версии не ниже 6.6; загрузить ее можно здесь.

Операционная система

Примеры подготовлены для выполнения на компьютере, работающем под управлением ОС Linux и macOS.

Минимальное приложение Electron

Начнем с создания минимального приложения Electron. Для этого создадим каталог проекта, например electron-demo , и перейдем в него:

Добавим в наш проект два файла — минимальный index.html , который будет основным интерфейсом нашего приложения:

и index.js со следующим содержимым:

Инициализируем файл package.json проекта менеджера пакетов npm , ответив на необходимые вопросы.


Нужно проверить, что в package.json , получившемся в результате, значение свойства main равно main.js (соответствует значению, введенному при запросе entry point во время выполнения команды npm init ), в противном случае его необходимо скорректировать вручную, чтобы оно соответствовало имени главного .js -файла проекта.

Electron можно установить только для нашего проекта:

Пора запускать! Если Electron был установлен локально, это делается следующей строкой (если он был установлен глобально, путь указывать необязательно):

Через несколько мгновений откроется окно нашего первого приложения.

Обрати внимание, что сразу же открыто привычное окно DevTools . Заголовок и текст окна соответствуют заданным; кроме того, у приложения есть типовое главное меню.

Виджет SoundCloud

Виджет SoundCloud встраивается в веб-страницу как IFrame и позволяет проигрывать отдельные композиции с сайта SoundCloud или их списки. Он предоставляет базовый интерфейс для управления проигрыванием и разнообразную информацию о композиции.

API виджета

Методы виджета

Из методов API виджета для управления проигрыванием мы будем использовать следующие:

  • play — начать проигрывание композиции;
  • pause — приостановить проигрывание композиции (пауза);
  • toggle — переключить проигрывание / приостановка;
  • prev — перейти к предыдущей композиции (для списка);
  • next — перейти к следующей композиции (для списка);
  • bind — добавить обработчик события виджета.

В числе прочих методов: skip , load , seekTo , setVolume , unbind .

События виджета

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

Аудиособытия связаны с проигрываемой композицией и уведомляют об изменениях ее состояния в проигрывателе, передавая объект с информацией о текущей позиции в проигрываемом файле или прогрессе загрузки ( relativePosition , loadProgress , currentPosition ).
События пользовательского интерфейса виджета уведомляют о действиях пользователя, не связанных напрямую с проигрыванием композиции.

Мы используем следующие события:

  • READY — виджет загрузил данные и готов принимать внешние вызовы;
  • PLAY — начато проигрывание композиции;
  • PAUSE — проигрывание композиции приостановлено.

Остальные события: LOAD_PROGRESS , PLAY_PROGRESS , FINISH , SEEK , CLICK_DOWNLOAD , OPEN_SHARE_PANEL , ERROR .

Дополнительно можно получить информацию о текущем состоянии виджета с помощью методов getVolume , getDuration , getPosition , getSounds , getCurrentSound , getCurrentSoundIndex , isPaused . Информация возвращается в callback-функции. Из них нам понадобится метод getCurrentSound , возвращающий информацию о текущей композиции.

Добавление виджета на страницу

Для того чтобы отобразить на нашей странице виджет SoundCloud , внутри элемента добавим элемент , в котором загрузится сам виджет:

Полный список параметров виджета приведен здесь: SoundCloud Player Widget — Customize Parameters (для предыдущей версии, использующей Flash ).

Для выбора композиции или их списка и настройки визуального представления виджета можно нажать кнопку Share на понравившемся списке композиций (если выбрана отдельная композиция, то будет невозможно перемещаться к следующей/предыдущей композиции), выбрать закладку Embed и скопировать предлагаемый код; установив галочку More Options , можно настроить несколько дополнительных параметров.

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

Инициализация API виджета SoundCloud

Для доступа к API виджета необходимо добавить в тег загрузку следующего сценария:

Туда же добавим загрузку файла, в котором будут размещаться основные функции браузерной части приложения:

А тег дополним кнопками управления проигрыванием:

Создадим файл soundcloud.js , добавив в него функцию, которая будет выполняться при загрузке окна браузера:

И собственно вызов этой функции по событию window onload :

Теперь при запуске приложения в консоль должен быть выведен объект widget .

Методы и события API виджета SoundCloud

Привяжем методы виджета, предназначенные для управления проигрыванием композиции, напрямую к кнопкам управления на странице (в функции initSC ):

Продолжение доступно только участникам

Вариант 1. Присоединись к сообществу «Xakep.ru», чтобы читать все материалы на сайте

Членство в сообществе в течение указанного срока откроет тебе доступ ко ВСЕМ материалам «Хакера», увеличит личную накопительную скидку и позволит накапливать профессиональный рейтинг Xakep Score! Подробнее

Вариант 2. Открой один материал

Заинтересовала статья, но нет возможности стать членом клуба «Xakep.ru»? Тогда этот вариант для тебя! Обрати внимание: этот способ подходит только для статей, опубликованных более двух месяцев назад.

Александр Лыкошин

Директор продуктового направления компании «Телигент». Член ACM, IEEE, IEEE Communications Society, IEEE Computer Society. Преподает в МЭСИ на кафедре АСОИУ Института компьютерных технологий.

H Создание десктопного приложения с помощью Webix и Electron в черновиках Из песочницы Tutorial

Статья представляет собой пошаговое описание моего опыта создания кроссплатформенного десктопного приложения с помощью Webix, Electron и Node.js.

Однажды мне пришла в голову светлая мысль создать десктопное приложение на базе стека веб-технологий, который мне хорошо знаком. Знаю, что программисты, пишущие под десктоп, обычно используют C++, Java, C#, а на стек веб-технологий для этих целей смотрят свысока. Но, поскольку я писал приложение для себя, то справедливо решил, что использование знакомых инструментов ускорит процесс. Ну и конечно захотелось «скрестить ужа с ежом» и посмотреть что получится. Если вкратце, то получившийся результат можно запускать и как обычное веб-приложение, и как десктоп.

Код уже готового приложения можно скачать с GitHub.

Что будет делать наше приложение… Это TODO-list (а как же иначе. ), в который мы сможем добавлять события, редактировать их и удалять. Событие будет иметь заголовок, содержание, место проведения, дату и приоритет. Также будет доступна возможность перевода интерфейса на русский и английский языки. Назовем его «Data master».

Для создания веб-приложения я использовал Webix. Он представляет собой кроссплатформенную и кроссбраузерную UI библиотеку, использующие компоненты для быстрого построения приложения с использованием JavaScript синтаксиса. Для компиляции веб-приложения в десктоп использовался Electron. Это кроссплатформенный инструмент, работающий на базе Node.js и позволяющий компилировать веб-приложение для запуска на различных платформах различной разрядности: Windows, Linux, Mac. Для всяких вспомогательных вещей используются инструменты на базе Node.js.

Начнем со структуры папок. В корне проекта я создал ее в таком виде:

  • css — стили
  • data — бэкенд
  • img — изображения
  • js — скрипты JavaScript

После установки модулей Node.js добавится папка «node_modules», для Webix будет использоваться папка «codebase», в папке «

/release/DataMaster» будут версии десктопного приложения для различных платформ.

Корневая папка проекта должна быть расположена на сервере. В моем случае это Apache.
Итак, для начала я зашел на страницу загрузки Webix и нажал «Скачать Webix Standard». Это бесплатная версия библиотеки (лицензия «GNU GPLV3»), которая вполне подойдет для наших нужд. Имеется еще коммерческая версия «Webix PRO», которая отличается главным образом расширенной библиотекой виджетов, а также возможностями техподдержки. Из полученного архива «webix.zip» копируем папку «codebase» в корень нашего проекта. Внутри папки «codebase» обратите внимание на файлы webix.js и webix.css. Подключение этих файлов в приложении позволяет работать с Webix. В папке «skins» содержатся css-файлы с темами.

Создадим в корне проекта файл index.html.

Добавим webix.js. Подключение webix.css дает нам возможность использовать стандартную тему. Я же решил подключить симпатичную темненькую тему, которая лежит в «codebase/skins/contrast.css». Также мы подключили файлы из папки «codebase/i18n» для использования встроенной возможности локализации Webix. В индексного файла подключаем файл «bundle.js». Там будет находиться сборка всего нашего js-кода. Для сборки нам понадобится Node.js и Gulp.

Если у вас еще не установлена Node.js, то сделать это можно отсюда. Командами $ node -v и $ npm -v проверьте корректность установки Node.js и пакетного менеджера платформы — NPM.

Теперь в папке «js» мы будем создавать основную логику приложения. Файл internalization.js содержит объект для интернационализации интерфейса приложения. По аналогии с уже имеющимися языками (русский, английский) вы можете добавить туда другие языки в случае необходимости.

Большинство функций являются обработчиками события «onclick» кнопок. Код функций в основном представляет собой способы работы с Webix-элементами. В общих чертах он интуитивно понятен, если нужна более подробная информация — добро пожаловать на страницу документации Webix.

Невозможно создать новую папку с помощью приложения для настольного компьютера, используя Electron JS

Он работает правильно, когда я запускаю тот же код локально с помощью Electron JS.

Приведенный выше код работает правильно в моем локальном и создает папку с именем «test-new-folder» внутри моей корневой папки.

Но после создания настольного приложения на MAC,

Почему этот код не работает? Почему он не создает ‘test-new-folder’? Что может быть обходным путем для этого?

Также я хочу отслеживать/получать все данные, которые будут помещены в эту вновь созданную папку! Могу ли я получить такие события? Или какие-либо предложения для этого?

Мастер Йода рекомендует:  Трейты в PHP
Добавить комментарий