Electron Development: A Quick Guide

Electron Development

In this collection you'll learn

  • How exactly does Electron work?
  • How is Electron making desktop app development easy?
  • What are the most famous apps built with the framework?
  • When does Electron may not be the best choice?
  • What are the Electron alternatives?

Introduction

There’s a good reason you keep hearing about Electron development: building apps with this framework is fast, efficient, and cost-effective.

But what exactly can you build with Electron? And why to choose it for your project? To answer these questions, we first need to take a closer look at the framework and explain what makes it different from traditional desktop development technologies.

Note: The article below is the beginning of the whole handbook about Electron. If you like it, sign up for updates to receive notification when new chapters appear.

CHAPTER 1:

What is Electron?

Electron JS is an open-source framework that allows developers to build cross-platform desktop apps with JavaScript, HTML, and CSS, which are the three main web technologies today. It’s developed and maintained by GitHub.

On its website, Electron promises that anyone who can build a website can use it to build a desktop app.

Why? Because all the hard parts, such as automatic updates, native menus and notifications, crash reporting, and debugging, are taken care of by the Chromium rendering engine (the open-source part of Google’s Chrome browser) and Node.js (a JavaScript runtime built on Chrome’s V8 JavaScript engine).

Naturally, Electron strongly appeals to front-end web developers, who can use it to develop powerful cross-platform desktop applications without first having to learn a bunch of new skills.

Key take-away: Electron allows developers to build desktop apps using JavaScript. It makes all the hard parts easier.

CHAPTER 2:

Electron development – Why choose it to build a desktop app

Even developers who don’t specialize in front-end web development have many good reasons to embrace Electron, including:

  • security,
  • large community of developers and users,
  • cross-platform support.

Electron development makes the most sense when building multi-platform desktop applications that don’t need to adhere to strict memory usage requirements and emphasize UX and UI design.

Cross platform desktop apps with HTML, CSS, and JavaScript

With Electron, it’s possible to write an application only once and distribute it everywhere without any duplication of development effort.

The multi-platform nature of Electron can greatly shorten the development process and result in substantial cost-savings.

What’s more, because Electron apps are built using the three dominant web technologies – JavaScript, HTML, and CSS – developers can use a single code base for both web applications and desktop applications.

When does Electron development not make a good fit?

Because Electron apps are essentially browser windows with a Node.js server running in the background, they tend to consume a significant amount of memory. Because of that it doesn’t make much sense to use Electron for simple utilities.

Electron apps can also be very large compared with their native counterparts. The difference in size can be especially pronounced when it comes to apps that don’t pack too many features.

However, with memory and storage space becoming cheaper year after year, the reasons against using Electron to build simple utilities are gradually losing their relevance.

Etcher, for example, is a simple-to-use image-writing app capable of flashing OS images to SD cards and USB drives and verifying their functionality. Unlike most other similar utilities, Etcher has a beautiful user interface, which is something virtually all Electron apps have in common.

CHAPTER 3:

Electron app examples

Electron development done right – Slack desktop app

See when Electron development makes sense.

An excellent example of a popular app that illustrates when Electron development makes sense is Slack, a collaboration hub where teams can work together to get things done.

Slack was initially released in 2013, just a single month after Electron, and it has become one of the most popular collaboration tools in the world.

Slack simplifies collaboration by including persistent chat rooms, supporting file sharing, and integrating with a large number of third-party services, including Google Drive, Trello, Dropbox, and many others.

While it’s no secret that the cross-platform Slack desktop app is built on Electron, it might be slightly less well known that it’s a hybrid app built around our web app (slack.com). This is one of Electron’s most compelling draws – not only can you build a cross-platform desktop app from scratch with the web technologies you know and love, but you can also extend a pre-existing web app with new and powerful capabilities. – Machisté N. Quintana, Software Engineer at Slack.

Simple utility, yet built with Electron – Etcher

See when Electron development may not be a good fit.

Etcher is developed by Balena (previously Resin.io), a company that provides a complete set of tools for building, deploying, and managing fleets of connected Linux devices.

Embarrassed by the state of image-writing apps its customers were relying on, Balena decided to do something about it, which is how Etcher came to life. Etcher’s story serves as an excellent testament to how simple it is to develop an app with Electron.

When an IoT company can use Electron to develop what’s now one of the most popular image-writing apps in its spare time, there are really no limits to what professional Electron developers can achieve.

Reinventing the wheel – Visual Code Studio

Aware of Electron’s versatility, Microsoft has used the framework to redefine code editing with Visual Studio Code. It’s a lightweight code editor that runs everywhere and can be turned into a full-fledged IDE with extensions.

Since its release, the adoption of Visual Studio Code has skyrocketed among developers, which goes to show how a new technology can be applied to reinvent the wheel and improve it in the process.

CHAPTER 4:

Electron alternatives: frameworks for cross platform desktop apps

Some time ago it wasn’t possible to build desktop apps with JavaScript. Now, JS developers can choose among a few frameworks.

NW.js gives developers freedom to choose frameworks and tools, and allows calling Node.js modules directly from the DOM.

Meteor is fast, but it doesn’t build apps on its own – it needs to be used with Cordova or similar tools.

Proton Native uses the same syntax as React Native (we may say that it does the same for desktop what React Native does for mobile). Proton Native works with Redux and is compatible with Node.js.

Conclusion

Electron development is suitable for all kinds of apps. That is why Slack, Etcher, Visual Studio Code, Atom, Tusk, Skype, and many other popular apps are built with this open-source framework.

If you want to learn more about Electron’s architecture and test it, read the next chapter.