Combining Serverside MVC with Backbone.js

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).

Answer 2

I don't know what the Accepted Way is, but I've found it problematic to combine V from the server side and then weaving Backbone (etc) in. In very controlled situations it can work out, but if your app is going to be extremely heavy on the client side, my suggestion would be to forget about rendering on the server side and just return JSON and let Backbone handle the rendering of your content through some sort of templating (Mustache, etc).

Yes, you have full control over the Backbone events, so you will have a handle on them to do what you wish.

I hear you about giving up part of your skill set on the server side. I was the same way but if this is what your project calls for, I think you'll find it easier to let the server side rendering go for this.

Good luck!