Issue #374 of A List Apart by Garann Means is a great two-part piece on using Node.js for in-browser mockups and prototypes. In “Even Better In-Browser Mockups with Node.js” she gives a great overview for why using Node for mockups/prototypes is such a great idea. In part two—”Node At Work: A Walkthrough“—she dispenses with the theory and shows hands on how to build a mockup that you can use, using Node.js. I strongly recommend you read both articles.
Using Node.js for mockups provides quite a few key benefits, not the least of which being:
- Mockup built using web technologies, not Photoshop comps
- It works! (users/stakeholders can get their hands on it)
- Rapid development
But there are a few drawbacks to vanilla Node/express.js:
- No CSS pre-processors: SASS, LESS or Stylus
- Hand-wiring templating engines
- What about client-side frameworks: Backbone, Angular, or Ember?
- Node’s HTTP server (express) can be a pain
- Restarting the server on every file change? Blech!
Lineman.js can help!
Lineman is a tool to help you build fat-client webapp projects. Mockups and Prototypes certainly fit that bill! In fact, when working on mockups and prototypes, generally speed of deployment and rapid development is a key factor. Lineman can help you scaffold out a mockup and get you up and running fast!
Lineman eases the pain of integrating with a server-side API. You can simply stub out the API endpoints in Lineman’s
config/server.js configuration file (which makes a great deliverable to the server-side team when it comes time to build out the real server endpoint). Or, if the server-side API already exists, you can tell Lineman to just proxy requests to the real API.
Further, to increase the pace of development and feedback loop, let Lineman handle recompiling your assets and restarting the server for you! And lastly, if you plan on using one of the many great client-side frameworks out there (like Backbone, Angular or Ember), Lineman has project templates ready to get you going.
“Cool Art Store” Demo, ported to Lineman
What was necessary to get Garann’s Cool Art Store demo running on Lineman?
$ lineman new coolartstoreto get the base Lineman archetype project. (much easier than starting with a blank canvas)
- Moved the css, js, image, and template assets from
app/. (Not strictly necessary – Lineman can be configured to look for assets anywhere you wish by using
- Converted the templates from doT.js to Handlebars (Also, not technically necessary – there are a number of doT-precompile grunt tasks, so configuring Lineman to use doT is also an option; I just hapen to prefer Handlebars.)
- Stripped out the XHR requests for the
doTtemplates; Lineman pre-compiles your templates into a single JS object so you need only execute the template at runtime.
server.jsto use Lineman’s
config/server.jsfor defining the API endpoint stubs. This mostly boiled down to removing all the express.js setup code. (Lineman makes it easy to just define the endpoints and not deal with boilerplate.)
- Bonus: Lineman concatenates and minifies the final CSS/JS assets. If this weren’t just a mockup, we’d be one step closer to shipping!
- Bonus: using
lineman runmeant that I didn’t have to keep restarting the node server after each file modification!
Not just for Mockups