Essential JavaScript: a tip 5 MVC frameworks

Picking a right JavaScript horizon for your needs can be tricky. Jack Franklin sets out to make your preference easier by providing this beam to 5 of a many renouned choices

The large expansion in rich, JavaScript-heavy web applications has lead to a outrageous array of frameworks designed to assistance we build apps. There are so many that it can mostly be formidable to select that best suits your needs, so in this essay I’ll plead 5 of a many popular, and demeanour during where any of their strengths lie. You shouldn’t bottom your preference wholly on this essay – we inspire we to play serve with a horizon before committing – though we wish this sets we off in a right direction. You competence also be meddlesome in a dual prior articles in this array on a tip 5 contrast libraries and a tip 5 book loaders.

Most frameworks follow roughly what’s famous as an MVC pattern: model, views and controllers. Models understanding with data, attractive it from databases and returning it. Views afterwards arrangement a data, and controllers couple a models and views together. Of course, that’s a unequivocally simplified explanation, though a thought in hint is to keep a arrangement and a information totally separate, that brings outrageous advantages as your formula starts to grow in complexity. If you’ve ever worked with a horizon like CodeIgniter or Rails, a MVC proceed will be informed to you.


We start with one of a many good famous frameworks, Backbone.js. With Backbone, your information is represented in Models. Models can afterwards be contained within Collections that are a collection of indication instances. Views also offer some-more than usually templates for displaying data, they also understanding with contracting events. One of my favourite things about Backbone is a hugely endless documentation, that creates it many easier to unequivocally get to grips with a framework.

An critical note is that there is no such thing as a standard controller in Backbone. The pursuit of a controller tends to some-more be finished partially by Views – they enclose UI proof along with represting data, as we’ll see shortly, and a Backbone Router, that maps URLs to functions. Collections are described on a Backbone site as “A organisation of models on a client-side, with sorting/filtering/aggregation logic”.

You typically conclude methods to filter your information on collections. For example, a instance Backbone todo app defines methods to filter usually a todos noted “done”:

  1. var TodoList = Backbone.Collection.extend({
  2.       …
  3.       done: function() {
  4.         return this.filter(function(todo){ return todo.get(‘done’); });
  5.       }
  6.       …
  7.   });

The above todo app is good value examining if you’re new to Backbone – it’s entirely commented and unequivocally useful when it comes to determining how best to lay out your application. One of a issues (if we could call it that) with Backbone is that there are a lot of opposite ways to grasp a same finish goal. Don’t get confused if online tutorials do things somewhat differently.

In my opinion, Backbone is good for small, one page applications, and that’s how we tend to use it. However there are copiousness of people who have built impressive, immeasurable applications with it, including USA Today and a New Rdio. Plenty some-more are cited on a Backbone site. we inspire we to give it a try and see how we find it.


Second is Ember.js. Whilst Backbone is sincerely low level, with a lot of formula that we need to write yourself, such as formula to refurbish a viewpoint when indication information changes, Ember does a lot of that work for you. It’s some-more dogmatic since it tries to do a lot some-more for you, though that also leads to we carrying to write reduction boilerplate code.

Ember’s categorical facilities are a information binding; obejcts in Ember can connect properties to any other, so when a skill changes in one object, a other is kept in sync. Another is a ability to conclude functions on an intent that we can afterwards yield as properties. Hence, if a indication has a initial and final name, we could emanate a duty to conclude a person’s fullname, and have it treated as if a indication has a fullname property. For example, here’s how we competence conclude such a property:

  1. fullName: function() {
  2.     var firstName = this.get(‘firstName’);
  3.     var lastName = this.get(‘lastName’);
  4.     return firstName + ’ ‘ + lastName;
  5.   }.property(‘firstName’, ’lastName’)

You can afterwards anxiety fullName as if it was a skill via your formula and in your views. For example, with a above skill defined, your viewpoint competence demeanour something like:

  1. <p>Hello, <b>{{fullName}}</b>!</p>

And this would automatically refurbish when a value changed. A mixed of information contracting and computed properties is unequivocally powerful.

Coming from a Backbone perspective, a underline many expected to lift we in is that Ember automatically updates a views when information changes – saving we a lot of work. This comparison post between a dual sums it adult utterly nicely: “Backbone is some-more pithy and reduction magical”. Depending on your perspective, that can be a good or a bad thing. Some cite Backbone since it keeps things simple, and lets we do all how we want, since Ember does many some-more for you. A horizon that does some-more for we means we relinquish some of a control, though benefit time in not carrying to write formula to hoop a lot of a paltry functionality.

Ember also has some-more normal controllers. Views (usually created in Handlebars) yield ways of attaching certain buttons or links to Ember controller actions. Of course, controllers don’t need to understanding with updating content, though can residence methods to understanding with usually about all else. This is where many of your methods will go that understanding with a data. In a todo app, for example, we competence write methods that lapse usually a finished todos, or a methods that save another todo item.


