Before reading this post, just let you know that it could be very long post. If you don’t like to read, just scrolling down to the end of post because I put the stuff for evaluating JavaScript frameworks there. Using it to make the decision for your own with your own risk or read the post from beginning. It’s surely that evaluating or comparing the powerful of certain JavaScript framework with other ones needs a lot of effort. At least, you must answer yourself some questions for gathering the information.
1. Which frameworks that to be compared ?
The previous posts mentioned about AngularJS, EmberJS, BackboneJS and KnockoutJS. All they are well known, always appearing the top results for Google search. In this post, I will present one more candidate – CanJS, it just attracted me for couple days because of it’s very easy for understanding. Someone advise me that bring Meteor and ReactJS/Flux to the list, but it’s not fair as Meteor is complete platform which more widely than frameworks. ReactJS/Flux is just a library, along side with Flux as its architecture.
2. Which factor to be used for evaluating ?
A lot, but the popular factors are features, maturity, community, size, performance, testing, license, dependencies …
3. How do we evaluate the framework with other ones ?
“Use the force, read the source”, as analyzing on Part 2. How ever, we will dive into the features rather than statistic. Maturity should be considered by Github, Stack Overflow data, because of reflecting the powers of community supports. Size is not important much for web desktop development, but mobile web.
The challenges are now I am not expert with all candidates, except Angular, Backbone that I have experience before, but nor Ember and Knockout.
Dive into analyzing factors
Maturity
Angular
- Google productions such as YouTube on PS3. Nike, Huffington Post and many more use Angular already.
- Very good documentation, examples
- API not stable, Angular team release several minor releases and hot fixes.
- Growing fast with large community support.
Backbone
- Used by Bitbucket, FourSquare, USAToday, DocumentCloud …
- APIs is very stable
- A lot of example along with notation source codes.
- A lot of watcher on Github
Ember
- API only turns into stable since 1.0
- A lot of examples
- Good documentation
- Yahoo, Groupon, Zendesk, Square are using Ember for their products.
Knockout
- Great documentation including jsfiddle like examples
- Stable API
- A lots of examples.
- A lots of watchers on Github
- A lot of application on production, including best well-known jsfiddle.net
Size and dependencies
| |
Web |
Mobile |
| |
|
Size (Kb min + gzip) |
|
Size (Kb min + gzip) |
| |
Angular |
33 |
Angular |
33 |
| |
angular.js |
33 |
angular.js |
33 |
| |
Backbone |
44.8 |
Backbone |
22.4 |
| |
underscore.js |
5.4 |
underscore.js |
5.4 |
| |
backbone.js |
6.8 |
zepto.js |
10.2 |
| |
jquery.js |
32.6 |
backbone.js |
5.6 |
| |
Ember |
111.4 |
Ember |
78.8 |
| |
ember.js |
64.6 |
ember.js |
64.6 |
| |
handlebars.js |
14.2 |
handlebars.js |
14.2 |
| |
jquery.js |
32.6 |
|
|
| |
Knockout |
58.7 |
Knockout |
36.3 |
| |
sammy.js |
6.6 |
sammy.js |
6.6 |
| |
knockout.js |
15.7 |
knockout.js |
15.7 |
| |
knockout.mapping.js |
3.8 |
knockout.mapping.js |
3.8 |
| |
jquery.js |
32.6 |
zepto.js |
10.2 |
Ecosystem
Angular – http://ngmodules.org/ – 1488 modules
Backbone – http://backplug.io/ – 256 plugins
Ember – http://www.emberaddons.com/ – 1157 addons
Knockout – https://github.com/knockout/knockout/wiki/plugins – 65 plugins
Features
Framework features is the most important factor for making decision. It provides the necessary foundation to build useful applications. Framework features can come from development team, or project requirement.
Observables: The ability to track the changes on object (Model).
- Backbone allows developers to extend their JavaScript model classes from a base model type and access all properties via .get() and .set() methods so change tracking can happen and events can be triggered when the model changes.
- Knockout has the developer apply observable wrappers around plain old JavaScript objects and then has developer access properties via object.propertyName() syntax (notice the parentheses).
- Angular does dirty checking on all bound DOM elements on the page since there are no standard get/set method. Dirty checking means developers must concern about performance that could be happen on large page.
Dynamic routing: When the url changes, framework should able to detect and act according this changing.
Knockout does not support routing as itself, but developer has several options to use routing via Sammy.js or history.js, pager.js
View bindings: The view automatically refreshes/re-renders when objects in the view change.
Two way bindings: The change automatically update in both UI/binding values when another changes its value.
Partial views: a sub-view that to be embedded in primary view, so we can reuse partial views across multiple views.
Filtered list views: the views can be filter according certain criteria.
View template: The client-side JavaScript model data binds with HTML to build the content. Most of JavaScript frameworks support 2 types of template String-base and DOM base
String-based templates take string or text templates and replace the dynamic parts with data from models
DOM-based templates embrace the declarative nature of mark-up and create an html on steroids experience where html is annotated with additional attributes to describe the binding and events needed.
Productivity
JavaScript framework that makes developers more productive is able to deals with cross-browser compatibility (see browsers compatible) and makes the application more productive, provides the potential for reusable components and reduces the amount of code that needs to be manually written.
Angular is difficult to learn and may require developer to structure source code in a particular way. It provides dependency injection, ajax, routing, cookies, promises and much more…
Backbone is flexibility as it is the one with the least conventions and opinions. However, it may require developer to write a lot of boilerplate code which reduces developer productivity.
Ember allows developer to wrap all of repeated pieces of code inside components. Ember believes in conventions over configuration, so it can get lot of things done if we follow its naming convention.
Knockout support both DOM and Text based templating, that more flexible for developer who get familiar with one before. Knockout is targeting to data-binding mainly, so if we want to use it as full-fledged framework, we should choice anther its implementation as DurandalJS
Testability
The framework that supports modularity and dependency injection is most suitable for writing Unit test.
Modularity is that code can have small pieces that can be tested in isolation
Dependency injection is able to change dependencies in tests
Angular is the best framework for testing, with the core supports both modularity and DI, also support mocking controller and directive dependencies. The latest version supports E2E test via Protractor which launches application in a browser and interacts with it via Selenium.
There are many test frameworks and tools available to the Angular developer, brings the great flexible options.
Backbone was not built with testing capability. Developer must spend effort to create tests via third party solutions such as Jasmine, SinonJS.
Ember is designed with testing as a core part of the framework and its development cycle. Ember supports well for both integration test and unit test.
Knockout was not built for testing in mind, in which developer could spend much effort to writing test or make their code to be testable. Like Backbone, testing should be done with third party solutions.
Performance
Runtime performance is the most considering factor for making choice framework. This section will use the result from testing TODO MVC projects which implements same application, but across a wide range of popular JavaScript MVC frameworks.
Backbone version: http://todomvc.com/examples/backbone/
Angular version: http://todomvc.com/examples/angularjs/
Ember version: http://todomvc.com/examples/emberjs/
Knockout version: http://todomvc.com/examples/knockoutjs/
Four applications above which implemented by certain framework will be tested and measured by WebpageTest http://www.webpagetest.org/
Which one is the best ?
Angular and Backbone are both considered as the best for initialing a new project. The fact that you can not just pick the best one by its features or large community. If your project needs to work for all various Browsers, even if very old browser like IE6, AngularJS is looser since it just support modern Browsers. So you should not look up for “the best”, but for “the most suitable” for your project.
If you can not make the decision, or get confusing … you can do the more challenging and interesting ways – build your own framework 🙂
Lam Do's Weblog 