Electron, or how to develop desktop applications in JavaScript

Web applications are becoming increasingly powerful thanks to the new APIs made available by browsers: Geolocation, notifications, bluetooth, etc...

The problem is that not all browsers implement these APIs at the same speed, and some even refuse to implement them at all in an attempt to block user tracking.

If browser-fingerprinting doesn't mean anything to you, I recommend my article on the subject.

Still, there are certain features that browsers will never implement, such as access to the machine's files, which is far too dangerous.

So how can we create rich applications when we're web developers? For mobile applications it's possible to use frameworks like Ionic or, more recently, React-Native, but what exists for good old desktop?

Today we're going to talk about Electron!

What is it?

Electron is a cross-platform application development framework based on NodeJS and Chromium (the open-source base of several web browsers, including Google Chrome).

The principle is to be able to create windows (as in classic software development) and to be able to manage their content using standard web technologies: html, css and javascript.

Electron gives access to the file system, to all of Chromium's web APIs as well as those of the operating system (be careful, if your application relies on the APIs of a particular system, it won't work on the others).

To give you an idea, here are a few desktop applications created with Electron:

• Slack
• Visual Studio Code
• Atom
• InVision

The advantages

Electron offers many advantages, some of which have already been mentioned above:

• Easy to get started with
• Cross-platform deployment (Windows, Mac and Linux) with installers
• Compatible with the Windows App Store and Mac App Store
• Handling of automatic updates
• Chromium web APIs
• Native OS APIs (Menus, Notifications, etc...)
• Access to the file system

The drawbacks

There are drawbacks, as with any technology, and it's up to you to decide whether it's worth it and whether, in your project, the advantages outweigh the drawbacks.

I won't list them all here, as other people with more experience than me with the tool have already done a great job of it, such as on the Hackernoon blog, but I'll explain to you the two biggest drawbacks of the tool in my opinion:

One app, one browser

As I explained at the beginning, Electron's principle is to run a web application inside an embedded web browser (Chromium).

This means that for the lightest possible application (say, a simple Hello World), the application's weight and its RAM and CPU consumption will be at least equal to that of the underlying browser.

Having one application of this kind running on your machine doesn't make much of a difference, but if you start multiplying applications of this type, you create a huge resource optimization problem for the machine.

Visible source code

The source code of an Electron application is neither compiled nor encrypted, nor obfuscated, it is simply packaged in an "asar" container. Extracting the complete source code from such an archive takes no more work than running the command: asar extract app.asar secret_source_code

There's a good chance that your application's source code is part of the value of your company (or your client's), and that making it easily accessible to developers who could clone the application might not be the best idea.

There are nevertheless a few ways to make your code "unreadable" yourself or harder to extract, but that's up to you, and how much time someone interested in your code is willing to spend on it!

My opinion on Electron

Personally I've had the opportunity to use it, combined with VueJS, to create my game "Candy Candy Candy" in 48 hours during my last Game Jam.

Electron allowed me to offer a common environment for all my players, a fixed window size to make development easier for me and enable exporting an installer on Windows, MacOS and Linux quickly!

If you want to try it, the game is available for free download on itch.io and the source code on Github.

I sincerely think Electron is a very handy tool, that it saves time and makes it possible to release a first version of an application very quickly.

Nevertheless I see it as a temporary solution, for example while waiting to develop a native application (or until React Native can export Windows and Linux applications).

In my opinion, web application publishers shouldn't systematically port their applications to Electron, it wouldn't do any good either to the web world or to the software world.

But if you haven't tried it yet, go ahead and make up your own mind!