The document discusses creating cross-platform desktop applications using Electron, including installation and setup instructions. It outlines the structure of an Electron project with key files like index.html and main.js, and provides example code for initializing the application. Additionally, it touches on app packaging and integrating native features such as notifications and menus.

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!