Electron JS – One Platform to Run Them All

Desktop apps are making a comeback. IT giants like Microsoft, Github, Slack, etc. are investing hugely in building desktop apps that offer better user experience. One such example is the widely used team collaboration tool, Slack.

Personally I’d love it if these progressive web apps had a desktop offline installation mode that allowed for them to deliver notifications, desktop icons, and separate windows.

One of our clients approached us with a unique idea of developing a desktop application that was a complete package for anything sales related. Something that helps the sales rep perform every task; be it making calls, recording them, transcripting them, sharing screen with another drawing or marking tool. Making one’s life simple and organized. And this became my first project in developing a desktop app.

For this what could be better than using Electron JS – One Platform to Run Them All.  

Electron is powered by HTML, CSS and JavaScript which are basics for every web developer these days. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows and Linux.

Why to choose Electron?

Nowadays, developing a desktop app using JavaScript can be done either with Electron or NW.js. Both these tools offer more or less the same features, so we thought we would go with Electron js.

As mentioned earlier, our team had to write a telephony app which supported multiple features like VoIP calling, call recording, call transcription(i.e speech to text), screen sharing etc. Overall it turned out to be a great experience considering this was something entirely new and different for our team – developing a desktop app. And I, personally, loved it.

Electron is a powerful library which enables you to create cross platform desktop applications with pure JavaScript by providing a runtime, meaning we can build one codebase and package it for each operating system separately. This abstracts away the knowledge needed to build native desktop applications and makes maintenance easier.

Creating desktop apps in JavaScript lets developers choose from a vast range of freely available code libraries and frameworks, which takes away much of the grunt work while coding.  However there are a few JS functions like “alert();”  that can’t be used in Electron main file(only main file) , but electron has its own predefined functions that you can use.

For example :-

dialog.showMessageBox({
   title: 'Alert',
   description: 'This is some descriptive message',
   buttons: ['Ignore', 'Connect'],
   message : "" ,
}

*This would replace alert in electron main file

How it works

The way it works is — Electron takes a main file defined in your package.json file and executes it. This main file (i.e main.js) then creates application windows which contain rendered web pages with the added power of interacting with the native GUI (graphical user interface) of the operating system.

Once we start up an application using Electron, a main process is created. This main process is responsible for interacting with the native GUI of the operating system and creates the GUI of the application .

Starting the main process will call the main process in the main file by using something called a BrowserWindow module which creates the application windows.

Each browser window then runs its own renderer process. This renderer process takes a web page (an HTML file which references the usual CSS files, JavaScript files, images, etc.) and renders it in the window. Web pages are rendered with Chromium, so a very high level of compatibility with standards is guaranteed.

Renderer processes could play an important role in releasing load from main process by sharing some workload with it as it’s said that the main process interacts with the native GUI of the operating system.

For example, what we have done in our app is rather than having all depending libraries and it’s dependent code in main file , we have them in our rendered file which reduces time taken to get main file up and running. The main process can access the native GUI through a modules available directly in Electron. The desktop application can access all Node modules like the file system module for handling files, request to make HTTP calls, etc.

I hope this blog gave you some insight into what Electron is, how it works and if you should choose it. My next article is going to be up in a few days which will help you in actually building your first desktop app using electron. Stay Tuned.