In essence, an Electron application is made up of three notable components:
- A Chromium browser window to which your application will be rendered
- Your application’s source code
To get a better idea of how these pieces interact, take a look at the diagram below:
Every Electron app uses a “main” process to handle the core application lifecycle and spins up any number of different “renderer” processes that behave like any traditional web application. Using IPC patterns (inter-process communication), your web interfaces will be able to interact with the user’s computer and deliver a more robust and immersive experience.
Since Electron runs on Chromium, it provides you with a browser window for a new or existing web application. Basically, it’s flexible enough to where you can still use your favorite front-end libraries (React, Angular, Vue, etc.) to create awesome web interfaces. Combining that with NodeJS, your app will be able to utilize the user’s machine in new and exciting ways.
Electron has taken the JS community by storm, and it behooves any front-end developers (or any engineer for that matter) to at least get their feet wet in this technology. While desktop application has its own challenges and nuances, Electron does a decent job in introducing engineers to the desktop development world and opens the doors to possibilities that just aren’t available without it. If you’re not yet convinced, feel free to check out the docs to learn more. If you’re looking to dig into some technical implementation, I’ll soon be writing a step-by-step guide in setting up your own Electron app, as well as show you how to wrap an existing web application in Electron so you won’t need to start from scratch. I’ll also provide you with resources that can help expand your knowledge and skillsets in what’s now becoming the hottest framework on the market. Stay tuned...