When deciding which frontend framework to choose for your next large scale frontend project, the decision-making process can be crippling! Keeping track of all of the different frameworks and the pros and cons of each can seem like an exercise in futility. Luckily, people have answered the call and a handy website exists to not only demonstrate the same application written in nearly every framework, but also to offer the complete annotated source code for each as well!

The TodoMVC project, http://todomvc.com, is a website that focuses on creating a simple, single page, to-do application, which is written using each of the proven JavaScript MVC frameworks—there's even one written in vanilla JavaScript!

Definitely spend some time checking out the website and digging into each of the featured frameworks. You can get a really good feel for the different frameworks by seeing the same code written in completely different ways. No two are identical, and ultimately, it's up to you to evaluate and figure out which you prefer and why.

For the sake of brevity, I'm going to focus on the three that I personally like and believe are at the top of the current list of front runners.

Backbone.js is an extremely lightweight (6.5 Kb in production) MV* Framework that has been around for a few years. It has an extremely large established user base, and many very large-scale web applications have been written using this framework. Some companies that have embraced Backbone.js for development of their flagship products include:

Backbone.js is a great framework to start with if you're comfortable with jQuery and have been using it for a while and want to start improving your code organization and modularity. Additionally, Backbone.js requires jQuery and integrates it pretty tightly, so that's one less thing to worry about learning as you ease into this new world of frontend development.

Backbone.js works on the basic idea of models, collections, views, and routers. Models are the basic elements that store and manage all of the data in your application. Collections store models. Views render HTML to the screen retrieving dynamic data from models and collections. Routers power the URL of your application, allowing each individual section of your application its own unique URL (without actually loading live URLs) and ultimately tying the whole thing together.

As Backbone.js is so lightweight, an extremely small and simple set of sample code can be put together very quickly:

var Person = Backbone.Model.extend();
var PersonView = Backbone.View.extend({
    tag: 'div',
    render: function() {
        var html = [
            this.model.get('name'),
            '<br/>',
            this.model.get('website')
        ].join(''),

        this.$el.html(html);

        return this;    
    }
});

var person = new Person({
        name: 'Jason Krol',
        website: 'http://kroltech.com'
    }),
    view = new PersonView({ model: person });

$('body').append(view.render().el);

The one thing to notice is that Backbone.js by its very nature is so lightweight that it doesn't include most of the functionalities that you'd expect to work right out of the box. As you can see in the preceding code, in the View object that we created, we had to provide a render function that manually renders the HTML for us. For this reason, many people shy away from Backbone.js, but others embrace it for the raw power and flexibility it gives to developers.

Traditionally, you wouldn't put all of your code into a single file like the earlier example. You would organize your models, collections, and views into individual folders in a structure, just like how we organized the code in our Node.js application. Bundling all of the code together would be the job of a build tool (discussed later in this chapter).

You can learn more about Backbone.js by visiting its official website at http://backbonejs.org.

Also, don't forget to check out the Backbone.js implementation of the to-do application on the TodoMVC website!

Ember.js bills itself as the framework for creating ambitious web applications. Ember's goal is to target fairly large-scale SPAs so the idea of using it to build something very simple might seem like overkill but is certainly doable. A fair assessment is to take a look at the production file size of the Ember library, which comes in at around 90 Kb (versus 6.5 Kb for Backbone.js). That being said, if you are building something very robust with a very large codebase, the added 90 Kb might not be a big deal for you.

Here is a very small sample application using Ember.js:

var App = Ember.Application.create(),
    movies = [{
        title: "Big Trouble in Little China",
        year: "1986"
    }, {
        title: "Aliens",
        year: "1986"
    }];

App.IndexRoute = Ember.Route.extend({
    model: function() {
        return movies; 
    }
});

<script type="text/x-handlebars" data-template-name="index">
    {{#each}}
        {{title}} - {{year}}<br/>
    {{/each}}
</script>

Ember.js's code looks somewhat similar to that of Backbone.js, and it's no surprise that a lot of seasoned Backbone.js developers find themselves migrating to Ember.js, as their needs for more robust solutions increase. Ember.js uses familiar items, including views, models, collections, and routes as well as an Application object.

Additionally, Ember.js features Components, which is one of its more powerful and beloved features. Giving a sneak preview of the future of the Web, Components allow you to create small, modular, reusable HTML components that you can plug into your application as needed. With Components, you can basically create your own custom HTML tags that look and behave exactly how you define them, and they can easily be reused throughout an application.

Developing with Ember.js is all about convention. Unlike Backbone.js, Ember.js tries to get a lot of the boilerplate out of the way and makes certain assumptions for you. Because of this, you need to do things a certain way, and controllers, views, and routes need to follow a somewhat strict pattern with regard to naming conventions.

The Ember.js website features incredible online documentation and getting-started guides. If you're interested in learning more about Ember.js, check it out at http://emberjs.com/guides/.

Also, don't forget to take a look at the TodoMVC implementation!

AngularJS exploded onto the scene because of the simple fact that it's built by Google (it is open source). AngularJS is basically like putting HTML on steroids. The applications and pages that you create use regular HTML that we're all used to, but they include a number of new and custom directives that extend the core functionality of HTML giving it awesome new power.

Another great feature about AngularJS that has seasoned non-Web developers flocking to it is that it is built from the group to be heavily tested and supports dependency injection. It's a framework that makes creating sophisticated web applications not feel like traditional web development. This is an extremely robust framework, clocking in at the largest file size of the three we're looking at with 111 Kb of compressed production code:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/.../angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

You can see by the sample code provided that no custom JavaScript was written at all. Yet the page features real-time data binding between an input field and an h1 tag. This is stock power and functionality right out of the box, and a demonstration of the extended nature of regular HTML that AngularJS provides.

Make no mistake, however, that JavaScript still plays a huge role in the development of AngularJS. AngularJS features controllers, models, and routes as well as many more features.

Learn more about AngularJS by visiting its website at http://angularjs.org.

And take a look at the TodoMVC implementation as well!

Frontend frameworks have recently taken on somewhat religious undertones. Post a negative comment or criticism about a particular framework and it's likely you'll get blasted by its supporters. Likewise, talk positive about a particular framework and, again, it's likely you'll get attacked about how much better a different framework handles the same topic. The bottom line when deciding which framework is right for you and/or your project is typically going to be about personal preference. Each of the frameworks featured on the TodoMVC website can clearly accomplish the same goals, each in its own unique way. Take some time to evaluate a few and decide for yourself!