Node-Webkit Development

I’m in the process of porting RiddleMeThis from Realbasic (er Xojo) to Node-Webkit (henceforth nw). The latest version of nw allows full menu customization, which means you can produce pretty decently behaved applications with it, and they have the advantage of launching almost instantly and being able to run the same codebase everywhere (including online and, using something like PhoneGap, on mobile). It has the potential to be cross-platform nirvana.

Now, there are IDEs for nw, but I’m not a big fan of IDEs in general, and I doubt that I’m going to be converted to them any time soon. In the meantime, I’ve been able to knock together applications using handwritten everything pretty damn fast (as fast as with Realbasic, for example, albeit with many of the usual UI issues of web applications).

Here’s my magic sauce — a single shell script that I simply put in a project directory and double-click to perform a build:

DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
echo "$DIR"
cd "$DIR"
pwd
zip app.nw *.html package.json *.png *.js *.css *.map
mv app.nw ../node-webkit.app/Contents/Resources/
cp nw.icns ../node-webkit.app/Contents/Resources/
cp info.plist ../node-webkit.app/Contents/
open ../node-webkit.app

What this shell script does is set the working directory to the project directory, zip together the source files and name the archive app.nw, and then move that, the icon, and the (modified) info.plist into the right place (assuming the node-webkit app is in the parent directory), and launch it. This basically takes maybe 2s before my app is running in front of me.

info.plist is simply copied from the basic nw app, and modified so that the application name and version are what I want to appear in the about box and menubar.

This is how I make sure the standard menus are present (on Mac builds):

var gui = require('nw.gui'),
    menubar = new gui.Menu({ type: 'menubar' });
if(process.platform === 'darwin'){
    menubar.createMacBuiltin(appName);
}
gui.Window.get().menu = menubar;

And finally, to enable easy debugging:

if(dev){
    var debugItem = new gui.MenuItem({ label: 'Dev' }),
        debugMenu = new gui.Menu(),
        menuItem;
    debugItem.submenu = debugMenu;
    menubar.append(debugItem);
    menuItem = new gui.MenuItem({ label: "Open Debugger" });
    debugMenu.append(menuItem);
    menuItem.click = function(){
        gui.Window.get().showDevTools();
    }
}

So with a few code snippets you get a Mac menubar (where appropriate), a Dev menu (if dev is truthy) and a single double-click to package and build your application in the blink of an eye. You can build your application with whatever Javascript / HTML / CSS combination suits you best.

Obviously, you don’t get a real “native” UI (but the next best thing is a web UI, since people expect to deal with web applications on every platform), and this isn’t going to be a great way to deliver performant applications that do heavy lifting (e.g. image processing), but it’s very easy to orchestrate command-line tools, and of course the chrome engine offers a ridiculous amount of functionality out of the box.

I should mention that Xojo is actually quite capable of producing decent Cocoa applications these days. (It sure took a while.) But its performance is nowhere near nw in practical terms. For example, C3D Buddy is able to load thousands of PNGs in the blink of an eye; the equivalent Xojo application is torpid. Now if I were doing heavy lifting with Javascript, perhaps it would tilt Xojo’s way, but it’s hard to think of just how heavy the lifting would need to get.

Dropbox vs. Box vs. HubiC

Edit: Brain Fart — I seem to have omitted about a paragraph of pertinent information.

I’ll assume you all know what Dropbox is. If you don’t, go get Dropbox now. It’s free and it’s awesome.

The only downside of Dropbox is that if you want more than the 2GB of storage you get for free, it gets more expensive, and the upper limit on how much you can store is (for practical purposes) quite low. Personally, I haven’t found either of these an issue — but thanks to my link on opensourcemac.com, I have a pretty huge “free” account. But it would be awesome to have something like Dropbox that was so big I could just stop managing what I keep on it altogether (of course, this is the problem with stuff that’s free — you waste it).

Box.com has been around about as long as Dropbox (heck, it has an even better domain name, right?) but has been targeted at the enterprise.

