The Battle of Modern Javascript Frameworks – Part I

Posted April 10, 2013 by Bradley Trager and Roman Kagan & filed under Javascript Libraries.

Part II – Knockout.js

Knockout is the simplest of all the frameworks as well as one of the smallest. It does not claim to be able to solve all your problems, but it does claim to do a few useful things (see “features” below) and do it better than the alternatives. In the words of Knockout creator Steve Sanderson, it is “low risk” because its uses are focused and it is compatible with any other technologies you are using and you can use it in a very small part of your application or your entire application. For someone who wants to take their project to the next level without too much risk, knockout is a great choice.

Features

-Model-View-ViewModel architecture
-Tracks changes in your data by wrapping all your variables in an “observable function” creating a dependency graph which automatically controls the flow of events when something changes in your application.
-DOM or String-Based Templating for modularizing view and rendering them programmatically

Strength of the Project and Community

The Knockout project was released by Steve Sanderson (who is now on the Microsoft ASP.NET team) back in 2010 before he came to Microsoft. Since then a second version has been released, there have been a number of plugins written for it, Microsoft has incorporated intellisense support for it into Visual Studio 2012, and developers Michael Best and Ryan Niemeyer have joined the core Knockout.js development team. As a rough estimate of the size of the community, there are currently 3,533 people who have starred the KO GitHub repository, and 5,055 stack-overflow questions with knockout tags.

Ease of Learning

The documentation for knockout is probably the best we have ever seen. It has an amazing interactive tutorial system, live examples, and the documentation is extremely comprehensive and easy to understand. For most developers already familiar with javascript it should not take more than a few days to get up and running.

Compatibility and Extensibility

Knockout is compatible with any back-end technology and on the front-end it does as much or as little as you decide. Knockout purposely leaves many decisions to the developer to decide letting developers pick the best tool to meet their specific needs. Knockout has no opinion about how you communicate with the server or how you choose to do routing, but there are several third party libraries that do a fine job of these things (like sammy.js for routing and upshot.js for data-access). Knockout is one of the only frameworks that actually offers support for IE 6 if that is something you are interested in. It goes without mentioning that it works fine next to JQuery. Knockout is easily extensible. To modify or extend the default functionality, Knockout offers a features like custom bindings, and custom functions. As mentioned above, there are also several plugins already written for knockout.

Testing and Debugging

As of now, we have not seen any specific debugging tools for knockout, but it works fine with Javascript testing tools such as jasmine. Since knockout uses dependency injection, it is well suited for unit testing. Console.log() is handy, and knockout also offers a function ko.toJSON() which converts a KO view model to JSON and can be bound to a text area somewhere on the page so that developers can see in real time how their data is changing. For testing and prototyping, we find that it is easy to use implement knockout applications in jsfiddle.

Pros

-Highly compatible with other 3rd party js libraries
-Easy to learn and use
-Dependencies are handled through a dependency graph which targets specific data as opposed to updating entire models when data changes like in Angular.js. This may increase performance in data-heavy applications compared to “dirt checking” which Angular uses (but see this post on Stack Overflow which defends Angular’s approach).

Cons

-All javascript variables and arrays are functions (aka KO observables) as opposed to angular which can be a little confusing at first for some people. But it should be noted that all native javascript array functions like splice(), indexOf(), push() etc. are implemented by Knockout and may be used on KO observables.
-HTML views can get messy as declarative bindings increase. This can be mitigated to some extent through the use of custom bindings, computed observables and by attaching events to the DOM using JQuery (see Unobtrusive Event Handling) instead of using the data-bind attribute.
-Additional functionality like data-access and url-routing are not included. If you are looking for an end to end solution that offers a complete toolbox of common web-app functionality, you should probably check out frameworks like Angular or Ember.

Part III: Backbone.js

Right now Backbone.js is probably the most popular as well as simplest of the modern javascript frameworks. As its name describes, it main goal is to give a nice MVC structure to your javascript code. Backbones goal is to clean up your code by organizing all your data and event handlers into javascript objects. This way, events can be triggered whenever your data model changes thereby avoiding a lot of messy JQuery selectors and event bindings. It also has nice features for accessing data through RESTful APIs and URL routing. Other than that, Backbone tries to leave as much as possible up to the developer.

Features

-MVC style architecture for organizing your code
-Models and collections which can be persisted through a RESTful API
-Views which can automatically update by listening for changes in your model
-An optional routing system to define states of your app for single page applications

Strength of the Project and Community

Backbone.js has been in development since 2010 and in March 2013 just released version 1.0. It has one of the largest community of all the Javascript frameworks with rough indicators of 13,623 stars on GitHub, and 8,209 questions on stack-overflow. Many well known projects are using Backbone in their apps like DocumentCloud, LinkedIn Mobile, Walmart Mobile, Groupon, and CodeSchool just to name a few.

