ElectronJS: Introduction

A beginner’s guide to creating desktop applications using Electron

In this lesson, we are going to take a look at the architecture of Electron and understand how Electron works. Then we are going to set up a sample Electron project and create a simple desktop application using HTML, CSS, and JavaScript.

(source: unsplash.com)

Would you believe me if I said Slack, VSCode, Atom, Skype, Discord, and Whatsapp desktop applications you are using right now were written using are HTML, CSS, and JavaScript? Probably not. Because in our day to day lives, we only use these languages for designing websites.

But what if a desktop application internally uses a browser for GUI (what the user sees)? Then we could technically use these languages to render the application UI. This is exactly what’s happening inside the apps above. These apps use a browser under the hood to render UI which is why it’s possible to use HTML, CSS to draw things, and JavaScript for interactivity.

Though designing GUI using HTML, CSS and JavaScript seems simple, you still need a bridge between the native system APIs and the browser (in the application) for IO (filesystem), network access…