Monday, March 11, 2013

Small example app using Ember.js and Clojure + Compojure + Noir

I use Clojure with Compojure and Noir for (almost) all of my web apps and lately I have also been experimenting with Ember.js. After buying and reading Marc Bodmer's book Instant Ember.js Application Development How-to yesterday I decided to make a very small template application using Ember.js for the UI and a trivial back end REST service written in Clojure. I used Marc's Ember.js setup and it worked well for me.

The github repo for my small template project is emberjs-clj

Please note that this example is a trivial Ember.js application (about 50 lines of code) and is intended just to show how to make a REST call from an Ember.js front end app, how to implement the REST service in Clojure, and not much else. I wanted a copy and paste type template project to use for starting "real projects."

You can grab the repo from github, or if you just want to see the interface between the UI and back end service, here is the code run by the Javascript UI:

RecipeTracker.GetRecipeItems = function() {
  $.ajax({
    url: '/recipes/',
    dataType: 'json',
    success : function(data) {
      for (var i = 0, len = data.length; i < len; i++) {
        RecipeTracker.recipesController.addItem(
          RecipeTracker.Recipe.create({
            title: data[i]['title'],
            directions: data[i]['directions'],
            ingredients: data[i]['ingredients']
        }));
      }
    } });
};
and here is the Clojure code for returning some canned data:
(def data [
       {"title" "Gazpacho",
        ...},...])

(defn recipes-helper []
  (json/write-str data))

(defpage "/recipes/" [] (recipes-helper ))
Hopefully my demo project will save you some effort if you want to use Ember.js with a Clojure back end.

Edit 2013-03-13: updated the example on github to Ember.js 1.0 RC1, cirrectling some breaking API changes.

No comments: