Question

We’re actually planning a really complex web application. At least for my own standards.
In the past we have always been using a combination of a server side MVC Framework (Codeigniter) and client side functionality (jQuery and plugins). We have simply written inline javascript code in our views. This worked as expected, but of course with several disadvantages:

• no caching
• duplicated js code
• maintainability issues
• …

My main goal now is to organize the client side code in an efficient and easily maintainable way. But I want to stay with the server side MVC because of the existing know how and some existing interfaces. Furthermore I want to reduce complex DOM manipulation with jQuery and “spaghetti code”.

Now I thought about a combination of Backbone.js and Require.js but I really can’t find a tutorial or any solid description about how to combine them with a server side MVC.
Is it even recommended?

In my old apps I got a file structure like this:

• application (CodeIgniter)
• assets
  • js
  • css
  • imgs

Are there any ideas or best practices?

Thank you!

Answer 1

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.