Electron - Overview

Why Electron?

Electron enables you to create desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs.
This doesn’t mean Electron is a JavaScript binding to graphical user interface (GUI) libraries.

Electron - Installation

To get started with developing using the Electron, you need to have Node and npm(node package manager) installed. If you don’t 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.

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 (graphical user interface) of your operating system.

Electron - Hello World

We have created a package.json file for our project. Now we'll create our first desktop app using electron.
Create a new file called main.js. Enter the following code in it:

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

Electron - Building UIs

The User Interface of Electron apps is built using HTML, CSS and JS. So we can leverage all the available tools for front end web development here as well. You can use the tools like Angular, Backbone, React, etc as well as Bootstrap, Foundation, etc to build the apps.

Electron - File Handling

File handling is a very important part of building a desktop application. Almost all desktop apps interact with files.
We will create a form in our app that'll take as input a Name and Email address. We'll save this to a file and create a list that'll show this as output.

Electron - Native Node Libraries

We used a node module, fs, in the previous chapter. We'll now look at some other node modules that we can use with electron. We'll start off with the OS module.

Electron - Inter Process Communication

Electron provides us with 2 IPC(Inter Process Communication) modules called ipcMain and ipcRenderer.
ipcMain module is used to communicate asynchronously from the main process to renderer processes. When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page). Messages sent from a renderer will be emitted to this module.

Electron - System Dialogs

It is very important to make the user feel home when they're using your app. As a result you should not create dialog boxes using alert() calls. Electron provides a pretty good interface to accomplish the task of creating dialog boxes. Lets have a look at it.

Electron - Menus

On desktop apps we generally have 2 types of menus, namely the application menu(on the top bar) and a context menu(right click menu). We will learn how to create both of these in this chpater.
We'll be using 2 modules namely Menu and MenuItem.

Electron - System Tray

System tray is a menu outside of your application window. On MacOS and Ubuntu it is located on the top right corner of your screen. On Windows it is on the bottom right corner. We can create menus for our application in system trays using Electron.

Electron - Notifications

Electron provides native notifications API only for MacOS. So we are not going to use that, instead we'll be using a npm module called node-notifier. It allows us to notify users on Windows, MacOS and Linux.
Install the node-notifier module in your app folder using the following command in that folder:

Electron - Webview

The webview tag is used to embed 'guest' content like web pages in your Electron app. This content is contained within the webview container. An embedded page within your app controls how this content will be displayed.

Electron - Audio and Video Capturing

Audio and video capturing are important characterstics if you're building apps for screen sharing, voice memos, etc. They're also useful if you require an application to capture the profile picture.
We'll be using the getUserMedia HTML5 API for capturing audio and video streams with electron. Lets first set up our main process in the main.js file as follows:

Electron - Defining Shortcuts

We typically have memorized certain shortcuts for all the apps that we use on our PC daily. To make your applications feel intuitive and easily accessible to the user, you must allow the user to use shortcuts.
We'll use the globalShortcut module to define shortcuts in our app.

Electron - Environment Variables

Environment Variables control application configuration and behavior without changing code. Certain Electron behaviors are controlled by environment variables because they are initialized earlier than the command line flags and the app’s code.

Electron - Debugging

We have 2 processes, as we discussed in the start of the tutorial, that run our application. The main process and the renderer process.
Since the renderer process is the one being executed in our browser window, we can use Chrome Devtools to debug it. To open DevToolsuse the shortcut "Ctrl+Shift+I" or the <F12> key. You can check out how to use devtools here.

Electron - Packaging Apps

Packaging and distributing apps is an integral part of the development process of a desktop application. Since Electron is a cross platform desktop application development framework, packaging and distribution of apps for all the platforms should also be a seamless experience.

Electron - Resources

I have used the following resources to learn about electron as well as referred from them to create this tutorial.
The most important resource is the Electron documentation. The Documentation has extensive coverage of almost all features and quirks of the framework. They are alone enough to make your way through building an app.