Slides from my talk I was going to give at the 2017 SoCalCodeCamp.

1. ELECTRON:
BEGINNER TO PRO
BUILD CROSS PLATFORM DESKTOP APPS USING
GITHUB’S ELECTRON
@chrisgriffith

3. WHAT IS ELECTRON?
Released in July 2013 by Cheng Zhao
Foundation for GitHub Atom Editor

6. BUILT WITH ELECTRON
electronjs.org/apps

7. ELECTRON'S FEATURES
Automatic updates
Native menus & notifications
Crash reporting
Debugging & profiling
Windows installers
just a partial list…

8. PLATFORM SUPPORT

9. HOW DOES ELECTRON WORK?

10. UI?

11. INSTALLING ELECTRON
npm install -g electron

12. QUICK START
git clone https://github.com/electron/electron-quick-start quick-start
cd quick-start
git init
npm start

14. DEFAULT FILE STRUTURE
index.html
LICENSE.md
main.js
package.json
README.md
renderer.js

15. REAL WORLD FILE STRUTURE
app
main.js
splash.html
splash.png
www
build
dist
node_modules
package-lock.json
package.json

16. MAIN.JS
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow

17. CREATEWINDOW
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
…

18. CREATEWINDOW
…
// Open the DevTools.
mainWindow.webContents.openDevTools()
// 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
})
}

19. MAIN.JS
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

20. INDEX.HTML
…
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js
<script>document.write(process.versions.node) < /script>,
Chromium
<script>document.write(process.versions.chrome) < /script>,
and Electron
<script>document.write(process.versions.electron) < /script>.
…

21. INDEX.HTML
…
<script>
// You can also require other files to run in this process
require('./renderer.js')
< /script>

22. WINDOWS

23. BROWSERWINDOW
mainWindow = new BrowserWindow({
show: false,
backgroundColor: "#FFF",
width: 800,
height: 600,
minWidth: 800,
maxWidth: 1024,
minHeight: 600,
maxHeight: 768,
resizable: true,
movable: true
})

24. BROWSERWINDOW
ADDTIONAL PROPERTIES
mainWindow = new BrowserWindow({
show: false,
backgroundColor: "#FFF",
width: 800,
height: 600,
minWidth: 800,
maxWidth: 1024,
minHeight: 600,
maxHeight: 768,
resizable: true,
movable: true,
alwaysOnTop: false,
title: "Goodbye, Moon?"
})

25. FRAMELESS WINDOWS
mainWindow = new BrowserWindow({
show: false,
backgroundColor: '#FFF',
transparent: true,
width: 800,
height: 600,
minWidth: 800,
maxWidth: 1024,
minHeight: 600,
maxHeight: 768,
resizable: true,
movable: true,
// frame: false,
titleBarStyle: 'hidden' //hidden-inset
// title: "Goodbye, Moon?",
})

26. TRANSPARENT WINDOWS
mainWindow = new BrowserWindow({
show: false,
// backgroundColor: '#FFF',
transparent: true,
width: 800,
height: 600,
minWidth: 800,
maxWidth: 1024,
minHeight: 600,
maxHeight: 768,
resizable: true,
movable: true,
frame: false,
transparent: true
})

27. APPLICATION MENU

28. MENUS
const Menu = electron.Menu
app.on('ready', function () {
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
createWindow()
})

29. MENU TEMPLATES
let template = [{
label: 'Menu 1',
submenu: [{
label: 'Menu item 1'
}]
}, {
label: 'Menu 2',
submenu: [{
label: 'Another Menu item'
}, {
label: 'One More Menu Item'
}]
}]

