What Is Electron.js? Pros and Cons [2024]

Introduction

If you came here looking for crucial information about Electron.js, this article won’t disappoint you. You will learn:

• what is Electron.js
• what are Electron’s key features
• how Electron’s architecture and working process look like
• which tools for developers are the best
• how to set up your first Electron.js project

Let’s begin.

So what is Electron framework?

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.

<span class="colorbox1" fs-test-element="box1"><p>Important: It is basically a blend of two incredibly popular technologies: Node.JS and Chromium.</p></span>

A little bit of history of Electron framework

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.

Key features of Electron.js

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

Any web application you have written can run on Electron.js. Similarly, any Node.JS application you write can utilize this technology.

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 framework?

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.

Electron from a business perspective

Since with Electron you can build a desktop app with web technologies, most likely your current team of developers will handle that challenge. You can use available talents well. That also speeds up time to market, because you don’t need to adjust your code to various systems and their versions.

In most cases, Electron will be a good choice from a business point of view. And tech decisions should always be made with the business perspective in mind. Using the business context to make technological decisions it’s a first step to break down the boundaries between IT and business, and simply build better products.

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.

<span class="colorbox1" fs-test-element="box1"><p>Thing to remember: Electron applications have two mandatory processes, the main process, and the rendering process.</p></span>

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:

‍‍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:

Install electron:

Now it can be started by:

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

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:

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:

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.

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 – 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 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.