Bootstrapping backbone.js models with java server

Question

I'm planning a single page webapp with backbone.js and a java backend running jersey. I am interested in bootstrapping model data into the page on the initial load to prevent additional ajax requests, as suggested by the backbone.js documentation:

When your app first loads, it's common to have a set of initial models that you know you're going to need, in order to render the page. Instead of firing an extra AJAX request to fetch them, a nicer pattern is to have their data already bootstrapped into the page.

Examples of what I think I need to do are given at backbone-patterns for ruby and php, but I'm not quite connecting the dots with how this would work in java. Do I need to use a templating library such as mustache.java and preprocess the page before it's served? Could someone give me an example of how that would look?

Thanks, Mark

Answer 1

Yes, you need some form of templating in order to mix your dynamic data with the static layout of your HTML page. However, if you are only going to have a single page, you might not want to invest in setting up a whole templating scheme. You could instead simply break up your page into two sections and serve your home page by putting out the first section followed by your JSON representations followed by the second section. That's kind of ugly, but it's up to you as to whether it's worth it to add templating for this single case. If you choose to use templating, you could use mustache or I might suggest Velocity Templates.

Reading through the Jersey code, it looks like you are going to have to call Jackson explicitly to convert your bootstrapped model objects from Java to JSON.

Answer 2

I'm not familiar with Jersey, but glancing at the docs, it appears to mainly be a Restful Web Service framework. It appears you can serve content-type of "text/html" with the @Produces annotation but I don't see an obvious way to render views using a templating system. Thus, it may behoove you to start with a Java web framework such as Spring or Play Framework to serve up the initial HTML that includes the bootstrapped collection of data by way of a view template (Mustache if you'd like). You can still use Jersey to serve up the subsequent Ajax/Restful calls, but both Spring and Play have Restful concepts built in as well.

Answer 3

The solution is different depending on the template engine. I do not know well enough Moustache.java to translate this JSP example. Using Jackson for JSON serialization, this would be the JSP tag file:

public class JsonTag extends SimpleTagSupport {

/** the instance to serialize as JSON JSON */
private Object value;

@Override
public void doTag() throws JspException, IOException {
    String json = new ObjectMapper().writeValueAsString(value);
    getJspContext().getOut().print(json);
}

public void setValue(Object value) {
    this.value = value;
}

}

And your HTML page:

<script>
var router = new App.TabRouter({
    model: new App.MyModel(<k:json value="${it}"/>)
});
</script>

For a serious application you should be reusing a ObjectMapper instance instead of creating a new one every time.

Answer 4

To bootstrap you model data you merely have to have the model JSON rendered into a tag. Paraphrasing from backbone-patters link:

<script>
  // app data, rendered on server
  var photosJSON = [
    { id: 2, name: "My dog", filename: "IMG_0392.jpg" },
    { id: 3, name: "Our house", filename: "IMG_0393.jpg" },
    { id: 4, name: "My favorite food", filename: "IMG_0394.jpg" },
    { id: 5, name: "His bag", filename: "IMG_0394.jpg" },
  ];
 </script>      
 ...

 <script>
  var Photo = Backbone.Model.extend({
  // photo attributes (from above)
  });

  var PhotoCollection = Backbone.Collection.extend({
     model:Photo
  });

  // build collection model without AJAX call using
  // server rendered JSON above
  var photosCollection = new Photos(photosJSON);
</script>

You can use whatever appropriate technology on the server to render the script with the JSON data.