hubiC.com (their capitalization) I just found out about via Hacker News. It offers more free storage than Dropbox, but not quite as much as Box, and vastly cheaper paid plans, including about $140/year for 10TB. (I’m not sure how you can actually get 10TB into it, short of using a ZFS or Drobo style multi-disk volume.)

2GB vs 50GB vs 25GB

This is how much storage you get for free.

$100/year for 100GB vs. $10/month for 100GB vs. $13.60/year for 100GB (or $136/month for 10TB)

Edit: I’ve corrected the costs for HubiC.

This is how much it costs for more storage. Box gives you — by far — the most free storage but gets more expensive than Dropbox (while offering various enterprisey features). HubiC is insanely cheaper than both of them. By way of comparison, iCloud costs $20/year for 20GB, so in terms of dollars per unit storage, only HubiC is a better deal. In terms of useful features out of the box, Dropbox support is built into far more programs while iCloud offers useful functionality (notably over-the-air backups of devices and integration with Apple products) to Mac and iOS users that no other platform can (currently) match.

For Android users, the iCloud equivalent is Google Drive, which gives you 15GB free, and costs $60/year for 100GB, making it a bit cheaper (and less useful) than Dropbox.

Mac OS X Integration

All three programs appear as folders in your home directory by default, and stick shortcuts to themselves in Finder’s sidebar. Having installed HubiC and then Box after installing Dropbox, Box was very flaky when first installed. Its installer provided no feedback, and the first few times I tried to launch the application nothing seemed to happen, followed by weird broken delayed launches. Once I’d patiently killed a bunch of Box.app instances and started over it worked well.

Box and Dropbox have similar levels of Finder integration — they indicate the state of files and provide context menu items for sharing links. HubiC appears not to do anything like this, unfortunately.

All three applications provide status menus — those icons that appear in the menubar to the left of the Spotlight magnifying glass. I should note that HubiC’s icon looks like a shapeless blue blob — a blue cloud? — which is an anti-feature. The status menus of all three seem to be perfectly fine and offer decent functionality. Oddly enough, Box and Dropbox no longer keep you apprised of your usage level whereas HubiC does.

Box has one glaring defect — it won’t sync Mac OS X “bundles” (i.e. directories masquerading as files). I have no idea why — they’re just directories. It tells you to zip them up first (gee, how about doing it yourself?)

All three services offer support for all the usual platforms — although I can’t comment on how good any of them are (except the Dropbox client for iOS is decent, and all three work decently in a web browser, although HubiC’s in-browser account management is awful). I cannot yet comment on the security of Box or HubiC. Dropbox offers, and I use, two-factor authentication, and I’m pretty sure HubiC does not (but its website is pretty hard to navigate so maybe it’s there somewhere).

Conclusion

If you just want some free storage and don’t mind not being able to sync bundles then Box is a better deal than Dropbox and it’s probably quite robust given the money behind it. If you’re already using Dropbox and don’t need more storage, Box does not work as well so unless you want its enterprisey features (and you know who you are) you might as well stick with Dropbox. I can’t really comment on HubiC until I’ve exercised it by, saying syncing a buttload of RAW files to it (if I’m going to get more cloud storage, I want enough of it to not need more than one service). If you’re interested, HubiC is a damn good deal for free and it works side-by-side with the others. If it turns out to deliver the goods, I may well end up buying a 10TB plan and switching to it from Crashplan.

iDraw Review

iDraw showing texture map

A while back I reviewed Artboard — an inexpensive Illustrator-replacement-wannabe — fairly positively. I then discovered a bunch of limitations and bugs, and tried iDraw. (Note this is a review of the Mac version of iDraw. I haven’t tried the iPad version yet.)

Having used iDraw quite extensively for the last few months I can only say that, for my uses, iDraw pretty much kicks not only Artboard’s butt, it kicks Illustrator’s as well (until you get to Photoshop integration). The only application that holds a candle to it is Sketch (another excellent program I need to review).

