How to Develop Desktop Applications with Web technology using Electron

Building graphical user interface applications aka GUI apps have always evolved over time as compared to the stable and little or never changing Command line interface applications aka CLI apps or console apps. This is mainly because of the evolution of the operating systems and the underlying technology to render graphical elements. Some examples are Visual studio, Qt and Java based GUIs. In all these cases the language used in the framework played a major role in getting the easy adaptability for these frameworks. When developing a GUI application , choosing the underlying technology becomes a crucial decision. Factors such as Code maintainablity, Availablity of developers, Platform independancy, Code portability and many more ….

While these technology were evolving one after the other there existed one technology which connected the entire world and still connects. Yes the web technology. The combination of html, css and javascript to provide interactiveness between a server and a browser. The brilliant idea is using the browser to pack the applications to run natively on desktops computers.

There have been many such attempts with success such as

https://en.wikipedia.org/wiki/Google_Native_Client

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework

But we are going to cover the framework Electron.

What is Electron?

Electron is a open source framework for developing cross platform desktop applications with HTML, CSS and Javascript. Initially named Atom Shell it was developed by GitHub as a framework to develop their famous text editor Atom.

The Electron is built using the following three things. NodeJs(Javascript runtime environment), Chromium ( The open source version of Google Chrome) and V8 (Google’s Javascript Engine).

With Electron you can develop applications which can run on Linux, Windows and MacOS. The code is portable and platform independant while the binary is not.

Gone are those days where developers were classified as Webdeveloper or Application developer. Its going to be all the same. What not you can bring all the good features of the HTML world to the desktop world.

In simple words to say your browser has limited access to the hardware and in contrast Electron has direct access by means of nodejs.

 

Getting started:

Open the link http://electron.atom.io/ in your browser to get more information about the Electron yourself. There you have got all the information required to develop applications using Electron. Here I am going to give you an hands on experience of developing application using Electron in Linux based operating system.

There are many methods in which you can start using your Electron application. I tried some methods which I will mention here.

Method 1: Binary release from Github:

The first method is downloading the prebuilt binary from the Github and starting the application straight away. You know that Github is the company behind Electron, they do a regular release of software in binary form for various architecture such as i386, x64, arm etc for operating system such as Windows, Linux, Mac.

$ mkdir ElectronDemo
$ cd ElectronDemo

You can find all the released versions of Electron here  https://github.com/electron/electron/releases .

You have to download the appropriate version for your OS. The OS I used is Linux, the architecture is X64 , So I downloaded the following one  electron-v1.3.9-linux-x64.zip.

You can find the architure of your hardware by typing the following Linux command.

$arch

 

$ wget https://github.com/electron/electron/releases/download/v1.4.7/electron-v1.4.7-linux-x64.zip
$ unzip electron-v1.4.7-linux-x64.zip -d electron
$ cd electron

You are almost done now. To run the electron all you have to do it this.

./electron

Method 2: Using NPM:

NPM stands for Node Package Manager. The Nodejs project maintains a central repository for all the JavaScript packages and user can download and deploy them in their project using the command npm. In order to install Electron using npm, one need to have it in their OS already. Instead of showing how to install node and npm using deb  or rpm package manager, I would like to provide a solution which works on all OS. The idea is to download the latest nodejs from the website https://nodejs.org/en/download/ and extract it locally.

nodejsdownload

 

$ cd ElectronDemo
$ wget https://nodejs.org/dist/v6.9.1/node-v6.9.1-linux-x64.tar.xz
$ tar xvf node-v6.9.1-linux-x64.tar.xz

Now you have successfully downloaded and extracted the node to your local direcotory. Now we need to set PATH variable to point to the bin directory of the node in order to get the node and npm commands working.

cd node-v6.9.1-linux-x64\bin
export PATH=$PATH:$PWD

At this stage you are ready for installing Electron. From now on for every app you create, make a new directory before starting to install anything

$mkdir App1
$cd App1
$ npm install --save-dev electron 
$ ./node_modules/.bin/electron . 

At this point you should have got a working version of Electron using any of the method mentioned above and a little bit understanding about Electron itself. Next we will see the internals of Electron and application development.

 

One thought on “How to Develop Desktop Applications with Web technology using Electron

Leave a Reply

Your email address will not be published. Required fields are marked *