An introduction to javascript’s cross-platform framework. Learn to build native OS applications using the language of the web.
If you’ve done any front-end development work, you’re probably well-aware of the notorious amount of new Javascript frameworks released on what seems to be a daily basis. Keeping up with the latest web technologies can honestly feel like a job in itself, and getting inundated with new libraries may leave some to wonder what value these new libraries bring to the community. However, if there’s one framework worth adding to your engineering toolbelt, I urge you to check out Electron.
Electron is a Javascript framework that allows you to build native desktop applications using NodeJS, plain and simple. The library exposes a number of low-level APIs that allow developers to reach beyond the browser and interface with the user’s operating system, opening up a new world of engineering possibilities. It’s also OS agnostic, which means you can use a single application source that can run on virtually any desktop. It’s even capable of running on Android and iOS. Popular desktop apps like Spotify, Discord, VSCode, Skype (and so many others) have adopted Electron into their stack for its ease of use, growing community support, and a relatively low learning curve for any skilled web engineers to pick up and use right off the bat.
In essence, an Electron application is made up of three notable components:
To get a better idea of how these pieces interact, take a look at the diagram below:
Every Electron app uses a “main” process to handle the core application lifecycle and spins up any number of different “renderer” processes that behave like any traditional web application. Using IPC patterns (inter-process communication), your web interfaces will be able to interact with the user’s computer and deliver a more robust and immersive experience.
Since Electron runs on Chromium, it provides you with a browser window for a new or existing web application. Basically, it’s flexible enough to where you can still use your favorite front-end libraries (React, Angular, Vue, etc.) to create awesome web interfaces. Combining that with NodeJS, your app will be able to utilize the user’s machine in new and exciting ways.
Electron has taken the JS community by storm, and it behooves any front-end developers (or any engineer for that matter) to at least get their feet wet in this technology. While desktop application has its own challenges and nuances, Electron does a decent job in introducing engineers to the desktop development world and opens the doors to possibilities that just aren’t available without it. If you’re not yet convinced, feel free to check out the docs to learn more. If you’re looking to dig into some technical implementation, I’ll soon be writing a step-by-step guide in setting up your own Electron app, as well as show you how to wrap an existing web application in Electron so you won’t need to start from scratch. I’ll also provide you with resources that can help expand your knowledge and skillsets in what’s now becoming the hottest framework on the market. Stay tuned...
