Prototyping with Draughtsman

I’ve just put up a small app on GitHub which I’ve been using to help me create prototypes using HTML, CSS and JavaScript. It works a little bit like mod_php and Apache in that you just write code or stylesheets in whatever kind of format you want, and the app takes care of transparently compiling and serving up the result, but without having to create any kind of project structure or scaffolds, and without having to mess with application servers or autocompile scripts that continually watch file directories for updates.

I’d been noticing this weird gap in how I prototyped and how I worked on production apps: for prototypes I usually started with quick-and-dirty plain HTML and CSS just to get something on the page, but whenever I had a decent-enough prototype that looked like, hey, it might be worth actually turning into something real, I had to convert my HTML into the Jade or Django templating language, my CSS into SASS or Stylus and my JavaScript into CoffeeScript, losing valuable time but more importantly being forced into the rather boring and uninspiring task of converting things that already work from one format to another before you can get back to business again.

So you surf to localhost:3400, browse through the directory listing (which defaults to ~/Sites on OS X), click on a .jade file and it renders HTML, transparently converting any .styl, .sass and .coffee files as well, if you have any. Of course, whether this would be useful for you depends on how much prototyping you actually do, and whether it supports the kind of formats you use in real projects. That’s why the whole system is plugin-based, and you can add your own formats with little snippets of code like this:

I’m taking requests for handlers (and might even do a PHP handler sometime) and if you need some help building your own, or just getting the app up and running, holler.

I’ve included autostart scripts for Ubuntu and OS X, though I don’t know if they’ll work for everybody.

You can use it together with Apache too, by having draughtsman forward any requests for formats it doesn’t need to or can’t compile — say, PHP — to an address of your choosing. For me, though, draughtsman has pretty much obviated the need for a LAMP install.

Full docs and details at https://github.com/stdbrouw/draughtsman. Check it out!