Electron is a framework to build cross-platform desktop application using web technologies.
The main web technologies for developing in Electron are HTML, CSS and JavaScript. It also uses Node.js framework extensively.
It is a free and open source software (FOSS) under a permissive MIT license.
It is developed by OpenJS Foundation.
Description of Electron
Electron embeds the web browser Chromium and the JavaScript framework Node.js to allow to run web applications as desktop applications.
The advantages of Electron are:
- Portability. The main advantage of Electron is that it makes apps compatible with any OS that supports Chromium web browser, i.e. virtually all modern OSs. Unlike other cross-platform technologies like Xamarin or Java, not even small changes or extra tests are necessary to port the app.
- Web app reusability. If you need or already have a web app, you can reuse it to create a desktop app
- Use of web technologies. If you are already familiar with web technologies, it is a plus as you do not need to learn or master a different desktop app technology.
- Large ecosystem: Electron is based on Node.js, that is a popular solutions that has many libraries, documentation, examples and communities.
The disadvantages of Electron are:
- Performance. It has a resource-intensive nature, as it relies on a full web browser to render applications. This can lead to higher memory usage and slower performance compared to native applications.
- Integration with OS. It is less integrated with host OS, compared to native applications.
- Mobile app support: while there are some developments, Electron is not mature to work on mobile phones OS like Android or iOS.
A similar solution to Electron that is focused on making web apps work on mobile phones is Ionic’s Capacitor.
Electron Developer Requisites
A developer that creates or maintains Electron apps should have at least knowledge in:
- HTML: for the web app components
- CSS: for the web app format
- JavaScript: for the web app logic
- Node.js: Electron is based on the Node.js back-end web framework.
Electron Architecture
There are two main processes: the main process and renderer processes.
- Main Process:
- The main process in Electron is responsible for managing the lifecycle of the application, creating windows, handling system events, and interacting with native APIs.
- It runs in the background and has access to Node.js modules and APIs.
- Since it doesn’t have direct access to the DOM of the web pages, it can’t manipulate the content displayed in the renderer processes directly.
- Renderer Process:
- Each Electron window runs in its own renderer process, which is essentially a Chromium web page.
- The renderer process is where your web content (HTML, CSS, JavaScript) runs.
- It has access to the DOM, and you can use JavaScript to manipulate the content displayed in the window.
There are different ways to bridge the gap between the main process and the renderer process:
- Using a preload script to your renderer
- Using inter-process communication (IPC)
This is where attaching a preload script to your renderer comes in handy. A preload script runs before the renderer process is loaded, and has access to both renderer globals (e.g. window and document) and a Node.js environment. You can find an example using this on this external link.
Electron provides a mechanism for inter-process communication (IPC). IPC allows communication between the main process and renderer processes. You can send messages from the main process to the renderer process (and vice versa) using IPC.
Resources to learn Electron
To work with Electron, it is recommended to have already some notions on front-end web development (HTML and CSS), Node.js framework, and therefore, JavaScript programming language.
You can find an introduction to Node.js on this post.
Once you are ready to learn Electron, you can start with the official starter tutorial on this external link.
Examples of apps using Electron
Examples of popular apps using Electron:
- Visual Studio Code
- Skype
- Slack
- Discord
- Notion
- Obsidian
- 1Password