Building a Cross-platform Desktop App with NW.js

NW.js is a framework for creating native applications using web technologies like HTML, JavaScript and CSS. In the simplest case, you’re developing a web application using your normal workflow. At the end of the process, you run a generator that compiles everything to a native application that then just displays your web application like a browser does. These applications are called “hybrid apps”.

Hybrid apps aren’t just great because they’re written in languages you’re already familiar with (HTML, JavaScript and CSS), but also because they offer essential advantages over normal web apps:

They also offer custom APIs that bring the following advantages:

Sounds great? Then let’s get started. In this article, we’ll become familiar with NW.js in practice and learn how to create a hybrid application. An example application that was built using the instructions from this article can be found on GitHub.

Advantages of NW.js in Comparison to Electron

First, there’s one thing to mention: NW.js isn’t the only framework for hybrid apps. There’s another competitor called Electron. It started in 2013, two years after NW.js, but because it’s from GitHub it quickly became well known. Now you might be interested in the differences between them. Here are the advantages of NW.js compared to Electron:

However, Electron also has some advantages worth mentioning:

There’s also a fundamental difference. NW.js applications specify their entry point in the form of an HTML file. This HTML file will be opened in the GUI directly.

Electron applications, on the other hand, specify a JavaScript file as their entry point. This JavaScript file is opened in a separate main process, and can then open an HTML file in the GUI. This means that you could theoretically run Electron apps without a GUI. Also, closing the GUI won’t close the main process; you’ll need to terminate it manually by calling an API method.

While Electron opens the door for desktop applications written with JavaScript and without a GUI, NW.js applications are probably easier to set up, in case you just want to display an HTML-based application.

Note: If you really prefer the advantages of Electron, check out SitePoint’s recent article on creating desktop apps with Electron.