Electron Fundamentals
Electron is a framework for building desktop applications with HTML, CSS, and JavaScript. It packages Chromium for the interface, Node.js for privileged work, and native desktop APIs behind a multi-process application model.
itMobile and client application development | OpenSkills.info
Intro
Electron Fundamentals
Electron is a framework for building desktop applications with web technologies. An Electron application ships a Chromium browser engine, a Node.js runtime, and Electron APIs that connect web content to desktop capabilities. One JavaScript and HTML codebase can target Windows, macOS, and Linux, while platform-specific code handles differences such as menus, installers, signing, and operating-system integration.
That combination is Electron's central tradeoff. A team can reuse web skills and frontend code, and every supported desktop receives a consistent browser engine. The application also carries the cost of that embedded runtime. Downloads, memory use, startup work, native-module compatibility, and framework updates all need active management.
The process architecture
Electron follows Chromium's multi-process architecture. The main process is the application's privileged coordinator. It starts from the entry point named by package.json, manages the application lifecycle, creates windows, and calls Electron APIs for native desktop features. There is one main process per application.
Each BrowserWindow loads its interface in a separate renderer process. A renderer behaves like a web page: it builds the document, runs client-side JavaScript, and handles user interaction. A renderer crash can take down that window without necessarily ending the main process or other windows.
A preload script runs before a renderer's page code. It is the controlled bridge between privileged Electron capabilities and the web interface. With context isolation enabled, the preload script and the loaded page run in separate JavaScript contexts. The preload exposes a narrow API through contextBridge instead of giving the renderer unrestricted Node.js access.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://www.electronjs.org/
Supports
- Electron combines JavaScript, HTML, and CSS with Chromium and Node.js for cross-platform desktop applications
- Official product homepage and manifest official URL
- https://www.electronjs.org/docs/latest/tutorial/tutorial-prerequisites
Supports
- Official tutorial prerequisites and foundation reference rationale
- https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app
Supports
- Package entry point, app readiness, BrowserWindow creation, and platform lifecycle behavior
- First-app reference rationale
- https://www.electronjs.org/docs/latest/tutorial/process-model
Supports
- Chromium-derived multi-process architecture
- Main, renderer, preload, and utility-process responsibilities
- BrowserWindow and webContents relationships
- https://www.electronjs.org/docs/latest/tutorial/ipc
Supports
- Renderer-to-main one-way messaging, main-to-renderer messaging, and request-response patterns
- ipcRenderer.invoke with ipcMain.handle and structured-clone limits
- https://www.electronjs.org/docs/latest/tutorial/context-isolation
Supports
- Separate preload and page JavaScript contexts
- contextBridge exposure and method-per-message safety guidance
- Context isolation enabled by default since Electron 12
- https://www.electronjs.org/docs/latest/tutorial/sandbox
Supports
- Chromium sandbox restrictions and Electron renderer sandbox behavior
- Relationship between sandboxing, preload capability, and Node.js integration
- https://www.electronjs.org/docs/latest/tutorial/security
Supports
- Security checklist covering secure content, Node.js integration, context isolation, sandboxing, permissions, navigation, new windows, IPC sender validation, Content Security Policy, and current Electron versions
- https://www.electronjs.org/docs/latest/tutorial/application-distribution
Supports
- Packaging an application with an Electron executable
- Electron Forge recommendation and target distributable workflow
- https://www.electronjs.org/docs/latest/tutorial/code-signing
Supports
- Code-signing purpose and macOS notarization in application distribution
- https://www.electronjs.org/docs/latest/tutorial/using-native-node-modules
Supports
- Rebuilding native Node.js modules for Electron's ABI, target platform, and architecture
- https://www.electronjs.org/docs/latest/tutorial/updates
Supports
- Update mechanisms and platform-specific distribution choices
- https://www.electronjs.org/docs/latest/tutorial/performance
Supports
- Avoiding eager module loading, blocking main-process operations, and unnecessary work
- Performance reference rationale
- https://github.com/sindresorhus/awesome
Supports
- Canonical Awesome catalog identifies Awesome Electron under Platforms
- https://github.com/sindresorhus/awesome-electron
Supports
- Discovery of electron-builder, electron-vite, electron-store, electron-log, Electronegativity, and Hydraulic Conveyor
- https://www.electron.build/
Supports
- Packaging, installers, archives, code signing, publishing, and electron-updater rationale
- https://electron-vite.org/
Supports
- Vite-based builds for main, preload, and renderer processes and hot reloading rationale
- https://github.com/sindresorhus/electron-store
Supports
- JSON settings persistence, user-data location, schema validation, atomic writes, and database limitation
- https://github.com/megahertz/electron-log
Supports
- File and console logging across Electron and Node.js processes
- https://github.com/doyensec/electronegativity
Supports
- Electron security misconfiguration and anti-pattern scanning
- https://conveyor.hydraulic.dev/
Supports
- Signed desktop packaging, distribution, and update workflow without a dedicated update server
- https://www.electronjs.org/blog/electron
Supports
- Atom Shell renamed Electron on 2015-04-23
- Framework origins in Atom and Chromium-Node event-loop integration
- https://www.electronjs.org/blog/electron-1-0
Supports
- Electron 1.0 released on 2016-05-11 as an API stability and maturity milestone
- https://www.electronjs.org/blog/typescript/
Supports
- Electron bundled TypeScript definitions from version 1.6.10, announced 2017-06-01
- https://www.electronjs.org/blog/electron-2-0
Supports
- Electron 2.0 released on 2018-05-02 and adopted semantic versioning
- https://www.electronjs.org/blog/governance/
Supports
- Working-group governance introduced on 2019-03-18
- https://www.electronjs.org/blog/12-week-cadence/
Supports
- Scheduled 12-week major release cadence announced on 2019-05-13, beginning with Electron 6
- https://www.electronjs.org/blog/electron-openjs-impact-project
Supports
- Electron graduated to an OpenJS Foundation Impact Project on 2020-06-23 after entering incubation in 2019
- https://www.electronjs.org/blog/electron-10-0/
Supports
- Electron 10 disabled the remote module by default on 2020-08-25 as part of its deprecation path
- https://www.electronjs.org/docs/latest/tutorial/context-isolation
Supports
- Context isolation became enabled by default in Electron 12, released in 2021
- https://www.electronjs.org/blog/electron-20-0
Supports
- Electron 20 released on 2022-08-02 with renderer sandboxing enabled by default unless explicitly disabled
- https://www.electronjs.org/blog/10-years-of-electron
Supports
- Project retrospective confirming version, cadence, governance, and foundation milestones
- https://www.electronjs.org/
Supports
- Electron landscape placement as the bundled Chromium and Node.js option
- https://tauri.app/
Supports
- Tauri uses an operating-system web renderer with a Rust application layer and supports multiple frontend frameworks
- https://nwjs.io/
Supports
- NW.js combines web technologies with direct Node.js access from the DOM on Windows, macOS, and Linux
- https://neutralino.js.org/docs/
Supports
- Neutralinojs uses the operating-system web library and a lightweight native layer rather than bundling Chromium and Node.js
- https://wails.io/
Supports
- Wails combines web frontends with Go application logic and native desktop integration
- https://flutter.dev/development/desktop
Supports
- Flutter desktop uses a native-compiled custom-rendering stack rather than a bundled browser engine
- https://www.qt.io/development/desktop-app-development
Supports
- Qt provides cross-platform desktop libraries, native integration, and QML or C++ application paths
- https://avaloniaui.net/
Supports
- Avalonia provides a cross-platform .NET, XAML, and C# UI stack using its own rendering backend