[JavaScript framework wars] May the force be with you

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



  • 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.


  • 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


  • API only turns into stable since 1.0
  • A lot of examples
  • Good documentation
  • Yahoo, Groupon, Zendesk, Square are using Ember for their products.


  • 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



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


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.


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


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.


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 🙂



[JavaScript framework wars] Use the force, read the source

As I mentioned in previous post, I would believe that Stack Overflow and Github could be the best resources for my concern that how is popular enough for the data to be representative. Stack Overflow could show me the number of questions with or without answers, because it indicate how the framework to be supported as well. The number of questions also indicate which framework is most used. Github – the coding social network that can show you the number of projects, and the number of stars on a project is indicative of popularity.

Github is the most popularity repository where you can find a huge number of OSS projects. Performing some basic stats about these projects could give us an overview that how Github users working for specific JavaScript framework, or track their issues  … We also know that most JavaScript frameworks are hosted on Github too, so we can look into the number of commits, repos,  it could give us some further insight into the stability of the projects.

Stack Overflow – where you can post various questions about programming. This site is more interactive, more social than any forum. The question, solution can be qualified by voting, de-voting. Looking into Stack Overflow statistic data that always tell you which JavaScript framework is most concern.

Finding statistic data on Github, Stack Overflow is simple than ever, because they are providing API, or querying capabilities right there on their site. But I prefer to use API rather than query data just by I am not an SQL expert, and I am going to made an application that does statistic on Github and Stack Overflow. But if you want to use queries as your favorite one, let’s try with some questions with querying capability on Stack DataExchange/Overflow

How many post that mentioning about AngularJS ?

SELECT COUNT(*) from Posts P
 SELECT DISTINCT(PostId) from PostTags 
  WHERE PostTags.TagId In ( 
    SELECT Id From Tags Where TagName LIKE '%angular%') 

At the moment, the query return 104292 posts. So I tried with various tags as ‘backbone’, ’ember’, ‘knockout’ , …

AngularJS: 104292 posts

Backbone: 18213 posts

Ember: 25169 posts

Knockout: 14113 posts

These numbers can tell you which framework is most concerning or most used.

Using the API that returns JSON and needs some extra steps to end up your statistic because the formatting of return values. You can make your own request as below which returns the number of questions about “angularjs” from 1, January 2012 until now.


Considering a framework that it should have a large support from community. We might think the number of posts or questions that have answering would reflect the well support. So we make the question like “how many questions about angularjs, ember, knockout, backbonejs that have accepted answers”

AngularJS: 53150

BackboneJS: 10918

Ember: 14947

KnockoutJS: 94

The number for knockoutjs is unbelievable, but interesting. The result above tells us that AngularJS is owning a large community support, chasing by Ember and Backbone.

Now, let’s take a look on Github which targeting to 4 repositories AngularJS, BackboneJS, KnockoutJS and EmberJS. So lucky that these repositories has some statistic with charting, mean why we will not take serious with calling APIs.

Framework       Stars     Watch     Fork      Open    Closed

AngularJS             3872        619            993          298        1046

BackboneJS          22244     1621          4968        13           2061

EmberJS               14133       1132          3025        427        3311

KnockoutJS          6530        590           1130         164        1098

The statistic on Github gives a very limited numbers for AngularJS, it’s normally because Google just put AngularJS to Github since 2014, why BackboneJS had the first commits in 2010. You can get the general information about specific frameworks by calling these APIs.

BackboneJS – https://api.github.com/repos/jashkenas/backbone

EmberJS – https://api.github.com/repos/emberjs/ember.js

AngularJS – https://api.github.com/repos/angular/angular

KnockoutJS – https://api.github.com/repos/knockout/knockout

You can example your own data, just spending a hour with Github APIs. I am sure that you will find many interesting things here.

Statistic application, why not ?

By the time finishing this post, I just started implementing statistic application that tracks the github and stack exchange api about these specific JavaScript frameworks. So this post might be updated by some factors (charts, data tables …) lately.

The next post, I will talk about framework featuring that help us to consider which framework is suitable. May be the next post would be marked as “TL, DR” 🙂

[JavaScript framework wars] The phantom of MVC

Since I was a student, the term “MVC” would be the most of popular words that repeat over and over from my friends and my lectures. They could talk all day about “MVC”, but did nothing else as putting the codes into certain folders M, V, C. Starting working as Flash Developer at Pyramid Consulting and the term “MVC” was haunting me once again. All the ActionScript project should (or must) be implementing strictly as “MVC”. The beginning of MVC framework for me as when we met “PureMVC” that solving several questions and concerns that we never known before. It showed how M-V-C parts working together, communicating with notification … That was fantastic emotion !

