Building Native Desktop Apps with Electron.JS

Gone are the days where Javascript is locked behind the shackles of a browser. Electron, or Electron.js, is a framework maintained by the OpenJS foundation to build native desktop applications using web technologies like JavaScript, HTML, and CSS.

More and more native applications, like Spotify, VSCode, and Slack, are all being built using Electron!

This open-source framework uses Chromium and Node.js, and it can be used to create cross-platform applications compatible with Windows, Mac, and Linux. In this article, we’ll build a simple tic-tac-toe game with Electron that can run locally.

Basics of Electron

Electron consists of three primary components:

• Chromium that handles all the web content
• Node.js that handles interaction with the operating system
• Custom APIs for additional functionality and solving common issues when dealing with the OS
  

All these components work together to facilitate a desktop application.

Additionally, Electron includes two primary processes. The main process handles window management, all OS interactions, and the renderer process is responsible for the web content.

The renderer process cannot directly interact with the OS and only communicates with it through the Main process. Depending on the application, there can be multiple renderer processes for a single main process. However, in most cases, a single main process with a single renderer that’s used to load the web application is used.

With the explanation out of the way, let’s start building.

Setting up Our Project

To use Electron, you will need to have Node.js installed in your environment. We can start by creating our npm project by running

npm init

After setting up our project, we can install Electron with:

npm i -D electron@latest

Creating the Electron Application

For our Electron app, we’re going to use a simple HTML page to facilitate a game of pong. This way, we just need to focus on the Electron aspects of the application and not on the game itself.

A couple of weeks ago we made Pong with just a 100 lines of code, so we’ll use that reuse that project

We will create two files in our project folder index.js which will act as our main node process, while pong.html, which will act as the renderer process to load the weather data.

The index.js file will facilitate the window creation for the application and load the appropriate renderer process. In this instance, our pong.html file will look like this:

We can now run our application locally with:

electron index.js

And there we have it! Our html file is running natively!

Conclusion

Electron’s increasing popularity makes it a must learn for aspiring developers. Not to mention, if you’re a web developer looking to make a quick native version of your website, Electron is likely the best option.

If you’re building software and looking to eliminate bottlenecks, look no further than Codesphere for you cloud service needs! We’re building Codesphere to be the most intuitive cloud and devops tool on the market!

Happy coding!