What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

NW.js Essentials

Chapter 1. Meet NW.js

Until a while ago, developing a desktop application that was compatible with the most common operating systems required an enormous amount of expertise, different programming languages, and logics for each platform.

Yet, for a while now, the evolution of web technologies has brought to our browsers many web applications that have nothing to envy from their desktop alternative. Just think of Google apps such as Gmail and Calendar, which, for many, have definitely replaced the need for a local mail client. All of this has been made possible thanks to the amazing potential of the latest implementations of the Browser Web API combined with the incredible flexibility and speed of the latest server technologies.

Although we live in a world increasingly interconnected and dependent on the Internet, there is still the need for developing desktop applications for a number of reasons:

To overcome the lack of vertical applications based on web technologies
To implement software solutions where data security is essential and cannot be compromised by exposing data on the Internet
To make up for any lack of connectivity, even temporary
Simply because operating systems are still locally installed

Once it's established that we cannot completely get rid of desktop applications and that their implementation on different platforms requires an often prohibitive learning curve, it comes naturally to ask: why not make desktop applications out of the very same technologies used in web development?

The answer, or at least one of the answers, is NW.js!

NW.js doesn't need any introduction. With more than 20,000 stars on GitHub (in the top four hottest C++ projects of the repository-hosting service) NW.js is definitely one of the most promising projects to create desktop applications with web technologies. Paraphrasing the description on GitHub, NW.js is a web app runtime that allows the browser DOM to access Node.js modules directly.

Node.js is responsible for hardware and operating system interaction, while the browser serves the graphic interface and implements all the functionalities typical of web applications. Clearly, the use of the two technologies may overlap; for example, if we were to make an asynchronous call to the API of an online service, we could use either a Node.js HTTP client or an XMLHttpRequest Ajax call inside the browser.

Without going into technical details, in order to create desktop applications with NW.js, all you need is a decent understanding of Node.js and some expertise in developing HTML5 web apps.

In this first chapter, we are going to dissect the topic dwelling on these points:

A brief technical digression on how NW.js works
An analysis of the pros and cons in order to determine use scenarios
Downloading and installing NW.js
Development tools
Making your first, simple "Hello World" application

Note

Important notes about NW.js (also known as Node-Webkit) and io.js

Before January 2015, since the project was born, NW.js was known as Node-Webkit. Moreover, with Node.js getting a little sluggish, much to the concern of V8 JavaScript engine updates, from version 0.12.0, NW.js is not based on Node.js but on io.js, an npm-compatible platform originally based on Node.js. For the sake of simplicity in the book, we will keep referring to Node.js even when talking about io.js as long as this does not affect a proper comprehension of the subject.

NW.js under the hood

As we stated in the introduction, NW.js, made by Roger Wang of Intel's Open Source Technology Center (Shanghai office) in 2011, is a web app runtime based on Node.js and the Chromium open source browser project. To understand how it works, we must first analyze its two components:

Node.js is an efficient JavaScript runtime written in C++ and based on theV8 JavaScript engine developed by Google. Residing in the operating system's application layer, Node.js can access hardware, filesystems, and networking functionalities, enabling its use in a wide range of fields, from the implementation of web servers to the creation of control software for robots. (As we stated in the introduction, NW.js has replaced Node.js with io.js from version 0.12.0.)
WebKit is a layout engine that allows the rendering of web pages starting from the DOM, a tree of objects representing the web page. NW.js is actually not directly based on WebKit but on Blink, a fork of WebKit developed specifically for the Chromium open source browser project and based on the V8 JavaScript engine as is the case with Node.js.

Since the browser, for security reasons, cannot access the application layer and since Node.js lacks a graphical interface, Roger Wang had the insight of combining the two technologies by creating NW.js.

The following is a simple diagram that shows how Node.js has been combined with WebKit in order to give NW.js applications access to both the GUI and the operating system:

In order to integrate the two systems, which, despite speaking the same language, are very different, a couple of tricks have been adopted. In the first place, since they are both event-driven (following a logic of action/reaction rather than a stream of operations), the event processing has been unified. Secondly, the Node context was injected into WebKit so that it can access it.

The amazing thing about it is that you'll be able to program all of your applications' logic in JavaScript with no concerns about where Node.js ends and WebKit begins.

Today, NW.js has reached version 0.12.0 and, although still young, is one of the most promising web app runtimes to develop desktop applications adopting web technologies.

