Electron: A Tale of Two Processes

Wooo! This is a talk given at JSConf Australia, December 2016. The links from the resources page are below:

- Electron Event Loops—http://electron.atom.io/blog/2016/07/28/electron-internals-node-integration
- Electron Node Integration—http://electron.atom.io/blog/2016/07/28/electron-internals-node-integration
- Essential Electron—http://jlord.us/essential-electron
- Electron API Demos App—https://github.com/electron/electron-api-demos
- Electron Quick Start—https://github.com/electron/electron-quick-start
- Awesome Electron (compilation of all resources)—https://github.com/sindresorhus/awesome-electron
- Designing Electron Apps—https://www.youtube.com/watch?v=H6IDoraEpO0

Transcript

1. Electron A Tale of Two Processes JSConf Australia 2016
2. Hi! Jessica Lord — @jllord
3. Lots ways to talk about Electron What is it? What’s it matter? Designing? Developing?
4. Essential Electron jlord.us/essential-electron
5. How Electron Electrons And how that shapes developing with Electron.
6. Electron is an open source framework for building desktop apps with web technology. Mac, Linux (& ARM), Windows HTML, CSS, JavaScript
7. You might already use Electron electron.atom.io/apps Plus the 220+ listed on the site. Make a pull request on the site to add your own! A T O M S L A C K V S C O D E B R A V E
8. Desktop Apps Native and web based Native Desktop Apps Web Based Apps Written in native languages, typically a different code base for each operating system. Libraries using parts of browsers to create desktop apps. C E F N W . J S E L E C T R O N
9. Electron Origins Formerly Atom Shell Built by GitHub for the Atom text editor when the other options were too cumbersome or slow. Open sourced along with Atom in 2014, renamed Electron in 2015. Launched 1.0 in May 2016. Maintained by a small team at GitHub and many other contributors. For Atom Open Source
10. Electron Parts What’s on the inside? Chromium for making web pages Node.js for filesystems and networks Native APIs desktop integration + + Electron itself is mostly C++ and combines three major components:
11. Chromium Electron Parts Electron has a library brightray, which makes Chromium easier to use inside of applications. Electron is built on Chromium, the open source core of Google Chrome—but only part of it! Chromium Content module is the part Electron uses. It’s the part that knows how to render web pages.
12. Chromium Electron Parts With Electron and the parts of Chromium it uses, you get the DOM and features that ship in the latest Chrome. • Electron updates with stable releases • Design for one browser • CSS/HTML new features • DOM • DevTools • Popular DevTools extensions
13. Node.js Electron Parts Node.js is built into Electron (making use of Node as a shared library) and can be used seamlessly. Electron apps are very similar to Node apps. Having Node means you get: • Full Node.js API • Use npm modules • Use/build native modules
14. Native APIs Electron Parts Electron comes with a set of APIs for integrating your app to the operating system. Things like creating a new window and customizing the style, opening and saving files, opening files in external apps, creating protocols for you app… You can integrate as much or as little as you’d like and there are a lot of options.
15. What about V8? Chromium and Node both use V8 right?
16. Chromium and Node share V8! @catmapper
17. Sharing V8 One JS engine for Chromium and Node. Chromium and Node.js both use the JavaScript engine V8. In Electron, Chromium and Node share one V8. They share the version that ships with the version of Chromium in Electron. Sometimes this means patching Node, sometimes not. With this V8 comes support of >90% of ES6.
18. Recap The major components Chromium for making web pages Node.js for filesystems and networks Native APIs desktop
 integration + + A shared JS engine
19. Take a deeper dive! How are Node and Chromium integrated?
20. Chromium and Node.js both have their own event loops. Chromium uses MessageLoop and Node.js uses libuv. Electron creates a new independent thread. It sends a message to MessageLoop when libuv has a new event to process the events. Electron Event Loops How do these parts work together?
21. Chromium
 MessageLoop
22. Node.js
 libuv Chromium
 MessageLoop
23. File Descriptor Node.js
 libuv Chromium
 MessageLoop
24. Electron
 I/O Thread File Descriptor Node.js
 libuv Chromium
 MessageLoop
25. NEW 
 EVENT! File Descriptor Electron
 I/O Thread Node.js
 libuv Chromium
 MessageLoop
26. NEW 
 EVENT! File Descriptor New Electron thread learns of new events in Node using the same file descriptor libuv uses. 1 Electron
 I/O Thread Node.js
 libuv Chromium
 MessageLoop
27. Electron’s thread then tells Chrome’s MessageLoop to stop and clear libuv’s events. New Electron thread learns of new events in Node using the same file descriptor libuv uses. NEW 
 EVENT! File Descriptor 1 2 Electron
 I/O Thread Node.js
 libuv Chromium
 MessageLoop
28. You get Node That’s the important part.
29. Multi-Process Architecture @catmapper
30. There are two Processes Title track!
31. Two
 Processes Main and Renderer Main Process Renderer Process Controls the app’s life cycle, CPU heavier native functionality and creates and manages the renderer processes. Draws web pages and is every window in your app. You can have multiple, they can be invisible and they’re a separate process.
32. Two
 Processes Main and Renderer Main Process Renderer Process • HTML, CSS, JS files • Node.js • DOM APIs • Popular DevTools extensions • Electron API renderer process modules • JS files • Node.js • Electron API main process modules
