Elec­tron: Build­ing Cross­plat­form Desk­top Apps with Web Tech­nolo­gies

The pro­gram­ming lan­guages used to build desk­top and Web ap­pli­ca­tions are ob­vi­ously dif­fer­ent. Elec­tron is an ef­fort to bridge this gap. With it, you can con­struct a desk­top ap­pli­ca­tion with pop­u­lar Web tech­nolo­gies such as HTML, CSS and JavaScript. This a

OpenSource For You - - Contents -

There are three ma­jor types of soft­ware ap­pli­ca­tions that are built — desk­top, Web and mo­bile. The pro­gram­ming plat­forms used to con­struct each of these types of apps are dif­fer­ent. Though cer­tain lan­guages such as Java play a key role in each of these ap­pli­ca­tion types, there are spe­cialised lan­guages for each cat­e­gory. To name a few, PHP is for server-side script­ing, CSS for adding style to Web pages, and XML is for data rep­re­sen­ta­tion. Sim­i­larly, there are frame­works spe­cific to each of these cat­e­gories. These make the ap­pli­ca­tion-build­ing process eas­ier and more ef­fi­cient for devel­op­ers.

Be­sides all these op­tions, there are also a few frame­works that devel­op­ers can use to build both desk­top and mo­bile ap­pli­ca­tions. This ar­ti­cle in­tro­duces you to one such pop­u­lar frame­work named Elec­tron. The three ma­jor char­ac­ter­is­tics of the Elec­tron frame­work are listed below:

It uses pop­u­lar Web tech­nolo­gies such as HTML, CSS and JavaScript for build­ing desk­top ap­pli­ca­tions.

It is open source.