Features and drawbacks of NW.js

Let's check some of the features that characterize NW.js:

NW.js allows us to realize modern desktop applications using HTML5, CSS3, JS, WebGL, and the full potential of Node.js, including the use of third-party modules
The Native UI API allows you to implement native lookalike applications with the support of menus, clipboards, tray icons, and file binding
Since Node.js and WebKit run within the same thread, NW.js has excellent performance
With NW.js, it is incredibly easy to port existing web applications to desktop applications
Thanks to the CLI and the presence of third-party tools, it's really easy to debug, package, and deploy applications on Microsoft Windows, Mac OS, and Linux

However, all that glitters is not gold. There are some cons to consider when developing an application with NW.js:

Size of the application: Since a copy of NW.js (70-90 MB) must be distributed along with each application, the size of the application makes it quite expensive compared to native applications. Anyway, if you're concerned about download times, compressing NW.js for distribution will save you about half the size.
Difficulties in distributing your application through Mac App Store: In this book, it will not be discussed (just do a search on Google), but even if the procedure is rather complex, you can distribute your NW.js application through Mac App Store. At the moment, it is not possible to deploy a NW.js application on Windows Store due to the different architecture of .appx applications.
Missing support for iOS or Android: Unlike other SDKs and libraries, at the moment, it is not possible to deploy an NW.js application on iOS or Android, and it does not seem to be possible to do so in the near future. However, the portability of the HTML, JavaScript, and CSS code that can be distributed on other platforms with tools such as PhoneGap or TideSDK should be considered. Unfortunately, this is not true for all of the features implemented using Node.js.
Stability: Finally, the platform is still quite young and not bug-free.

NW.js – usage scenarios

The flexibility and good performance of NW.js allows its use in countless scenarios, but, for convenience, I'm going to report only a few notable ones:

Development tools
Implementation of the GUI around existing CLI tools
Multimedia applications
Web services clients
Video games

The choice of development platform for a new project clearly depends only on the developer; for the overall aim of confronting facts, it may be useful to consider some specific scenarios where the use of NW.js might not be recommended:

When developing for a specific platform, graphic coherence is essential, and, perhaps, it is necessary to distribute the application through a store
If the performance factor limits the use of the preceding technologies
If the application does a massive use of the features provided by the application layer via Node.js and it has to be distributed to mobile devices

Popular NW.js applications

After summarizing the pros and cons of NW.js, let's not forget the real strength of the platform—the many applications built on top of NW.js that have already been distributed. We list a few that are worth noting:

Wunderlist for Windows 7: This is a to-do list / schedule management app used by millions
Cellist: This is an HTTP debugging proxy available on Mac App Store
Game Dev Tycoon: This is one of the first NW.js games that puts you in the shoes of a 1980s game developer
Intel^® XDK: This is an HTML5 cross-platform solution that enables developers to write web and hybrid apps

Downloading and installing NW.js

Installing NW.js is pretty simple, but there are many ways to do it. One of the easiest ways is probably to run npm install nw from your terminal, but for the educational purposes of the book, we're going to manually download and install it in order to properly understand how it works.

You can find all the download links on the project website at http://nwjs.io/ or in the Downloads section on the GitHub project page at https://github.com/nwjs/nw.js/; from here, download the package that fits your operating system.

Tip

For example, as I'm writing this book, Node-Webkit is at version 0.12.0, and my operating system is Mac OS X Yosemite 10.10 running on a 64-bit MacBook Pro; so, I'm going to download the nwjs-v0.12.0-osx-x64.zip file.

Packages for Mac and Windows are zipped, while those for Linux are in the tar.gz format. Decompress the files and proceed, depending on your operating system, as follows.

Installing NW.js on Mac OS X

Inside the archive, we're going to find three files:

Credits.html: This contains credits and licenses of all the dependencies of NW.js
nwjs.app: This is the actual NW.js executable
nwjc: This is a CLI tool used to compile your source code in order to protect it

Tip

Before v0.12.0, the filename of nwjc was nwsnapshot.

Currently, the only file that interests us is nwjs.app (the extension might not be displayed depending on the OS configuration). All we have to do is copy this file in the /Applications folder—your main applications folder.

Tip

If you'd rather install NW.js using Homebrew Cask, you can simply enter the following command in your terminal:

$ brew cask install nw

