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

Electron - Desktop GUI with Node.js

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. 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
  2. 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 }) }
  3. 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>.
  4. Browser Process User interface Network Storage Tabs Renderer Process V8

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

    Process V8 Webkit Renderer Process V8 Webkit Renderer Process V8 Webkit ResourceMessageFilter
  6. 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.
  7. 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
  8. 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.
  9. Create a menu template template : { label: 'Custom', submenu:

    [ { label: 'Do something', click: (item, focusedWindow) => { dialog.info("Yay did something ! ", "Done something") } } ] }
  10. 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}))
  11. Launcher Shortcuts (Linux) Works with Unity, GNOME, KDE (All freedesktop.org

    standard) Uses entries to .desktop file Not exactly an Electron feature
  12. Debugging the main process Add a npm script - debug:

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

    Packaging (asar) Binary (exe, app, bin) Installing (msi, dmg, deb) Auto Updates
  14. Rebranding (Windows) Rename electron.exe to anything. Change the icon with

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

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

    Electron.app/Contents/Info.plist Change the png icon inside the .app folder
  17. 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.
  18. 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)