May 13 2015

NW.js and Electron.js: Web Technology on the Desktop

by Michael Bethencourt

GitHub's Atom editor, built with Electron.js

As a web developer, jumping into desktop application development is a daunting task. Native toolkits seem lackluster in terms of control and speed of development, compared with the incredible flexibility of HTML and CSS. Furthermore, web apps have evolved to replace many desktop apps, but there is still a usability gap. Native apps simply have the home team advantage in terms of desktop integration and feature capabilities. Also, if you already have a web app built, but want to improve engagement with a desktop presence, maintaining a parallel native application is prohibitively time-consuming. How about we have the best of both worlds, with native desktop apps that are built with web technology?

Chrome, meet node.js!

Enter Chromium CEF. Chromium CEF is the open source, embeddable version of the Chrome browser, and has existed for nearly as long as the browser itself. This enabled the browser to be fairly easily embedded with languages like C++ or Python. However, no complete, cross-platform solution existed, and the build and dev process still resembled native desktop app development.

Everything changed with the combination of node.js. Recently, there has been an explosion of node.js-based options, enabling web developers to create pure JavaScript cross-platform desktop apps with ease. All of these combine the ample node.js ecosystem with the power of Chrome, to create the most rapid and well-supported methodology for porting web apps to the desktop, or for building up cross-platform desktop apps from scratch using web tech.

Node.js desktop frameworks

  • AppJS - one of the oldest frameworks in this space, now deprecated in favor of deskshell, which, unfortunately, seems also to have lost momentum. Personally, I liked the approach of this one, as it routed content in a way very similar to web MVC frameworks, making porting web apps from node.js much more transparent. However, unless development picks up again, it's probably not a good choice for new projects.
  • NW.js, formerly node-webkit, is one of the most popular and mature options today. It offers the best assortment of features, great community support, and easily searchable online questions. As it's been the go-to option for this type of application, it already has an impressive list of mature applications, Intel XDK cross-platform mobile IDE, and even several video games.
  • Electron.js, originally built for GitHub's Atom editor, is brand new, but it's already really popular. Its philosophy sits somewhere between NW.js and AppJS. Like AppJS, it cleanly separates front-end from back-end (which run in separate processes and can only communicate via sockets), but it provides no built-in MVC routing framework. Electron.js probably has the most commercial momentum at the moment, despite being not quite as feature-rich or mature as NW.js, and forms the basis for Microsoft's new Visual Studio Code and Slack's desktop presence. Also, Electron.js made the bold move of supporting io.js instead of node.js, which means it supports a few more cutting-edge features of JavaScript than the others, while (at least in theory) supporting backward compatibility.

Caveats

Compared to developing truly native apps, web-tech desktop apps do have a few drawbacks.

The most notable is look-and-feel. All of the platforms discussed above have an assortment of desktop-integration features, but will still stand out compared to natively-developed apps.

Another drawback is memory and CPU usage. Web browsers embody a kitchen-sink approach to functionality. Chances are, you will only be using 50% of the huge feature list that the web supports, such as native video, audio, 3D gaming capabilities, and legacy support for dozens. With these frameworks, it's all or nothing, which means an equivalent app written with native toolkits is going to be much lighter-weight.

Finally, the distribution size itself. These frameworks usually sit at least at 30-50 Mb. Native apps can be as much as 10-1000 times smaller, since they use shared system libraries. While for larger apps this is not an issue, if you need to distribute a simple, smaller application, its better to use native toolkits.

Conclusion

Obviously, if you want to port a web app to the desktop, using one of these frameworks is the way to go. It's what Slack did, for example. Building a desktop app from the ground up is far more costly, and requires much more complicated maintenance patterns.

For building native desktop apps from scratch, the decision is a bit murkier. If small size and integrated look-and-feel is essential, and you don't mind putting in a bit more sweat to make it cross-platform, then you probably should stick with native toolkits. However, if you or your team is more comfortable with web technologies, or if the application will require a lot of the same features provided by a web browser (easily re-flowable text, powerful text and layout options such as embedded video, and so on), then I'd highly recommend choosing one of these node.js-based frameworks. For web programmers, development for the desktop has never been easier!

Want more? Head back to the Tivix blog