Знакомство с Electron
Официальная страница проекта Electron.
Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.
Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Таким образом это не что иное как среда в которой будет выполнятся наше веб приложение.
На текущий момент Electron v0.35.0 включает в себя:
- Node: 4.1.1
- Chromium: 5.0.2454.85
- V8: 4.5.103.294
Альтернативой для Electron является проект NW.js (ранее известный как node-webkit). О различиях можно почитать здесь.
Хочу отметить ещё один, по моему мнению, плюс, который дает нам разработка десктопных приложений с помощью веб-технологий — отсутствие ограничения в создании пользовательского интерфейса.
Интерфейсом взаимодействия с пользователем является созданная нами веб-страница. В данном случае мы не ограничены системным набором элементов интерфейса нашей платформы и можем создавать нужные нам UI элементы с помощью веб-технологий. А учитывая, что в коробочке у нас один из самых продвинутых браузеров, мы можем использовать самые новые веб-технологии.
Я предполагаю, что вы будете использовать ваш основной текстовый редактор (или IDE), и у вас установлен Node.js/npm. Я также надеюсь, что у вас есть знания HTML/CSS/JavaScript (знания Node.js не помешали бы, но не является обязательными) так что я могу не беспокоится о вашем понимании создания веб-страниц. Если же таких знаний нет, то вы, наверное, будете чувствовать себя несколько потерянными, и я рекомендую вам вначале изучить основы веб-разработки.
Итак, как же работает Electron.
Входной точкой является основной файл определенный в файле package.json, именно он и выполняется, когда стартует ваше приложение. В этом основном файле (который обычно называется main) создаются окна приложения, в которых происходит рендеринг и отображение веб-страниц с дополнительною возможностью взаимодействия с нативным GUI вашей операционной системы. Процесс, который запускает основной скрипт, называется основной процесс (main process).
Electron использует Chromium для отображения веб-страниц, мульти-процессорная архитектура Chromium тоже используется. Каждая веб-страница в Electron запускается в своем собственном процессе, который называется рендер процессом (renderer process).
В обычном браузере веб-страницы запускаются в закрытом окружении (так называемой песочнице) и не имеют доступ к нативным ресурсам. Пользователи Electron, однако, имеют возможность использовать Node.js API на веб-страницах, имея доступ к взаимодействию с операционной системой на низком уровне.
Исходя из того, что мы уже знаем, для создания самого простого приложения нам нужно всего три файла:
package.json
main.js
index.html
Напишем простое приложение Hello world
Наше первое приложение будет выводит информацию о версиях тех частей, которые входят в Electron.
package.json в нашем случае будет выглядеть так:
{ "name" : "electron-simple-app", "version" : "0.0.1", "main" : "main.js" } «name»: «electron-simple-app» — это имя для вашего приложения;
«version»: «0.0.1» — это его версия, соответственно;
«main»: «main.js» — и основной скрипт.
Если поле main не будет указано в pakage.json, то по умолчанию Electron будет пытаться загрузить index.js файл.
В main.js мы должны создать окно нашего приложения и обрабатывать системные события, вот так будет выглядеть основной скрипт нашего приложения:
const electron = require('electron'); const app = electron.app; // Модуль контролирующей жизненный цикл нашего приложения. const BrowserWindow = electron.BrowserWindow; // Модуль создающий браузерное окно. // Опционально возможность отправки отчета о ошибках на сервер проекта Electron. electron.crashReporter.start(); // Определение глобальной ссылки , если мы не определим, окно // окно будет закрыто автоматически когда JavaScript объект будет очищен сборщиком мусора. var mainWindow = null; // Проверяем что все окна закрыты и закрываем приложение. app.on('window-all-closed', function() { // В OS X обычное поведение приложений и их menu bar // оставаться активными до тех пор пока пользователь закроет их явно комбинацией клавиш Cmd + Q if (process.platform != 'darwin') { app.quit(); } }); // Этот метод будет вызван когда Electron закончит инициализацию // и будет готов к созданию браузерных окон. app.on('ready', function() { // Создаем окно браузера. mainWindow = new BrowserWindow({width: 800, height: 600}); // и загружаем файл index.html нашего веб приложения. mainWindow.loadURL('file://' + __dirname + '/index.html'); // Открываем DevTools. mainWindow.webContents.openDevTools(); // Этот метод будет выполнен когда генерируется событие закрытия окна. mainWindow.on('closed', function() { // Удаляем ссылку на окно, если ваше приложение будет поддерживать несколько // окон вы будете хранить их в массиве, это время // когда нужно удалить соответствующий элемент. mainWindow = null; }); }); index.html — это веб-страница которую мы хотим отобразить:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> Мы используем Node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, и Electron <script>document.write(process.versions.electron)</script>. </body> </html> Репозиторий с кодом — https://github.com/DangelZM/electron-simple-app.
Когда вы создадите все файлы или склоните репозиторий, вы захотите попробовать запустить ваше приложение локально и проверить, работает ли оно как задумано.
Для запуска приложения нам понадобится модуль electron-prebuilt.
Его мы можем с помощью npm поставить глобально или локально в наше приложение.
В случае глобальной установки для запуска приложения мы выполняем в корне нашего приложения команду:
electron . В случае локальной установки выполняем:
./node_modules/.bin/electron . В подготовленном мной репозитории для запуска приложения вам нужно установить зависимости:
npm install и запустить скрипт с помощью npm:
npm start Пример запуска созданного приложения можно посмотреть на видео ниже:
ссылка на оригинал статьи http://habrahabr.ru/post/272075/
Добавить комментарий