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 ….
There have been many such attempts with success such as
But we are going to cover the framework Electron.
What is Electron?
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.
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.
$ 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.
Method 2: Using NPM:
$ 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.