Electron Brings Cross-Platform JavaScript Apps to the Desktop – InApps Technology 2022

JavaScript has come a long way since its humble beginnings as a scripting language. Originally, JavaScript was only used in web browsers — and somewhat begrudgingly at that — as JavaScript was the only natively supported option for browsers, and could be harnessed for simple tasks such as creating slideshows.

The language has come a long way since then. One of the first major catalysts for this change is the abundance of powerful libraries and frameworks for browser-based JavaScript, such as Angular, Ember, d3, and React. Another big turning point for JavaScript was the introduction of Node.js, which allowed JavaScript to be used as a server-side language, in addition to running on the client. Additionally, es6/es2015 have made the language far more comfortable for many developers.

No one can really say exactly how it happened, but these days JavaScript is closer than ever to becoming the “one language to rule them all.” Or, To phrase that a little less grandiosely, the one language that runs on every platform. In addition to the aforementioned server-side capability brought on by Node, JavaScript is also an active player on the mobile scene, whether it’s through a web-based solution such as PhoneGap, or the increasingly popular native solution React Native. Even in the IoT and microcontroller space, JavaScript has a presence through a project called Johnny-Five.

Somewhat ironically, the last frontier for JavaScript to cover has been traditional desktop applications.

Until Electron came about. Born from the de facto breeding ground for all things open source Github, the Electron project enables you to write desktop applications using JavaScript and Node.

Why Electron?

Before looking at the “how” behind Electron, let’s first explore “why” something such as Electron would be desirable. Even though web and mobile apps are becoming ever more powerful and pervasive, desktop applications still have a number of benefits and use cases. From enhanced offline support, to lower level APIs, to simply having a slot in the windows menu or MacOs dock, there is something to the magic of being able to “alt-tab” through an app on desktop, that web based apps just can’t emulate.

Another strong use case for Electron is being able to utilize existing developer skill sets. These days making a desktop application is something of a lost art; there are far more developers these days with strong knowledge of the web stack, compared to knowledge of desktop programming APIs.

While there is value in having the “best tool for the job,” there can often be value in simply having knowledge of “any” tool for the job. Electron not only brings JavaScript the language to the desktop, but also brings HTML, CSS, and the entire JavaScript ecosystem. Not only is all of browser at your disposable, but the powerful and wide-ranging collection of NPM modules as well. The end result is web developers can create great looking desktop applications, with minimal additional training.

Cross-Platform Goodness

Even if you have some developers with knowledge of desktop programming. Native Programming for Windows is completely different from programming for Linux and MacOs. With Electron, you can write the same app and have it run in all three platforms.

Even though cross-OS solutions for writing desktop GUIs have existed for a while now (Java, Python, etc…) there is yet another benefit to the Electron approach. Many apps these days are starting off with a web app, and the desktop app comes after the fact. Even if you were to get cross-platform compatibility with Java, you wouldn’t be able to reuse much — if any at all — of your webapp front end code. With Electron, you can largely reuse all of your web front-end code! This is a huge win in terms of code reuse and productivity; potentially one could reuse the same code base for Web, Android, iOS, MacOs, Windows, and Linux.

https://www.youtube.com/watch?v=8YP_nOCO-4Q

How It Is Implemented

Electron is based on Node.js, and it helps to have a basic idea of how Node works before looking at Electron.

JavaScript was originally browser only. Not only was there not any way to invoke Javascript from outside the browser, but even if you could, it wouldn’t have been very useful. This is because JavaScript wasn’t a general purpose programming language; it’s input output capabilities were tightly coupled to the browser, and it wasn’t possible to do simple things such as read or write to the file system.

In a browser context this is probably for the best — I would not want arbitrary websites to be able to access my entire file system — but is a definite blocker for using JavaScript as a standalone language. What Node.js did to remedy this is took the super speedy — for a dynamic language — V8 runtime from the Chrome browser, and wrapped it with a brand new standard library.

This library gave JavaScript a vast number of low-level capabilities to do things such as networking, steams, and of course read and write to the file system. The Electron project than took this souped up Node version of JavaScript, and stuck it inside Chromium via the Chromium content module.

Now, at first glance that could look like we are back to where we started: a web browser that uses JavaScript for scripting capabilities. That’s not the full story here. Really, The end result this time is a web browser using a highly privileged version of JavaScript one that has full access to the client machine —  inside a browser. This basically combines all the powers and capabilities of traditional front end JavaScript, and combines it with server side Node JavaScript capabilities. Examples Electron isn’t just some Github side project.

Electron is powering many popular production ready pieces of software. Some popular ones include the desktop version of Slack, Visual Studio Code, and another popular Github project —  that Visual Studio Code is a fork of —  called Atom. Atom is a modern text editor with a very modular package based plugin system. Part of the reason for Atom’s popularity is that it is very simple to write plugins for Atom using JavaScript or Coffeescript (a compile to JavaScript language popular with the Ruby/Rails community). This had quickly led to an abundance of plugs for a relatively young text editor. Next time you are looking for a desktop app to accompany your web presence, be sure to check out electron.

Even if you ultimately opt for a true native experience at some point, the quick to market potential of Electron shouldn’t be glossed over!

Feature Image via Pixabay.