Getting Started with Desktop Applications using Electron JS

Source: Electron JS

Introduction

In this fast-paced world, the evolution of technology has never ceased to amaze people. In the initial days of development, it was considered a luxury to have a multi-page website. However, in modern days, we have countless incredible websites to blow our minds away. Apart from them, in recent times, we have been using various desktop applications that make our lives simpler.

Ranging from the text editors such as Visual Studio Code, Atom or Sublime to the online conferencing platforms like Zoom, Microsoft Teams or Skype to the communication platforms like Discord or Whatsapp, we have shortcuts to many such applications on our desktop. In this article, we will look to develop desktop applications using a JavaScript framework called Electron. Let’s jump in!

What is Electron JS?

Electron JS is an open-source runtime framework for creating desktop applications with HTML, CSS, and Javascript. It is developed and maintained by GitHub. It combines the Chromium rendering engine with the Node JS runtime environment. The apps built using Electron are cross-platform, or in other words, compatible with Mac, Windows, and Linux. Most of the popular desktop applications are developed using Electron JS.

Working

Electron applications have two processes, namely the main process and the renderer process. The main process creates instances of a browser window and is responsible for sending requests to the window or transferring data between different windows. The renderer process renders the window as an interface for the user. Each process takes advantage of Chromium’s multi-process architecture. In short, the main process manages the whole application and its individual renderer processes. Electron also supports various APIs for both the processes, making it easier to interact with the desktop operating system and its resources.

Getting started with Electron JS

Before getting started with Electron, Node JS must be installed. With that, we are good to go. Go to the command line, cd to a folder, and then give

npm init -y 

to create a package.json file. Now to install Electron, which is an npm package, give

npm install electron --save-dev

Now open the folder in a preferred code editor and edit the package.json file to give a start script.

As always, we will start exploring Electron by making a “Hello World” app. To run the main process, we must create a main.js file with the contents as follows.

The function createWindow() creates a new browser window of specified dimensions and loads the index.html file. Apart from that, we add listeners to stop the application when the window is closed and prevent multiple launches simultaneously.

Now for rendering the application, we give the renderer process, which is a simple index.html file to display “Hello World!” in a new window.

With that said, we are ready to fire up our first Electron application. Go back to the command line and inside the created folder, run

npm start

which opens the new Electron window, which looks as follows.

“Hello World!” Electron application

If we observe the application window, we have a default menu bar, which is populated when the application is run. With the “Hello World!” application created successfully, we move to another simple application to explore some other features of Electron JS.

Inter-Process Communication

Building our knowledge further, we will look at developing multi-window applications and ensuring interactions between them. This feature is called inter-process communication (IPC). Note that a single main process can have multiple renderer processes. However, these renderer processes cannot communicate with each other directly. They have to use the main process as an intermediary. Electron provides us with two IPC modules, namely ipcMain and ipcRenderer.

Source: OKStateACM

The ipcMain module is used to communicate from the main process to the renderer processes. This module handles asynchronous and synchronous messages sent from the renderer process when used in the main process.

The ipcRenderer module is used to communicate from a renderer process to the main process. This module handles sending synchronous and asynchronous messages from the renderer process to the main process, as well as receiving replies from the main process.

Flow of ipcMain and ipcRenderer modules

Equipped with that knowledge, we will now develop an application that inputs a city from the user in one window and displays the city’s current weather details in another window. The weather details are being fetched from the OpenWeatherMap API. As an additional feature, we will also create our own customized menu for the application. The main.js file will now look like this,

Since the application involves two windows, we have two functions: createMainWindow(), which creates a new browser window and loads index.html, and createAddWindow(), which creates a new window and loads add.html. The ipcMain event handler (present in the main process) receives data from the additional window (one renderer process) and sends it to the main window (another renderer process). Apart from that, we build a new menu with keyboard shortcuts by creating a new menu template.

Now the main window is generated by the index.html file, with the following piece of code.

The above code is used for displaying the weather conditions of a particular city with the help of the OpenWeatherMap API. But, where exactly is the input feature that was promised earlier?

We use another window containing a form to receive input from the user. The contents of the add.html file will achieve that purpose.

This window inputs a city from the user and sends the data to the main process through the ipcRenderer module, which in turn transfers the data to the main window to fetch data for that particular city. Now that we have the code ready, we will look at how the application turns out. As we did before, to start the application, give

npm start

Input handling in a new window

On clicking the “Get Weather” button, the additional window closes, and the weather details are displayed in the main window, similar to the below image.

Weather details of Chennai in the main window

Voila! We have successfully implemented inter-process communication between two windows using ipcMain and ipcRenderer modules.

Packaging the app

We have seen how to run the application locally, but it would be cumbersome if one must use commands to fire it up every time. Think about how we used to install desktop apps in our local system. We would get the executable file from some source and execute that file to install the app in our systems. This feature of making the application available in a user-friendly manner is called packaging.

Electron provides us with the electron packager that bundles the whole codebase into the respective packages and makes the application production-ready. To install the electron packager, type the following command in the terminal,

npm install electron-packager --save-dev

Then add the following line under scripts in the package.json file.

"package": "electron-packager ."

Now the application is ready to be packaged. Execute the packager by typing the following in the terminal,

npm run package

A new folder would be created in your project directory, and inside that folder, you will find an executable file. Double-clicking on that will open our created application. We did not use any commands to run the app, did we? That’s how amazing and powerful Electron JS is!

Features of Electron JS

Electron JS is simple enough to get started, and it is incredibly customizable. It does not require a separate interface or procedure to develop the application. Like how the webpages are designed, we used basic HTML, CSS, and Javascript to design the desktop application. We also decided on the window size, the menu options, and the keyboard shortcuts to perform desirable actions as well. As the icing on the cake, the Electron JS apps are as compatible with Linux and macOS as it is with Microsoft Windows.

Conclusion

Source: Google images

That brings us to the end of the article. Hopefully, this has given you an insight into the world of desktop applications and the process of developing them. However, this is just the beginning. The quest for knowledge must never cease to exist.

Happy learning!

References

• The Official Electron JS website
• The Official GitHub repository of Electron

This article is published as a part of ‘JavaScripted’ under Spider Research and Development Club, NIT Trichy on a Web Wednesday!