Building Desktop GUI Applications with JavaScript and Electron.js

In the current era of technology, desktop applications hold immense significance in our daily lives, offering enhanced user experiences and tapping into the capabilities of local machines. Traditionally, developing desktop applications required expertise in platform-specific programming languages and frameworks, posing a challenge for web developers looking to venture into desktop development. However, Electron.js addresses this challenge effectively.

Formerly known as Atom Shell, Electron.js is an open-source framework that originated from GitHub. It empowers developers to build cross-platform desktop applications using familiar web technologies like HTML, CSS, and JavaScript. By bridging the gap between web development and desktop application development, Electron.js unlocks new opportunities for developers to create robust and feature-rich desktop applications.

The Architecture of Electron.js

To understand how Electron.js works, let's take a closer look at its architecture. Electron.js combines two main components: the Chromium rendering engine and the Node.js runtime.

• Chromium Rendering Engine − Electron.js uses the same rendering engine that powers the popular web browser Google Chrome—Chromium. This allows Electron.js applications to render and display web content with the same capabilities and performance as a web browser.

• Node.js Runtime − Electron.js integrates the Node.js runtime, which provides access to the underlying operating system and native APIs. This means that developers can leverage the full power of Node.js and utilise its extensive ecosystem of modules and libraries to build desktop applications.

Electron.js takes advantage of a multi-process architecture, where each Electron.js application consists of two main processes: the main process and the renderer process.

• Main Process − The main process runs as a standalone Node.js process and is responsible for creating and managing browser windows. It communicates with the renderer processes, handles system-level events, and has access to native APIs. The main process controls the lifecycle of the application and acts as the entry point for the Electron.js application.

• Renderer Process − Each Electron.js application can have multiple renderer processes, each corresponding to a separate browser window. The renderer processes are responsible for rendering and displaying the web content within each browser window. They run in separate JavaScript contexts, providing a level of isolation and security. Each renderer process has access to the Electron.js API, allowing it to interact with the main process and perform tasks such as manipulating the DOM, making network requests, and handling user interactions.

Building a Simple Electron.js Application

Now that we have a good understanding of Electron.js and its architecture, let's dive into building a simple Electron.js application using JavaScript. We will create an application that displays a window with a "Hello, Electron.js" message.

To get started, follow the steps below −

Set up the Development Environment

Ensure that you have Node.js installed on your machine, as Electron.js is built on top of Node.js. You can download and install the latest version of Node.js from the official website (https://nodejs.org).

Create a New Electron.js Project

Create a new project folder and navigate to it using the command line. Initialize a new Node.js project by running the following command −

npm init -y

This command initializes a new Node.js project with default settings.

Install Electron.js

Install Electron.js as a development dependency by executing the following command −

npm install electron --save-dev

This command installs the Electron.js package in your project.

Create the Main Entry Point

Create a new file named index.js in your project folder and add the following code −

const { app, BrowserWindow } = require('electron');

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

   app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
});

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

Explanation

In this code, we import the necessary modules from the Electron.js package, define the createWindow function to create the browser window, and set up the necessary event handlers for window creation and application quitting.

Create the HTML File

Create a new file named index.html in the project folder and add the following code −

Example

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

This HTML file will be displayed in the Electron.js application's window.

Run the Electron.js Application

npx electron.

Conclusion

Electron.js has revolutionized the way developers build desktop applications using web technologies. It provides a powerful framework that combines the Chromium rendering engine and the Node.js runtime, enabling developers to create cross-platform desktop applications with HTML, CSS, and JavaScript. With its rich ecosystem of plugins and tools, Electron.js empowers developers to build feature-rich, perform ant, and visually appealing desktop applications.

In this article, we explored the fundamentals of Electron.js and learned how to build a simple Electron.js application using JavaScript. We discussed the architecture of Electron.js, its main processes, and the role of the main process and renderer processes. We also walked through the process of setting up a development environment and building an Electron.js application step by step.