The most challenging thing I’ve been doing with iDraw is texturing a 3d character. Normally I would do something like this in Photoshop or some other dedicated bitmap graphics program, but I wanted a simple, clean look, and ended up trying a wide variety of programs including Photoshop, Acorn, Pixelmator, Mischief, and Artboard — before settling on iDraw. For the kinds of things I was trying to do, iDraw was simply head-and-shoulders above the rest. Color me very impressed.

Now if only iDraw could include Sketch’s ability to set named export areas with specific objects included or excluded from export it would be awesome. But as it is, Sketch and Artboard can talk to each other via SVG so it’s no big deal.

(If you’re looking for a replacement for Fireworks, Sketch isn’t exactly that — but as a tool for creating pixel-perfect vector art, it’s probably better.)

Solid Drawing Tools

Screen Shot 2013-10-03 at 10.18.32 PM

iDraw’s drawing tools are solid and well-implemented (better than most — note the compound path support), with good snapping (both to grids and other objects). Indeed, unlike Sketch (which I also like a great deal) iDraw’s snapping works correctly when dragging multiple objects (no need to great groups just to make snapping work).

Powerful Styling

iDraw's style interface

Like any useful bezier drawing application, iDraw supports booleans. Unlike most of its rivals, iDraw provides an incredibly powerful and flexible set of tools for styling shapes. Again, Sketch comes close to iDraw in this regard, but iDraw lets you explicitly reorder the different effects whereas Sketch (as far as I can tell) does not.

Artboard's mystifying style palette
Artboard’s mystifying style palette

iDraw’s styling UI is not only better than Artboard’s (or Illustrator’s or Sketch’s for that matter), it has most of the precision controls you need — e.g. you can control whether a stroke runs inside, outside, or centered on a path — although you don’t have Sketch’s or Illustrator’s fine control over corners and caps. In comparison, Artboard’s styling controls are crude and in many cases simply mystifying.

 

Screen Shot 2013-10-03 at 8.43.19 AM

 

Here’s some detail from the texture map I was working on. Note there’s all kinds of subtle layered effects on the different components of the pupil.

Sketch pupil detail imported

 

Here’s the same pupil exported from iDraw as SVG and then imported into Sketch. (No, it didn’t get turned into a bitmap en route!)

Artboard imported pupil detail

 

And here’s the same pupil imported into Artboard. Also note the horribly rendered bezier handles on the selected object. Not a functional problem (they work just fine) but ugly.

Workflow

Clearly, iDraw can export SVGs that other programs can read, which is a great start. (Artboard can export to PDF but not, as far as I can tell, SVG, which is a huge black mark.)

iDraw's export dialogiDraw can in fact export to pretty much any file format you’d want (no EPS! — how times have changed) but it doesn’t have the export workflow niceties of Sketch (which lets you create named export regions and if necessary specify exactly which objects get rendered within each region, and then allows every region to be exported with one click).

Shortcomings

Probably the single biggest failing of iDraw is its weak typography. If you’re looking for  any typographic tools beyond pair kerning, look elsewhere. It is possible to get good type out of iDraw but it has a weird bug in the default style of text where text by default seems to have text, fill, and stroke styles (and looks awful). If you turn off everything except the fill style it looks fine. But there’s no real ability to deal with body type conveniently (or tables), so if you need to do anything more than a logo, you probably need a different program.

Unlike Artboard, iDraw allows you to use CMYK colors. If you’re working in print, you’ll still probably want Illustrator, but unlike Artboard or Sketch, it’s at least usable.

Aside from these two items, I’d like to see some more control over strokes (corners and caps), and there are a few fit and finish problems (e.g. the way styles are rendered in the style palette is a bit wonky, especially for text styles).

Conclusion

Overall, iDraw is my favorite vector drawing program right now, although for drawing UI components I’d give the edge to Sketch, which deserves its own review. There are some other programs I haven’t mentioned, such as Lineform, ZeusDraw, and Intaglio. These are all not bad — probably better than Artboard — but I prefer iDraw to all of them, and at $24.95 (in the App Store) I believe it’s cheaper than any of them.