30. MENU ACCELERATORS & ROLES
let template = [{
label: 'Edit App',
submenu: [{
label: 'Undo',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
}, {
label: 'Redo',
accelerator: 'Shift+CmdOrCtrl+Z',
role: 'redo'
}, {
type: 'separator'
}, {
...

33. CONTEXTUAL MENUS

34. CONTEXTUAL MENU -
RENDERER.JS
const { remote } = require('electron')
const { Menu } = remote
const myContextMenu = Menu.buildFromTemplate ([
{ label: 'Cut', role: 'cut' },
{ label: 'Copy', role: 'copy' },
{ label: 'Paste', role: 'paste' },
{ label: 'Select All', role: 'selectall' },
{ type: 'separator' },
{ label: 'Custom', click() { console.log('Custom Menu') } }
])
window.addEventListener('contextmenu', (event) => {
event.preventDefault()
myContextMenu.popup()
})

35. INTER-PROCESS
COMMUNICATION

36. INTER-PROCESS COMMUNICATION

37. IPC SYNC
const ipc = require('electron').ipcRenderer
syncMsgBtn.addEventListener('click', function () {
const reply = ipc.sendSync('synchronous-message', 'Mr. Watson, come here
})
const ipc = electron.ipcMain
ipc.on('synchronous-message', function (event, arg) {
event.returnValue = 'I heard you!'
})

38. IPC ASYNC
const ipc = require('electron').ipcRenderer
asyncMsgBtn.addEventListener('click', function () {
ipc.send('asynchronous-message', ''That's one small step for man')
})
ipc.on('asynchronous-reply', function (event, arg) {
const message = `Asynchronous message reply: ${arg}`
document.getElementById('asyncReply').innerHTML = message
})
const ipc = electron.ipcMain
ipc.on('asynchronous-message', function (event, arg) {
if (arg === 'That’s one small step for man') {
event.sender.send('asynchronous-reply', ', one giant leap for mankind.
}
})

39. NATIVE DIALOGS

40. DIALOG TYPES
File Open
File Save
Message Box
Error Box

41. FILE OPEN
const dialog = electron.dialog
ipc.on('open-directory-dialog', function (event) {
dialog.showOpenDialog({
properties: ['openDirectory']
}, function (files) {
if (files) event.sender.send('selectedItem, files)
})
})

44. DIALOG PROPERTIES
openFile
openDirectory
multiSelections
createDirectory
showHiddenFiles
promptToCreate (Windows Only)

47. MESSAGE BOXES

48. MESSAGE BOX
dialog.showMessageBox({
type: info,
buttons: ['Save', 'Cancel', 'Don't Save'],
defaultId: 0,
cancelId: 1,
title: 'Save Score',
message: 'Backup your score file?',
detail: 'Message detail'
})

49. DIALOG TYPES
info
error
question
none

51. CUSTOM ICONS
const nativeImage = electron.nativeImage
let warningIcon= nativeImage.createFromPath('images/warning.png')
dialog.showMessageBox({
type: info,
buttons: ['Save', 'Cancel', 'Don't Save'],
defaultId: 0,
cancelId: 1,
title: 'Save Score',
message: 'Backup your score file?',
detail: 'Message detail',
icon: warningIcon
})

52. WEBCONTENTS EVENTS
before-input-event
certificate-error
context-menu
crashed
cursor-changed
destroyed
devtools-closed
devtools-focused
devtools-opened
devtools-reload-page
did-change-theme-color
did-fail-load
did-finish-load
did-frame-finish-load
did-get-response-details
did-get-redirect-request
did-navigate
did-navigate-in-page
did-start-loading
did-stop-loading
dom-ready
found-in-page
login
media-started-playing
media-paused
new-window
page-favicon-updated
paint
plugin-crashed
select-client-certificate
select-bluetooth-device
update-target-url
will-attach-webview
will-navigate
will-prevent-unload

53. DEBUGGING YOUR ELECTRON
APPLICATION
Chromium’s Dev Tools

54. DEBUGGING RENDERER
PROCESS
Chromium’s Dev Tools

55. DEBUGGING MAIN PROCESS
VS Code's Tools
node-inspector

56. DEVTRON
An Electron DevTools extension to help you inspect,
monitor, and debug your app.

57. TESTING WITH SPECTRON

58. INSTALLATION
npm install --save-dev spectron

59. TEST SCRIPT
npm install electron-builder --save-dev

60. BUILDING YOUR APPLICATION

61. INSTALLATION
npm install electron-builder --save-dev

62. ADJUSTING YOUR BUILD DIRECTORIES

63. Build Platforms Descriptions
--mac, -m, -o, --macos Build for macOS
--win, -w, --windows Build for Windows
--linux, -l Build for Linux
Build Architectures Descriptions
--x64 Build for x64
--ia32 Build for ia32

64. UPDATING THE PACKAGE.JSON
FILE
"scripts": {
"start": "electron .",
"dist": "build -mwl --x64 --ia32"
}

65. UPDATING THE PACKAGE.JSON
FILE
"build": {
"appId": "com.your-company.electron-app-name",
"copyright": "Copyright © 2017 YOUR-NAME",
"productName": "My Electron App",
"electronVersion": "1.4.1",
"mac": {
"category": "public.app-category.developer-tools"
},
"win": {
"target": [ "nsis" ]
},
"linux": {
"target": [ "AppImage", "deb"]
}
}

66. UPDATING THE PACKAGE.JSON
FILE
"main": "./app/main.js"

67. APP ICONS
16px
32px
128px
256px (OS X 10.5+)
512px (OS X 10.5+)
1024px (OS X 10.7+)

68. CONFIGURING THE MACOS DMG

69. CONFIGURING THE WINDOWS INSTALLER

70. AUTO-UPDATING

71. BUILT-IN
Platform Update Method
macOS Squirrel.Mac
Windows Squirrel
Linux None

72. ELECTRON-UPDATER
Install electron-updater as an app dependency.
Use autoUpdater from electron-updater instead of
electron
npm i electron-updater
import { autoUpdater } from "electron-updater"

73. UPDATE EVENTS
autoUpdater.on('checking-for-update', () => { })
autoUpdater.on('update-available', () => { })
autoUpdater.on('update-not-available', () => {})
autoUpdater.on('update-downloaded', () => {})
autoUpdater.on('error', (event, error) => {})

74. ELECTRON FORGE
A complete tool for building modern Electron
applications.
https://github.com/electron-userland/electron-forge

76. THANK YOU!
Chris Griffith
San Diego, CA
@chrisgriffith
http://chrisgriffith.wordpress.com
https://github.com/chrisgriffith