What is Electron?

Electron logo image source

Microsoft Teams, Discord, Slack, Visual Studio Code – many of us use these applications every day. What do they all have in common? They are created using a technology called Electron. It is a framework developed by Github. It allows the creation of cross-platform applications with a graphical interface using Node.js and the Chromium engine, technologies that are also used in the development of web applications.

Electron was developed for the Atom text editor, which was intended to be extensible and able to run on multiple operating systems. Back then, the first version of the platform that we know today as Electron was created under the name Atom Shell.

Electron Fabrity blog img 1
The main advantage of applications created using Electron is the ability to run on different operating systems, while retaining access to many of their native features, such as access to the clipboard, tray icon, local file system or information about it. This has been achieved by introducing some intermediate layer of abstraction in the form of the Electron API, which provides communication between the standardised interface available in the application and the native functionalities of the supported operating systems.

Programme architecture

Applications created with Electron consist of several processes – a main process and rendering processes. The former is responsible for application logic, communication with the system, or the creation of windows. A single instance of an application always uses a single instance of the main process, unlike rendering processes, each of which is responsible for a single application window, controls the display of its contents, and is responsible for interacting with the user.
Some similarities to web applications can be seen in the architecture presented. As with the electron app, access to system functions is via the main process, which in this case is the web browser. It provides a specific set of functionalities to interact with the system, but this is significantly limited compared to the Electron API. This is necessary because the browser, by definition, executes the code of applications available on the Internet, whereas Electron assumes greater control over the source of the program. If you are executing code of unknown origin, you should always configure the application so that it does not allow access to the system from within it.

Write once, run everywhere!

The challenge that arises when creating a single application that can run on multiple operating systems is the different set of functionalities or differences in their implementation between systems. The Electron API mentioned above was developed in response to this problem. It is an intermediate layer that implements common functionalities for each system in such a way that they can be used in a consistent manner independent of the current operating system. There are a few exceptions to this rule, such as Touch Bar support on MacBooks, which is only available in macOS. The existence of this intermediate layer unfortunately introduces a performance cost – all operations must be translated from the form available in the application to one that will be understood by a particular operating system.

Some functionalities offered by Electron API are available only from the level of one of the processes – main or rendering one. Operations such as managing the system tray icon, notifications or global keyboard shortcuts can only be used in the main process. However, the rendering process is mainly responsible for user interaction – so what if you want to perform a certain action in the user interface in response to a keyboard shortcut? This is where inter-process communication (IPC) comes in. It can be both synchronous and asynchronous and allows messages and data to be transferred between application processes, clearly defining the extent to which the main and rendering processes can communicate. Another way of communication is provided by a special module that allows all the functionality of the Electron API to be used, independently of the process that executes the code. This module gives unrestricted access to the system, which can be disastrous in the case of untrusted code. For this reason, it is not available by default and must be enabled by configuring the application accordingly.

We've made a new app - what next?

In order for the created product to be distributed to users, it is necessary to create an installer, i.e. an executable file. Creating one for applications built with Electron is done by a tool called electron-builder. It generates an executable file in a format of your choice allowing you to install the application on the target system. Work with the distribution of finished programmes is also facilitated by tools allowing the delivery of new product versions, which offer mechanisms for checking and installing updates that do not require user intervention.

Browser, Electron - the same application?

Web applications and their desktop counterparts often have a similar interface. This is obviously convenient for the user, as they can switch seamlessly between versions while remaining in a familiar environment. This fact brings the advantage of sharing the GUI code between the two applications, as they use the same technologies. The only difference between these versions is the operating system functionality available. A web application using a more versatile and limited layer, which is the browser, has less opportunity to interact with the system, which may translate into a user interface.

Electron is an interesting tool that allows you to create cross-platform applications. However, it does come with some costs, such as lower performance compared to native programs, and a user interface similar to web applications, often deviating from the style of the operating system. The multitude and popularity of solutions created with Electron available on the market shows, however, that software manufacturers are often willing to give up undoubted advantages of native programmes in favour of improvements offered by Electron.

Share on linkedin
Share on facebook
Share on twitter

You may also find interesting:

Technical

Product Design Sprint

Design Sprint is a process of business problems solving developed by Google Ventures. It was created to help start-ups build better products. We adapted this method to the requirements of big organizations.

Technical

Design-Driven Innovation

Innovation is often about changing the meaning of what a product or a service is and what it offers its users. This is the core of the design.

Technical

UX & Visual Design

Interfaces, processes, and ecosystems, improve customer journeys, help to increase sales, and provide better customer service. We combine business and users’ needs to create digital products that make money.

Technical

Scrum at a glance

SCRUM has become the dominant approach to organising project work. The high variability of the economic and legal environment forces companies to increase the speed of adaptation.

Technical

SCRUM – how it looks like in practice

The main advantage of the SCRUM framework is that it is uncomplicated and easy to implement. It requires a bit of experience, but it brings measurable benefits.

Ask a question

We would be glad to talk with you about your needs and ideas.

Ask a question

We would be glad to talk with you about your needs and ideas.

Grzegorz Glica

Chief Technology Officer

grzegorz.glica@fabrity.pl
+48 667 880 552