Build Cross Platform Desktop Application with Electron

@JSDC.TW 2015

1. Build Cross Platform Desktop Application with Electron @kidwm 1
2. Why to Build Desktop Application?
3. Desktop Factors •  Massive Assets (Game) •  Quick Typing (Messenger) •  Urgent Usage (Office) •  Frequent Access (Music) Show Logo to your user constantly 3
4. How to Build Desktop Application?
5. How to Build Cross Platform Desktop Application?
6. Cross Platform Technology •  Java •  GTK+ / Qt •  XULRunner •  Chrome Apps •  Chromium Embedded Framework CEF everywhere! 6
7. CEF integrated with nodejs •  brackets-shell •  NW.js (node-webkit) •  Electron (atom-shell) Electron everywhere! 7
8. What is Electron?
9. 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
10. browser process renderer process renderer renderer process process ipc
11. main.js var app = require('app') ; app.on('ready', function() {
12. electron-prebuilt sudo npm install --global electron-prebuilt electron main.js 12
13. Features
14. require modules built-in modules and npm packages modules for main process and renderer process read module documentation 14
15. Inter-Process Communication
16. ipc •  ipc.send(channel, args) •  ipc.on(channel, callback) browser process renderer process renderer renderer process process ipc 16
17. message channel app.js (renderer process) ipc.send ('connect', url); main.js (browser process) ipc.on ('connect', function(event, url){}); 17
18. remote •  remote.require(module) •  remote.getCurrentWindow() •  remote.getGlobal(name) browser process renderer process renderer renderer process process ipc 18
19. remote procedure call main.js (browser process) global['config'] = JSON.parse(fs.readFileSync(path, 'utf8')); app.js (renderer process) remote. getGlobal('config') ; 19
20. browserWindow & webContents •  window.capturePage() •  webContents.printToPDF() •  webContents.enableDeviceEmulation() •  webContents.sendInputEvent() •  webContents.executeJavaScript(code[, userGesture]) 20
21. webContents.session •  session.cookies •  session.enableNetworkEmulation() •  session.setProxy() •  session.clearStorageData() 21
22. <webview />
23. webview •  preload script •  disable websecurity •  webview.openDevTools() •  webview.insertCSS() 23
24. shell
25. shell •  shell.openExternal(url) •  shell.openItem(fullPath) •  shell.showItemInFolder(fullPath) •  shell.moveItemToTrash(fullPath) 25
26. dialog
27. dialog •  dialog.showOpenDialog() •  dialog.showSaveDialog() •  dialog.showMessageBox() remote.require('dialog'). showOpenDialog({
28. menu
29. menu template var Menu = remote.require('menu') ; var menu = Menu.buildFromTemplate([{
30. contextmenu event window.addEventListener('contextmenu', function (e) {
31. tray
32. menubar 32
33. global-shortcut
34. auto-updater
35. Development Tips
36. Augmentation Add-on •  Native Node Module •  node-ffi •  PPAPI (Flash) 36
37. -webkit-user- drag: none;
38. window.process
39. electron- packager
40. asar
41. Pros •  Latest nodejs and Chrome integration •  Expose many browser features •  Actively Developing •  Update with Upstream Quickly •  Great Community Support 41
42. Cons •  binary size is big⋯ •  limited native system features (still improving) •  lack some browser features (eg. workers) but you have nodejs & npm! 42
43. Who uses Electron?
44. Kitematic
46. Slack
47. Caprine
48. nodeshot
49. Nightmare
50. Kaku
51. Mojibar
52. Plasmon
53. Plasmon •  http://pcman.ptt.cc/ •  Powered by pcman.js •  currently focus in Mac OSX •  Welcome contribution 53
54. more on Awesome Electron
55. Thanks! @kidwm 55