You can use your front-end chops to build desktop app!

why node-webkit is so awesome


Last weekend, I spent one night to build an desktop application with Node.js using node-webkit module. I did not anticipated to be done in one night, it was originally planned to be a weekend(s) project — but I got done in quarter of time. If you are comfortable making website with HTML/CSS/JavaScript, even if you are novice developer like me, you should build app in node-webkit.


Desktop app with realtime data and animation !

Last week, I was presented with a challenge to build dashboard / slideshow type of application for large LCDs screen mounted on the office wall. The application need to show realtime data (like site analytics) and maybe used in other ways like video streaming for presentation. Most Importantly, I needed to make it fast. We had this giant black screen looking over our shoulder doing nothing.

Before deciding on Node, I did search and considered other programming software like Max/MSP or Cinder, but leaning those software/language seemed too much of overhead.

But how could a novice front-end developer make desktop application?

I eventually discovered node-webkit by Roger Wang. Got inspired by this talk “WebApp to DesktopApp with Node-Webkit” by Dale Schouten, and decided to give a try. The result was VERY satisfying.

Why Node for Desktop App 1.

Faster Build and Smaller Cost

My 1st job out of collage was a Project Manager at web application startup. For those who remember the days…days of building full flash website for esthetics over SEO, making cross platform app with Adobe AIR… “Rich Internet Application” was the buzz word…(at least in Japan)…yeah, those days. There, I had many opportunity to build (well, manage projects, I was not a developer yet.) content-rich application such as video slideshows, song generator, and digital signage content distribution app.

No matter how small the project is and how much we re-use previous code, project usually took at least a month or two with 2–3 developers(mix of Flex and .NET or Java) and a designer. That is a lot of cost especially if you are making just an internal tool.

Building application in Node brings it down to one front-end developer in few days. No need for another developper to make deamon or API for you. No need to create vector layout or slice images in Photoshop.

Why Node for Desktop App 2.

Familiar and Maintainable

Node-Webkit application use HTML/CSS/JavaScript to build an app.

YES, HTML, CSS, JAVASCRIPT. — very common technology many (even non-web-developer) are familiar with. This shines light on maintainability. If you need to change something in the app, don’t wait for flash developer’s tickets to be cleared, you can dig into code and edit it. Comes very handy in my case building small internal tools.

Why Node for Desktop App 3.

Good-by command line, Hello (friendly) User Interface

I am a fan of making tiny tools that help our life. Those tiny tools in my case are Email parsing tool to extract HTML, one page HTML to iframe multiple websites, data conversion from CSV to JSON etc. I try to make it as portable as possible — sometimes an app is a one HTML file with all of script and css in it, or one script file that has all the functions combined. Yet, asking non developers to open command line and run script or ask them to start SimpleHTTPServer is downer for them. Somehow, look of terminal app scares them.

In node-webkit app, just like you build a button and welcome screen in your website, you can put friendly face to your application.

Why Node for Desktop App 4.

Realtime web power to Desktop

This one is particular when you are building data product like dashboard. I am very happy that I can not only re-use my web visualizations (mainly done in D3) but also utilize their existing features and API just like you would in web application. Initially I thought dynamically making graph using realtime data and adding animation for desktop would be very challenging — because I had never done any. Having webkit as core of your app really saved my time.


I will add step by step of how to create application with node-webkit later.

Show your support

Clapping shows how much you appreciated Mariko Kosaka’s story.