What is Electron?
Steps to setup environment
We can setup in multiple ways. The easier way I found is given below
- Go to the release page in Eletron Github repository.
- 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
- 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.
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
- 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.
- 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)
- Its heavy. Need to package runtime with our app.
- Not all native operations can be done.
- 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.