If you are using Homebrew Cask to install NW.js, keep in mind that the Cask repository might not be updated and that the nwjs.app file will be copied in ~/Applications, while a symlink will be created in the /Applications folder.

Installing NW.js on Microsoft Windows

Inside the Microsoft Windows NW.js package, we will find the following files:

credits.html: This contains the credits and licenses of all NW.js dependencies
d3dcompiler_47.dll: This is the Direct3D library
ffmpegsumo.dll: This is a media library to be included in order to use the <video> and <audio> tags
icudtl.dat: This is an important network library
libEGL.dll: This is the WebGL and GPU acceleration
libGLESv2.dll: This is the WebGL and GPU acceleration
locales/: This is the languages folder
nw.exe: This is the actual NW.js executable
nw.pak: This is an important JS library
pdf.dll: This library is used by the web engine for printing
nwjc.exe: This is a CLI tool to compile your source code in order to protect it

Some of the files in the folder will be omitted during the final distribution of our application, but for development purposes, we are simply going to copy the whole content of the folder to C:/Tools/nwjs.

Installing NW.js on Linux

On Linux, the procedure can be more complex depending on the distribution you use. First, copy the downloaded archive into your home folder if you have not already done so, and then open the terminal and type the following command to unpack the archive (change the version accordingly to the one downloaded):

$ gzip -dc nwjs-v0.12.0-linux-x64.tar.gz | tar xf -

Now, rename the newly created folder in nwjs with the following command:

$ mv ~/nwjs-v0.12.0-linux-x64 ~/nwjs

Inside the nwjs folder, we will find the following files:

credits.html: This contains the credits and licenses of all the dependencies of NW.js
icudtl.dat This is an important network library
libffmpegsumo.so: This is a media library to be included in order to use the <video> and <audio> tags
locales/: This is a languages folder
nw: This is the actual NW.js executable
nw.pak: This is an important JS library
nwjc: This is a CLI tool to compile your source code in order to protect it

Open the folder inside the terminal and try to run NW.js by typing the following:

$ cd nwjs
$ ./nw

If you get the following error, you are probably using a version of Ubuntu later than 13.04, Fedora later than 18, or another Linux distribution that uses libudev.so.1 instead of libudev.so.0: otherwise, you're good to go to the next step:

error while loading shared libraries: libudev.so.0: cannot open shared object file: No such file or directory

Until NW.js is updated to support libudev.so.1, there are several solutions to solve the problem. For me, the easiest solution is to type the following terminal command inside the directory containing nw:

$ sed -i 's/udev\.so\.0/udev.so.1/g' nw

This will replace the string related to libudev, within the application code, with the new version. The process may take a while, so wait for the terminal to return the cursor before attempting to enter the following:

$ ./nw

Eventually, the NW.js window should open properly.

Writing and running your first "Hello World" app

Finally, we are ready to write our first simple application. We're going to revisit the usual "Hello World" application by making use of a Node.js module for markdown parsing.

	"Markdown is a plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name."
	--Wikipedia

Let's create a Hello World folder and open it in Sublime Text 2 or in your favorite IDE. Now open a new package.json file and type in the following JSON code:

{
  "name": "nw-hello-world",
  "main": "index.html",
  "dependencies": {
    "markdown": "0.5.x"
  }
}

Note

The package.json manifest file, as you'll see in Chapter 6, Packaging Your Application for Distribution, is essential for distribution as it determines many of the window properties and primary information about the application. Moreover, during the development process, you'll be able to declare all of the dependencies.

In this specific case, we are going to assign the application name, the main file, and obviously our dependency, the markdown module, written by Dominic Baggott.

Tip

If you so wish, you can create the package.json manifest file using the npm init command from the terminal as you're probably used to already when creating npm packages.

Once you've saved the package.json file, create an index.html file that will be used as the main application file and type in the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <script>
    <!--Here goes your code-->
    </script>
  </body>
</html>

As you can see, it's a very common HTML5 boilerplate. Inside the script tag, let's add the following:

var markdown = require("markdown").markdown,
    div = document.createElement("div"),
    content = "#Hello World!\n" +
    "We are using **io.js** " + 
    "version *" + process.version + "*";

div.innerHTML = markdown.toHTML(content);
document.body.appendChild(div);

What we do here is require the markdown module and then parse the content variable through it. To keep it as simple as possible, I've been using Vanilla JavaScript to output the parsed HTML to the screen. In the highlighted line of code, you may have noticed that we are using process.version, a property that is a part of the Node.js context.

