Framework Review – electronJS

Introduction

In this blog, I will talk and review about a JS framework which can be used to develop a desktop application and it is known as electronJS.

If you can build a website, you built a desktop application also. Yes this is TRUE.

ElectronJS is a framework for creating desktop applications using native web technologies like – HTML, CSS, JS

This open sourced framework was developed by github. In its core it uses Chromium and NodeJS to power up the applications. It provides a minimal web browser features with an ability to interact with local file system, that is why we can freely use web technologies.

While working with electronJS you only need to focus on what you want to do ? and How it will be done is managed by electronJS.

Accessibility

With electron apps you can not use online resources for accessibility because they are not pointed to any URL so it provides some accessibility features to make the development more easier, like – devtron and spectron, which is a dev tool to inspect the application and test writing tool respectively.

Application Architecture of ElectronJS

In a nutshell an electron application architecture look like this –

Application Architecture

Let’s understand this flow –

There are two processes in an electron app –

  1. Main Process
  2. Rendered Processes

Main Process

What ?

In Electron, the process that runs package.json’s main script is called the main process. The script that runs in the main process can display a GUI by creating web pages. An Electron app always has only one main process.

How this works ?

  1. The main process creates web pages by creating BrowserWindow instances.
  2. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindow instance is destroyed, the corresponding renderer process is also terminated.

The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.

Renderer Process

Each web page in Electron runs in its own process, which is called the renderer process.

How to access native features ?

You can not directly access native features because managing native resources directly in the web page can lead to resource leaking . In order to call native GUI APIs, the renderer process of the web page must communicate with the main process to request that the main process perform those operations.

Using APIs

  1. There are many APIs that are offered by Electron to support development of desktop application.
  2. Some APIs are only used by main process, some by only renderer process, some by bothExample – BrowserWindow class API is only used by main process to create a window in electronJS.
  3. Full access to node.js APIs are there in both main and renderer process.

Build system

As I have mentioned that electronJS uses chromium to display content. So, In order to avoid the complexity of building all of Chromium, Electron uses libchromiumcontent to access Chromium’s Content API. libchromiumcontent is a single shared library that includes the Chromium Content module and all of its dependencies. That means you don’t need a powerful machine to build Electron apps.

ElectronJS setup

Initial setup is very simple if you have some experience with nodeJS env.

Make sure you have these tools installed in your machine –

  • nodeJS
  • npm

Now you only need to create three files to code a Hello World example electron app.

Step 1 –

You just have to create a new directory for your project then go inside your project directory and type npm init. This command will create an empty package.json for you. It will look like this.

You will see only test property inside scripts object, you then need to add a property named start and assign electron . to it and you are good to go.

Step 2 –

Create a main.js file or whatever filename value you gave to main property in package.json file.

Then add the following code to it –

You need to import electron as a module which acts as a namespace for various features –

  • app feature manage the lifecycle of electron application.
  • browserWindow is used to create a window.

Here we have fetched app and browserWindow from electron class and using a lifecycle method of app feature we execute createAppWindow method as soon as the app becomes ready.

There are more lifecycle events managed by app feature, which you can view here.

One thing you should notice here, I have used arrow function in this example at line #3.

What this means ?

Starting with version 1.6.10 you can also use typeScript and ES6 with electron JS.

Step 3 –

Now you need to create an index.htmlfile you display some thing on your application web page. You can name the file anything, I have used index.html here.

So these 3 files are enough to get started with an electronJS app.

After this when I run npm start, then my final output looked something like this.

Output

Learning Curve

How difficult is to start developing with electronJS ?

I personally feel that the starting up with electronJS is very easy and quick. It just took me 30 minutes to setup and code the Hello World example.

Some of my observations –

  • ElectronJS is easy to setup if you are familiar with nodeJS env.
  • Unlike ionic which provides prebuilt components so that you can get a native look on a particular device, electron doesn’t provide anything like this. You need to write and style the application yourself using HTML, CSS. So you need to be good at them too.
  • It just provides you APIs to connect with native features of OS and helps in building and packaging of your application.
  • You can use any framework of your choice in electron application. Angular, react, vue. But it is not so simple, you need to make some changes as per the docs.
  • Starting with version 1.6.10 you can also use typeScript.

If I want to draw a graph then it would be something like this.

According to me it is very easy and quick to get started with electron if you are familiar with nodeJS env, but to build an app you need to have skills in HTML, CSS also and along with that you need to have some knowledge of the OS you are targeting, only then you will be able to find out right packages and right approach to build a good app.

I think the difficulty level will increase with time and the type of application you want to create.

But it is a good framework to explore and get your hands dirty.


Thanks for reading this. If you have any question or feedback then please feel free to contact.

Happy Learning and Happy Coding 🙂

Leave a Reply