Electron Framework For Creating GUI Based Desktop Applications

 

When it comes to develop a windows/desktop app most of us make use of native desktop app development framework. However, since past few years many javascript frameworks like ElectronJs, NwJs etc have evolved that can help developers create desktop apps far more easily. This article aims at providing an insights on ElectronJs framework which is getting quite a publicity these days for its rapid application development quality.

Introduction

Electron is a cross platform application development framework. Yes, you heard it right! your application would be cross platform which allows it run on any OS.  Often it is the normal case where you end up engrossing in such native frameworks like WPF which has a steep learning curve. I must say that framework like elctronjs is a boon for web developers because they don't have to learn anything extra but to make use of their own web development skills to develop desktop app. It's not a hyperbole. It is indeed true. Electron framework makes use of web technologies to create crisp and radiant looking application.

Origin

Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies: it combines the Chromium rendering engine and the Node.js runtime (Ref. 1. Wikipedia)

What's in there?

While developing desktop application using electron, we can make use of HTML5, CSS, JavaScript. We can also make use of JavaScript plugins, Bootstrap modules etc in Electron framework.

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

(Ref. 2. ElectronJs)

Due to the wide support for the web, many JS plugins/components are available for free. Similar kind of plugins cost more in case of native apps development.

How it works?

It internally make use of Chromium for rendering the view (HTML,CSS) and in backend it make use of Node.js

As a prerequisite developer needs to have NodeJS and Electron framework installed on their machine in order to develop the desktop application.

Testimony apps that use ElectronJs

 Many famous commercial apps have been built using electron framework. They are

• Microsoft Teams,
• Visual Studio Code,
• Facebook Messenger,
• Github Desktop,
• Whatsapp Desktop,
• ATOM,
• Pencil Project,
• WordPress Desktop,
• Slack,
• Discord

Drawbacks of ElectronJs

Though electron seems very promising but it has some issues at the time of writing this article. Please consider thinking about your system requirements before choosing ElectronJs.

• Speed (not as superfast as native apps)
• It is not as mature as compare to native .net framework
• Application size
• RAM consumption (3-4 times than native apps)
• The size of executables are 4 to 5 times more than native apps

Note:

Ø     Most of the famous apps which we use in our day to day life are built using electron. But, be cautious. Even Microsoft Teams built using electron consumes exorbitant amount of RAM and make system slower. This concerns me the most because for commercial applications we cannot rely on slow performance. This is the major reason developer prefers to use native app framework for creating large enterprise applications.

Ø     In case you have to make use of other .Net library in JS based Electron framework then you need to figure it out how to make use of such .Net Library.

As a workaround, you can create a local service project that can run with .Net to use such libraries or else try to work with Electron.Net. Although it is not as mature as ElectronJS

References

1.     Introduction of Electron https://en.wikipedia.org/wiki/Electron_(software_framework)

2.      ElectronJs https://www.electronjs.org/