GitHub’s Electron – Enabling quick and easy cross platform app development

Today it has become easy for developers to build cross platform desktop apps with web technologies such as GitHub’s Electron. Electron is gradually acquiring increased popularity amongst the developers since it is an open source application shell for building Apps.

Big players such as Microsoft and Slack are taking advantage of Electron to build Visual Studio Code and using it for the desktop endpoints of its collaboration platform respectively. Electron has gained the likes of many major companies like Facebook, Docker and others, since it is one of the best and a thoughtful way of using Node.js and HTML uniquely to build and run cross platform desktop applications.

Inside the Electron: What is the Electron made up of internally? It composition is modular and simple. It has a Chromium frame that wraps JavaScript code running on Node.js. This way it becomes easy to bring familiar Web application technologies to the desktop, letting the developers quickly convert existing code into a desktop tool, with Node.js as it offers low-level API access to the operating system beneath.

Consider you have developed a single page web app that runs on Node.js, you have the option to build and deliver an Electron App. But if you have multiple windows in your Electron App, then they are all controlled by a single main process. Views are inaccessible by each other and hence all the required communication between multiple windows takes place only through the singular main process.

Electron is best used for rapidly creating complex apps as it was initially intended to work as the host for GitHub’s Atom development environment. Electron is flexible and lets the developers start with simple apps and then gradually helps them build more complex code over time.

Speed up development using Electron

If you develop an Electron app you will notice that it looks just like a Node.js module without major differences. But how is it packaged? It is packaged using the standard derivative of the NPM Packager. Similar to a typical packaging structure it has everything hosted in one directory tree of scripts along with HTML content. The code begins with ‘main.js’ script. This script manages windows and application events. All events may it be from windows or from the OS are handled for example closing the app without keeping any windows
or events open.

Like other coding environments GitHub helps developers get going with a prebuilt main.js, which can be utilized in the developers’ code. Since it is a prebuilt Electron download it makes the developer life easy and saves time and effort. There is an option to build your own environment from scratch if required using Electron as the need may be to ship it to a community or as a part of commercial software.

Developers have the flexibility to use built in Node.js modules along with some other very specific Electron modules that work for the underlying OS. If you are well versed with Node.js you will definitely have a short learning curve to pick up Electron quickly and understand how internal processes communicate.

There is a specific module named IPC which handles inter process communication. It can send messages in both manners asynchronously and synchronously. This makes it feasible to send content across windows that are isolated to the single main process. This is a method of sending events between different renderers utilizing main process as a message exchanging hub.

How to speed up the development process using the Electron? One option to speed up development is to take benefit of Electron’s support for native Node.js modules. Electron uses a different version of the V8 JavaScript engine, so look for a specific version before use. Developers are free to use the NPM directly once they have adjusted a set of environment variables.

Testing Electron Apps

Initially developers faced lot of issues while debugging Electron apps because unlike traditional development and testing environments Electron is not a part of that environment or the build chain. But the developers and testers can test code outside the shell via any conventional browser using the F12 debugging functions which they find very inconvenient.

As Electron app runs inside Chromium browser, you can use WebDriver testing framework to build automated test cases using build engine like selenium or using the tools in Jenkins.

Electron framework allows to play and make use of OS level features like:

• 1.    The recent file options in Windows and OS X can be used for building editor like app in electron
• 2.    You can make use of UI features like progress bars from toobar or desktop launching shortcuts in Linux.
• 3.    The Windows media player toolbar can be used inside your app which can allow users to control playback when your app is minimized.

GitHub’s Electron framework (earlier and better known as Atom Shell) lets developers code and build cross platform desktop application using JavaScript, HTML, and CSS. Electron is a variant of io.js run-time which is fully focused on desktop applications instead of web servers. Frameworks such as the Electron have a long life because of their ability to let the developers check out new ideas on the Web before bringing them into fruition as desktop applications, while eliminating the need to change code to run on different platforms. Electron framework simplifies the distribution process, so it’s easy to update applications on the go. This reduces the headache and updating effort of the users as they always get the latest version for use.

Apps built using Electron

With Electron, developers can create cross platform desktop applications for the organization. Electron has been used to produce applications by major companies such as Microsoft, Facebook, Slack, and Docker.

Some open source apps that are built with Electron

Get started with GitHub’s Electron

The first step is to download a prebuilt binary or use npm to install from the command line.

# Install the `electron` command globally

npm install electron-prebuilt -g

# Install as a development dependency

npm install electron-prebuilt –save-dev

There is a Quick Start Guide to refer to for developers. A large community creates and maintains projects and tools which can be read along with the related  documentation.