0

I am just beginning to learn using Backbone.js. Previously I have used a web framework built on top of Node.js to handle all the routes and responses. With Backbone is the possibility of a SPA (single page application).

I believe my question is related to this one: Account for Backbone.js pushState routes with node.js express server? (a question of express.js + backbone).

In which the code is given:

app.get('/', function(req, res) {
    // Trigger the routes 'domain.com' and 'domain.com/#/about'
    // Here render the base of your application
});

app.get('/about', function (req, res) {
    // Trigger the toure 'domain.com/about'
    // Here use templates to generate the right view and render
});

From using node web frameworks I have usually not used json requests to get data, but have queried the database in the route closure. Is the job of node.js (in a node+backbone environment) simply to serve up the backbone page and not query the database? So it simply directs clients to the specified backbone.js template without passing any data, and backbone takes over?

So if I wanted to display all book models (example.com/books) for instance, would I just send the user via node to that url, and backbone will take care of querying the database (with the model, of course)? What would that code look like?

Most of the backbone tutorials I've seen have dealt with external api's. Thanks!

Community
  • 1
  • 1

1 Answers1

0

So with single page apps, we need to consider two types of pages: full-page loads and single-page routes. A full page load is the entry point when a user first arrives on your site, but you should also consider deep linking to a URI within your site as well as a browser refresh of the current URI.

The Easy Approach

  • Don't query the database in your node.js routes
  • Just always return the "start page" HTML
  • in the browser, the backbone router will initialize your views/collections/models and then you fetch the data you need from the server and render the page in the browser.

Get that working first and understand the ins and outs because overall it's the least complicated. It does cause a delay in perceived performance as the page won't be usable until that 2nd round trip to the server to load the data is complete. Also the fact that the start page HTML may be void of interesting search engine crawler data for SEO may be an important factor for you (or not).

The Server Side Bootstrap

So the official guidance from Jeremy Ashkenas is that for a full page load, the server should:

  • query the database based on the route and any request parameters
  • generate a full HTML document for that page, including the rendered views
  • Emded the necessary data as JSON in the HTML document and use that to bootstrap the backbone models when the backbone app loads on the client
    • Some how wire up the bootstrapped backbone objects to the DOM (this is left as an exercise for the reader)

The main advantage here is perceived performance, but this will also help with SEO (which may or may not matter to you). However, this implies the existence of a fairly sophisticated framework to enable you to render identical HTML in both node.js and in the browser, which backbone itself does not provide. There is a project called rendr that implements this concept of uniform HTML rendering across browser and node, which you may consider using or at least studying the source for inspiration.

Peter Lyons
  • 142,938
  • 30
  • 279
  • 274