It sup­ports cross-plat­form ap­pli­ca­tion de­vel­op­ment. It is com­pat­i­ble with Mi­crosoft Win­dows (Win­dows 7 and above), Ap­ple Mac and Linux. The ap­pli­ca­tions built us­ing Elec­tron ex­e­cute on all these op­er­at­ing sys­tems. Build­ing apps us­ing the Elec­tron frame­work is fairly sim­ple. Pri­mar­ily, Elec­tron was built for the Atom ed­i­tor (Atom is a pop­u­lar text ed­i­tor/IDE — https://atom.io/).

The ef­fi­ciency of Elec­tron is proven by the many lead­ing com­pa­nies such as Face­book and Mi­crosoft that use it. A sam­ple list of prod­ucts built us­ing Elec­tron is avail­able in the of­fi­cial home page (https://elec­tron.atom.io/).

In­stalling Elec­tron

Elec­tron can be in­stalled eas­ily by us­ing the npm in­stall


npm in­stall elec­tron --save-dev --save-ex­act

Ob­vi­ously, you need to have Node.js in­stalled on your com­puter.

Quick start­ing Elec­tron

The quick­est way to get started with Elec­tron is to get the ‘Quick start’ app into ac­tion. For that you have to carry out the fol­low­ing steps:

# Clone the Quick Start repos­i­tory us­ing Git

$ git clone https://github.com/elec­tron/elec­tron-quick-start

# Nav­i­gate to the folder elec­tron-quick-start $ cd elec­tron-quick-start

# In­stall the de­pen­den­cies and run

$ npm in­stall && npm start

An­other eas­ier ap­proach to get fa­mil­iar with Elec­tron is to check out the Elec­tron-Api-Demos from GitHub. The steps to build this demo app are the same as those men­tioned for the ‘Quick start’ app.

$ git clone https://github.com/elec­tron/elec­tron-api-demos

$ cd elec­tron-api-demos $ npm in­stall

$ npm start

This app can be used to get a ba­sic in­tro­duc­tion to what can be done with Elec­tron. You can play around with

the source code to get a bet­ter un­der­stand­ing of the fea­tures of Elec­tron (a screen­shot from the of­fi­cial GitHub page of the source is shown in Fig­ure 3).

The ap­pli­ca­tion struc­ture

As stated ear­lier, Elec­tron al­lows us to build desk­top ap­pli­ca­tions with Web tech­nolo­gies. Pri­mar­ily,

Elec­tron fa­cil­i­tates the build­ing of desk­top ap­pli­ca­tions with JavaScript as the core lan­guage. It pro­vides a run­time with rich na­tive op­er­at­ing sys­tem APIs.

The ba­sic struc­ture of the sim­ple Elec­tron app con­sists of three files in­side your ap­pli­ca­tion’s folder:




The struc­ture of the pack­age.json is the same as Node’s mod­ules. The script spec­i­fied in the ‘main’ field is the ap­pli­ca­tion’s startup script, which would run the main process. A sam­ple pack­age.json file is shown below:


“name” : “your-app”, “ver­sion” : “0.1.0”, “main” : “main.js”


If the main field is left blank in the pack­age.json file, then Elec­tron tries to load a .js file named in­dex.js.

There are two ma­jor types of pro­cesses in an Elec­tron app, as listed below.

Main process: This is re­spon­si­ble for run­ning the pack­age.json’s main script. This main process can dis­play a GUI by build­ing Web pages.

Ren­derer process: Elec­tron uses Chromium for ren­der­ing Web pages. The multi-process ar­chi­tec­ture of Chromium is also used. These in­di­vid­ual GUI (Web) pages also run their own process, which is called the ren­derer process.

There is a ma­jor dif­fer­ence be­tween the nor­mal Web

pages that run in­side a browser and the Elec­tron app’s Web pages. The nor­mal Web pages are ex­e­cuted in a sand-boxed en­vi­ron­ment and hence they are de­nied ac­cess to the na­tive sys­tem re­sources. How­ever, Elec­tron Web pages can be used to ac­cess the lower level re­sources of the sys­tem with the help of op­er­at­ing sys­tem in­ter­ac­tions.

The main.js file (which is in­di­cated in the pack­age.json file) needs to build win­dows and han­dle events. A sam­ple main.js file is shown below:

const {app, BrowserWin­dow} = re­quire(‘elec­tron’) const path = re­quire(‘path’) const url = re­quire(‘url’)

// Keep a global ref­er­ence of the win­dow ob­ject, if you don’t, the win­dow will be closed au­to­mat­i­cally when the JavaScript ob­ject is garbage col­lected.

let win

func­tion cre­ateWin­dow () {

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

// and load the in­dex.html of the app. win. load­URL(url.for­mat({ path­name: path.join(__dirname, ‘in­dex.html’), pro­to­col: ‘file:’, slashes: true }))

// Open the DevTools. win.we­bCon­tents.openDevTools()

// Emit­ted when the win­dow is closed. win.on(‘closed’, () => { win = null })


// This method will be called when Elec­tron has fin­ished ini­tial­iza­tion and is ready to cre­ate browser win­dows. Some APIs can only be used af­ter this event oc­curs.

app.on(‘ready’, cre­ateWin­dow)

// Quit when all win­dows are closed. app.on(‘win­dow-all-closed’, () => {

// On macOS it is com­mon for ap­pli­ca­tions and their menu bar to stay ac­tive un­til the user quits ex­plic­itly with Cmd + Q if (process.plat­form !== ‘dar­win’) {

app.quit() }

}) app.on(‘ac­ti­vate’, () => {

// On macOS it’s com­mon to re-cre­ate a win­dow in the app when the // dock icon is clicked and there are no other win­dows open.

if (win === null) { }


The in­dex.html would con­sist of the source code of the Web page. A sam­ple is shown below:

<!DOCTYPE html>



<meta charset=”UTF-8”>

<ti­tle>Hello World!</ti­tle>



<h1>Hello World!</h1>

We are us­ing node

<script> doc­u­ment.write(process.ver­sions.node)</script>, Chrome <script> doc­u­ment.write(process.ver­sions.chrome)</ script>, and Elec­tron <script> doc­u­ment.write(process. ver­sions.elec­tron)</script>.



Now, we have built all the three re­quired files: main. js, pack­age.json and in­dex.html. These will be ex­e­cuted by run­ning the elec­tron com­mand in the source di­rec­tory (if Elec­tron is in­stalled glob­ally with npm).



Pack­ag­ing Elec­tron apps

Once the de­vel­op­ment of the ap­pli­ca­tion is over, it can be pack­aged for dis­tri­bu­tion. De­tailed pack­age build­ing in­struc­tions for man­u­ally creat­ing the pack­ages are given at https://elec­tron.atom.io/docs/tu­to­rial/ap­pli­ca­tiondis­tri­bu­tion/. Apart from the man­ual pack­ag­ing, there are spe­cific tools avail­able to as­sist in the pack­age build­ing process. Some of these are listed below:




Ac­ces­si­bil­ity test­ing of apps

Ac­ces­si­bil­ity of ap­pli­ca­tions has be­come an im­por­tant fac­tor these days. The Elec­tron apps can be made ac­ces­si­ble ef­fec­tively and this as­pect can be tested. Though the GUIs in the Elec­tron apps are HTML pages, their ac­ces­si­bil­ity can­not be au­dited di­rectly us­ing ac­ces­si­bil­ity au­dit tools, as there is no di­rect URL avail­able for these pages. To fa­cil­i­tate ac­ces­si­bil­ity au­dit­ing of the Elec­tron apps, new func­tion­al­i­ties have been in­tro­duced to Devtron (an Elec­tron DevTools ex­ten­sion—more in­for­ma­tion can be got at https:// elec­tron.atom.io/devtron/) and Spec­tron (an Elec­tron test­ing frame­work - https://elec­tron.atom.io/spec­tron/).

A sam­ple code for ac­ces­si­bil­ity au­dit­ing with Spec­tron is shown below:

app.client.au­ditAc­ces­si­bil­ity().then(func­tion (au­dit) { if (au­dit.failed) {

} }) con­sole.er­ror(au­dit.mes­sage)

Sim­i­larly, the ac­ces­si­bil­ity tab has been in­tro­duced in Devtron too. A sam­ple screen­shot is shown in Fig­ure 4.

This ar­ti­cle is a ba­sic in­tro­duc­tion to the Elec­tron frame­work. If you are in­ter­ested in fur­ther ex­plor­ing it, there are a large num­ber of re­sources avail­able. The com­mu­nity (https://elec­tron.atom.io/com­mu­nity/) Web page of the Elec­tron frame­work of­fers a lot to those in­ter­ested in get­ting de­tailed in­sights.

Fig­ure 3: Elec­tron API demos

Fig­ure 1: Elec­tron – ma­jor char­ac­ter­is­tics

Fig­ure 2: Elec­tron – pop­u­lar apps from the home page

Fig­ure 4: Devtron – ac­ces­si­bil­ity anal­y­sis

Newspapers in English

Newspapers from India

© PressReader. All rights reserved.