Hello Everyone. This is our brand new tutorial series on Electron JS which is the most popular framework for building desktop applications using javascript.
Hope you’ll find it useful. This tutorial is especially suited for beginners who want to learn electron from scratch and use it for their real-life projects. Here you’ll learn all the basic concepts of electron and learn to use it.

Electron is the open-source application development framework based on Node js. It is used to build a cross-platform desktop application using existing web technologies like HTML, CSS, and javascript. Previously you might have heard about frameworks such as React Native, Nativescript, Apache Cordova etc which made it possible to build mobile applications using web technology.

Similarly, electron enables you to build cross-platform desktop applications using the same code base as your web application which you can run on different desktop platforms such as Windows, Linux and mac os.

As this is the era of web so making the desktop application again might seem like a counter move for many. Even though web applications are portable in many ways, they don’t have all the power that a native application can provide. As the client computers are being more and more powerful handling all of the basic functionalities in the server might be too overwhelming.

Also, the difference in multiple browsers makes it hard for a developer to provide a similar and seamless experience for all the browsers out there. Furthermore, web applications cannot manage and utilize all necessary resource in the client computers as it’s sandboxed inside a browser window. So the maximum access level for the web application is limited by the browser itself.

There are certain functionalities which web applications cannot provide such as file io, system-level access and many more. Even though most of the application we use are web-based, desktop applications are still the fundamental part of our daily computer use.

If your internet connection is slow then the user experience with a web application is highly reduced. Making a desktop application helps the developer to build the application using similar technology as the web app but with the far more access to system-level functionalities and more processing power on the go.
Electron also provides the native-like UI and windowing mechanism for all major platforms out there. So your application looks and feels the same as the native apps for those platforms.

Now let’s explain how electron achieves this goal. Electron is made with the combination of 2 popular technologies: chromium which is the open-source fork of google chrome web browser and Nodejs which is the port of V8 engine providing a runtime environment for running js applications in the desktop devices directly without the need of a browser.

As Node JS is fully cross-platform, the application you write will run the exact same way on all the platform out there without having to target it separately for each one of them out there. Targeting only for chromium makes it easy for the developer to ignore all the fragmentation out there in the browser market.

Commonly we can say that UI part of your electron application would be rendered and handled by chromium and backend functionalities would be handled with Node JS. For making UI for your desktop application you need to know the basics of HTML and CSS, similar to those what you get used to with.

If you want to give more desktop-like looks and feel you can use targeted desktop UI frameworks such as photon which provides desktop-like components. You also need to have some basic knowledge on NodeJS, NPM and a good understanding of core JS. If you are a beginner in NodeJS, its always preferred to know these technologies first which will make your learning process far easier.

From our next part, we’ll start writing our code and build very first desktop application using electron. Thanks for reading this article. See you again.