Ease of Learning

On one hand, backbone is a relatively simple library. If you go to their website, you will find a link to the annotated source code, which shouldn’t be hard for the average developer to read and understand. On the other hand, backbone has several concepts (e.i. model, collection, view and router), and the documentation is not as extensive as knockout or angular for example. Also, inexperienced programmers could quickly get into trouble if they are not aware of proper conventions when using backbone.js. Backbone also relies heavily on underscore.js, so it is necessary to learn underscore first or pick it up along the way. From our own experience and hearing other stories, it takes longer to get up and running with backbone in comparison to knockout. On the other hand, even though the concepts in backbone may be difficult to grasp at first, once you get it you will not need so much time to discover the rest of its functionality.

Compatibility and Extensibility

Backbone like knockout does not force you to do anything in a particular way. It is great for those who prefer to make their own decisions on the lower level. It basically just gives you a nice MVC type structure for your javascript. Yes, it offers solutions for routing and data-access, but if you prefer to do those things differently, it is up to you. It can work in a small part of your application as well as the entire application.

Testing and Debugging

There seem to be some plugins written to help debugging, but we have not used them so we cannot comment on how useful they are. We have seen that people using Jasmine to run unit tests in backbone. In general, we find that backbone can be relatively difficult at times to debug.

Pros

-Relatively mature, proven framework with a strong community behind it
-Many extensions and scaffolding tools available
-Flexible, works fine for a new project or improving an existing one

Cons

-Lacks data-binding
-Requires a large amount of boiler-plate code
-Could be dangerous if programmers do not follow proper conventions

Part IV: Angular.js

Angular.js is the first framework that officially calls itslef a framework as opposed to knockout and backbone which actually refer to themselves as libraries. Angular claims to be great even for small local applications, but it is probably better suited as a foundation to base a whole new project on. Angular seeks to combine a complete toolbox for building dynamic single page web apps. It is relatively fast to produce applications, and requires less boilerplate code in comparison to backbone.js. As co-creator, Brad Green claims that at google, angular was used to write an application in three weeks that previously took 6 months, and since then many have had similar experiences.

Features

-Data binding (Uses “Dirty Checking” instead of Change Listeners. See this post on Stack Overflow.)
-Dependency injection
-DOM-based templating
-Routing and Deep-Linking
-Model-View-”Whatever” architecture
-Built it form validation
-Data persistence methods that work with RESTful APIs
-Web Components or “Directives” (Define your own HTML syntax)

Testing and Debugging

This is one area where Angular is outstanding. Angular comes packaged with built in testing tools, and there is a list of other tools available. Batarang is an extension for chrome that monitors your app’s model and measures your app’s performance. As we find by the rest of the frameworks, jasmine works, but there is also a plugin testacular (spectacular test runner) which allows you to run jasmine test on multiple browsers. Yet another extension available is Angular Scenario Runner which automates testing by simulating user interactions. Finally, since Angular uses dependency injection, it makes it ideal for unit testing.

Strength of the Project and Community

Angular was initially developed internally by Google, and now that it has been open sourced, Google continues to support its development. Angular has 8,523 Stars on GitHub, and 4,239 questions on stack overflow.

Ease of Learning

Angular is certainly more complex than knockout and backbone. It surely requires a bigger time investment. With that said, we feel that getting started with Angular is rather easy especially if you are familiar with knockout since the data-binding features are used in a very similar way. Angular also has comprehensive and well organized tutorials with plenty of examples on there website.

Compatibility and Extensibility

As far as compatibility goes, Angular can function in a particular part of your application so it does not get in the way of other frameworks you may be using. Angular is more abstract than knockout and backbone, it makes more decisions for you behind the scenes so that you can write less code, but this inevitably makes it harder to customize on a lower level. On a higher level, Angular gives the developer an API with extensive options.

Pros

-Uses primitive javascript types instead of function wrappers (“dirty checking”)
-Loaded with functionality
-Easy to get started
-Fast development and smaller amounts of boiler-plate code compared to backbone
-Makes testing easy and offers many testing tools
-Working with standards bodies to make browsers operate in the same way as angular

Cons

-Takes longer to learn than knockout and backbone
-Has not been proven in as many mainstream projects compared to backbone.js

Part V – Ember.js

Ember as it is described by its creators is ambitious and opinionated. The goal of developing ember is simple; create a web framework that will enable web apps to rival native apps. To accomplish this, ember offers an end to end solution with all the features you need to create a single page web app functioning in unison. Ember also seeks to abstract as much as possible from the programmer in order to take care of all the small decisions that programmers would otherwise have to make. Therefore, it is also opinionated about how certain things should be done including how you name your objects, and how you organize your files. Ember is also ambitious in the sense that one should ideally use ember for “ambitious” projects where the goal is to produce an outstanding web app that will have the feel of a native app.

