Build Cross Platform Desktop Application with Electron

Slide 1

Slide 1 text

Build Cross Platform Desktop Application with Electron @kidwm 1

Slide 2

Slide 2 text

Why to Build Desktop Application?

Slide 3

Slide 3 text

Desktop Factors • Massive Assets (Game) • Quick Typing (Messenger) • Urgent Usage (Office) • Frequent Access (Music) Show Logo to your user constantly 3

Slide 4

Slide 4 text

How to Build Desktop Application?

Slide 5

Slide 5 text

How to Build Cross Platform Desktop Application?

Slide 6

Slide 6 text

Cross Platform Technology • Java • GTK+ / Qt • XULRunner • Chrome Apps • Chromium Embedded Framework CEF everywhere! 6

Slide 7

Slide 7 text

CEF integrated with nodejs • brackets-shell • NW.js (node-webkit) • Electron (atom-shell) Electron everywhere! 7

Slide 8

Slide 8 text

What is Electron?

Slide 9

Slide 9 text

History • Started in January 2013 • Built initially for the Atom text editor • Renamed from atom-shell • use libchromiumcontent and Brightray to wrap Chromium Content module 9

Slide 10

Slide 10 text

browser process renderer process renderer renderer process process ipc

Slide 11

Slide 11 text

main.js var app = require('app') ; app.on('ready', function() {

Slide 12

Slide 12 text

electron-prebuilt sudo npm install --global electron-prebuilt electron main.js 12

Slide 13

Slide 13 text

Features

Slide 14

Slide 14 text

require modules built-in modules and npm packages modules for main process and renderer process read module documentation 14

Slide 15

Slide 15 text

Inter-Process Communication

Slide 16

Slide 16 text

ipc • ipc.send(channel, args) • ipc.on(channel, callback) browser process renderer process renderer renderer process process ipc 16

Slide 17

Slide 17 text

message channel app.js (renderer process) ipc.send ('connect', url); main.js (browser process) ipc.on ('connect', function(event, url){}); 17

Slide 18

Slide 18 text

remote • remote.require(module) • remote.getCurrentWindow() • remote.getGlobal(name) browser process renderer process renderer renderer process process ipc 18

Slide 19

Slide 19 text

remote procedure call main.js (browser process) global['config'] = JSON.parse(fs.readFileSync(path, 'utf8')); app.js (renderer process) remote. getGlobal('config') ; 19

Slide 20

Slide 20 text

browserWindow & webContents • window.capturePage() • webContents.printToPDF() • webContents.enableDeviceEmulation() • webContents.sendInputEvent() • webContents.executeJavaScript(code[, userGesture]) 20

Slide 21

Slide 21 text

webContents.session • session.cookies • session.enableNetworkEmulation() • session.setProxy() • session.clearStorageData() 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

webview • preload script • disable websecurity • webview.openDevTools() • webview.insertCSS() 23

Slide 24

Slide 24 text

shell

Slide 25

Slide 25 text

shell • shell.openExternal(url) • shell.openItem(fullPath) • shell.showItemInFolder(fullPath) • shell.moveItemToTrash(fullPath) 25

Slide 26

Slide 26 text

dialog

Slide 27

Slide 27 text

dialog • dialog.showOpenDialog() • dialog.showSaveDialog() • dialog.showMessageBox() remote.require('dialog'). showOpenDialog({

Slide 28

Slide 28 text

Slide 29

Slide 29 text

menu template var Menu = remote.require('menu') ; var menu = Menu.buildFromTemplate([{

Slide 30

Slide 30 text

contextmenu event window.addEventListener('contextmenu', function (e) {

Slide 31

Slide 31 text

tray

Slide 32

Slide 32 text

menubar 32

Slide 33

Slide 33 text

global-shortcut

Slide 34

Slide 34 text

auto-updater

Slide 35

Slide 35 text

Development Tips

Slide 36

Slide 36 text

Augmentation Add-on • Native Node Module • node-ffi • PPAPI (Flash) 36

Slide 37

Slide 37 text

-webkit-user- drag: none;

Slide 38

Slide 38 text

window.process

Slide 39

Slide 39 text

electron- packager

Slide 40

Slide 40 text

asar

Slide 41

Slide 41 text

Pros • Latest nodejs and Chrome integration • Expose many browser features • Actively Developing • Update with Upstream Quickly • Great Community Support 41

Slide 42

Slide 42 text

Cons • binary size is big⋯ • limited native system features (still improving) • lack some browser features (eg. workers) but you have nodejs & npm! 42

Slide 43

Slide 43 text

Who uses Electron?

Slide 44

Slide 44 text

Kitematic

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Slack

Slide 47

Slide 47 text

Caprine

Slide 48

Slide 48 text

nodeshot

Slide 49

Slide 49 text

Nightmare

Slide 50

Slide 50 text

Kaku

Slide 51

Slide 51 text

Mojibar

Slide 52

Slide 52 text

Plasmon

Slide 53

Slide 53 text

Plasmon • http://pcman.ptt.cc/ • Powered by pcman.js • currently focus in Mac OSX • Welcome contribution 53