“PureMVC” turned into our standardize framework until its alternative “cairngom” appears. This alternative stuff not only offered us “MVC” but also “DI”, “Unit Testing” – the stuffs that we only seen in Java world. For years lately, we had more choices since Flash was on the peak of trending, but Flash was mostly focused for online gamings and the frameworks borns as suppose for game development.

For now, we all know Single Page Architecture (SPA)  using AngularJS, BackboneJS … but don’t we know that Flash Web had played very well on SPA battle fields ? We enjoyed fullscreen websites, and experiment pages transition without refreshing, sounds, 3D, augmented reality … So my wondering was that something ables to replace ActionScript/Flash must offer us the same stuffs as ActionScript/Flash did.

As ActionScript, JavaScript  says “hello world” without “MVC” as its first library jQuery that offering DOM manipulation, animation … HTML web is to create with its own way, slicing psd to html/css, then embedding JavaScript As I mentioned above that “pureMVC” as first offering “MVC” to ActionScript, it’s also offering “MVC” to JavaScript and opened our mind for first SPA HTML/JavaScript stuffs. Flash/ActionScript has stopped their steps and gave its way to HTML5/JavaScript, this chance opens new opportunities for the born and develop of JavaScript frameworks (hold a sec, that makes me think about the death of dinosaur …). Have you ever answered yourself that how many JavaScript frameworks are there ? Find your own at “TODO mvc“. Seriously, then several questions come to you now.

– Which one is the best suitable for me ?

– Which one that I should pick up for starting ?

– Which one is suitable for mobile development ?

– MVC and MVVM, which one is right for me ?

While you’re sinking with those questions, don’t you realize that you’ve just joined the war – the war of making choice your suitable framework. The fact that you would not be alone, because not only you but several developers get confuse with a ton of frameworks. By this time, I am in charge to pick up the right framework for my organization. We have several kinds of projects and we must pickup the right one with ensuring less risk, but most suitable for maintenance. Once again, I must face my face with the phantom of “MVC” but now it’s not seriously because “MVC” has been became the most popular pattern, or set as standard of JavaScript frameworks.

The war was out there, but just happening to me. I must choose my side, or do compromise. The next post that I will perform some statistic, queries from Stack Exchange that how developers on the world choose their own framework. That may give us an overview for a big picture.

Sharing common libraries and own modules between multiple angularJS projects

I have multiple projects that I’ll develop using AngularJS, but targeting to web and phonegap at a time. The problem is that I have shared/common UI components (services, controllers, filters …) between these projects for reducing maintenance effort. All the projects will have their own modules with specific functionality. But technically we have to bring the common modules into each project (without copy-pasting them, obviously).

This scenario is to assume that your project could be large, and many small teams could work together at a time. Sharing common things that could prevent the code missing from updates, but it produces less DRY code and does not violate KISS principle. As I do mention about sharing common codes that this part should be far away from recent requirement changes … If the changes alway happen among the teams, sharing common things could be a nightmare.

My inspiration comes from developing application with Sencha ExtJS. This framework is awesome in separating the application into multiple targeting such as web, phone, tablet. It’s about the structure source code, and build process that collects appropriate codes that matching target devices.  With AngularJS projects, we can share the common libraries with bower, using module to split application into several profiles (phone, web …) or you know that you can have multiple ng-app in one prject. Grunt is the best tool for developing your own build process.

From beginning, I cloned the angular-seed project, start to modify it with multiple profile. It’s easy that you just create new folder ‘profiles/phone’ and ‘profile/web’ and copy the ‘view1’, ‘views2’ modules for both. Don’t forget app.js, app.css …  At this point, you have 2 application that share bower_components,  components as well. You can start the server and see them working separate parts of a single large web application. It should be worry that we could public all the things to user, but we don’t do that because the source should be minified and deployed for separated target.

To create the build for phonegap, I have the idea that is to collect the code from bower_components, commons, components folder, and profiles/phone . All the JavaScript code, css and html resource will be minified and copied into www folder in phonegapp package. So the most important here is grunt task, no more specific technical stuff. The same idea for web targeting, and grunt task would deploy this part to appropriate location.

