The electron is a runtime that allows you to develop desktop applications using HTML, CSS, and JavaScript. It is an open source framework developed by GitHub. Previously called atom shell, it was originally built for atom editor (a very popular code editor from GitHub) to handle chromium to Node.js event loop integration and native API. Basically, it works by combining the chromium content framework and Node.js together in a single framework. You could see it as a variant of Node.js runtime that is focused on desktop application instead of web servers. This does not mean that Electron is a JavaScript binding for native platform API and GUI libraries. Your application will run in a minimum chromium browser, which is controlled by Node.js runtime and JavaScript.
The interesting part is that you can have the full power of both chromium and Node.js together in the same application. Usually, web browsers use sandboxed security models that block web pages from accessing operating system components. You are very limited with web applications in terms of native-operating system API access. On the other hand, Node.js provides native-operating, system-level access, but it does not provide a way to create graphical user interfaces for your application.
The electron really shines here by combining both frameworks together in a single shell. It's not a complex framework at all. You don't have to learn a lot of conventions in order to start application development with Electron. It's very easy to structure an application using Electron as there is no complex tooling required to set it up. We will be discussing some best practices and tips throughout this book.
We need to be very conscious about how we write the code when we are developing web applications because whatever we are writing is supposed to be executed on a user's computer or devices. Users could be using a wide range of browsers from the latest modern Chrome or Firefox to old legacy Internet Explorer. So, we will not have any idea of where the application will be rendered. This will end up in writing code that supports from outdated Internet Explorer to modern browsers, and you will not have the flexibility to use modern features and solutions that are available in modern browsers because of cross browser compatibility.
Suppose you are developing a cross-platform desktop application using QT or Java. In order to run your application users still, need to install the same or higher version of Java or any other SDK and environment setup that you used to develop the application. There will also be operating system requirements in order to install these frameworks.
When we build our application with Electron, we are packaging a particular version of chromium and Node.js along with our application. You will have the freedom to use cutting edge platform features that are supported by chromium and Node.js as you are shipping the same version of chromium and Node.js that you are using for development. Electron always keeps up to date with chromium and node versions. The chromium used inside Electron is always two weeks behind the latest stable chromium version. It typically includes the latest version of the node and v8 engine. Let's look at some other benefits of Electron.
Nowadays, most programmers have much more experience in developing web applications than desktop applications. Even if we would like to add the ability to add the desktop application development into our toolset, it's too costly for us in terms of time and effort. We would have to invest in learning a new programming language to get it done, which is not a simple thing. Electron helps you in this situation by using your existing skill set. You don't have to learn anything other than web technologies such as HTML, CSS, and JavaScript.
Traditional web applications are more limited in terms of native operating system API access. As web applications are distributed over servers and clients browsers render the web pages in separate processes that do not have access to the native operating system resources and APIs. At least, it's well defined by the browser what these processes can access and what they cannot access.
In Chrome, each tab is rendered in its own process. The chromium sandbox model encapsulates processes inside a very restrictive environment. This restricts the processes from accessing the native APIs. But for a desktop application, it's essential to access native operating system APIs. To provide native access the Electron team modified chromium as well as Node.js built-in and third-party modules. In Electron, the chromium sandbox protection can be disabled so that any application running inside Electron is given unfiltered access to the operating system.