Создание веб-приложений для настольных компьютеров с помощью GitHub’s Electron

В этом году в Build Microsoft объявила о выпуске Visual Studio Code , первого редактора кода от Microsoft, который работает на Mac. Полнофункциональный десктоп IDE. И толпа сходит с ума.

Я сам скачал и использовал код Visual Studio, и должен признать, что это довольно хорошо. Особенно учитывая, что это релиз v1, о котором мы здесь говорим.

Но это не займет много времени, чтобы кто-то раскрыл маленький секрет Кодекса …

Исходное имя файла atom.exe? Что это значит?

Это означает, что Visuals Studio Code не является настольным приложением Mac в традиционном смысле. Это на самом деле гибридное приложение, созданное с использованием веб-технологий.

GitHub Atom

Atom — это редактор кода, выпущенный GitHub в прошлом году. Как и редакторы кода, он похож на любимого разработчика, Sublime Text, с одним невероятным отличием: сам редактор Atom — это HTML, CSS и JavaScript . Затем он оборачивается в собственную оболочку с доступом к устройству. Это заставляет его выглядеть так, как будто это нативное приложение для настольных компьютеров, и для всех намерений и целей это полностью так. Если вы использовали Atom, вы знаете, насколько он быстр и хорош. Как сказал бы Стив Джобс: «Это не сутулость».

GitHub разделил и открыл исходную часть Atom, которая оборачивает реальный редактор и назвала его Electron (первоначально он назывался Atom Shell).

Это не первый раз, когда мы видели что-то подобное. Редактор скобок Adobe был построен таким же образом. Кроме того, Google сделал это несколько лет назад, когда они выпустили Chrome Packaged Apps . Я работал в команде Telerik, которая создала самое первое приложение для камеры, которое поставляется на ChromeOS. Я прекрасно знаю, что такое создание настольных приложений на основе веб-технологий. Позвольте мне быть полностью честным в моих чувствах к созданию настольных приложений таким образом.

Я ЛЮБЛЮ ЭТО.

Шутки в сторону. Я никогда не создавал настольных приложений так быстро в своей жизни. Я подумал: «Это слишком хорошо, чтобы быть правдой!» И увы, так и было .

Вскоре после того, как были объявлены упакованные приложения, они были отправлены в дальний угол открытой рабочей области Google под мерцающим флуоресцентным светом где-то во влажном подвале здания в Маунтин-Вью рядом с плантатором, полным грибов. Насколько я могу судить, упакованные приложения мертвы.

Я знал, что это было слишком хорошо, чтобы быть правдой. И тогда я встретил Электрон.

электрон

По сути, Electron — это то, чем должны быть упакованные приложения (мое мнение — очевидно). Это блестящая реализация концепции родного приложения-обертки для веб-приложений, которую мы видим настолько популярной в таких технологиях, как PhoneGap. Так что же делает его лучше, чем Chrome Packaged Apps, MacGap или любой другой бесчисленный проект, который уже пытался это сделать?

Одним словом: Стандарты

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

Когда пойти на рабочий стол

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

«Требуется ли приложению доступ к устройству?»
A: ДА — собственный рабочий стол
B: НЕТ — Интернет

Тем не менее, рассмотрим, на что способен Интернет:

• Доступ к камере
• Микрофон
• Аудио Манипуляции
• Файловая система (в определенной степени)
• Уведомления
• WebSockets
• акселерометр

…И список продолжается. Списывание из Интернета, потому что вам нужен доступ к устройству, больше не является аргументом «все или ничего». Итак, каковы законные причины пойти по пути рабочего стола? На мой взгляд, есть два основных преимущества:

1. Нет проблем совместимости между браузерами
2. Нет загрузки удаленных активов (без задержки)

Есть и другие потенциальные преимущества, такие как доступ к подключенным устройствам (Bluetooth, USB и т. Д.), А приложения для настольных компьютеров обычно отключены по умолчанию, но это мои личные любимые.

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

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

Это, друг мой, именно то, что Электрон позволяет тебе делать.

Создание нового приложения Electron

Первое, что вам нужно сделать, это получить Электрон. Лучший способ сделать это — установить его через npm.

npm install -g electron-prebuilt

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

Хорошая вещь о стандартах в том, что у вас есть так много на выбор.

Эндрю С. Таненбаум

А если серьезно, с Электроном интересно работать, потому что он уже использует концепции, с которыми вы, скорее всего, знакомы. Одним из них является package.jsonфайл. Нет глупого манифеста для работы. Все, что вам нужно сделать, чтобы указать, что ваше приложение является приложением Electron, это добавить «основное» поле в package.jsonфайл. Ниже приведен мертвый простой электрон package.json.

{
    "name": "Sample App",
    "version": "0.0.1",
    "main": "main.js"
}

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

<!DOCTYPE html>
<html>
<head>
  <title>Kendo Electron</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });

  // if the current platform is windows...
  if (process.platform === 'win32') {
    var counter = 0;
    // every 1 second, increment the progress bar value
    var progress = setInterval(function() {
      if (counter < 1) {
        mainWindow.setProgressBar(counter);
        counter += .1;
      }
      else {
        mainWindow.setProgressBar(0);
        clearInterval(progress);
      }
    }, 1000);
  }

});

<!DOCTYPE html>
<html>
<head>
  <title>Kendo Electron</title>
</head>
<body>
  <button id="start-progress">Start Progresss</button>

  <script src="index.js"></script>
</body>
</html>

// index.js
var button = document.getElementById('start-progress');
button.onclick = function() {
  // now what?
};

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.
var ipc = require('ipc');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });

});

// respond to the 'progress' event
ipc.on('update-progress', function(event, arg) {
  if (process.platform === 'win32') {
    mainWindow.setProgressBar(arg);
  }
});

// index.js
var ipc = require('ipc');

var button = document.getElementById('start-progress');
button.onclick = function() {
  var counter = 0;

  // increment the progress value by 0.1 every second
  var progress = setInterval(function() {
    if (counter < 1) {
      ipc.send('update-progress', counter);
      counter += 0.1;
    }
    else {
      // reset the progress value to 0;
      ipc.send('update-progress', 0);

      // clear out the set interval
      clearInterval(progress);
    }
  }, 1000);
};

var ipc = require('ipc');

var button = document.getElementById('start-progress');
button.onclick = function() {
  var counter = 0;

  // increment the progress value by 0.1 every second
  var progress = setInterval(function() {
    if (counter < 1) {
      ipc.send('update-progress', counter);
      counter += 0.1;
    }
    else {
      // reset the progress value to 0;
      ipc.send('update-progress', 0);

      // clear out the set interval
      clearInterval(progress);

      // display a notification saying that we did everything
      new Notification('Progress Test Finished!');
    }
  }, 1000);
};