33. Process Relationship Think of it like this Chrome File Edit View History Main Process
34. Process Relationship Think of it like this Chrome File Edit View History Main Process Renderer Process
35. Process Relationship Think of it like this Chrome File Edit View History Main Process Renderer Process Renderer Process Renderer Process
36. In your app Renderer Process It might be like this Main Process
37. Multiple Renderer Processes It might be like this Renderer Process Renderer Process Renderer Process (hidden) Use hidden renderer processes to run JavaScript for your app in a separate process. Chrome File Edit View History Main Process
38. WebViews Embed external content Renderer Process WebView WebViews allow you to embed external content into your page and have it in a separate process. Chrome File Edit View History Main Process
39. Electron API and the processes Main, renderer or both.
40. Electron’s APIs are grouped into modules. Each module is compatible with one of the processes. A few modules work with both. Electron API and the Processes Main, renderer or both APIs for making new windows are in the BrowserWindow module which works with the main process. The module for using the system clipboard, named clipboard, works in both processes.
41. Electron API and the Processes Main, renderer or both
42. Electron API and the Processes Main, renderer or both
43. Some modules, like BrowserWindow, are core to every project, others are there for you to use or not depending on your app’s needs. Creating new windows, BrowserWindow; using native dialogs, dialog; use the system’s clipboard, clipboard; create menus, menu; check the system preference settings, systemPreferences; communicate between the processes, ipcMain or ipcRenderer… Modules Use what you need For example—
44. Communicate with IPC Use IPC module to pass messages and trigger events between the processes. Renderer Process Chrome File Edit View History Main Process main.js index.html
45. Communicate with IPC ipcMain and ipcRenderer <script> var ipcRenderer = require(‘electron').ipcRenderer 
 ipcRenderer.send(‘open-error-dialog’) </script> Show an error dialog from renderer process: Get message in main process, open dialog: var ipcMain = require('electron').ipcMain var dialog = require('electron').dialog ipcMain.on(‘open-error-dialog’, function (event) { dialog.showErrorBox('An Error Message', 'Eeek!') }) index.html main.js
46. Remote Module Use this to access the main process from the renderer You can use main process modules from the renderer process if you use the remote module. But note, behind the scenes it’s using synchronous IPC calls to execute. <script> var dialog = require('electron').remote.dialog dialog.showErrorBox('An Error Message', ‘Eeek!') </script> Show an error dialog from renderer process: index.html
47. Data Between Processes Ways to set and get data You can use HTML5 APIs like the StorageAPI, localStorage or indexedDB to share data between renderer processes (web pages). You can also still use IPC or remote modules to store objects as globals in the main process. Reading and writing files with Node is another option for accessing data.
48. See what you can do Get ideas and code samples from the Electron API Demos app
49. Electron API and platforms Cross platform APIs Electron has many APIs that work across all the supported platforms: Linux, Mac and Windows. You use the API once and Electron figures out what OS the user is on and targets the correct native API.
50. Some APIs are unique to one operating system’s feature. The operating systems are noted in the API documentation. Electron API and platforms Specific platform APIs
51. If you’re using a platform specific API, you can handle that with an if statement —no separate codebase. var BW = require('electron').BrowserWindow var win = new BW({width: 800, height: 600}) if (process.platform === 'darwin') { win.setVibrancy('light') } For example, on Mac you can set the vibrancy (transparency) of a window: Electron API and platforms Specific platform APIs Main process:
52. Integrate if you want Ultimately it’s up to you how much you want to integrate with the native OS. Open an HTML file or external site Use Node for filesystem access Build native UIs, work at startup, auto update, style match OS, ship to app stores… M I N I M U M A L O T A L I T T L E
53. So what is development like? Basic Electron setup.
54. It’s like making a website, but only caring about one browser & getting to use Node & OS features. Electron Dev Environment Two ways to think about it Or—it’s like building a Node app and getting to build an interface in HTML/CSS. You can use your favorite front end framework or vanilla JS or ES6 or whatever, live your best life.
55. Node Everywhere Magical HTML playground <script> element.textContent = fs.readFileSync(filePath) </script> Read files into the DOM <script> if (process.platform === 'win32') { document.querySelector('body').classList.add('win32') } </script> Change styles based on platform <script> require('./app.js') </script> Use Node requires
56. Electron Dev Environment Basic app setup main: “main.js” In your package.json, tell Electron where your main process file is. main: “main.js” package.json 1 1
57. Electron Dev Environment Basic app setup main: “main.js” Main Process Use Electron main process modules to start up your app and launch a renderer process (window) with an HTML file. package.json main.js 1 2 2
58. Electron Dev Environment Basic app setup Renderer Process index.html Use Electron renderer process modules, HTML and CSS to create the look and interactions of your app. main: “main.js” Main Process package.json main.js 1 3 2 3
59. Electron Quick Start A barebones Electron app to start a project with # Clone the Quick Start repository $ git clone https://github.com/electron/electron-quick-start # Go into the repository $ cd electron-quick-start # Install the dependencies and run $ npm install && npm start
60. Electron Accessibility Build accessible Electron apps! Electron apps share accessibility issues with web pages. Use tools to audit your app. DevTools extension Devtron: Khan Academy’s tota11y pairs well. DevTools extension, Devtron, uses Google’s accessibility auditing library.
61. Electron Resources Get more information http://electron.atom.io/blog/2016/07/28/electron-internals-node-integration Electron Event Loops http://electron.atom.io/blog/2016/07/28/electron-internals-node-integration Electron Node Integration http://jlord.us/essential-electron Essential Electron https://github.com/sindresorhus/awesome-electron Awesome Electron (compilation of all resources) https://github.com/electron/electron-api-demos Electron API Demos App https://github.com/electron/electron-quick-start Electron Quick Start https://www.youtube.com/watch?v=H6IDoraEpO0 Designing Electron Apps
62. Thank you! Jessica Lord — @jllord