Electron JS

Electron JS

Why Electron?

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native 

operatingsystem

$operatingsystem$ APIs.

This does not mean Electron is a JavaScript binding to graphical user interface 

GUI

$GUI$ libraries. Instead, Electron uses web pages as its GUI, so you can also see it as a minimal Chromium browser, controlled by JavaScript. So all the electron apps are technically web pages running in a browser that can leverage your OS APIs.

Who Uses Electron?

Github developed Electron for creating the text editor Atom. They were both open sourced in 2014. Electron is used by many companies like Microsoft, Github, Slack, etc.

Electron has been used to create a number of apps. Following are a few notable apps −

• Slack desktop
• Wordpress desktop app
• Visual Studio Code
• Caret Markdown Editor
• Nylas Email App
• GitKraken git client

ELECTRON - INSTALLATION

To get started with developing using the Electron, you need to have Node and npm

nodepackagemanager

$nodepackagemanager$ installed. If you do not already have these, head over to Node setup to install node on your local system. Confirm that node and npm are installed by running the following commands in your terminal.

node --version

npm --version

The above command will generate the following output −

v6.9.1

3.10.8

Whenever we create a project using npm, we need to provide a package.json file, which has all the details about our project. npm makes it easy for us to set up this file. Let us set up our development project.

• Fire up your terminal/cmd, create a new folder named hello-world and open that folder using the cd command.
• Now to create the package.json file using npm, use the following command.

npm init

Just keep pressing Enter, and enter your name at the “author name” field.

Create a new folder and open it using the cd command. Now run the following command to install Electron globally.

$ npm install -g electron-prebuilt

Once it executes, you can check if Electron is installed the right way by running the following command −

$ electron --version

You should get the output −

v1.4.13

Now that we have set up Electron, let us move on to creating our first app using it.

ELECTRON - HOW ELECTRON WORKS

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 GUI 

graphicaluserinterface

$graphicaluserinterface$ of your Operating System.

As you start an application using Electron, a main process is created. This main process is responsible for interacting with the native GUI of the Operating System. It creates the GUI of your application.

Just starting the main process does not give the users of your application any application window. These 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.

Difference between Main and Renderer processes

The main process creates web pages by creating the BrowserWindow instances. Each BrowserWindow instance runs the web page in its own renderer process. When a BrowserWindowinstance is destroyed, the corresponding renderer process is also terminated.

The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.

Reference:

1. Electron JS