Cross-Platform Desktop Applications

by Ben Rexin / @salzig

Who am i?

The Future?

Javascript is everywhere

  • Browser (Chrome, Firefox, … )
  • TV (Samsung Smart TV, LG webOS TV)
  • TV-"Addons" (Chromecast, Matchstick)
  • Games (SimCity, BattleField, …)
  • Hardware (tessel)

Desktop Apps?

Spotify

Chromium

Firefox,
Thunderbird

XULrunner since Sept. 2006

ICQ

Boxely since 2007

InternetExplorer before 2007

How to start?

Frameworks

The nice thing about standards is
that you have so many to choose from.

Andrew S. Tanenbaum – Computer Networks, 2nd ed., p. 254

App.js

since 2012

node-webkit nw.js

since 2011

Adobe Integrated Runtime

since 2008

XULrunner

since 2006

Brackets Shell

since 2012

Atom Shell Electron

since 2014

Electron

Demo

Example 1

init


npm init
npm install --save-dev electron-prebuilt
            

package.json addition


{
  ...
  "scripts": {
    "start": "electron ."
  }
}
            

main.js


var app = require("app");
var BrowserWindow = require("browser-window");
var mainWindow = null;

app.on('ready', function() {
  // with node-integration jQuery wont assign itself to window
  mainWindow = new BrowserWindow({"node-integration": false});
  mainWindow.loadUrl("https://news.ycombinator.com/news");
  // mainWindow.openDevTools({"detach": true}) // debug, uh?
});
            

Example 2

init


npm init
npm install --save-dev electron-prebuilt
            

package.json addition


{
  ...
  "scripts": {
    "start": "electron ."
  }
}
            

main.js


var app = require("app");
var BrowserWindow = require("browser-window");
var mainWindow = null;

app.on('ready', function() {
  // with node-integration jQuery wont assign itself to window
  mainWindow = new BrowserWindow({"node-integration": false});
  mainWindow.loadUrl('file://' + app.getAppPath() + '/index.html');
});
            

index.html


<!DOCTYPE html>

<button>Point Less</button>

<script>
(function() {
  var remote = require('remote');
  var app = remote.require('app');

  var button = document.getElementsByTagName("button")[0];

  button.addEventListener('click', function() {
    console.log("point less");
    app.quit();
  });
})();
</script>

            

Pack

npm install --save-dev electron-packager

// package.json
{
  …
  "scripts": {
    "build": "electron-packager . Example --platform=darwin --arch=x64 --version=0.32.0"
  …
}
            

Questions?

THE END

Thanks

Links