About Electron Platform - roonyh/fossasia-gci-companion GitHub Wiki
What is Electron ?
In short Electron allows the Development of desktop GUI application by using Node.js framework. It is the main framework behind two open source software : Github Atom (text editor) and Microsoft Visual Studio code. It lets you write cross platform desktop application using HTML, CSS and JavaScript and It is formerly known as Atom Shell.
Before going ahead lets see the structure of Electron app. The structure of an electron app looks something like this:
your-app/
├── package.json
├── main.js
└── index.html
Here in electron the process that run package.json is the main process.(For detail explanation of what is package.json click here) And each webpage runs its own process which is called renderer process.
NOTE : Here the script that runs in the main process can be display a GUI by creating web pages. By default Electron uses Chromium for displaying web pages. So whenever you run your application you see some cool UI these UI are nothing but made up in index.html file with CSS.
The main difference between main process and renderer process is that the main process manages all web pages and their corresponding renderer processes.But each renderer process is isolated and only cares about the web page running in it.
The main.js file as mentioned above create windows and handle system events. And if you have to make one interactive UI then you have to make the index.html web page which you want to show. So over all to run your app you need 3 files main.js, index.html and package.json. After creating these 3 files all you have to do is go to that directory and enter this in terminal:
npm install
npm start
or
You can also try to start it by going to terminal and enter this in your app directory :
./node_modules/.bin/electron .
(But still you have to do npm install first before doing that)
If electron-prebuilt is installed globally with npm then you can simply start your app by typing this in your app directory :
electron .
Still its not that tough to start working with Electron. Let's get started and see how to install Electron.
To install Electron all you have to do is to paste these commands in terminal if you are using Ubuntu OS (For windows here is the link):
Clone the Quick Start repository
$ git clone https://github.com/atom/electron-quick-start
Go into the repository
$ cd electron-quick-start
Install the dependencies and run
$ npm install && npm start
Here is the image of how it looks when we run any application with electron. In this case I have run the application of this repository.
Still there is one question which arises that what's the advantage of using Desktop application ?
##Advantages of Desktop application over Website.
At first if it comes to security then the website has more security risk as compared to any application. In case of desktop application we can implement various methods to protect our application from various vulnerabilities but in case of website it is open to a large number of user which might a threat for that site.
Desktop application are standalone in nature but in case of website it depends on Internet connectivity. If there is any hindrance related internet connection then it might break the connection with that website which will be not beneficial but in case of desktop application it will run smoothly even if there is any hindrance.
Still There is also one dis-advantage that in case of desktop application one has to go to specific place and then click on one specific button to update there application so that it runs smoothly. But in case Electron this hard-work has been made easy. Electron provides automatic updating due to which no one has to worry about when and how to update.
I guess now you are familiar with Electron framework and also that why we are making desktop application.
Links for this content:
http://electron.atom.io/docs/latest/tutorial/quick-start/
https://en.wikipedia.org/wiki/Electron_%28software_framework%29