Features

-Sophisticated handlebars templates
-Views that respond to events
-Routing for representing the state of the model and view in your application and enabling deep linking to return to a particular state
-Models that are persistable with a REST api
-Controllers which produce computed properties from the model and pass it to a view
-API for performing operations on Enumerable objects

Strength of the Project and Community

Ember’s development is lead by Yehuda Katz and Tom Dale. Yehuda Katz is also on the JQuery and Ruby on Rails core teams. As a rough indicator of community size, there are currently 351 questions on stack overflow. 6,676 stars on GitHub. Ember just recently released its version 1.0, and before that was undergoing a good deal of changes. But despite the turbulent state of ember, several companies decided to take the plunge into using ember as their client-side framework. Ember data is still not in its version 1.0 state, and it does not yet ship together with ember.

Ease of Learning

The documentation for Ember, though not as impressive as that of Knockout or Angular, is quite comprehensive and easy to go through. There is a 30 minute video demonstration to get started, and then a complete development guide full of examples. Ember certainly has more concepts to understand than knockout and backbone, but getting started is relatively easy.

Compatibility and Extensibility

Since Ember uses handlebars for templating, it should be possible to plug-in any 3rd party plugin for extending templates. Out of the package, ember offers custom helpers for use in templates and the REST adapter for controlling how your application handles requests to the server. If you need to integrate ember with 3rd party libraries, you may need to set embers “EXTEND_PROTOTYPES” option to false. In this case you will have to manually tell ember to extend your objects by wrapping them in what ember calls convenience methods.

Testing and Debugging

Like the other javascript frameworks, developer tools like chrome web inspector work great for debugging ember (see this great debugging demonstration by Tom Dale). Ember also works with jasmine for unit testing. One useful tip for testing the routing in an app is to specify the “LOG_TRANSITIONS” option when you instantiate your app as follows.

App = Ember.Application.create({

  LOG_TRANSITIONS: true

});
Unlike Angular, Ember does not currently come with any built in testing tools.

Pros

-Sophisticated templating for managing more complex views
-Can quickly and easily convert a multi-page site into single page app using the routing feature
-Fast development, easy to read markup, smaller maintainable of code
-Full-featured
-Easy to get started

Cons

-Relatively new framework (v1.0 just released)
-Ember Data is not yet at v1.0 so it is separate
-Lacks custom HTML tags like directives in Angular
-Lacks extensive testing tools like Angular
-Doesn’t integrate easily with 3rd party libraries

Conclusion – Which One to Choose

On one hand, each javascript framework has its unique advantages and it is reasonable to say that each one has its place in web development. On the other hand, these frameworks have a similar goal. They are all excellent frameworks and there will certainly be a place for each one as web apps continue to become more and more sophisticated. The factors that determine which one you choose will be based on a combination of your projects needs and your personal preference of how you as a developer like to accomplish things.

Knockout

For a small project or improving an existing project knockout is a great choice. It is simple to get started with and integrates nicely with other 3rd party libraries. And if you decide at some point that you need a more powerful framework like Angular or Ember, you will already be ahead of the learning curve since they all use data-binding in a similar way. If you want to keep knockout you can easily add things like routing and data-access features through a number of third party libraries.

For larger projects knockouts view model could start to get a bit complicated because computed data is not separated nicely from persistable data, and increasing numbers event handlers may become hard to keep track of.

Backbone

If you are an experienced javascript programmer looking for a mature, proven framework that provides MVC architecture to your code while maintaining as much low-level control as possible and offering easy REST api data access plus routing, backbone would be a good choice. For larger scale projects, or if you don’t like writing so much boiler-plate code, the plugin marionette.js could be helpful.

Angular

If you need a fully loaded framework that seeks to rival native apps, reduce the amount of time and code it takes to write a web app, and you can handle a somewhat steep learning curve Angular or Ember would be a good choice. It is very hard to choose between Angular and Ember as the both seek to do similar things.

Angular has appeal in the fact that it is backed by Google, it is somewhat more mature, and it offers some interesting features like custom HTML directives and integrated testing tools. It is also easier to localize it to run in specific areas of your app to avoid conflicting with other javascript libraries you are using elsewhere.

Ember

Ember like Angular is a fully loaded framework that seeks to rival native apps and reduce the amount of time and code it takes to write a web app with an even steeper learning curve than Angular. Some developers may prefer Embers style since it is modeled after the Cocoa framework in iOS development making it similar to programming native apps.