Electron is a fantastic tool for creating cross-platform apps with HTML, CSS, and JavaScript that look and feel relatively native to the hosted Platform. In this presentation I'll give a quick overview of what's possible.

1. Create AmazingCross-
Platform Desktop Node Apps
with Electron
ViennaJS, June
@chrischinch

2. Use any of these?

3. What is it?
• From GitHub*
• JavaScript as a ‘desktop’
Application
• Version 1.0 released in May
*You might have heard of them

4. Install and Setup
npm install electron-prebuilt -g
brew install Caskroom/cask/electron

5. End result

6. For GUI fans

7. For CLI fans
electron .

8. An Electron project
index.html: The web page
rendered by default.
main.js: Starts app and creates
a browser window to render
HTML.
package.json: Lists application
dependencies, meta data and
files needed.

9. main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + __dirname + '/app/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});

10. The app

11. Packaging
• Create asar archive
• Copy files into Electron app
• Rename, distribute, etc…
• Use 3rd party tool 👍

12. Electron Packager
electron-packager
/Users/chrisward/Workspace/sp_electron MarvelBrowse
--platform=darwin --arch=x64 --asar --prune
—version=1.2.5
--out=/Users/chrisward/Workspace --overwrite
--icon=/Users/chrisward/Workspace/sp_electron/marvel-app.icns

13. Going native
• Notifications
• Recent documents
• Menus
• Progress bars, thumbnails,
represented file, dock, System
preferences…

14. Thank You!
Chris Ward
gregariousmammal.com
@chrischinch
Developer Relations & Technical Writer
I have stickers and merchandise!