Cross-Platform Desktop Applications – Javascript is everywhere – Desktop Apps?
Cross-Platform Desktop Applications
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
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"
…
}