ready to build your app

What is Electron JS?

You’ve probably come across this post looking for the answer to “what is Electron JS?” Good news, this article won’t disappoint you then!

To put it simply, Electron JS is a runtime framework that allows the user to create desktop-suite applications with HTML5, CSS, and JavaScript. It’s an open source project started by Cheng Zhao, an engineer at GitHub.

It is basically a blend of two incredibly popular technologies: Node.js and Chromium. Thus, any web application you have written can run on Electron JS. Similarly, any Node.js application you write can utilize this technology.

When and how was Electron JS created?

The journey of Electron JS started in January 2013 with the search for a tool to build a cross-platform text editor on which the user can work with technologies like JavaScript, HTML, and CSS.

It was founded on 15th July 2013, intended to make the cross-platform development easier for the creation of “Atom”. It was initially known as Atom Shell. Have a look at the image below to get a more precise idea about the journey of Electron JS.

Learn what is Electron JS and what is it story.

What are the key features of Electron JS?

Assuming the above definition have solved your query on what is Electron JS, let’s move onto its features.

Electron JS uses web technologies like simple HTML, CSS, and JavaScript. It does not require native skills unless you want to do something advanced. It can be designed for a single browser. Its file system belongs to Node.js APIs and works on Linux, Mac OS X, Windows.

It uses npm module which is used widely for JavaScript. It consists of a native menu for dialogs and notifications. The windows installers do not need any configuration.

It also has the facility of auto-updating and crash reporting on Windows and Mac with Squirrel. The crash reports are submitted to the remote server for further analysis. The content tracing activities like debugging and profiling are looked after by Chromium.

Why should I care about Electron?

The hard and tedious parts of creating a desktop application are the simplification of packaging, installation, updating, providing support for native menus, notifications, dialogs and in the end optimizing the app crash reports. Electron JS pretty much takes care of all these essential steps so the user can focus on the core of his or her application.

When we are writing an application for a web browser, we are basically writing code that will be executed on someone else’s computer. We are not aware what browsers our target users will be using. It can be the latest version of Chrome or an outdated version of Internet Explorer.

Hence, we are not left with much of a choice but to be conservative in the technologies that we choose to implement and the kind of code that we need to draft. When you build your applications with Electron, you’re packaging a particular version of Chromium and Node.js, so you can rely on whatever features are available in those versions.

A quick look at the architecture

Now let’s shed some light on what Electron JS’s architecture is like. If you say Electron JS is a pizza and Node JS is the base, then Chrome is the cheese and V8 JavaScript Engine is the topping.

Libchromiumcontent

Chrome is an open-source web browser built by Google, which provides a tabbed window manager or shell for the web. It has a minimalist user interface and uses V8 as the JavaScript engine and blink as the layout engine. Libchromiumcontent is Chromium’s rendering library, which is an open source foundation for Google’s browser Chrome.

Node JS

Node JS is an open source JavaScript runtime which uses V8 JavaScript engine. It enables you to run JavaScript outside the browser and also provides an interactive shell where you can execute raw JavaScript code.

The Node.js project was initially released in 2009 as an open source, cross-platform runtime for developing server-side applications using JavaScript. Node.js comes bundled with a package manager called npm, which is the largest ecosystem of open source libraries.

V8 JavaScript Engine

V8 JavaScript Engine is also an open-source JavaScript engine developed by Google, written in C++ and JavaScript.

What is Electron JS’s working process like?

After getting to know what Electron JS is and carefully analyzing its architecture, let’s understand how it works. Electron applications have two mandatory processes, the main process, and the rendering process.

Each process has a different role to enact. Bootstrapping the application is performed by the main process. It can withstand other application lifecycle events like starting up, quitting, preparing to quit and other lightweight tasks like going to the background and coming to the foreground.

On the other hand, the rendering process is spawned by the main process. The render processes will display the UI of the application. Each process takes advantage of Chromium’s multiprocess architecture and runs on its own thread.

Let’s discuss these processes by writing a sample Electron JS application.

Executing your first Electron JS application – “Hello World” installation

Create a new folder in your file system.

To create a basic application you need three types of files: package.json, main.js, and index.html

To create the package.json file with `yarn init` command:

1
2
3
4
5
6
{
            "name": "electron",
            "version": "2.0.0",
            "main": "index.js",
            "license": "MIT"
}

This JSON file points to the app’s main file and lists its details and dependencies.

Now, in the package.json file, change the main to main.js file and add the following script:

1
2
3
"scripts": {
          "start": "electron ."
}

Install electron:

1
yarn add --dev electron

Now it can be started by:

1
yarn start

Because you have not added any code yet, you will get this:

See what is Electron JS and how to build your first project.

Now it’s time to add code into the files and create an application of Hello World.

Add the following script to the main.js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'use strict'
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
app.on('ready', () => {
                    // Create the browser window.
                    const win = new BrowserWindow({ width: 1000, height: 800 })

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

This file starts the app and creates a browser window to render HTML as well as the app’s main process. It is responsible for the integration and interaction with the operating system GUI.

You can use any JavaScript library like Angular, React, JQuery etc. for the renderer process.

Create the index.html file:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
          <head>
<meta charset="UTF-8">
          <title>Hello World!</title>
</head>
          <body>
                    <h1>Hello World!</h1>
                     We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
          </body>
</html>

Index.html is a web page to render. This is the app’s renderer process.

Once you have created your initial main.js, index.html, and package.json files, you can try your app by running ‘yarn start’ from your application’s directory.

When you run your files, the app window pops up and shows Hello World.

See what is Electron JS and how to build your first project.

It is a simple application, and the application exits when you close the window. Creating this application will give you a more practical idea of what Electron JS is.

Comparison of Electron JS APIs

Tools for Electron JS developers

These are the tools Electron JS needs to build an application.

  • Electron-prebuilt – it installs prebuilt Electron binaries for command-line use using npm.
  • Electron-compile – it uses ES2015, CoffeeScript, LESS, SCSS in your app without a pre-compilation step.
  • Electron-packager – it packages the files and distributes in your app.
  • Devtron – it is the official DevTools extension.
  • Spectron – it tests Electron apps using ChromeDriver.

Try, learn and explore Electron JS!

On 20 December 2018, Electron version 4.0.0 was released. Check out its official website at https://electronjs.org. Here are some future ideas for desktop Apps using Electron JS.

  • Disconnected data entry application.
  • Editor tool.
  • Time management app.
  • Media player which supports different types of files.
  • Email client.
  • Messaging, collaboration applications.
  • Kiosk development.
  • Mapping, route planner with documentation.
  • Social media client for marketing.
  • Calendar with a good interface.
  • Media editor.
  • File management, backup with encryption.
  • Auto document generation, reading.
  • Audio/video conferencing apps.
  • Simple Games and much more.

Conclusion

Hope we helped you understand what Electron JS is along with its features, implementation and its fundamental tools.

Overall, Electron JS takes care of most of the dynamic applications which use our browser as a platform to deliver their embedded features and help us connect with a wider audience. After all, building and delivering the right applications that can help the users get their job done is the principal purpose of any open-source framework.

Matt Warcholinski

Matt Warcholinski is the COO of Brainhub (a software house building awesome node.js web and mobile apps) who loves to build startups and play guitar.

Follow Me: