Combining Require.js, Backbone.js and a server side MVC framework

To add to mexique1's advice, it might be worth looking at the backbone-boilerplate project. It should provide you best-practice solutions for many of the problems you're currently considering, such as the combination of require and backbone, the organisation of the client-side of your project, and the reduction of complex DOM manipulation (see templating).

The challenge, as you anticipate, will most likely be in combining the boilerplate approach with the approach you're used to. However, it will almost certainly be worth the effort since it should provide you a solid foundation for this and future projects.

I think Backbone is a good choice, and Require is not mandatory here.

Require will just help you organize your source code and maybe improve performance. I think you can start right away with Backbone, which will be the thing you are going to use most, and add Require later.

Regarding Backbone, yes it's easy to use to use its Model with an existing MVC application, provided it returns JSON. To load your existing data you will want to use the fetch method combined to url to adapt to your existing code, or your own method.

Generally, think about which models are displayed in which views. Backbone helps you think this way : I'm displaying Models represented as JSON data in Views which are made by HTML.

Also, for the view layer, it's very easy to reuse your existing HTML, because views are not tied to anything, no JavaScript templating or nothing.

Simple example :

<div id="user">    <span class="name">John</span></div>var UserView = Backbone.View.extend({    render: function() {        this.$el('.name').html(this.model.get('name'));    }});var userView = new UserView({el: $('#user')[0], model: ...});

In this example the #user div reflects the state of a User model, with its name.

Also check the Todo App example in Backbone.