Micro-templating with CouchDB, Reupholster and PURE

Nigel Duke 31 May 2011 1




CouchDB is specifically designed to be accessed via HTTP; it has the ability to act as both a web server and a database server. This has led to it being touted as a solution for delivering purely Javascript and HTML-based applications. A solution for aiding this, CouchApp, has been around for a while but a new application, Reupholster, makes things distinctly easy, almost akin to editing a regular web project. Running Reupholster creates the required directory structure and when running it monitors the project directory and pushes any changes to CouchDB.

CouchDB natively stores data in JSON format and Reupholster allows the use inclusion of any Javascript library so a design that’s straightforward to implement is to let the browser convert JSON into HTML using Javascript and a template. There are several micro-templating libraries but few completely separate presentation from data, instead relying upon non-standard placeholders in the template (similar to JSP). Weld and PURE are two exceptions to this, allowing the developer and designer to work almost separately. Whilst Nodejitsu, the authors of Weld provide a great overview of micro-templating, PURE is the more mature and is being used in a production application.

To populate CouchDB with some sample data, JSON files are created in the project’s docs directory but without id and rev attributes:

CouchDB queries are map/reduce Javascript functions embedded within JSON and are stored in docs/_design

Our tests anticipate our code:

The template has no non-standard HTML and can include placeholder text:

The CouchDB library retrieves the JSON data and the PURE library, with a supplied directive for mapping JSON elements to HTML elements, creates the HTML for rendering:

Which results in:

Contacts
Katz
Whizz bang idea 9
Interesting 3
Could do better 6
Gates
Nice stuff 5
Interesting idea 8

There are a couple of gotchas with Reupholster: the webstart version won’t run the integrated tests so it’s best to download the jar file instead and if security is implemented on CouchDB then the absolute location of the project directory should be specified, e.g. java -jar reupholster-0.2-jar-with-dependencies.jar ~/Documents/workspace/reupholster/ and the credentials placed in the reupholster.json file:

In summary, Reupholster is a great way of getting client-side web applications up-and-running. It would also be interesting to use it with an MVC-style Javascript library such as Backbone.js.

The full demo project can be found on Github: https://github.com/morganhill/reupholster-pure

This article originally appeared on the Morgan Hill Consultants Ltd web site.




Nigel Duke (30 Posts)

One Comment »

  1. Andrew Frank 9 July 2011 at 11:56 am - Reply

    i have downloaded from git your code and can run the index page and a couchdb is created, but it does not contain anything and i do not see how to add. the docs are there (and once touched up), but they are not inserted in the db. i am shopping for a couch application dev tool, and thus new to couchdb development.
    thank you for help!

Leave A Response »