Tech News

How to use Electron to create responsive desktop apps

If you’re like me, you love JavaScript and its ecosystem, and you’ve built amazing web apps using frameworks like React or Efficient web servers with NodeJS . Now you want to develop a desktop application and you don’t want to learn a new programming language, or maybe you want to reuse as much as you can from existing web projects. This is where Electron comes in to save the day.

Electron allows you to create desktop applications using HTML, CSS, and JavaScript. There are many arguments on the internet against Electron, one of them being its performance and often poor quality applications, but don’t blame the executive; The electron is powerful and can be powerful. Today there are a lot of popular apps running on Electron like VS Code, Slack, Skype, Discord, etc.

But why is it then that so many people oppose it so badly? 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 integrating it into an Electron container. Is it a terrible thing to do? Maybe not, but you are not taking full advantage of the power of Electron. You simply change a browser tab to an independent application.

What can we improve? In this article, we’ll explore the basics of Electron and create a sample app to demonstrate some of the Electron methods.

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

How does Electron work?

Electron is built on 3 main components:

  • Chromium: responsible for web content
  • NodeJS: to interact with the OS
  • Custom APIs: To resolve common operating system issues

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