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

Electron: A Tale of Two Processes

Jessica
December 01, 2016

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

Jessica

December 01, 2016
Tweet

More Decks by Jessica

Other Decks in Technology

Transcript

  1. Lots ways to talk about Electron What is it? What’s

    it matter? Designing? Developing?
  2. Electron is an open source framework for building desktop apps

    with web technology. Mac, Linux (& ARM), Windows HTML, CSS, JavaScript
  3. 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
  4. 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
  5. 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
  6. 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:
  7. 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.
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. Recap The major components Chromium for making web pages Node.js

    for filesystems and networks Native APIs desktop
 integration + + A shared JS engine
  13. 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?
  14. 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
  15. 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
  16. 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.
  17. 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
  18. Process Relationship Think of it like this Chrome File Edit

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

    View History Main Process Renderer Process Renderer Process Renderer Process
  20. 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
  21. 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
  22. 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.
  23. 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—
  24. 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
  25. 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
  26. 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
  27. 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.
  28. See what you can do Get ideas and code samples

    from the Electron API Demos app
  29. 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.
  30. 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
  31. 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:
  32. 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
  33. 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.
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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.
  40. 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