Build cross platform desktop apps with web

technologies

Electron is a framework for creating native applications with web

technologies like JavaScript, HTML and CSS.

What is Electron?

Electron History

● Created GitHub (2013)

● Formally Atom Shell

● Open sourced (May 2014)

● Electron v1.0.0 (May 9th 2016)

INSIDE ELECTRON

+ node.js chromium

INSIDE ELECTRON

+ node.js chromium

libchromiumcontent

Electron Features

HTML/CSS/JS

Cross Platform

Native Menu &

Notifications

Auto Update

Crash reporting

Debugging

Basic Concepts

Main Process

Main process responsible for the integration and interaction with GUI

operating system, for creating web pages.

Renderer Process

Each web page in Electron runs in its own process, which is called renderer

process.

Hello World!

Installation

# npm install electron-prebuilt

Structure

package.json

main.js

index.html

Run app

# electron .

// or

# ./node_modules/.bin/electron .

Application Packaging

• electron-packager

• electron-builder

• grunt-electron-builder

• gulp-electron

// command line

# electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

Application Packaging

# npm install -g asar

# asar pack your-app app.asar

Demo

Electron API

App

Control your application’s event lifecycle.

Main Process

App

Events:

• ready

• before-quit

• window-all-closed

• will-quit

• quit

• …

Main Process

App

Methods

• app.quit()

• app.getAppPath()

• app.getVersion()

• app.setName(name)

• app.addRecentDocument(path)

• app.setUserTasks(tasks)

• app.dock.setMenu(menu)

• …

Main Process

BrowserWindow

Create and control browser windows.

Main Process

BrowserWindow

Options

• width

• height

• resizable

• movable

• minimizable

• maximizable

• closable

• show

Main Process

• skipTaskbar

• kiosk

• title

• icon

• frame

• autoHideMenuBar

• webPreferences

• …

BrowserWindow

Events:

• close

• closed

• responsive

• hide

• show

• move

• focus

• blur

Main Process

• enter-full-screen

• leave-full-screen

• minimize

• swipe

• …

BrowserWindow

BrowserWindow instance properties:

• win.webContents - render and control web pages.

• win.id

Main Process

BrowserWindow

BrowserWindow instance methods:

• win.close()

• win.focus()

• win.blur()

• win.isFocused()

• win.show()

• win.hide()

• win.isVisible()

• win.setMenu(menu)

Main Process

• win.flashFrame(flag)

• win.setKiosk(flag)

• win.isKiosk()

• win.loadURL(url[, options])

• win.setThumbarButtons(buttons)

• win.setAutoHideMenuBar(hide)

• win.setIgnoreMouseEvents(ignore)

• ....

Communication between processes

Electron has several ways to communicate between the main process and renderer processes. Like

ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style

communication.

• ipcRenderer - renderer process

• ipcMain - main process

• remote - renderer process

Remote

Use main process modules from the renderer process.

Renderer Process

autoUpdater

Requires:

• HTTP server API

• code-sign

• installer (for Windows)

Server Response:

Main Process

autoUpdater

Events:

• error

• checking-for-update

• update-available

• update-not-available

• update-downloaded

Main Process

Methods:

• autoUpdater.setFeedURL(url)

• autoUpdater.checkForUpdates()

• autoUpdater.quitAndInstall()

Installer (for Windows)

• electron-winstaller

• grunt-electron-installer

• …

crashReporter

Submit crash reports to a remote server.

Main & Renderer Processes

Electron API

• Accelerator

• Global Shortcut

• Dialog

• Menu

• Tray

• Desktop Capturer

• Shell

More on http://electron.atom.io/docs

Native Node Modules

# npm install --save-dev electron-rebuild

// every time after install native module

# ./node_modules/.bin/electron-rebuild

Debuging Electron App

• Electron includes default Chrome DevTools Extension.

• Add DevTools Extension

• Debug main process (--debug=[port]; --debug-brk=[port])

• Devtron (IPC monitor; Event inspector; App Linter; Require graph)

Testing Electron App

Spectron – Electron Testing Framework built on ChromeDriver and WebDriverIO

• Full list Chromium and Electron APIs

• Interact with and verify the behavior of multiple windows from a single test.

• Can be used with any testing library like Mocha, Jasmine, AVA, Chai

Photon

Electron vs nw.js

• Entry of Application: js vs html

• Build System: libchromiumcontent vs Chromium

• Node Integration: node_bindings vs patching Chromium

• Context: Multi-context vs Single-context

http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

Built on Electron

More on http://electron.atom.io/apps

Thank you for attention!