Desktop Applications with Electron

Electron is the technology used to build popular cross-platform desktop applications such as Atom, Slack, Visual Studio Code and Skype. However it suffers from a bad reputation with the community: memory and performance issues, non-native look and feel.
This presentation aims to demystify some of this bad reputation. What is Electron, when to use it, some code samples to get you started and how can we make high performance applications with it.

Examples: https://github.com/jportela/electron-presentation-examples

Transcript

1. DESKTOP APPLICATIONS WITH ELECTRON
2. BIO @joaoppcportela DESKTOP APPLICATIONS WITH ELECTRON 2007-2012 2012-2014 2014-2015 2015-now
3. https://dribbble.com/shots/5721735-InVision-Studio-Spaced-App Prototype by Joshua Oluwagbemiga https://www.invisionapp.com/studio InVision Studio
4. WHEN YOU THINK ABOUT ELECTRON...
5. Visual Studio Code GitHub Desktop Atom Skype Slack Discord
6. https://josephg.com/blog/electron-is-flash-for-the-desktop/
7. Found in https://www.reddit.com/r/ProgrammerHumor/
9. AGENDA ▸ What is Electron? ▸ When to use Electron? ▸ Getting Started with Electron ▸ Deep Dive into Electron ▸ High Performance Electron DESKTOP APPLICATIONS WITH ELECTRON
10. WHAT IS ELECTRON?
11. WHAT IS ELECTRON? CONTEXT The Web Platform Atom "Zero-compromise combination of HACKABILITY and USABILITY" https://flight-manual.atom.io/getting-started/sections/why-atom/
12. WHAT IS ELECTRON? INSIDE ELECTRON Chromium ‣ Node APIs ‣ C++ Integration ‣ Module System ‣ Browser Window
13. WHAT IS ELECTRON? ELECTRON ‣ Automatic Updates ‣ Native Menus ‣ Native Notifications ‣ Crash Reporting ‣ Debugging & Profiling ‣ Windows Installer
14. WHEN TO USE ELECTRON?
15. WHEN TO USE ELECTRON? ELECTRON'S WEAKNESSES ‣ App Size (>100MB uncompressed) ‣ Memory ‣ Performance ‣ Look and Feel
16. WHEN TO USE ELECTRON? ELECTRON'S STRENGTHS ‣ Cross Platform ‣ One Platform ‣ Web Technologies ‣ Community ‣ Developer Experience
17. WHEN TO USE ELECTRON?
18. WHEN TO USE ELECTRON? IT'S ALL ABOUT TRADE OFFS ‣ App Size ‣ Cross Platform ‣ Productivity ‣ Value
19. GETTING STARTED WITH ELECTRON
20. PREREQUISITES (FOR UNDERSTANDING DEMOS) ▸ ES 2017 (or ES 2015 + async/await) ▸ Basic Node ▸ Basic Web Development GETTING STARTED WITH ELECTRON
21. DEMO TIME ▸ Starting an Electron Application ▸ https://github.com/jportela/electron-presentation- examples ▸ /start GETTING STARTED WITH ELECTRON
22. QUICKSTART ▸ https://github.com/electron/electron-quick-start ▸ https://github.com/sindresorhus/awesome- electron#boilerplates ▸ https://github.com/jportela/electron-webpack-typescript- quickstart GETTING STARTED WITH ELECTRON
23. DEEP DIVE INTO ELECTRON
24. THE MAIN AND RENDERER PROCESS RENDERER MAIN RENDERER RENDERER DEEP DIVE INTO ELECTRON
25. MAIN PROCESS ▸ Orchestrates Browser Windows ▸ Electron APIs for deeper OS integration ▸ Node environment ▸ No Browser APIs / DOM DEEP DIVE INTO ELECTRON
26. RENDERER PROCESS ▸ Spawned from the Main Process ▸ Browser APIs / DOM ▸ Node environment DEEP DIVE INTO ELECTRON
27. IMAGE VIEWER EXAMPLE DEEP DIVE INTO ELECTRON ▸ Show JPEGs from a selected directory ▸ System Menu ▸ Multiple Windows
28. DEMO TIME DEEP DIVE INTO ELECTRON ▸ https://github.com/jportela/electron-presentation- examples ▸ /image-viewer ▸ Electron APIs: BrowserWindow, Menu, dialog ▸ NodeJS APIs: fs, path, util ▸ Electron IPC
29. HIGH PERFORMANCE ELECTRON
30. PROFILING ▸ Manually use Chrome's Profiling Tools ▸ Automatically: https://electronjs.org/docs/api/content- tracing ▸ Stats.js FPS Counter: https://github.com/mrdoob/stats.js/ ▸ Demo HIGH PERFORMANCE ELECTRON
32. PROFILING RESULTS ▸ Loading image buffer using readFile ▸ Rendering the image using the rasterizer HIGH PERFORMANCE ELECTRON
33. DEMO TIME ▸ image-viewer ▸ https://github.com/jportela/electron-presentation- examples ▸ Electron APIs: protocol ▸ Browser APIs: Image.decode() HIGH PERFORMANCE ELECTRON
35. CPU INTENSIVE PROCESSING ▸ Web Workers ▸ Background Browser Window ▸ Node Process ▸ C++ Native Module ▸ Web Assembly HIGH PERFORMANCE ELECTRON
36. INTER PROCESS COMMUNICATION ▸ Electron IPC ▸ Slow for large payloads ▸ Can potentially block GPU (see https://github.com/ electron/electron/issues/12098) ▸ Unix/Windows Sockets ▸ ZeroMQ or other IPC solutions HIGH PERFORMANCE ELECTRON
37. GENERAL TIPS ▸ Profiling ▸ Web Performance Practices ▸ Bundling ▸ C++ Native Modules ▸ Web Assembly ▸ Canvas/WebGL HIGH PERFORMANCE ELECTRON
38. RESOURCES ▸ https://electronjs.org/docs ▸ https://github.com/sindresorhus/awesome-electron ▸ https://electronjs.org/devtron ▸ https://github.com/Microsoft/vscode ▸ Electron in Action (book), Steve Kinney HIGH PERFORMANCE ELECTRON
39. Q&A