Building Cross-platform Desktop Apps with Electron

Slides presented during the YouTube video session "Building Cross-platform Desktop Apps with Electron" on 16 April 2022: https://www.youtube.com/watch?v=RRRXj4Q0MSc

2. What Is Electron? What Is Electron? Programming with Behnood • JavaScript Framework (for building cross-platform desktop apps) • JavaScript, HTML & CSS • Developed & Maintained by GitHub • Based on Node.js Runtime (backend) & Chromium Rendering Engine (frontend)
3. Electron Apps Electron Apps Programming with Behnood
4. How Chromium Works? How Chromium Works? Browser Architecture Browser Architecture Programming with Behnood Diagram of Chrome’s multi-process architecture. Multiple layers are shown under Renderer Process to represent Chrome running multiple Renderer Processes for each tab. Different processes pointing to different parts of browser UI. https://developers.google.com/web/updates/2018/09/inside-browser-part1
5. How Chromium Works? How Chromium Works? Process Models Process Models Programming with Behnood Single Process Model Multi-Process Model https://www.chromium.org/developers/design-documents/process-models/
6. How Chromium Works? How Chromium Works? Navigation, Loading & Performance Navigation, Loading & Performance Programming with Behnood https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
7. How Chromium Works? How Chromium Works? Navigation, Loading & Performance Navigation, Loading & Performance Programming with Behnood PRPL: • Push critical resources for the initial URL route using <link preload> and HTTP/2 • Render initial route • Pre-cache remaining routes • Lazy-load and create remaining routes on demand https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e https://web.dev/apply-instant-loading-with-prpl/
8. How Electron Works? How Electron Works? The Multi-Process Model The Multi-Process Model Programming with Behnood https://www.google.com/googlebooks/chrome/ Electron inherits its multi-process architecture from Chromium, which makes the framework architecturally very similar to a modern web browser. https://www.electronjs.org/docs/latest/tutorial/process-model
9. How Electron Works? How Electron Works? The Main Process The Main Process Programming with Behnood Main Process Window Window Management Management Application Application Lifecycle Lifecycle Native Native APIs APIs main.js BrowserWindow app main.js Window Management Application Lifecycle
10. How Electron Works? How Electron Works? The Renderer Process The Renderer Process Programming with Behnood Main Process Renderer Process Renderer Process Renderer Process index.html The renderer has no direct access to require or other Node.js APIs. In order to directly include NPM modules in the renderer, you must use the same bundler toolchains (for example, Webpack) that you use on the web. https://www.electronjs.org/docs/latest/tutorial/process-model
11. How Electron Works? How Electron Works? Preload Scripts Preload Scripts Programming with Behnood preload.js The preload script shares a global window interface with the renderers and can access Node.js APIs, but you cannot directly attach any variables from the preload script to window because of the contextIsolation default. Context Isolation means that preload scripts are isolated from the renderer's main world to avoid leaking any privileged APIs into your web content's code. Instead, use the contextBridge module to accomplish this securely. https://www.electronjs.org/docs/latest/tutorial/process-model
12. 3 Ways to Build Cross-Platform 3 Ways to Build Cross-Platform Desktop Apps with Electron Desktop Apps with Electron DEMO Programming with Behnood