Electron: A Tale of Two Processes

Slide 1

Slide 1 text

Electron A Tale of Two Processes JSConf Australia 2016

Slide 2

Slide 2 text

Hi! Jessica Lord — @jllord

Slide 3

Slide 3 text

Lots ways to talk about Electron What is it? What’s it matter? Designing? Developing?

Slide 4

Slide 4 text

Essential Electron jlord.us/essential-electron

Slide 5

Slide 5 text

How Electron Electrons And how that shapes developing with Electron.

Slide 6

Slide 6 text

Electron is an open source framework for building desktop apps with web technology. Mac, Linux (& ARM), Windows HTML, CSS, JavaScript

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Desktop Apps Native and web based Native Desktop Apps Web Based Apps Written in native languages, typically a diﬀerent 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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:

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

What about V8? Chromium and Node both use V8 right?

Slide 16

Slide 16 text

Chromium and Node share V8! @catmapper

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Recap The major components Chromium for making web pages Node.js for filesystems and networks Native APIs desktop  integration + + A shared JS engine

Slide 19

Slide 19 text

Take a deeper dive! How are Node and Chromium integrated?

Slide 20

Slide 20 text

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?

Slide 21

Slide 21 text

Chromium  MessageLoop

Slide 22

Slide 22 text

Node.js  libuv Chromium  MessageLoop

Slide 23

Slide 23 text

File Descriptor Node.js  libuv Chromium  MessageLoop

Slide 24

Slide 24 text

Electron  I/O Thread File Descriptor Node.js  libuv Chromium  MessageLoop

Slide 25

Slide 25 text

NEW   EVENT! File Descriptor Electron  I/O Thread Node.js  libuv Chromium  MessageLoop

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

You get Node That’s the important part.

Slide 29

Slide 29 text

Multi-Process Architecture @catmapper

Slide 30

Slide 30 text

There are two Processes Title track!

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Process Relationship Think of it like this Chrome File Edit View History Main Process

Slide 34

Slide 34 text

Process Relationship Think of it like this Chrome File Edit View History Main Process Renderer Process

Slide 35

Slide 35 text

Process Relationship Think of it like this Chrome File Edit View History Main Process Renderer Process Renderer Process Renderer Process

Slide 36

Slide 36 text

In your app Renderer Process It might be like this Main Process

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Electron API and the processes Main, renderer or both.

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

Electron API and the Processes Main, renderer or both

Slide 42

Slide 42 text

Electron API and the Processes Main, renderer or both

Slide 43

Slide 43 text

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—

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Communicate with IPC ipcMain and ipcRenderer var ipcRenderer = require(‘electron').ipcRenderer   ipcRenderer.send(‘open-error-dialog’) 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

Slide 46

Slide 46 text

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. var dialog = require('electron').remote.dialog dialog.showErrorBox('An Error Message', ‘Eeek!') Show an error dialog from renderer process: index.html

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

See what you can do Get ideas and code samples from the Electron API Demos app

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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:

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

So what is development like? Basic Electron setup.

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

Node Everywhere Magical HTML playground element.textContent = fs.readFileSync(filePath) Read files into the DOM if (process.platform === 'win32') { document.querySelector('body').classList.add('win32') } Change styles based on platform require('./app.js') Use Node requires

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Thank you! Jessica Lord — @jllord