Note

If you try to open index.html in a browser, you'd get the Reference Error: require is not defined error as Node.js has not been injected into the WebKit process.

Once you have saved the index.html file, all that is left is to install the dependencies by running the following command from the terminal inside the project folder:

$ npm install

And we are ready to run our first application!

Running NW.js applications on Sublime Text 2

If you opted for Sublime Text 2 and followed the procedure in the development tools section, simply navigate to Project | Save Project As and save the hello-world.sublime-project file inside the project folder.

Now, in the top menu, navigate to Tools | Build System and select nw-js. Finally, press Ctrl + B (or Cmd + B on Mac) to run the program.

If you have opted for a different IDE, just follow the upcoming steps depending on your operating system.

Running NW.js applications on Microsoft Windows

Open the command prompt and type:

C:\> c:\Tools\nwjs\nw.exe c:\path\to\the\project\

Tip

On Microsoft Windows, you can also drag the folder containing package.json to nw.exe in order to open it.

Running NW.js applications on Mac OS

Open the terminal and type:

$ /Applications/nwjs.app/Contents/MacOS/nwjs /path/to/the/project/

Or, if running NW.js applications inside the directory containing package.json, type:

$ /Applications/nwjs.app/Contents/MacOS/nwjs .

Note

As you can see in Mac OS X, the NW.js kit's executable binary is in a hidden directory within the .app file.

Running NW.js applications on Linux

Open the terminal and type:

$ ~/nwjs/nw /path/to/the/project/

Or, if running NW.js applications inside the directory containing package.json, type:

$ ~/nwjs/nw .

Note

Running the application, you may notice that a few errors are thrown depending on your platform. As I stated in the pros and cons section, NW.js is still young, so that's quite normal, and probably we're talking about minor issues. However, you can search in the NW.js GitHub issues page in order to check whether they've already been reported; otherwise, open a new issue—your help would be much appreciated.

Now, regardless of the operating system, a window similar to the following one should appear:

As illustrated, the process.version object variable has been printed properly as Node.js has correctly been injected and can be accessed from the DOM.

Perhaps, the result is a little different than what you expected since the top navigation bar of Chromium is visible. Do not worry! You can get rid of the navigation bar at any time simply by adding the window.toolbar = false parameter to the manifest file, but for now, it's important that the bar is visible in order to debug the application.

What you will learn

Develop a fully working NW.js desktop application from scratch

Take advantage of thirdparty tools to simplify the packaging process of NW.js applications

Create an astonishing user experience using Native UI APIs

Debug NW.js applications with Chromium DevTools, Crash dump log files, and thirdparty debugging tools

Package and deploy NW.js applications on Microsoft Windows, Mac OS X, and Linux

Take advantage of Browser Web APIs, expanding on data persistence solutions and security

Avoid common programming mistakes by integrating prior knowledge of Node.js with NW.js development

What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Frequently bought together

₹2457.99

Object-Oriented JavaScript - Second Edition

₹4096.99

₹4542.99

Total ₹ 11,097.97

Pascal Jul 13, 2015

Really enjoyed the book. If your are looking for a good crash course on NW.js this is your book. Cover all main aspects of working with NW.js and the pitfalls to avoid. Cover working with it on 3 platforms (Linux, OSX, Windows) and the little gotchas on each.

Amazon Verified review

Nikolay Gechev Oct 27, 2015

The book is great for web developers. Many things nesesery to build desktop application are presented. Enaph to start project.

Julio Cezar Gonçalves de Freitas Aug 14, 2015

Great book. Cover how to create graphical application in linux, windows and macos!

PDG Dec 13, 2015

The book explains very well and in a progressive way how to develop desktop applications using web technologies and the NW.js framework. It's easy to read and to follow.

Josue Martinez Jul 10, 2015

This is a book that is helping me to understand how to build desktop application using Node.js , is awesome what you can build and how you can interact with the local system.I was looking for another option to build desktop applications, and i didn't what to use Java swing or .Net. Also this help me to understand how i can re-use some of the modules I already have for other Node.js application I already develop, so I'm happy because i didn't have to wite everything again, Nice and well explained book ,Thanks

NW.js Essentials: Build native desktop applications for Windows, Mac OS, or Linux using the latest web technologies

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs