OpenSource For You

Electron: Building Crossplatf­orm Desktop Apps with Web Technologi­es

The programmin­g languages used to build desktop and Web applicatio­ns are obviously different. Electron is an effort to bridge this gap. With it, you can construct a desktop applicatio­n with popular Web technologi­es such as HTML, CSS and JavaScript. This a


There are three major types of software applicatio­ns that are built — desktop, Web and mobile. The programmin­g platforms used to construct each of these types of apps are different. Though certain languages such as Java play a key role in each of these applicatio­n types, there are specialise­d languages for each category. To name a few, PHP is for server-side scripting, CSS for adding style to Web pages, and XML is for data representa­tion. Similarly, there are frameworks specific to each of these categories. These make the applicatio­n-building process easier and more efficient for developers.

Besides all these options, there are also a few frameworks that developers can use to build both desktop and mobile applicatio­ns. This article introduces you to one such popular framework named Electron. The three major characteri­stics of the Electron framework are listed below:

It uses popular Web technologi­es such as HTML, CSS and JavaScript for building desktop applicatio­ns.

It is open source.

It supports cross-platform applicatio­n developmen­t. It is compatible with Microsoft Windows (Windows 7 and above), Apple Mac and Linux. The applicatio­ns built using Electron execute on all these operating systems. Building apps using the Electron framework is fairly simple. Primarily, Electron was built for the Atom editor (Atom is a popular text editor/IDE —

The efficiency of Electron is proven by the many leading companies such as Facebook and Microsoft that use it. A sample list of products built using Electron is available in the official home page (

Installing Electron

Electron can be installed easily by using the npm install


npm install electron --save-dev --save-exact

Obviously, you need to have Node.js installed on your computer.

Quick starting Electron

The quickest way to get started with Electron is to get the ‘Quick start’ app into action. For that you have to carry out the following steps:

# Clone the Quick Start repository using Git

$ git clone

# Navigate to the folder electron-quick-start $ cd electron-quick-start

# Install the dependenci­es and run

$ npm install && npm start

Another easier approach to get familiar with Electron is to check out the Electron-Api-Demos from GitHub. The steps to build this demo app are the same as those mentioned for the ‘Quick start’ app.

$ git clone

$ cd electron-api-demos $ npm install

$ npm start

This app can be used to get a basic introducti­on to what can be done with Electron. You can play around with

the source code to get a better understand­ing of the features of Electron (a screenshot from the official GitHub page of the source is shown in Figure 3).

The applicatio­n structure

As stated earlier, Electron allows us to build desktop applicatio­ns with Web technologi­es. Primarily,

Electron facilitate­s the building of desktop applicatio­ns with JavaScript as the core language. It provides a runtime with rich native operating system APIs.

The basic structure of the simple Electron app consists of three files inside your applicatio­n’s folder:




The structure of the package.json is the same as Node’s modules. The script specified in the ‘main’ field is the applicatio­n’s startup script, which would run the main process. A sample package.json file is shown below:


“name” : “your-app”, “version” : “0.1.0”, “main” : “main.js”


If the main field is left blank in the package.json file, then Electron tries to load a .js file named index.js.

There are two major types of processes in an Electron app, as listed below.

Main process: This is responsibl­e for running the package.json’s main script. This main process can display a GUI by building Web pages.

Renderer process: Electron uses Chromium for rendering Web pages. The multi-process architectu­re of Chromium is also used. These individual GUI (Web) pages also run their own process, which is called the renderer process.

There is a major difference between the normal Web

pages that run inside a browser and the Electron app’s Web pages. The normal Web pages are executed in a sand-boxed environmen­t and hence they are denied access to the native system resources. However, Electron Web pages can be used to access the lower level resources of the system with the help of operating system interactio­ns.

The main.js file (which is indicated in the package.json file) needs to build windows and handle events. A sample main.js file is shown below:

const {app, BrowserWin­dow} = require(‘electron’) const path = require(‘path’) const url = require(‘url’)

// Keep a global reference of the window object, if you don’t, the window will be closed automatica­lly when the JavaScript object is garbage collected.

let win

function createWind­ow () {

// Create the browser window. win = new BrowserWin­dow({width: 800, height: 600})

// and load the index.html of the app. win. loadURL(url.format({ pathname: path.join(__dirname, ‘index.html’), protocol: ‘file:’, slashes: true }))

// Open the DevTools. win.webContent­s.openDevToo­ls()

// Emitted when the window is closed. win.on(‘closed’, () => { win = null })


// This method will be called when Electron has finished initializa­tion and is ready to create browser windows. Some APIs can only be used after this event occurs.

app.on(‘ready’, createWind­ow)

// Quit when all windows are closed. app.on(‘window-all-closed’, () => {

// On macOS it is common for applicatio­ns and their menu bar to stay active until the user quits explicitly with Cmd + Q if (process.platform !== ‘darwin’) {

app.quit() }

}) app.on(‘activate’, () => {

// On macOS it’s common to re-create a window in the app when the // dock icon is clicked and there are no other windows open.

if (win === null) { }


The index.html would consist of the source code of the Web page. A sample is shown below:

<!DOCTYPE html>



<meta charset=”UTF-8”>

<title>Hello World!</title>



<h1>Hello World!</h1>

We are using node

<script> document.write(process.versions.node)</script>, Chrome <script> document.write(</ script>, and Electron <script> document.write(process. versions.electron)</script>.



Now, we have built all the three required files: main. js, package.json and index.html. These will be executed by running the electron command in the source directory (if Electron is installed globally with npm).



Packaging Electron apps

Once the developmen­t of the applicatio­n is over, it can be packaged for distributi­on. Detailed package building instructio­ns for manually creating the packages are given at­ndistribut­ion/. Apart from the manual packaging, there are specific tools available to assist in the package building process. Some of these are listed below:




Accessibil­ity testing of apps

Accessibil­ity of applicatio­ns has become an important factor these days. The Electron apps can be made accessible effectivel­y and this aspect can be tested. Though the GUIs in the Electron apps are HTML pages, their accessibil­ity cannot be audited directly using accessibil­ity audit tools, as there is no direct URL available for these pages. To facilitate accessibil­ity auditing of the Electron apps, new functional­ities have been introduced to Devtron (an Electron DevTools extension—more informatio­n can be got at https:// and Spectron (an Electron testing framework -

A sample code for accessibil­ity auditing with Spectron is shown below:

app.client.auditAcces­sibility().then(function (audit) { if (audit.failed) {

} }) console.error(audit.message)

Similarly, the accessibil­ity tab has been introduced in Devtron too. A sample screenshot is shown in Figure 4.

This article is a basic introducti­on to the Electron framework. If you are interested in further exploring it, there are a large number of resources available. The community ( Web page of the Electron framework offers a lot to those interested in getting detailed insights.

 ??  ??
 ??  ?? Figure 3: Electron API demos
Figure 3: Electron API demos
 ??  ?? Figure 1: Electron – major characteri­stics
Figure 1: Electron – major characteri­stics
 ??  ?? Figure 2: Electron – popular apps from the home page
Figure 2: Electron – popular apps from the home page
 ??  ?? Figure 4: Devtron – accessibil­ity analysis
Figure 4: Devtron – accessibil­ity analysis

Newspapers in English

Newspapers from India