« Back to News

Building Desktop Applications with the Electron Framework – Part 2

In part 1, we discussed how desktop applications are still in vogue and a few challenges in building them. In this part, we take a closer look at how Electron development works and its associated processes. We also describe how to install and get started with Electron development and package and distribute applications. Lastly, we cover a few important resources that will aid you in strengthening your Electron development toolkit.

How Electron Works?

An Electron application has two types of processes – Main and Renderer processes.

In Electron, there is always one Main process and has access to to the main script. It also has access to a huge distinct subset of the Electron API. Since there is only one Main process, it can display a GUI by creating web pages.

In a normal browser, webpages run inside a sandboxed environment that disallows access the to the underlying native OS resources. Electron development, however, can use Node.js API’s to gain access to these powerful lower level resources.

The Renderer process is responsible for creating the DOM of the web app. While Renderer process can use Node.js API’s they do not have access to operating system level resources. The Renderer process of the webpage request these using the Main process which then accesses these resources on its behalf.

electron-2-1

 

Communication between processes

The Main and Renderer process communicate using an Interprocess Communication or IPC for short. The ipcMain and ipcRenderer modules handle communication between the Main and Renderer process. These module are part of the Electron core. These processes can also communicate using the remote module for RPC style communication.

The ipcMain enables communication from the Main to the Renderer process, while the ipcRenderer handles communication in the opposite direction from the Renderer to the Main.

electron-2-2

Building Offline Applications

‘Offline first’ is a must for any progressive web app (PWA). This essentially augments the purpose of a native desktop app making it usable when no network connectivity exists. With access to Node.js any module can read and store data on a local operating system. In a situation where network connectivity is not available, the application can ‘communicate’ with the local storage and database.

electron-2-3

Installation and quick start

We can use “npm” to install prebuilt Electron binaries. The preferred method is to install Electron as a development dependency in your app.

We can also use below command to install electron as a global package.

Once installed, run the command below for a quick start.

Packaging and distribution

Several third party tools exist for packaging and distributing Electron-made apps.

  • Electron-builder
  • Electron-packager
  • Electron-forge

Chances are you are already using an Electron-made app today. Here are a couple more that were made with Electron:

 

 

Further reading and references:

 

Leave a Reply

About the Writer

  • APURVA BHASALE
    Apurva Bhasale
    Technical Lead at Synerzip

    A full-stack software developer with around 6+ years of experience in design and development of complex software systems in different domains using agile methodologies.

How can Synerzip Help You?

By partnering with Synerzip, clients rapidly scale their engineering team, decrease time to market and save at least 50 percent with our Agile development teams in India.