Question

I’m using .NET MVC for all my serverside logic and serving out initial pages, but my application is very heavy on the client-side so I have adopted Backbone.JS which is proving to be very useful.

I’m unsure how to architect my system to incorporate both technologies though. The way I see it I have two options

1. Scrap the ‘V’ from MVC on the server-side, return JSON Data to the
   client on pageload and use backbone clientside templates to build up
   the GUI from the base JSON/Backbone Models.

2. Return the initial pages from the server fully rendered in .NET MVC.
   Also return the data that was used to render them and call the
   collection.reset({silent: true}) method to link up the
   returned data to the view. Am I right in thinking that this will
   allow me to subsequently make changes to using the add/remove/change
   handlers on the views?

1 Troubles me as I’m afraid of letting go of any part of server-side MVC, its where my core skill lies.

2 Troubles me as I’m concerned I might be introducing risk and work by having two different rendering methods on client server.

Whats the correct way to combine Server-side MVC with backbone.js 1 or 2 or some other way?

Answer 1

1. You are not really scrapping the V, you’re just changing it’s representation from HTML to JSON. You are troubled because you feel more comfortable with the server side stuff, and that’s not really a valid concern… you’ll get done what needs to be done, and learn/create the Javascript patterns as you go.

2. This is one way to do it, and it really helps if you need a javascript disabled fallback or you’re bound by accessibility guidelines. The part you’re missing is that you will have to re-render the page once it’s loaded to attach your models up to the DOM elements. Alternatively you could use a tool that handles this mapping for you, but that’s added complexity you’ll have to weigh out yourself.

In the Careers usage of backbone, we are not bound to support javascript-less scenarios, and we so we just load the templates + js on the initial load, then let the router take over and use something more like your first idea. Since it sounds like you’re just getting started, the biggest thing that helped us really get moving was realizing that it’s way easier to make changes to your model and then let your views subscribe to model change events (instead of the other way around).