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.
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.
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:
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
|Friends||Peer to peer chat|
|Kart||Frontend for RetroArch|
|Monu||Process monitoring app|
|Playback||Experimental video player|
|Geojsonapp||Preview geojson files|
|Menubar||Create menubar apps|
|Yeoman App||Scaffold projects|
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.