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)
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
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
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
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