ready to build your app

What Can You Build with Electron Development?

There’s a good reason you keep hearing about Electron development: building apps with Electron is fast, efficient, and cost-effective. But what exactly can you build with Electron? To answer this question, we first need to take a quick dive into Electron and explain what makes it different from traditional desktop development technologies.

Meet Electron!

Developed and maintained by GitHub, 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.

On its website, Electron promises that anyone who can build a website can use it to build a desktop app 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. However, even developers who don’t specialize in front-end web development have many good reasons to embrace Electron development, including its security, large community of developers and users, and cross-platform support.

When does Electron development make sense?

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.

With Electron development, 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.

> 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.”

says Machisté N. Quintana, Software Engineer at Slack.

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, which is why it doesn’t make much sense to use Electron for simple utilities. Electron apps can also be very large compared with their native counterparts, and 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 and 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.

> Simple utility, yet built with Electron = Etcher

See when Electron development makes sense.

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

See when Electron development makes sense.

Aware of Electron’s versatility, Microsoft has used the framework to redefine code editing with Visual Studio Code, 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.

Conclusion

Electron development is suitable for all kinds of apps, which is why Slack, Etcher, Visual Studio Code, Atom, Tusk, Skype, and many other popular apps are built with this increasingly popular open-source framework allows developers to build cross-platform desktop apps with web technologies.

Resources:

  • https://www.lifewire.com/slack-tips-4137670 (image)
  • https://fossbytes.com/visual-studio-code-linux-snap/ (image)

Matt Warcholinski

Matt Warcholinski is the COO of Brainhub (a software house building awesome node.js web and mobile apps) who loves to build startups and play guitar.

Follow Me: