Electron Basics and Fundamentals
Learn the basics and fundamentals of Electron in this post. We’ll cover topics such as what Electron is, the main process, browser processes and more. This will be a short introduction— we’ll build projects in the upcoming tutorials.
Prerequisites
This post will be all theory so you don’t need anything installed right now.
- Knowledge of JavaScript
- Knowledge of HTML/CSS is recommended
- NodeJS installed
The Basics
Let’s start with the important basic ideas, the why and the how.
What is Electron?
Electron is a framework for building desktop applications with web technologies. It’s built upon the open source browser Chromium ( similar to Google Chrome ).
Basically, it’s a Browser++ you can do everything you can with a browser and more.
Why does Electron Exist?
Electron was created by GitHub in 2013 and used to create Atom — a code editor. Because the majority of users on GitHub use JavaScript, having an editor made in JavaScript allowed it to be easily extensible and it soon became popular.
Why Should I Use Electron?
Electron is primarily for JavaScript developers who want to build a desktop application. It’s still nice to use compared to creating GUIs in other programming languages but it’s often slower performance wise.
- You are a web developer and want to make desktop apps
- You want to use your team of web developers to make a desktop app
- You want to use HTML/CSS/JS to make a desktop app
- You want to use the large assortment of libraries on npm.
Electron Core
We’ll quickly cover the core concepts you need to know before we start building projects.
Event Driven
Electron is built upon Node and as you may know, Node prides itself upon being “an asynchronous event-driven JavaScript runtime”. Electron follows the same pattern — it’s heavily event based.
Most of the events in Electron live on the app object.
Main Process
Every Electron app has exactly one main process aka “browser process”.
It includes/handles:
- Native functionality such as creating menus, trays, notifications, etc.
- Creating renderer processes
- Full Node API
- Serves as the entry point to your application
Renderer Process
A renderer process is simply a new browser window inside your application.
- You can have multiple renderer processes
- They can be hidden and run in the background
- They each have their own process
In Chromium Terms
Electron is still very similar to Chromium. In Chromium, each tab is a renderer process while the overall window is the main process.
In Electron we have the main process which you don’t really see, and each window we create is a renderer process.
Inter-Process Communication
This is how your main process communicates with renderer processes and how renderer processes communicate with other renderer processes. Every message must go through the IPC.
Onto Building Projects
This was a quick introduction to some of the core concepts. Now let’s build projects and see examples of these concepts in practice. Find a list of all the project tutorials on the index page below.
References and Links
Thanks for reading! Leave any feedback or questions in the comments below.
