How do I use Backbone.js for a multi-page web app?

Question

I've always used Backbone's routes (#!/blah)

But I realize that in order to get indexed by Google, you need to provide a non-javascript version of the site.

I don't like to write code twice. So, I would rather build a multi-page app instead of a single page web app.

Backbone.js provides me with the "structure" so my javascript does not turn into sphagetti mess. But , I'm completely clueless on how to build multi-page apps using Backbone.

Do you include the main.js file on every page render? What about routes? How do you deal with that? How do you deal with modularizing, etc?

I wish there was a tutorial on how to build multi-page javascript apps using Backbone.

Answer 1

There are a lot of considerations for doing something like this, but here are two keys one:

Serving the page

You probably want to have your web server route everything to the serve the same static page (assuming it is static assets). This means that everything in http://yourdomain.com/* will serve /var/www/yourdomain.com/index.html. Once the static page is loaded, the JS on that page will decide what to do given the url.

Push State

To do your routing, you can still use backbone routing, but don't use hashbangs (the #!/blah style urls). See http://backbonejs.org/#History for instance. This will allow you to navigate to real URLs without actually needing a page refresh. If the browser doesn't support a pushState, everything will still work, but it will reload the page.