Posted on by & filed under Content - Highlights and Reviews, Programming & Development, Web Development.

With the ubiquity of the Web, more and more applications are being developed for execution within the browser, i.e. web applications. A newer generation of web apps need to emulate the ‘look and feel’ and functionality of desktop applications. The traditional tools and libraries available for web development fail to provide the abstractions necessary to build such rich-client applications. This need has led to the creation of a whole breed of newer frameworks designed specifically to solve this problem.

Enter the modern JavaScript MVC frameworks. These include Backbone, Angular, Ember, and Knockout, among other frameworks. While these frameworks are not strictly based on the Model-View-Controller pattern—they often use a variation such as Model-View-Presenter (MVP) or Model-View-View-Model (MVVM)—they are based upon the traditional MVC paradigm. In this article we will briefly cover four of the most common frameworks, namely Backbone, Ember, Angular and Knockout, in an attempt to highlight the different choices available to developers for building web applications.


Backbone is a lightweight JavaScript library that allows code to be organized into Models, Views and Collections. Backbone is referred to as an MV* because it does not have the concept of controllers. Rather the functionality of controllers is spread across views and models. This loose coupling enables applications written in Backbone to use any variation such as MVC, MVP or MVVM for organizing code. For more about MVC and Backbone.js, read this section in Developing Backbone.js Applications by O’Reilly Media.

Another key concept in Backbone is that of Events. Events are used to signal change of state between objects and this enables loosely coupled objects to interact with one another. For example, a ‘view’ can listen for changes in a ‘model’ object as:

The code above binds the event of change of the model to the modelChanged function and whenever the model is changed, this function will be invoked.

Backbone offers many other features that are documented at its official website


Ember is another MVC framework for JavaScript that is more tightly coupled than Backbone. Ember allows developers to structure their applications using five concepts: Models, Views, Controllers, Templates and Routers. Models and Views provide roughly the same functionality as in other MVC frameworks. The Controllers in Ember allow multiple Models to be grouped and managed together. Templates provide for a means to write snippets of HTML that are to be used to construct the views using a templating language called Handlebars. This avoids long, spaghetti code using jQuery to construct views by manipulating the DOM. Finally, Routers enable ‘state’ to be associated with the application, thereby providing different views for different states.

Unlike Backbone, Ember is much more tightly integrated and offers developers a standard architecture for structuring applications. It is more suited to larger applications with complex UI requirements. More information about Ember can be found at


Angular.js is a JavaScript framework that can help you write web applications quickly using less code. Angular.js is not a library, and it is not a collection of tools to help you achieve a specific goal. It is, however, a different way of thinking about writing web applications. In the vanilla JavaScript world, you are given a blank canvas on which to paint, but Angular.js provides structure, organization and patterns. Angular.js is very good at helping you write CRUD (Create, Read, Update and Delete) appliations, since its tools, abilities and limitations lend itself to this common scenario. More information is available at


Knockout is yet another library that provides a Model-View-View-Model (MVVM) framework to web developers. Key features offered by Knockout include declarative bindings, dependency tracking, automatic UI refresh and templating. Take a look at the creation of a Knockout app here in KnockoutJS Starter by Packt Publishing. Declarative binding is particularly a handy feature. For example, the following code demonstrates how ‘first name’ and ‘last name’ can be declaratively bound to a model using Knockout:

Using the data-bind attribute, Knockout is able to bind the AppViewModel with the corresponding tags.

More information about Knockout is available at


There is no shortage of choice when it comes to frameworks for web development in JavaScript. We quickly went through some of the choices to demonstrate the variety available. There is no one correct choice, and the unique requirements of every application must be kept in mind when deciding on a framework.

Safari Books Online has the content you need

Check out these JavaScript books available from Safari Books Online:

If you’re looking to use the single-page application model to build your site’s frontend, Backbone.js is an ideal framework for the job. Developing Backbone.js Applications provides all the information you need to create structured JavaScript applications using Backbone.js and its unique flavor of the model-view-controller (MVC) architecture.
Knockout is a JavaScript library that allows developers to create rich, responsive display and editor user interfaces with a clean underlying data model. It’s a JavaScript MVVM library to help you create rich, dynamic user interfaces with clean maintainable code. The KnockoutJS Starter guide pulls from real-world professional app development experiences and brings those to readers in a way that is easy to understand. It works through practical examples in order to showcase both the power of the KnockoutJS library, and illustrate best practices when developing apps.
With Learning JavaScript Design Patterns, you’ll learn how to write beautiful, structured, and maintainable JavaScript by applying classical and modern design patterns to the language. If you want to keep your code efficient, more manageable, and up-to-date with the latest best practices, this book is for you.
Take your web development skills from browser to server with Node—and learn how to write fast, highly scalable network applications on this JavaScript-based platform. With Learning Node, you’ll quickly master Node’s core fundamentals, gain experience with several built-in and contributed modules, and learn the differences and parallels between client- and server-side programming.

About the author

Shaneeb Kamran is a Computer Engineer from one of the leading universities of Pakistan. His programming journey started at the age of 12 and ever since he has dabbled himself in every new and shiny software technology he could get his hands on. He is currently involved in a startup that is working on cloud computing products.

Tags: Angular, Backbone, Ember, Javascript, Knockout, MVC, MVP, MVVM,

One Response to “Web Application Frameworks for JavaScript”