Question

I am learning about backbone, and from the examples and tutorials I have gotten this impression:

• The initial GET / returns the skeleton page with backbone and the view templates.
• Backbone uses the REST API to flesh out the page by GETting the data it needs and adding it into the DOM.

This works, but it seems wasteful in terms of additional HTTP requests, and latency from the perspective of the end user (minimum two round-trips before the page is visible. Actually three in my case, since the API must first ask which widgets are available, and then fetch the details on any available widgets….).

Is there an established, standard method for getting around this? My current candidates are:

1. Ignore the problem.
2. Embed the initialization data directly into the original page via inline javascript.
3. Render the page as if backbone didn’t exist. When backbone finishes initializing, it will (hopefully) be in sync with the page as the user sees it. It can correct anything it needs to if things changed in the intervening couple seconds, but at least the user is not left hanging.
4. Another solution I haven’t thought of?

Is there an established way to do this? Is it situation-specific? I am using Node / JS / Express.

Answer 1

Update: I think I found a solution, possibly the “accepted” solution, in Backbone’s documentation:

Here’s an example using reset to bootstrap a collection during initial page load, in a Rails application.

<script>
  var Accounts = new Backbone.Collection;
  Accounts.reset(<%= @accounts.to_json %>);
</script>

Calling collection.reset() without passing any models as arguments will empty the entire collection.