Distinct & accurate slide deck about Electron as a framework for creating native desktop applications from *instinctools frontend developer Andrew Zhemojtel.

1. Build cross platform desktop apps with web
technologies

2. Electron is a framework for creating native applications with web
technologies like JavaScript, HTML and CSS.
What is Electron?

3. Electron History
● Created GitHub (2013)
● Formally Atom Shell
● Open sourced (May 2014)
● Electron v1.0.0 (May 9th 2016)

4. INSIDE ELECTRON
+
node.js chromium

5. INSIDE ELECTRON
+
node.js chromium
libchromiumcontent

6. Electron Features

7. HTML/CSS/JS

8. Cross Platform

9. Native Menu &
Notifications

10. Auto Update

11. Crash reporting

12. Debugging

13. Basic Concepts

14. Main Process
Main process responsible for the integration and interaction with GUI
operating system, for creating web pages.

15. Renderer Process
Each web page in Electron runs in its own process, which is called renderer
process.

17. Hello World!

18. Installation
# npm install electron-prebuilt

19. Structure

20. package.json

21. main.js

22. index.html

23. Run app
# electron .
// or
# ./node_modules/.bin/electron .

27. Application Packaging
• electron-packager
• electron-builder
• grunt-electron-builder
• gulp-electron
// command line
# electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

28. Application Packaging
# npm install -g asar
# asar pack your-app app.asar

29. Demo

30. Electron API

31. App
Control your application’s event lifecycle.
Main Process

32. App
Events:
• ready
• before-quit
• window-all-closed
• will-quit
• quit
• …
Main Process

33. App
Methods
• app.quit()
• app.getAppPath()
• app.getVersion()
• app.setName(name)
• app.addRecentDocument(path)
• app.setUserTasks(tasks)
• app.dock.setMenu(menu)
• …
Main Process

34. BrowserWindow
Create and control browser windows.
Main Process

35. BrowserWindow
Options
• width
• height
• resizable
• movable
• minimizable
• maximizable
• closable
• show
Main Process
• skipTaskbar
• kiosk
• title
• icon
• frame
• autoHideMenuBar
• webPreferences
• …

36. BrowserWindow
Events:
• close
• closed
• responsive
• hide
• show
• move
• focus
• blur
Main Process
• enter-full-screen
• leave-full-screen
• minimize
• swipe
• …

37. BrowserWindow
BrowserWindow instance properties:
• win.webContents - render and control web pages.
• win.id
Main Process

38. BrowserWindow
BrowserWindow instance methods:
• win.close()
• win.focus()
• win.blur()
• win.isFocused()
• win.show()
• win.hide()
• win.isVisible()
• win.setMenu(menu)
Main Process
• win.flashFrame(flag)
• win.setKiosk(flag)
• win.isKiosk()
• win.loadURL(url[, options])
• win.setThumbarButtons(buttons)
• win.setAutoHideMenuBar(hide)
• win.setIgnoreMouseEvents(ignore)
• ....

39. Communication between processes
Electron has several ways to communicate between the main process and renderer processes. Like
ipcRenderer and ipcMain modules for sending messages, and the remote module for RPC style
communication.
• ipcRenderer - renderer process
• ipcMain - main process
• remote - renderer process

41. Remote
Use main process modules from the renderer process.
Renderer Process

42. autoUpdater
Requires:
• HTTP server API
• code-sign
• installer (for Windows)
Server Response:
Main Process

43. autoUpdater
Events:
• error
• checking-for-update
• update-available
• update-not-available
• update-downloaded
Main Process
Methods:
• autoUpdater.setFeedURL(url)
• autoUpdater.checkForUpdates()
• autoUpdater.quitAndInstall()

44. Installer (for Windows)
• electron-winstaller
• grunt-electron-installer
• …

45. crashReporter
Submit crash reports to a remote server.
Main & Renderer Processes

46. Electron API
• Accelerator
• Global Shortcut
• Dialog
• Menu
• Tray
• Desktop Capturer
• Shell
More on http://electron.atom.io/docs

47. Native Node Modules
# npm install --save-dev electron-rebuild
// every time after install native module
# ./node_modules/.bin/electron-rebuild

48. Debuging Electron App
• Electron includes default Chrome DevTools Extension.
• Add DevTools Extension
• Debug main process (--debug=[port]; --debug-brk=[port])
• Devtron (IPC monitor; Event inspector; App Linter; Require graph)

49. Testing Electron App
Spectron – Electron Testing Framework built on ChromeDriver and WebDriverIO
• Full list Chromium and Electron APIs
• Interact with and verify the behavior of multiple windows from a single test.
• Can be used with any testing library like Mocha, Jasmine, AVA, Chai

50. Photon

51. Electron vs nw.js
• Entry of Application: js vs html
• Build System: libchromiumcontent vs Chromium
• Node Integration: node_bindings vs patching Chromium
• Context: Multi-context vs Single-context
http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

52. Built on Electron
More on http://electron.atom.io/apps

53. Thank you for attention!