August 20, 2014

Node-webkit & Developing HTML5 Desktop Apps

Using markup & stylesheets is important in any application development. For example, KDE uses KHTML for its markup, a fork of webkit. Most interface libraries are written in C/C++ and expose an API so that every developer who chooses to use it doesn’t go about re-inventing the wheel, like GTK.

Most operating systems have their own version of an application development kit. Useful as they might be, you still end up writing code and supporting multiple apps throughout the development process. Regardless, the important thing to remember is that the basics are the same as discussed in the case of GTK.

Enter HTML5 Desktop Apps

HTML5 Desktop apps are by no means a new concept. Odds are you’ve probably used one of these already – Swiggle, Light Table, Atom.

As a matter of fact, Windows features entire tutorials on how to publish a JavaScript app. This, however, is only one part of the puzzle. The next and most important piece is to look for a tool that will let you deploy a single app in multiple environments.

Luckily, there are a few of these tools that are featured prominently on the market that allow you to create write-once, run anywhere HTML5 desktop applications. Here is a quick rundown on some of the most noteworthy available frameworks:

    • TideSDK – You have probably heard of the Titanium SDK for mobile applications, but interestingly enough there was a Titanium for desktop as well. Unfortunately, the team stopped working on it and released it to the open source community. TideKit is coming soon according to the TideSDK website and is an option to keep an eye on.
    • Chromium Embedded Framework (CEF) – CEF is a simple open source framework for embedding a Google Chrome based web browser into third party applications. It is a convenient way to implement an HTML5-based GUI in a desktop application, or to provide browser capabilities to an application.
    • Adobe came out with Brackets-shell, Brackets is a CEF3 based application shell that is most well-known for its use in the development of desktop applications. It also happens to be what Brackets IDE is written in.
    • QT – QT is essentially a cross-platform application and UI framework built by Nokia for developers using C++ or QML, a CSS & JavaScript like language. QT is easily the oldest out of the bunch.
    • While all of the above are viable options, Node-webkit would be the sensible choice to go with, given that the project itself is just a wrapper with message looping. The main projects are Chromium and NodeJS, both of which are heavily tested and have a huge community.

You could just write a plain HTML5/CSS/JS app and ship that with the run time and add NodeJS on an as-needed-basis. Assuming your app is written with a modular architecture in mind, a desktop app could reuse a lot of components from your web app.

It should be noted that as an added perk, because you control the runtime environment of the application you can do a lot more with less. To add additional value, use the advanced HTML5 API as well as WebGL if need be, and don’t be afraid to use Flexbox for better regions and layouts.

Do look out for a Node-webkit desktop application from 3Pillar Labs all-nighter next!