June 9, 2013 0

Even More Better-er In-Browser Mockups with Lineman.js

By in frontend

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:

  1. Mockup built using web technologies, not Photoshop comps
  2. It works! (users/stakeholders can get their hands on it)
  3. Rapid development

But there are a few drawbacks to vanilla Node/express.js:

  1. No CSS pre-processors: SASS, LESS or Stylus
  2. No JavaScript pre-compilation languages: CoffeeScript, TypeScript
  3. Hand-wiring templating engines
  4. What about client-side frameworks: Backbone, Angular, or Ember?
  5. Node’s HTTP server (express) can be a pain
  6. Restarting the server on every file change? Blech!

Lineman.js can help!

Lineman.js

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!

In addition to all the benefits that Garann discussed for why using Node is a good idea for mockups, Lineman also provides the ability to use CSS preprocessors, compile-to-JavaScript languages, and choose your own templating tool. (Lineman ships with support for LESS and SASS CSS pre-processors, Underscore and Handlebars template engines, and CoffeeScript compilation. And it’s easy to add support for your tooling of choice e.g. Stylus, TypeScript, Mustache)

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

I created a fork of Garann’s original “Cool Art Store” demo project to show how easy it is to use Lineman for simple mockups. I isolated the Lineman port to a branch named ‘lineman’.

What was necessary to get Garann’s Cool Art Store demo running on Lineman?

  1. Ran $ lineman new coolartstore to get the base Lineman archetype project. (much easier than starting with a blank canvas)
  2. Moved the css, js, image, and template assets from public/ to app/. (Not strictly necessary – Lineman can be configured to look for assets anywhere you wish by using config/files.js or config/files.coffee)
  3. 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.)
  4. Stripped out the XHR requests for the doT templates; Lineman pre-compiles your templates into a single JS object so you need only execute the template at runtime.
  5. Ported server.js to use Lineman’s config/server.js for 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.)
  6. Bonus: since Lineman runs the JavaScript through JSHint, it caught a couple of lint-warnings that were promptly fixed.
  7. 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!
  8. Bonus: using lineman run meant that I didn’t have to keep restarting the node server after each file modification!

Not just for Mockups

Of course, Lineman is really tailored for developing fat-client webapps for production, not just mockups in particular. So TDD your client-side application using your JavaScript test framework of choice and let Lineman run the specs/tests for you! Or integrate your test suite into your Continuous Integration build. And let Lineman help with deployment to Heroku as well!

 
 

Tags: ,

Leave a Reply

You must be logged in to post a comment.