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

Electron - Desktop GUI with Node.js

37fbf83b7d45711e41e774e29fed710e?s=47 Arnav Gupta
September 15, 2016

Electron - Desktop GUI with Node.js

Cross platform app development in Electron


Arnav Gupta

September 15, 2016

More Decks by Arnav Gupta

Other Decks in Technology


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

  2. 5 min electron quickstart

  3. 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
  4. Add these files package.json index.html main.js

  5. Add to pacakge.json main: “main.js” This is “entry point” of

    an electron app
  6. 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 }) }
  7. Add to main.js const {app, BrowserWindow} = require('electron') app.on('ready', createWindow)

  8. Add to index.html <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>,

    Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>.
  9. None
  10. Chrome vs Electron

  11. Browser Process Tabs Renderer Process Renderer Process Renderer Process

  12. Browser Process Tabs Renderer Process V8 Webkit Renderer Process V8

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

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

    Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit ResourceMessageFilter
  15. 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.
  16. 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
  17. Node - Renderer Interactions

  18. 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.
  19. Inter Process Communication (IPC)

  20. Reference sharing between processes

  21. OS Native GUI Hooks

  22. Menu Toolbar | Context

  23. Toolbar/Application Menu : Main Process

  24. Create a menu template template : { label: 'Custom', submenu:

    [ { label: 'Do something', click: (item, focusedWindow) => { dialog.info("Yay did something ! ", "Done something") } } ] }
  25. Build menu from template and set Menu.setApplicationMenu(Menu.buildFromTemplate(menu));

  26. Context Menu : Renderer Process (via IPC)

  27. 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}))
  28. Attach to window event window.addEventListener('contextmenu', (e) => { e.preventDefault() menu.popup(remote.getCurrentWindow())

    }, false)
  29. Tray Notification Area

  30. Notifications Plain old HTML5 Webkit Notifications

  31. Recents For apps that open files

  32. Launcher Menus

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

  34. Dock Menu (OSX) When App is added to dock Extra

    launcher options
  35. Launcher Shortcuts (Linux) Works with Unity, GNOME, KDE (All freedesktop.org

    standard) Uses entries to .desktop file Not exactly an Electron feature
  36. Debugging in Electron

  37. Debugging the renderer Open Developer Tools in the window.

  38. Debugging the renderer Open Developer Tools in the window.

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

  40. Debugging the main process Add a npm script - debug:

    “electron –debug=1337.&; node-inspector&; electron “”
  41. Ship it ! Cross platform packaging and deployment Rebranding (icons)

    Packaging (asar) Binary (exe, app, bin) Installing (msi, dmg, deb) Auto Updates
  42. The Package (Mac) electron/Electron.app/Contents/Resources/app/ ├── package.json ├── main.js └── index.html

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

    Or electron/resources/ └── app.asar
  44. Rebranding (Windows) Rename electron.exe to anything. Change the icon with

    any .ico file using Windows win32 hexediting software (eg. winhex, rcedit)
  45. Rebranding (Linux) Rename electron to anything. Add a .desktop entry

    to Applications folder specifying the icon in png
  46. Rebranding (Mac) Rename Electron.app to anything. Change Application name in

    Electron.app/Contents/Info.plist Change the png icon inside the .app folder
  47. 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.
  48. The future of Electron

  49. 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)
  50. Cross-platform UI Kits/Frameworks Think ionic but for desktop apps Check

    out photon and React Desktop
  51. React Desktop

  52. React Desktop

  53. Photon (photonkit.com)

  54. Implementation demo (of what we talked of today) https://github.com/championswimmer/jsfoo-electron-example Check

    commit history for step-by-step additions
  55. Tools and Libraries https://github.com/sindresorhus/awesome-electron

  56. Thank you @championswimmer