About Me

Followers

My Visual Studio Achievements

Twitter

Tuesday, July 7, 2015

What is Electron?

The official repository says "Build cross platform desktop apps with web technologies". Its really true but it comes with some limitations. We cannot write system programs or device drivers with this. Its a wrapper over Chromium with native pluggable points to provide a platform for rendering HTML and running Javascript inside executable. Yes its true that we can develop cross platform windows desktop application using HTML and Javascipt. Similar to creating windows 8 or universal apps using HTML5 and Javascript. Advantage with Electron is, it can run in different operations systems such as Linux, OS X along with Windows.

Just look at official repository to understand this "our own mini chromium browser which can render our html javascript application".

Steps to setup environment

Download the latest platform version. At the time of writing this post the version is 0.28.3 and file size is around 46 MB.

Take the 64 bit version if you have the 64 bit machine. The format is electron-vx.xx.xx-win32-x64.zip .Eg electron-v0.28.3-win32-x64.zip

Extract to c:\Electron\ . It can be to any folder but just for simplicity put in c: drive itself.

Double click on C:\Electron\electron.exe file to test the Electron runtime. We can see a default application has started. The source code for this application will be found in C:\Electron\resources\default_app

Steps to create new project

Create a folder for our app anywhere in the file system. In Electron desktop app is similar to web app which is a folder of html, javascript and other resource files. For ease of explanation we are assume that the path is c:\apps\testelectron

Copy package.json, index.html, and main.js from C:\Electron\resources\default_app into c:\apps\testelectron. This will get us the starting point similar to File->New ->Project in Visual Studio

Clean up index.html

Remove all styles and scripts

Change the title tag content to "My First Electron Application"

Make sure body contains only the word "Hello world"

Replaces the contents in the main.js with the main.js contents from Github help page

Now run the project by any of the following methods

In command prompt type c:\Electron\Electron.exe c:\apps\testelectron

Start Electron.exe by double clicking and drag and drop the testelectron folder into the window.

Hide F12 Developer tools in Electron application

Debugging Electron apps

As we are seeing we gets our favorite F12 dev tools to debug our app. By default the developer tools will be visible when we run the application. To hide that remove the below line from main.js.

mainWindow.openDevTools();

Avoid default Electron menu on our application

Now our application is running from Electron shell. The Shell shows the menu. We may check this by looking at the C:\Electron\resources\default_app. To remove that we need to make sure our app is the only one started. To do so copy testelectron folder into C:\Electron\resources and rename testelectron folder to app.

Some magic happens and now if we double click on Electron.exe our application will start alone :). As you know computer cannot do magic. Its all convention defined by developers to speed up the process.

Packaging and distributing

Pros

One language and technology for web and windows. This helps the developers focus on the business goal rather than spending time on google to learn technology and language.

Can leverage javascript frameworks such as angular, jQuery etc...

Leverage async programming model from node.js modules.

Easy portability. No need to maintain different code bases.

Comes with Chromium's process model. Each window is different process. This reduces chances to crash if we build big apps. Also minimize the memory leak as the process itself gone when a window is closed.