Combining Require.js, Backbone.js, and Server Side MVC Structures

Question

We are planning a really sophisticated web application. At least for my own standards. Previously, we always used a combination of the MVC Framework (Codeigniter) on the server side and the functionality of the client side (jQuery and plugins). We just wrote javascript inline code in our views. This worked as expected, but, of course, with a few drawbacks:

• no caching
• duplicated js code
• maintainability problems
• ...

My main goal is to streamline client-side code in an efficient and easily repairable way. But I want to stay on the server side of MVC due to existing know-how and some existing interfaces. Also, I want to reduce the complex DOM manipulation with jQuery and "spaghetti code".

Now I thought of a combination of Backbone.js and Require.js, but I really cannot find a tutorial or a detailed description of how to combine them with MVC on the server side. Is it even recommended?

In my old applications, I got this file structure:

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

Any ideas or best practices?

Thanks!

Answer 1

I think Backbone is a good choice, and Call is not necessarily here.

The requirement will simply help you organize your source code and possibly improve performance. I think you can start right away with Backbone, and that will be what you intend to use the most, and add the Requirement later.

As for the backbone, yes, it is easy to use to use your model with an existing MVC application, provided that it returns JSON. To load existing data, you will want to use the fetch method combined with url to adapt to existing code or to your own method.

As a rule, think about which models are displayed as views. The backbone helps you think this way: I show the models represented as JSON data in views that are created using HTML.

In addition, it’s very easy for the view level to reuse existing HTML, because the views are not attached to anything, nor to a JavaScript template, nor to anything.

A 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, div #user reflects the state of the User model with its name.

Also check out the Todo App in Backbone.

Answer 2

To add mexique1 to the recommendation, it might be worth considering a draft basic template . It should provide you with the best practical solutions for many of the problems that you are currently considering, such as combining needs and highways, organizing the client side of your project and reducing complex DOM manipulation (see Templates).

The task, as you expect, is likely to combine an approach with a template with the approach you are used to. However, it will almost certainly be worth the effort, as it should provide you with a solid foundation for this and future projects.