Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build Cross Platform Desktop Application with Electron

75307af344414a724528f5ba3920d01c?s=47 WM
October 04, 2015

Build Cross Platform Desktop Application with Electron

@JSDC.TW 2015

75307af344414a724528f5ba3920d01c?s=128

WM

October 04, 2015
Tweet

Transcript

  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

  45. None
  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