Slide 1

Slide 1 text

Desktop GUI with Node.js Cross platform app development in Electron

Slide 2

Slide 2 text

5 min electron quickstart

Slide 3

Slide 3 text

Install electron runtime ● sudo npm install -g electron ○ earlier package was called “electron-prebuilt” ○ works in Windows 7+, Mac 10.x and Linux ● sudo npm install --arch=ia32 -g electron ○ to force a different architecture

Slide 4

Slide 4 text

Add these files package.json index.html main.js

Slide 5

Slide 5 text

Add to pacakge.json main: “main.js” This is “entry point” of an electron app

Slide 6

Slide 6 text

Add to main.js function createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(`file://${__dirname}/index.html`) // Emitted when the window is closed. win.on('closed', () => { win = null }) }

Slide 7

Slide 7 text

Add to main.js const {app, BrowserWindow} = require('electron') app.on('ready', createWindow)

Slide 8

Slide 8 text

Add to index.html

Hello World!

We are using node document.write(process.versions.node), Chrome document.write(process.versions.chrome), and Electron document.write(process.versions.electron).

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Chrome vs Electron

Slide 11

Slide 11 text

Browser Process Tabs Renderer Process Renderer Process Renderer Process

Slide 12

Slide 12 text

Browser Process Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit

Slide 13

Slide 13 text

Browser Process User interface Network Storage Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit

Slide 14

Slide 14 text

Browser Process User interface Network Storage ResourceMessageFilter ResourceMessageFilter Tabs Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit ResourceMessageFilter

Slide 15

Slide 15 text

Forking Chrome to Electron • Fork “libchromiumcontent” and not whole Chrome • Chrome’s “content” module renders the DOM and hooks into V8 • Different from previous (NW.js) approach. Node process starts a renderer process.

Slide 16

Slide 16 text

Node (Main) Process Node Native API System API Storage IPC IPC Windows Renderer Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit IPC OS Hooks libchromiumcontent libchromiumcontent libchromiumcontent GPS

Slide 17

Slide 17 text

Node - Renderer Interactions

Slide 18

Slide 18 text

Electron Process Architecture Main Process - Only one per application lifecycle. Runs like any Node.js script Renderer Process - One per UI instance (Tray, Window, Dialog). Runs a libchromiumcontent instance in it.

Slide 19

Slide 19 text

Inter Process Communication (IPC)

Slide 20

Slide 20 text

Reference sharing between processes

Slide 21

Slide 21 text

OS Native GUI Hooks

Slide 22

Slide 22 text

Menu Toolbar | Context

Slide 23

Slide 23 text

Toolbar/Application Menu : Main Process

Slide 24

Slide 24 text

Create a menu template template : { label: 'Custom', submenu: [ { label: 'Do something', click: (item, focusedWindow) => { dialog.info("Yay did something ! ", "Done something") } } ] }

Slide 25

Slide 25 text

Build menu from template and set Menu.setApplicationMenu(Menu.buildFromTemplate(menu));

Slide 26

Slide 26 text

Context Menu : Renderer Process (via IPC)

Slide 27

Slide 27 text

Create a menu template const {remote} = require('electron') // for IPC const {Menu, MenuItem} = remote const menu = new Menu() menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }})) menu.append(new MenuItem({type: 'separator'})) menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))

Slide 28

Slide 28 text

Attach to window event window.addEventListener('contextmenu', (e) => { e.preventDefault() menu.popup(remote.getCurrentWindow()) }, false)

Slide 29

Slide 29 text

Tray Notification Area

Slide 30

Slide 30 text

Notifications Plain old HTML5 Webkit Notifications

Slide 31

Slide 31 text

Recents For apps that open files

Slide 32

Slide 32 text

Launcher Menus

Slide 33

Slide 33 text

Quicklaunch Tasks (Windows) Using Jumplists For Quicklaunch icons in taskbar

Slide 34

Slide 34 text

Dock Menu (OSX) When App is added to dock Extra launcher options

Slide 35

Slide 35 text

Launcher Shortcuts (Linux) Works with Unity, GNOME, KDE (All freedesktop.org standard) Uses entries to .desktop file Not exactly an Electron feature

Slide 36

Slide 36 text

Debugging in Electron

Slide 37

Slide 37 text

Debugging the renderer Open Developer Tools in the window.

Slide 38

Slide 38 text

Debugging the renderer Open Developer Tools in the window.

Slide 39

Slide 39 text

Debugging the main process electron –debug=1337 . Or electron –debug-brk=1337 .

Slide 40

Slide 40 text

Debugging the main process Add a npm script - debug: “electron –debug=1337.&; node-inspector&; electron “0.0.0.0:8080?port=1337”

Slide 41

Slide 41 text

Ship it ! Cross platform packaging and deployment Rebranding (icons) Packaging (asar) Binary (exe, app, bin) Installing (msi, dmg, deb) Auto Updates

Slide 42

Slide 42 text

The Package (Mac) electron/Electron.app/Contents/Resources/app/ ├── package.json ├── main.js └── index.html Or electron/Electron.app/Contents/Resources/ └── app.asar

Slide 43

Slide 43 text

The Package (Windows/Linux) electron/resources/app ├── package.json ├── main.js └── index.html Or electron/resources/ └── app.asar

Slide 44

Slide 44 text

Rebranding (Windows) Rename electron.exe to anything. Change the icon with any .ico file using Windows win32 hexediting software (eg. winhex, rcedit)

Slide 45

Slide 45 text

Rebranding (Linux) Rename electron to anything. Add a .desktop entry to Applications folder specifying the icon in png

Slide 46

Slide 46 text

Rebranding (Mac) Rename Electron.app to anything. Change Application name in Electron.app/Contents/Info.plist Change the png icon inside the .app folder

Slide 47

Slide 47 text

Popular Distribution Tools electron-packager – Create .exe, .app and /dist folders for Win, Mac and Linux respectively. electron-builder – Create .msi (Windows), .dmg/.pkg (Mac) and .deb/.rpm (Linux). Auto update via Squirrel. Configure updates to be asar-only.

Slide 48

Slide 48 text

The future of Electron

Slide 49

Slide 49 text

Electron Runtime Mode • Long discussion on issue #673 on Github • An “electron runtime” like the “Java Runtime Environment” or “.NET Runtime” • Apps will be distributed with a “minimum required Electron runtime”. • App sizes down by 30~50MB (Size of libchromiumcontent)

Slide 50

Slide 50 text

Cross-platform UI Kits/Frameworks Think ionic but for desktop apps Check out photon and React Desktop

Slide 51

Slide 51 text

React Desktop

Slide 52

Slide 52 text

React Desktop

Slide 53

Slide 53 text

Photon (photonkit.com)

Slide 54

Slide 54 text

Implementation demo (of what we talked of today) https://github.com/championswimmer/jsfoo-electron-example Check commit history for step-by-step additions