Next adult is Google’s offering, a comparatively new AngularJS. Angular takes a somewhat opposite proceed by doing information contracting directly in your HTML. It also uses usually plain JavaScript for a controllers, definition there’s no need to extend other objects as we have to do in other frameworks. The information contracting means information in views is automatically updated when a information changes, though also Angular creates it free to connect forms to models, definition a lot of a formula we typically write to couple a form to formulating a new instance of a indication is not needed. Its information contracting is bi-directional. For example, here’s a HTML for a form for a todo app (taken from a Angular documentation):

  1. <form ng-submit=”addTodo()”>
  2.         <input type=”text” ng-model=”todoText”  size=”30″
  3.                placeholder=”add new todo here”>
  4.         <input class=”btn-primary” type=”submit” value=”add”>
  5.       </form>

Notice a use of ng-* attributes within a HTML, that is where a infancy of a sorcery lies. The ng-submit charge will constraint a form contention eventuality and pass it to a addTodo method, that is a process on a todo controller. By dogmatic a ng-model charge on a content field, we can simply get during a value though carrying to anxiety a field’s DOM component and squeeze a value. By relocating a lot of a contracting directly into a HTML, Angular leaves we with many leaner controllers and reduction JavaScript to write. It competence take a while to get your conduct around, though this proceed is unequivocally powerful. The Angular home page contains mixed illustration apps and videos of those apps being built, so if this interests we we rarely suggest we check them out.


Knockout.js is an MVVM (Model-View-View Model) horizon created in pristine JavaScript. MVVM frameworks are separate into 3 parts. Firstly, there are models, that are accurately what you’d expect. Typically these sync information with a server.

You afterwards have view-models, that are pristine JavaScript and are a formula illustration of your information along with exposing methods for utilizing a information – these are as tighten to controllers as an MVVM horizon comes. The bulk of your proof goes into these. Finally there are views, that arrangement a information. These are created in pristine HTML with bindings extrinsic as attributes (similarly to how Angular JS does it), that Knockout afterwards uses to refurbish views with a data. Knockout does this for you.

As an example, to arrangement a firstName skill of a indication instance, my viewpoint would contain:

  1. <p>First name: <strong data-bind=”text: firstName”></strong></p>

You afterwards activate Knockout by requesting a bindings. You pass this duty an instance of your viewpoint model, that defines a value of properties. For example, something like:

  1. function AppViewModel() {
  2.     this.firstName = ”Bert”;
  3.   };

You can afterwards activate a bindings like so:

  1. ko.applyBindings(new ViewModel());

And you’ll see a clever tab uncover “Bert”. This formula was taken from a interactive KO tutorial, that is a best place to start if you’re meddlesome in training more.


Finally, we wanted to collect something opposite to all of a above and went with Batman.js, and not usually since of a name. Batman is created in CoffeeScript. It can be used with JavaScript or CoffeeScript, though your formula will demeanour many cleaner in CoffeeScript as Batman creates use of CoffeeScript’s classes heavily. I’d usually suggest Batman if we are happy to write CoffeeScript. With Batman we emanate an instance of Batman.App, that acts as a coupling around your application. Then, we emanate controllers and models within this App class. App classes are unequivocally true forward:

  1. class Todo extends Batman.App
  2.     @global yes
  3.     @root ’todos#index’

The initial line sets it to global, so it’s combined as a skill on a tellurian object. The second line will demeanour informed to those with Rails experience. This sets a application’s base trail to be a index movement on a controller. Controllers and methods get combined as properties on this class. Batman also uses data-bindings in a HTML. For exmaple, to outlay a list intent for any intent in a product model, it’s as easy as:

  1. <li data-foreach-product=”Product.all”>
  2.     <a data-route=”product” data-bind=””>name will go here</a>
  3.   </li>

Batman is a good choice if you’re a fan of CoffeeScript. It’s discerning to lift elementary apps together and is also substantially a horizon to stay closest to what we would cruise a standard MVC pattern. Nick Small, Batman.js’ creator, has a good arrangement on how and because we should use Batman.js. It unfortunately doesn’t seem to be as renouned as a other frameworks out there that we consider is a shame, as a volume we can do in such tiny formula is fantastic.


It was unequivocally tough in this essay to collect out 5 frameworks and try to give them a satisfactory overview in a singular series of words. The final 4 are flattering similar, with Backbone substantially a peculiar one out. It does leave we with some-more work to do, and doesn’t yield bindings, a pivotal underline of a others, though if we wish full control over everything, it’s a good one to demeanour into. The pivotal recommendation we would give is to demeanour during apps created in these libraries and try to write your possess tiny apps before commiting to one. Each has pointed differences that will possibly fit we or not, and it’s good to find those out earlier rather than later. Of course, there are copiousness some-more than these five, and a Todo MVC plan is a good place to start if you’d like to try other options. That site has a outrageous collection of applications created in a good accumulation of frameworks, including all a ones mentioned in this article. You can find a repository of these applications on Github.

Thanks to Addy Osmani for his counterpart examination of this article

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Leave a Comment

Comments are moderated. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

6 − = two