Developing Electron HTML5-Javascript desktop application in Windows 7

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".

https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md

Steps to setup environment

We can setup in multiple ways. The easier way I found is given below

1. Go to the release page in Eletron Github repository.
2. 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.
1. 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
3. Extract to c:\Electron\ . It can be to any folder but just for simplicity put in c: drive itself.
4. 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

1. 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
2. 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
3. Clean up index.html
1. Remove all styles and scripts
2. Change the title tag content to "My First Electron Application"
3. Make sure body contains only the word "Hello world"
4. Replaces the contents in the main.js with the main.js contents from Github help page 
5. Now run the project by any of the following methods
1. In command prompt type c:\Electron\Electron.exe c:\apps\testelectron
2. 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

Just refer the official documentation on packaging and distribution.

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.
• Package management done via Node Package Manager (NPM)

Cons

• Its heavy. Need to package runtime with our app.
• Not all native operations can be done.
• As always need to use only The Good Parts of javascript
• Process model put overhead on window communication. Need to use IPC. Also it takes more total memory than single process model.

As of Microsoft, they use this technology in their new VSCode code editor. Similarly many big players are adopting it. Its worth taking a look.