Building Desktop Applications with Electron.js and JavaScript

In today's digital age, desktop applications continue to play a vital role in our everyday lives. They provide a rich user experience and allow developers to harness the power of the local machine. However, traditionally, building desktop applications required knowledge of platform-specific programming languages and frameworks, making it challenging for web developers to transition into desktop development. This is where Electron.js comes into play.

Electron.js, formerly known as Atom Shell, is an open-source framework developed by GitHub. It enables developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. By leveraging web technologies, Electron.js bridges the gap between web development and desktop application development, opening up new possibilities for developers to create powerful 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. Initialise a new Node.js project by running the following command −

npm init -y

This command initialises 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 revolutionised 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, performant, 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.