Desktop Apps
Aug 30 2018 08:03pm | | Share

Why the Electron Framework?

By Gagan Kaur

If you’re not familiar with Electron, it’s a framework that allows developers to create desktop apps using web technologies. “If you can build a website, you can build a desktop app,” is its tagline. In fact, many Electron applications feel almost exactly like websites.

 

How Electron Does It

Electron is sort of like a web browser and a web server all in one convenient package. Developers build a user interface using HTML, CSS, and JavaScript (the same as any website), and also build the “backend” for their app using JavaScript — basically, all the functionality that a website typically can’t do, like delete your hard drive or turn on your webcam without asking.

 

Electron combines the best web technologies and is cross-platform – meaning that it is easily compatible with Mac, Windows, and Linux.

 

Electron Under Hood

Each Electron app has two threads: one is the main thread (dealing with the App window and boot up), and one is the renderer thread (which is basically your web code UI).

Electron Components

Your Desktop Is Ruled By Electron (Knowingly or Unknowingly)

Electron Users

 

Why Companies Choose Electron for their Desktop Apps

Let’s take Slack as an example. Here’s one of Slack’s developers explaining exactly why they use Electron:

 

Given the rise of progressive web apps (PWAs) and browsers-as-OSes, it’s worth taking some time to think through what capabilities your app can’t possibly have as a standard web app. For Slack, this includes fine-grained control over native notifications, screensharing and video calls, spellchecking and language detection, native app and context menus, and access to exciting new APIs like the Touch Bar and My People.

 

Why WordPress Desktop Uses Electron

Locally hosted and with minimal load times, WordPress Desktop is a desktop app using Electron as a framework, and JavaScript using React as the main language in this emerging desktop technology.

 

Why WhatsApp Desktop Uses Electron

Working less and providing more, Electron helped the WhatsApp developers to cover the existing phone features and wrap around the desktop experience of WhatsApp through a more streamlined and revolutionized framework.

 

How to Fit Your Existing Knowledge of JavaScript Framework with Electron

You can, for example, use React for UI logic and let Electron deal with the native complexity of your desktop app like notifications, auto updates, crash reporting, camera, hard drive access etc.

Electron Flow

If you do not know React don't be disappointed (I also started learning it a few days back. It's not that bad). So, in the above picture just replace your choice of framework with React and you are good. Folks who know Angular or Vue or just plain vanilla JavaScript, can all create Electron Apps by using existing knowledge.

 

There are many people already using it and you will get a handful of resources to start development with Electron + Angular or Electron + Vue or Electron +. Net Core + Angular. Combinations are limited by your imagination. So, let your imagination run wild.

 

What Dark Side Electron Hides Under His Shining Facade?

Okay, let's admit that nothing is perfect and neither is Electron. Electron apps have a bad reputation for using too much RAM, have potential security issues, can’t (yet) match the speed of C++, and they often lack the polish and familiarity of a great native app.

 

I don’t want to come across as a complainer but here are few things which need to be improved upon.

 

First most, every Electron app bundles an entire web runtime with it, even though a suitable runtime already exists on all major operating systems. That results in bloated build sizes and excessive memory usage, because each of these apps run a separate instance of Chromium, hogging CPU and memory resources even when they’re just idling in the background.

 

Not just installations bundle Chromium. Every update also comes with Chromium, Node, and all the other Electron components unless the update is designed as delta or differential update.

 

Ending Note

The architecture specifics of Electron have helped it succeed, but what really matters are results: a developer can make a desktop application using a single JavaScript codebase, and it compiles into a binary that works on every OS. Developers want to use the technologies they know; and they want maximum reach for the products they build; and they’re smart enough to get what they want. OS-specific SDK’s are becoming a burden for desktop OS vendors. A lack of cooperation on the part of Apple, Google, and Microsoft will only hurt users.

So, say hello to your new Electron Lord!