I posted my solution to github, with detail instruction in readme file. All they’re kept to be update, since I am getting several feedback by my technical team. This simple solution have challenged many developers for a while, because of not deeply understanding on Front-end architecture. So, just a K.I.S.S 🙂

Isomorphic Web Application – AngularJS is possible loser by ReactJS or my MEAN stack confusing story


I am Google Fan – but seems never interesting with AngularJS.

I am anti Facebook – but seems getting interested with ReactJS.

I have been working with Java as primary server side technology, JavaScript by NodeJS seems like an alien to me

This article is not introducing about reactjs, nor comparing angularjs with reactjs

isomorphic web application

If you want to understand about isomorphic web application – visit isomorphic.net because of shorten explanation, a lot of useful articles, links …

By 3 years, nothing else attracting me than the term “isomorphic web application – iwa”. This term is new to me, along with SPA (Single Page Application) that I have been working on for a year. The fact that most Web Development Companies in Vietnam are now interesting with MEAN stack, requesting developers must be familiar with AngularJS, NodeJs … Most Technical Leader telling much about NodeJS, despite of their explaining is about building an eco JavaScript application – both server side and client side that implementing unique JavaScript, but the confuse is while JavaScript can be executed by server side, why do we keep continue using it in client side ?

AngularJS is complete MVC framework, but needs DOM elements to bootstrap, renders HTML page. I used to wonder that pull down AngularJS running in server side, but so painful that no DOM elements within server side (do not mention phantomjs – it’s about different context, story …)

Routing – for the most MVC frameworks like Spring, Playframework, or RoR … developers are easily to recognise that happens in server side code, but weird in client side. The MEAN stack is offering both routing for client side (AngularJS) and server side (ExpressJS). Imaging that your developers discussing about routing but not determine which side.

As usual, the pipeline to server a page should be: route -> fetch -> parse -> render

The MEAN stack pipeline: route (server) -> fetch (server) -> parse (server) -> render (client) -> route (client) -> render (client – actually renders DOM). The server side could be executing one time for application lifecycle, why wasting effort to do server side routing ?

Isomorphic is a big deal, not for routing but also aiming view, data, event handling (see the discussing), developers who wanting apply ReactJS/Flux should consider about isomorphic web application.

[Automation] Who should write the automated tests ?

Starting involve deeply into automation test. Thought it’s more challenge than coding. My conclusion:
Automation test is for developer, not for tester. Since only developer knows about classes, IDs, data work flows. Of course, developers have their own big picture about application.
Almost Manual testers cannot perform coding, or their code could be harder for understanding than typical developer.
Agile produces more changes than ever process, so only developer can produce both codes and test script at a time.

[pureMVC] Javascript version – bình mới rượu cũ

Cách đây vài năm, khi Flash/Flex development còn phổ biến thì pureMVC được xem như là một trong những framework mẫu mực dành cho công nghệ này.  Nếu bạn từng là một flash/flex developer, bạn chắc hẳn đã từng sử dụng hoặc nghe về framework này. Bản thân pureMVC – như tên của nó làm một framework thuần túy theo pattern MVC nên nó được port sang rất nhiều các ngôn ngữ phổ biến như Java, C#, Python … Javascript cũng không ngoại lệ.

Một số thống kê gần đây cho thấy pureMVC không nằm trong danh sách các framework javascript phổ biến như thống kê dưới đây chẳng hạn.

Theo quan điểm cá nhân của tôi thì bản thân pureMVC không thật sự hỗ trợ tốt cho HTML (tương tác với DOM object, hỗ trợ HTML template, partial …). Tuy được port sang nhiều ngôn ngữ nhưng nhóm tác giả pureMVC lại không cập nhật và phát hành thường xuyên, có lẽ vì ít người sử dụng nên hầu như không có nhiều feedback cũng như bug report.PureMVC là một framework gắn liền với Flash /ActionScript nên các lập trình viên HTML/JS cũng ít quan tâm đến framework này hơn. Bản thân tôi khi chuyển sang HTML5/JS cũng đã chọn lựa AngularJS, BackboneJS, KnockoutJS cho các project của mình hơn là pureMVC.

Điểm hấp dẫn của pureMVC chính là tính “thuần” MVC pattern của nó – bạn có thể dùng pureMVC để kết hợp với các framework Javascript chưa có MVC như CreateJS, KinectJS để từ đó tạo ra các project có cấu trúc tốt và dễ bảo trì.  Bạn có thể tham khảo source từ puremvc.github.io  hoặc từ app-seed project mà tôi đang thực hiện.