My first experience with Electron.Js

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux. It has long since become a popular tool used by open source developers, startups, and established companies.

I have always been interested in web development and have been practising it for over a year now. Sometimes, I thought about the limitations of what I did. Web applications are only usable with a good enough browser and an active internet connection. So I felt that I was unable to make applications or softwares other than web apps, and that somehow limited my ideas.

But recently I discovered a not-so-new framework, which is Electron Js. I quickly went through its documentation and got to know about all it had to offer. I couldn’t believe at first, that Electron could create Desktop apps using only HTML, CSS and JavaScript, partly because I had always thought these languages could only be used to create apps that would run on browsers, and partly because HTML,CSS and JavaScript didn’t have any direct features to create the layouts and structure of the desktop applications that we used everyday.
Nevertheless, I went ahead with it. I couldn’t understand the documentation to a great extent, so I decided to watch a couple of YouTube videos to understand Electron better. I watched 2 videos of Electron Js from the channel Traversy Media.(I have provided the links below). Those were really amazing and when I created my very own desktop app, I couldn’t believe what I had just created.

It was a simple shopping list application, in which a user could add an item, remove an item and clear his shopping list. But all the windows opening up, big and small in size, and each one having different menus like File menus and Add/Edit menus and also having styled content gave a feeling of both a desktop app and a web app. Using Electron, you have basic features like creating a new browser window and filling it with your own index.html file(main structure file of a web app), styled with a css file(main styling file of a web app). Then you have options of adding your own menus, like the File, Edit , View menus you have on any everyday use Desktop app. Inside them you can add your own features with hotkeys(shortcuts). Then after creating the application, you can add certain commands, so that on compiling the code, you can generate executable files for running the app on Windows, Mac or Linux, as Electron apps are totally cross platform.

These are some of the images of the app:

Basic look
Custom Menu
Multiple windows

This was indeed a brilliant experience, and I know I didn’t go into technical details that much, because me explaining whatever I did would be a complete recreation of the 2 videos below, so I would highly recommend watching them to get a basic feeling of Electron Js.

But I will certainly learn more and more about Electron and will create more apps for everyday use. I am planning on creating projects using Electron Js and Socket IO, and many more, after creating which I will definitely write detailed articles explaining what I did, so that people new to the world of desktop apps can realise how easy and amazing they are!! Thank you and I would really appreciate if you would leave some claps behind…hehe.

Introduction to Electron JS:
Shopping List app using Electron: