writings from zac anger, who is not all that angry

getting up and running with nw.js really super quickly

February 14, 2016 — Zac Anger

There are basically two main ways to build a desktop app in JS: Electron (formerly called 'Atom-Shell') and NW.js (formerly called 'Node-Webkit'). Electron's really swell, probably offers more options overall, and has a cleaner way of keeping Node and client-side code separate. NW.js is a heckuva lot easier, overall, though.

This is what I've been using to build and run Pharaoh:

There's also a nifty sort of version manager for NW.js here: , which worked a little more smoothly out of the box, but gave me issues when trying to get Node integration to work.

To get up and running with NW.js using nw-builder, you basically just need to put the relevant information in your package.json. The relevant info on that is all here: but mostly it's just something like

"window": {
  "height": 800,
  "width": 1200,
  "title": "my app"

et cetera. The main field (which usually has, like, server/index.js or whatever in it), needs to be what NW.js is pointed to. That can be an HTML file ("main": "./client/public/index.html" or whatever) or a URL (if you're serving the app, especially locally--this is how Atom, Brackets, LightTable, etc. do things, except using Electron).

That's basically it, I think. There are a lot of great Yeoman generators and stuff to scaffold out NW.js apps, but they're mostly overkill.

Using nw-builder makes things pretty simple. npm i -g nw-builder, then just run nwbuild -h to see the options. (I use nwbuild -r . in the project root/wherever the relevant package.json is, to run the app).

Their docs are really good, and there's a crapload of options and neat stuff you can do:

tags: nwjs, desktop, node, electron, app

so, tweet it?  

Electron and NW.js

January 15, 2016 — Zac Anger

Electron (formerly known as Atom Shell) and NW.js (formerly known as Node Webkit) are similar projects that bring Javascript to the desktop. They're both based on browser runtimes. Electron is sponsored by Github, and uses libchromiumcontent and Webkit 537 (as of Autumn 2015). NW.js is sponsored by Intel and uses Chromium and Blink/Webkit 537. They both use the V8 JS engine (from Chrome), are fully open source (MIT Licensed), can access a variety of open and licensed codecs, work on Unix-like systems (and, with a little extra work, on Windows), and can use Flash (in Electron's case, through the Pepper plugin). The biggest difference I've had in working with them is that Electron, being currently more popular (likely because of the Github support, and the popularity of the Atom editor, which is built on Electron) is usually closer to the current version of Chromium, and NW.js is usually a few versions behind. Electron seems to have a lot more community activity around it right now, too, so there are a lot of useful NPM packages like Electron-Prebuilt (and a lite version) and Electron-Packager (and an interactive version!). Electron also needs a Javascript entry point, which looks something like this:

var app           = require('app')  
  , BrowserWindow = require('browser-window')  

var mainWindow = null  

app.on('window-all-closed', function(){  
  if(process.platform != 'darwin'){  
app.on('ready', function(){  
  mainWindow = new BrowserWindow({  
    width                : 1200  
  , height               : 800  
  , 'accept-first-mouse' : true  
  , 'title-bar-style'    : 'hidden'  
  , 'node-integration'   : false  
  mainWindow.on('closed', function(){  
    mainWindow = null  

That 'node-integration' line is really important if you want to use certain client-side libraries like Angular or jQuery that use the word 'module;' your stuff will just completely break without it.

NW.js, on the other hand, can just be pointed at your index.html, and that's enough to get started. That's really convenient, but for my own uses I've found that Electron has a lot more options. Its binaries are significantly larger, but there are evidently ways to cut them down. Don't count on being able to build an Electron app in less than a hundred megs, though.

If you're doing something small, like a text editor or some other little widgety kind of app, you'd probably still be better off with Qt or GTK--you can write a full text editor in GTK-Webkit with Python in less than 16kb, and that's if need a full rich-text interface with buttons and such. But for larger apps, and especially for apps you've already written for the browser, NW.js and Electron are both really great options. If you're going to be relying on a lot of the Node environment, Electron's got a better interface to Node because of its separated rendering and browser engines, but you do have to keep in mind that you'll be limited as to what client-side libraries you can use.

tags: nwjs, electron, desktop, js, javascript, apps, node

so, tweet it?  

zac anger?