April 17, 2013 at 23:00Comparison of Angular, Backbone, CanJS and Ember
- Transfer
(Original publication date - 04/12/2013)
Choosing a JavaScript MVC framework is hard work. There are many factors to consider, and the number of choices can be huge. Just look at the ToDoMVC project (about it in Russian) .
I worked with 4 frameworks: Angular, Backbone, CanJS and Ember. So I decided to make a comparison to help you decide which one to use. I will highlight several factors that you can use when choosing. Each factor will have a rating of 1 to 5 (more is better). I tried to be impartial, but, of course, the ratings are based on personal experience.
There are really important features of the frameworks that provide the foundation for applications. Does it link views? Bidirectional binding? Filters? Has computed properties? Dirty attributes? Validation of forms? (Etc.) This can be a very long list. The following is a comparison of what I consider to be really important features within MVC:
*) Observables : objects whose changes are tracked.
*) Routing : Changes to URL anchor when tracked objects change.
*) View bindings : Use automatically resized views when the observed object changes.
*) Two way bindings : Presence of automatically changing views, for example, in input fields.
*) Partial views : Views (template visualization), including other views.
*) Filtered list views : Show views under certain conditions.
So, my estimates of the implementation of the sum of functions:
It is important to note that Backbone can do most of these functions manually or through plugins. But I took into account the available basic functions.
There are hundreds of amazing plugins and libraries that make specialized functions. As a rule, they do it better than tools in a standard set. It is important to be able to integrate them with the selected MVC framework.
Backbone is the most flexible structure, with a minimum of agreements and frameworks. You must make many decisions yourself when using Backbone.
CanJS is almost as flexible as Backbone, as it makes it easy to integrate other libraries with minimal effort. You can even use a different rendering engine if you want. I used Rivets in CanJS without any problems. Although, I recommend using the standard tools of the framework.
Ember and Angularstill flexible to some extent, but you find that sometimes you have to deal with the framework if you don’t like some of its actions. There are things that you just need to take when working with them.
Angular quickly creates a wow effect first. It easily allows you to do complex things such as bi-directional synchronization. But after you have learned the basics, then the threshold of learning becomes higher: a complex structure opens up with a lot of features. Reading documentation is difficult due to the specific jargon and the small number of examples.
Backbone - pretty easy to learn. But you soon discover that you don’t have an understanding of how to better structure your code. You will need to look through or read a few tutorials to get to know best practices. You will find that you probably also need to find out a library add-on such as Marionette or Thorax. So I don’t think Backbone is easier to learn than CanJS.
Canjs- the easiest of this group for learning. Just from canjs.us you will know almost everything you need for productivity. There are, of course, other means of training, but I had a rare need to seek help.
Ember also has a high learning threshold, as does Angular. I find that learning is easier, but it requires a lot of input in the beginning to learn how to do basic things. Ember lacks an early wow effect.
After a sufficient study of the framework, the productivity of working with it begins to have serious significance - its internal agreements, magic, affordable speed of action.
Angular - if you know him well, no doubt, you can be very productive with him. But I think that Ember went further in this factor.
Backbone requires writing a very large amount of boilerplate code. Which, it seems, is completely unnecessary and is a direct threat to labor productivity.
CanJS - does not shine and does not disappoint. But due to the small entry threshold, you can get results very early.
Ember, indeed, in this regard is magnificent. Because it is a list of agreements that do a lot automatically. It is only necessary to study and apply the agreements, and Ember will work correctly.
Is it easy to find help, documentation, and experts?
The Backbone . The community is huge. Very active on StackOverflow and IRC. Dozens of textbooks and manuals.
Angular , Ember . Quite large communities, also active on StackOverflow and IRC, but with a smaller volume.
CanJS . The community is small compared to others, but, fortunately, is quite active and useful. I found no reason to consider the smaller CanJS community a minus.
What is the infrastructure (or ecosystem) of plugins or libraries?
Here again, Backbone gives everyone a head start - there is a bunch of plugins for it. The Angular ecosystem is starting to be interesting with things like the Angular UI. I think that the Ember ecosystem is developing less, although it should be better, because of its popularity. CanJS has less developed infrastructure.
It can be an important factor for mobile development.
Backbone is the smallest, and it is often mentioned. But that is not all.
I do not think that performance will be a decisive factor when choosing a framework, because for most applications they are all quite productive. But this, of course, depends on what you do with the framework. In performance games, more attention is paid.
I have seen and done many performance tests myself with these libraries ( one example ). But I am not entirely sure of the validity of these tests. It is quite difficult to make sure that the test checks the right things in the right direction.
From what I saw in the tests and read, CanJS seems to have an advantage, especially in binding View to data. On the other hand, I think that Angular is less productive on the grounds that it does a “dirty check” of objects. It cannot be as fast as others.Watch the test .
Is this a mature framework, has it shown itself in production, are there many websites that use it?
Backbone has a ton of sites with its use. Its code base is already 2 years without major changes, this is a great thing in terms of maturity.
Ember is not too new, but in the process of improvements it has seriously changed, and the last stability is measured in a couple of months. This time I do not consider the framework mature.
Angular seems more stable and tested than Ember. But not as much as Backbone.
CanJS - it may seem that the solution is unverified, because there are no mass sites with it. But it exists much longer. It is an “extract” from the JavaScriptMVC library, which has existed since 2008 and has extensive experience in embedded use.
This is an important factor for long-open single-page applications. You do not want this to become a problem. Unfortunately, this happens easily, especially when creating DOM event handlers yourself.
Angular , CanJS, and Ember will work around problems efficiently, as if you were using only best practices. Backbone requires you to do this job of removing handlers in a timely manner.
This is probably the most significant factor in choosing a framework.
Plus, popular at the moment - Ember, Angular.
There is no way to appreciate tastes.
Now we will bring all this together into a final table for counting. Remember that this is just my opinion. Please let me know if you think I have assembled the weight table incorrectly. If you put the equal weight of each factor in this fierce competition, then almost no framework will win.
Thus, I assume that it all depends on personal taste or on the significance of each factor for you.
I can not finish the post without such a comment. Bacon was a great library 2 years ago, but now there are better things . I’m sure that a lot of people choose Bekbon solely from its popularity, and this is a vicious circle.
I strongly advise you to think twice before using Backbone in new projects. Mainly because of the small number of (basic) capabilities and lesser convenience for the developer. It is very attractive due to the community and infrastructure, but this advantage will disappear as other frameworks become more popular. It's time to move on .
Posted by: Sebastian Porto, github.com/sporto .
Choosing a JavaScript MVC framework is hard work. There are many factors to consider, and the number of choices can be huge. Just look at the ToDoMVC project (about it in Russian) .
I worked with 4 frameworks: Angular, Backbone, CanJS and Ember. So I decided to make a comparison to help you decide which one to use. I will highlight several factors that you can use when choosing. Each factor will have a rating of 1 to 5 (more is better). I tried to be impartial, but, of course, the ratings are based on personal experience.
Functions
There are really important features of the frameworks that provide the foundation for applications. Does it link views? Bidirectional binding? Filters? Has computed properties? Dirty attributes? Validation of forms? (Etc.) This can be a very long list. The following is a comparison of what I consider to be really important features within MVC:
| Functions | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Observables | y | y | y | y |
| Routing | y | y | y | y |
| View bindings | y | - | y | y |
| Bidirectional binding (Two way bindings) | y | - | - | y |
| Nested Views (Partial Views) | y | - | y | y |
| Selected list view (Filtered list Views) | y | - | y | y |
*) Routing : Changes to URL anchor when tracked objects change.
*) View bindings : Use automatically resized views when the observed object changes.
*) Two way bindings : Presence of automatically changing views, for example, in input fields.
*) Partial views : Views (template visualization), including other views.
*) Filtered list views : Show views under certain conditions.
So, my estimates of the implementation of the sum of functions:
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Functions | 5  | 2 | 4 | 5 |
It is important to note that Backbone can do most of these functions manually or through plugins. But I took into account the available basic functions.
Flexibility
There are hundreds of amazing plugins and libraries that make specialized functions. As a rule, they do it better than tools in a standard set. It is important to be able to integrate them with the selected MVC framework.
Backbone is the most flexible structure, with a minimum of agreements and frameworks. You must make many decisions yourself when using Backbone.
CanJS is almost as flexible as Backbone, as it makes it easy to integrate other libraries with minimal effort. You can even use a different rendering engine if you want. I used Rivets in CanJS without any problems. Although, I recommend using the standard tools of the framework.
Ember and Angularstill flexible to some extent, but you find that sometimes you have to deal with the framework if you don’t like some of its actions. There are things that you just need to take when working with them.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Flexibility | 3 | 5 | 4 | 3 |
Login Threshold and Documentation
Angular quickly creates a wow effect first. It easily allows you to do complex things such as bi-directional synchronization. But after you have learned the basics, then the threshold of learning becomes higher: a complex structure opens up with a lot of features. Reading documentation is difficult due to the specific jargon and the small number of examples.
Backbone - pretty easy to learn. But you soon discover that you don’t have an understanding of how to better structure your code. You will need to look through or read a few tutorials to get to know best practices. You will find that you probably also need to find out a library add-on such as Marionette or Thorax. So I don’t think Backbone is easier to learn than CanJS.
Canjs- the easiest of this group for learning. Just from canjs.us you will know almost everything you need for productivity. There are, of course, other means of training, but I had a rare need to seek help.
Ember also has a high learning threshold, as does Angular. I find that learning is easier, but it requires a lot of input in the beginning to learn how to do basic things. Ember lacks an early wow effect.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Login Threshold and Documentation | 2 | 4 | 5 | 3 |
Development Productivity
After a sufficient study of the framework, the productivity of working with it begins to have serious significance - its internal agreements, magic, affordable speed of action.
Angular - if you know him well, no doubt, you can be very productive with him. But I think that Ember went further in this factor.
Backbone requires writing a very large amount of boilerplate code. Which, it seems, is completely unnecessary and is a direct threat to labor productivity.
CanJS - does not shine and does not disappoint. But due to the small entry threshold, you can get results very early.
Ember, indeed, in this regard is magnificent. Because it is a list of agreements that do a lot automatically. It is only necessary to study and apply the agreements, and Ember will work correctly.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Development Productivity | 4 | 2 | 4 | 5 |
Community
Is it easy to find help, documentation, and experts?
The Backbone . The community is huge. Very active on StackOverflow and IRC. Dozens of textbooks and manuals.
Angular , Ember . Quite large communities, also active on StackOverflow and IRC, but with a smaller volume.
CanJS . The community is small compared to others, but, fortunately, is quite active and useful. I found no reason to consider the smaller CanJS community a minus.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Community | 4 | 5 | 3 | 4 |
Infrastructure (ecosystem)
What is the infrastructure (or ecosystem) of plugins or libraries?
Here again, Backbone gives everyone a head start - there is a bunch of plugins for it. The Angular ecosystem is starting to be interesting with things like the Angular UI. I think that the Ember ecosystem is developing less, although it should be better, because of its popularity. CanJS has less developed infrastructure.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Infrastructure | 4 | 5 | 2 | 4 |
The size
It can be an important factor for mobile development.
| Angular | Backbone | Canjs | Ember | |
|---|---|---|---|---|
| The size | 80K | 18K | 33K | 141K |
| Angular | Backbone | Canjs | Ember | |
|---|---|---|---|---|
| Dependencies | The only library requiring no dependencies | Requires at least Underscore and Zepto. There is a small template engine in Underscore, but you will want a better one, such as Mustache. Together - 61K | Requires at least Zepto - 57K | Requires jQuery and Handlebars. We have 269K |
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| The size | 4 | 5 | 5 | 2 |
Performance
I do not think that performance will be a decisive factor when choosing a framework, because for most applications they are all quite productive. But this, of course, depends on what you do with the framework. In performance games, more attention is paid.
I have seen and done many performance tests myself with these libraries ( one example ). But I am not entirely sure of the validity of these tests. It is quite difficult to make sure that the test checks the right things in the right direction.
From what I saw in the tests and read, CanJS seems to have an advantage, especially in binding View to data. On the other hand, I think that Angular is less productive on the grounds that it does a “dirty check” of objects. It cannot be as fast as others.Watch the test .
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Performance | 3 | 4 | 5 | 4 |
Maturity
Is this a mature framework, has it shown itself in production, are there many websites that use it?
Backbone has a ton of sites with its use. Its code base is already 2 years without major changes, this is a great thing in terms of maturity.
Ember is not too new, but in the process of improvements it has seriously changed, and the last stability is measured in a couple of months. This time I do not consider the framework mature.
Angular seems more stable and tested than Ember. But not as much as Backbone.
CanJS - it may seem that the solution is unverified, because there are no mass sites with it. But it exists much longer. It is an “extract” from the JavaScriptMVC library, which has existed since 2008 and has extensive experience in embedded use.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Maturity | 4 | 5 | 4 | 3 |
Memory leak protection
This is an important factor for long-open single-page applications. You do not want this to become a problem. Unfortunately, this happens easily, especially when creating DOM event handlers yourself.
Angular , CanJS, and Ember will work around problems efficiently, as if you were using only best practices. Backbone requires you to do this job of removing handlers in a timely manner.
| Grades | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Memory leak protection | 5 | 3 | 5 | 5 |
Personal tastes
This is probably the most significant factor in choosing a framework.
| If you like ... | declarative HTML | template engine | strictly adhere to the traditional SmallTalk MVC pattern | rigid framework |
| then choose ... | Angular | Backbone | Canjs | Ember |
|---|
There is no way to appreciate tastes.
Final count
Now we will bring all this together into a final table for counting. Remember that this is just my opinion. Please let me know if you think I have assembled the weight table incorrectly. If you put the equal weight of each factor in this fierce competition, then almost no framework will win.
From the translator: the author has a calculated table (like Excel / Calc) built right into the text, in which the reader can turn off or change the weight of each line with 1 click. At us - we can look at the table with equal factors here, and change - on the JsFiddle page by reference .If you want to choose weights according to your own ratings and preferences, go to the author's calculated table at JsFiddle: jsfiddle.net/sporto/5JVxh/light . There it will be possible to change the significance of each line, as well as the author’s rating for each of the factors.
Grades Angular Backbone Canjs Ember Functions 5 2 4 5 Flexibility 3 5 4 3 Login Threshold and Documentation 2 4 5 3 Development Productivity 4 2 4 5 Community 4 5 3 4 Ecosystem 4 5 2 4 The size 4 5 5 2 Performance 3 4 5 4 Maturity 4 5 4 3 Memory leak protection 5 3 5 5 Amount 38 40 41 38
Thus, I assume that it all depends on personal taste or on the significance of each factor for you.
A Note About Backbone
I can not finish the post without such a comment. Bacon was a great library 2 years ago, but now there are better things . I’m sure that a lot of people choose Bekbon solely from its popularity, and this is a vicious circle.
I strongly advise you to think twice before using Backbone in new projects. Mainly because of the small number of (basic) capabilities and lesser convenience for the developer. It is very attractive due to the community and infrastructure, but this advantage will disappear as other frameworks become more popular. It's time to move on .
Posted by: Sebastian Porto, github.com/sporto .
Only registered users can participate in the survey. Please come in.
Which of these frameworks is the leader in terms of the amount of amenities for you?
- 61.6% Angular 1452
- 26.3% Backbone 621
- 7.3% CanJS 173
- 18% Ember 426