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

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!