Desktop applications always have a special place. The main idea behind developing desktop applications with JavaScript is that you build one codebase and package it for each operating system separately. This abstracts away the knowledge needed to build native desktop applications and makes maintenance easier. Nowadays, developing cross-platform applications with JavaScript relies on best frameworks - and one of is Electron.
Electron is a framework for creating desktop applications with all the emerging technologies including JavaScript, HTML, and CSS. It's an open-source framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies - combines the Chromium rendering engine and the Node.js runtime.
Electron began in 2013 as the framework on which Atom, GitHub hackable text editor, would be built. Electron is the main GUI framework behind several notable open-source projects including Atom, GitHub Desktop, Light Table, Visual Studio Code, and Wordpress Desktop.
How does it work?
Electron applications are composed of multiple processes. There are the "browser" process and "renderer" processes, the browser process is where your core application logic and window management goes. This process can then launch multiple renderer processes which are the windows that actually appear on a user's screen rendering HTML and CSS.
-
Electron takes a main file defined in your package.json file and executes it. This main file creates application windows which contain rendered web pages and interaction with the native graphical user interface of your Operating System.
-
As of starting an application that uses Electron, the main process is created which is responsible for interacting with the native GUI of the Operating System. It creates the GUI of the application.
-
The application windows are created by the main process in the main file by using the BrowserWindow module.
-
Each browser window then runs its own renderer process.
-
The renderer process takes an HTML file which references the usual CSS files, JavaScript files, images, etc. and renders it in the window.
-
The main process can access the native GUI through modules available directly in Electron.
-
The desktop application can access all Node modules like the file system module for handling files, request to make HTTP calls, etc.
Electron offers a number of APIs that support the development of a desktop application in both the main process and the renderer process.
Advantages of Electron
-
Electron 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.
-
Users won’t lose their data when they refresh.
-
Development cost for Electron applications is lower because developers don’t need to code across multiple browsers and operating systems.
