A few years ago, I couldn’t imagine a solid desktop application written with Javascript, HTML and CSS. Today, I know that it is not only possible, but probably the most convenient and efficient way to do so - via Electron.
Electron’s history started a few years ago (sometime around 2013) as a cross-platform application shell created for Atom (a text editor with extensibility like in Vim and a user-friendly UI like in Sublime). Now it is “a framework for creating desktop applications using html, javascript and css” (c). It gives you the ability to implement not only a desktop application itself, but installers, automatic application updates and access to native features exposed by Javascript API like menus, icons, window appearance, and etc.
Not so long ago, the list of applications written with Electron had around 40 apps in it. Zeplin, Postman, WordPress, GitBook and many other applications we became familiar with are available as desktop applications.
Now the list has almost 400 applications.
I have several desktop applications written with Electron in continuous use - Hyper, Skype For Linux, Postman, Compass, Zeplin, Slack.
I’ve been a part of a team developing a commercial application using Electron for a year and a half. Now it’s time to share some pros and cons about it.
You think you know how to create desktop apps? Definitely!
One of the main benefits of writing desktop applications with Electron is that there’s no necessity to learn a new technology or a new language. This is a “win-win” situation for both businesses and developers.
From a business perspective, the same hired team working on a web-application can easily implement a desktop application. Several things from the web-application can be reused in the desktop app:
- Business logic (services, helpers)
- Design
- General application structure
This, of course, saves time and money.
From a developer’s point of view, it is only necessary to learn a few things on how Electron works and what API it exposes. As a result, a desktop application can be set up in a few days. Without specific knowledge, our team implemented a POC version of a desktop application within a week for MacOS, Windows and Linux. This proves how simple the process of creating desktop apps is.
Do you love Chrome? Chrome loves you too
Electron uses the Chromium engine for rendering the UI. This means you can get several benefits from this:
Bleeding edge features from ES2016/17. As Electron uses the Chromium engine - you’ll have most of the recent features available in Chrome. E.g. you can use generators, promises, classes and other features from EcmaScript specification.
Developer tools. You don’t have to think about external tools to debug your code. You can perform actions in a habitual way. It is easy to measure performance, conduct profiling or detect memory leaks with the beloved Chrome dev tools. Quick design changes can be done with an embedded CSS editor.
Hot / Live reload. One huge benefit is the possibility to use live or even hot reloading to see changes instantly. Hot reload allows you to see the changes without reloading the page - e.g. font-size or color changes. LiveReload automatically reloads your page whenever you save changes in the editor. This seems minor but makes a big difference in the development experience.
Storage access. With Chromium you get free access to any kind of storage available in browser - LocalStorage, SessionStorage, IndexedDB to persist application state.
Feel lonely? Here’s a community for you
Another benefit of using Electron is the presence of a rich community. Ready to use packages allow you to focus on development rather than reinventing the wheel. Due to Electron’s growth in popularity, dozens of packages appear on npm to make development easier. Here’s the list of packages available for use for building, signing, testing, upgrading the application and many more other actions.
Boilerplates and custom components are also present in that list.
Electron helps you not sweat the routine stuff
Electron saves a developer’s time by providing a convenient API for OS integration so they don’t have to think about implementation details - you can just use what is there. Among commonly used components and APIs, there are:
- Main menu
- Context menu
- Tray button (Linux, MacOS)
- Shortcuts bindings
Another awesome feature is the possibility to manage a window’s lifecycle easily (expand/collapse window, maximize/minimize, make it invisible or hide controls only).
One of the main challenges after application development is packaging, creating installers and uninstallers, etc. Mostly you need this on Windows systems. Here again you don’t have to think much. Squirrel library is a set of tools to manage creating installers and auto updates. There are plenty of wrappers for that purpose from reliable sources.
This means you don’t have to write something yourself to do some routine stuff.
Now it’s time to talk about things that might make you unhappy when you encounter them for the first time.
Packaging application for various platforms
An awesome fact about Electron is that with a few commands from the terminal you can package your application and use it on any platform.
However, things get worse when you have to use a specific library or a package written in C++ (e.g. PhantomJS). Such dependencies should be compiled on each system separately. This may require the dev team to have several PCs with different operating systems to provide a customer with an application package for each platform.
On our project, where each member had a separate machine with a specific OS for building the app, we were able to test the application on different platforms while developing regular features.
This means having different machines for development actually is a decent tradeoff compared to what you should do if you want to develop an application for each major desktop platform.
OS integration peculiarities
When developing the application, our team encountered one small issue. It was necessary to set an icon for the app. This icon should appear in the tray, the list of running processes on Windows and, of course, near the name of the executable file. Easy. In theory, you can do that by setting a particular property in the configuration file and you’ll be almost satisfied with the result.
You might be surprised if you don’t get your expected result. You won’t see the icon in the task manager because there’s no obvious way to do that with the Electron API.
However, the Electron community found a solution for such unpleasantness. There’s a tool named Resource Hacker which allows you to add metadata to your package or executable file and change the icon as well.
Custom Design
As I mentioned previously, some components are already present out of the box, like main or context menus. You don’t have to think about cross platform design to make those parts of the app look and feel native. But that’s as much as you are offered. If you want something else to look native - you have to implement that manually.
Again, the benefit of the web ecosystem helps you cope with this issue. You can use a Photon library that provides native MacOS design to your application or a React Desktop package that has some components designed specifically to resemble Window 10 applications.
Actually, not every design can be implemented with the suggested tools and there’s much to improve / implement in Electron, but who cares when you can design a DESKTOP application with CSS?
Conclusion
To recap all these ideas, I can say that Electron is a tool worth looking into. Nowadays, it is a mature technology which has shown itself worthy in a production environment. The growing community solves tons of issues allowing you to focus on the development and the business logic of applications.
I think, it is the best way to write desktop applications at the moment. Just try it, and I am sure you will be happy with results.
