Methods to use Electron to construct responsive desktop apps

If you are like me, you love JavaScript and its ecosystem, and you have been building amazing web applications using frameworks like React or performant web servers with NodeJS . Now you want to develop a desktop application, and you don’t want to learn a new programming language, or perhaps you want to re-use as much as you can from existing web projects. Here is when Electron enters the picture to save the day.

Electron allows you to build desktop applications using HTML, CSS, and JavaScript. There are many arguments on the internet against Electron, one of them being its performance and many times low-quality apps, but don’t blame the framework; Electron is powerful and can be performant. Today, many popular applications run on top of Electron, such as VS Code, Slack, Skype, Discord, and more.

But why is it then that many people argue so poorly against it? The problem starts with the apps and the way people use Electron. For many, porting a web application to an Electron means taking your existing code as-is and embedding it into an Electron container. Is this a terrible thing to do? Maybe not, but you are not taking advantage of the power of Electron to its fullest. You are merely changing a browser tab for an independent application.

What can we improve? In this article, we will explore the basics of Electron, and we will build a sample application to show some of the Electron ways.

[Read: Neural’s market outlook for artificial intelligence in 2021 and beyond]

How does Electron work?

Electron is built on top of 3 main components:

  • Chromium: responsible for the web content
  • NodeJS: for interacting with the OS
  • Custom APIs: to solve for common issues when dealing with the OS

Each of these components interacts on a different level on the Electron architecture layer, as shown in the architecture diagram.