Monday, February 27, 2012

Twirl Your Mustache

Reuse Templates On The Client And Server With CouchDB, CouchApp, and Mustache

In my last post I talked about my introduction to building applications with Apache CouchDB and CouchApp. I’ve been refactoring the app to use Backbone.js and RequireJS on the client, and to take advantage of templating to make presentation logic more DRY. This post shows how to reuse Mustache templates on the client and server using CouchDB and CouchApp. I’ve left out the Backbone/RequireJS code for simplicity, and illustrate the client code using jQuery’s shorthand ‘$.get’ AJAX method.

Mustache is a logic-less templating language available for a variety of languages. It ships with CouchApp, and Backbone is agnostic, so it seemed a no-brainer. Mustache supports partial templates, for portions of a page’s markup, and I’ll show how to reuse a partial template to do a partial page refresh on the client.

Say we have the following extremely simplistic template:


Partial templates are indicated with the greater than (‘>’) symbol, so here we’re indicating that a partial template named ‘content’ should be rendered in the <div id=”content”> element. Now let’s say we have the following partial template:


For the server side, we can render HTML pages via CouchDB ‘shows’ and use Mustache in the show code, i.e.:


Here, this.templates refers to the current design document’s ‘templates’ property, and this.templates.partials to its ‘templates.partials’ property. These correspond to your CouchApp’s directory structure prior to push.

We can then hit the page at: /dbname/_design/docname/_show/page, and use a combination of rewrites.json and a proxy or virtual host to pretty up the URL.

For our purposes, we’re considering reusing a template from the ‘partials’ directory for a client-side partial page refresh. We can serve the template markup from a show also, passing the template name in the URL, i.e., /dbname/_design/docname/_show/templates/page.html:


Here, we first look for the template name in the design doc’s templates, then in templates.partials.

On the client, we’ll use the jQuery plugin for mustache, which ships with CouchApp:

<script src=”vendor/couchapp/jquery.mustache.js”></script>

First we’ll make a GET request for the template:

Then for a partial refresh, we’ll GET our updated data and apply the same partial template on the client:

This is an extremely simplistic example, the point being to illustrate the considerable DRY we can achieve through template reuse. Write the template once, and use it on both the client and server.


Thursday, February 16, 2012

Relax, or, adventures with CouchDB for fun and profit.

My employer is pretty cool about allowing devs freedom in choosing tools. They also support R&D-based “play time” to explore new technologies as they pertain to our problem domains. I’ve had a great time over the past year and half specializing in JavaScript development using tools like Backbone.js, RequireJS, Node, etc., while continuing full-stack development for the enterprise.

Recently I got the opportunity to use CouchDB for a customer-facing project. Before he left to pursue greener pastures, our former Development Director authored a conference registration site using CouchDB and CouchApp. Since I’ve earned the “JavaScript Guy” moniker here, I was presented the opportunity of taking over the app for this year’s conference.

Apache CouchDB is a document-oriented database that can be queried and indexed using JavaScript in a MapReduce fashion. CouchDB provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests. CouchApps are JavaScript and HTML5 applications served directly from CouchDB. Assuming your application can fit into those constraints, then you get CouchDB’s scalability and flexibility “for free” (and deploying your app is as simple as replicating it to the production server).

CouchDB represents a significant paradigm shift coming from a relational SQL background. It is extremely flexible as a document store, it is ad-hoc and schema-free, and provides powerful incremental peer-based replication for distributed storage. Like all NoSQL databases, it is not intended as a panacea, nor intended as a substitute for relational databases. It is simply another available tool to evaluate based on a project needs basis.

This project also gave me some exposure to nginx, which is used as a proxy to CouchDB, and Python, which is used for some administrative features behind the scenes.

It’s been pretty awesome getting to know CouchDB, and adding it to my tool belt for consideration on future projects. I’ll try to post more specifics as time permits.