Comparing Angular, Backbone, CanJS and Ember
(Date of publication of the original - 04/12/2013)
Choosing a javascript MVC framework is hard work. There are many factors to consider, and the number of choices can be enormous. Just look at the ToDoMVC project (about it in Russian) .
I worked with 4 frameworks: Angular, Backbone, CanJS and Ember. Therefore, I decided to make a comparison to help you decide which one to use. I will highlight a few factors that you can use when choosing. Each factor will have a rating from 1 to 5 (more - better). I tried to be impartial, but, of course, the estimates are based on personal experience.
')
There are really important features of frameworks that provide the foundation for applications. Does he make linking 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 truly important functions within MVC:
*) Observables : objects whose changes are tracked.
*) Routing : Changes the URL anchors when changing tracked objects.
*) View bindings : Use automatically resizable views when the observed object changes.
*) Two way bindings : Presence of automatically changeable representations, for example, in input fields.
*) Partial views : Views (template visualization), including other views.
*) Filtered list views : Show views for some conditions.
So, my estimates of the implementation of the sum of functions:
It is important to note that Backbone can make 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 with tools in a standard delivery kit. 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 have to make many decisions yourself when using Backbone.
CanJS is almost as flexible as Backbone, as it allows you to easily integrate other libraries with minimal effort. You can even use another rendering engine if you want. I used Rivets in CanJS without any problems. Although, I recommend using regular framework tools.
Ember and Angular are still somewhat flexible, but you find that sometimes you have to fight 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 initially quickly creates a wow effect. It easily allows you to do complex things like bidirectional synchronization. But after you have learned the basics, the learning threshold further becomes higher: a complex structure opens up with many features. Reading the documentation is difficult because of the specific jargon and few examples.
Backbone is quite easy to learn. But you soon discover that there is not enough understanding of how to structure the code better. You will need to review or read several textbooks to get acquainted with the best practitioners. You will find that you probably also need to find out a library add-on like Marionette or Thorax. So I don't think Backbone is easier to learn than CanJS.
CanJS - the easiest of this group on learning. Just from canjs.us you will know almost everything you need for productivity. There are, of course, other means of teaching, but I had the rare need to seek help.
Ember also has a high learning threshold, like Angular. I think learning is easier, but it requires a lot of input at the beginning to learn how to do basic things. Ember lacks the early wow effect.
After a sufficient study of the framework, the productivity of working with it begins to be of serious importance - its internal agreements, magic, available speed of actions.
Angular - if you know him well, there is no doubt that 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 sample code. What, I think, is completely unnecessary and turns out to be a direct threat to labor productivity.
CanJS - does not shine and does not disappoint. But because of the small threshold of entry, you can get results very early.
Ember is really great in this regard. Because he is a list of agreements that do a lot of things automatically. All you need to do is learn and apply the agreements, and Ember will work correctly.
Is it easy to find help, documentation and experts?
Backbone . The community is huge. Very active on StackOverflow and IRC. Dozens of textbooks and manuals.
Angular , Ember . Quite large communities are also active on StackOverflow and IRC, but smaller in volume.
Canjs . The community is small compared to others, but, fortunately, it is quite active and useful. I found no reason to consider the smaller size of the CanJS community a minus.
What is the infrastructure (or ecosystem) of plug-ins or libraries?
Here again, Backbone gives everyone a head start - for her there are a bunch of plugins. The Angular Ecosystem is starting to be interesting with its Angular UI type things. 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 - the smallest, and this is often mentioned. But that is not all.
I don’t think that productivity 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. Performance games are given more attention.
I saw and did many performance tests myself with these libraries ( one example ). But I'm not quite sure about the reliability of these tests. It is quite difficult to make sure that the test checks the right things and in the right direction.
From what I saw in the tests and read, CanJS seems to have an advantage, especially in tying the View to the data. On the other hand, I think that Angular is less productive on the grounds that it makes a “dirty check” of objects. It can not be as fast as others. Watch the test .
Is this a mature framework, has it proven itself in production, do many sites use it?
Backbone has a lot of sites with its use. Its code base is already 2 years without major changes, it is a great thing in terms of maturity.
Ember is not too new, but in the process of improvements seriously changed, and the last stability is measured in a couple of months. This time I do not think the framework is mature.
Angular seems more stable and proven than Ember. But not as much as Backbone.
CanJS - it may seem that the solution is unverified, because there is no mass of sites with it. But it exists much longer. It is a “hood” from the JavaScriptMVC library that has existed since 2008 and has a lot of built-in experience.
This is an important factor for long-open single-page applications. You do not want this to be a problem. Unfortunately, this happens easily, especially when you create DOM event handlers yourself.
Angular , CanJS and Ember will work around problems efficiently, as if you only use best practices. Backbone requires you to do this work by timely removing handlers.
This is probably the most significant factor in choosing a framework.
Plus, popular at the moment - Ember, Angular.
There is no way to evaluate tastes.
Now let's put it all together into a summary table for counting. Remember that this is just my opinion. Please let me know if you think that I have compiled a table of weights incorrectly. If you put the same weight of each factor in this tough competition, then almost no framework will win.
Thus, I assume that everything depends on personal taste or on the importance of each factor for you.
I can not finish the post without such comments. Beckbon was a great library 2 years ago, but now there are better things . I am sure that many people choose Beckbon exclusively from its popularity, and this is a vicious circle.
I strongly advise you to think twice before using Backbone in new projects. Mainly due to the small number of (basic) features and less convenience for the developer. It is very tempting because of the community and infrastructure, but this advantage will fade as other frameworks become more popular. It's time to move on .
Author: 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 enormous. Just look at the ToDoMVC project (about it in Russian) .
I worked with 4 frameworks: Angular, Backbone, CanJS and Ember. Therefore, I decided to make a comparison to help you decide which one to use. I will highlight a few factors that you can use when choosing. Each factor will have a rating from 1 to 5 (more - better). I tried to be impartial, but, of course, the estimates are based on personal experience.
Functions
')
There are really important features of frameworks that provide the foundation for applications. Does he make linking 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 truly important functions 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 browse list
(Filtered list Views) | y | - | y | y |
*) Routing : Changes the URL anchors when changing tracked objects.
*) View bindings : Use automatically resizable views when the observed object changes.
*) Two way bindings : Presence of automatically changeable representations, for example, in input fields.
*) Partial views : Views (template visualization), including other views.
*) Filtered list views : Show views for some conditions.
So, my estimates of the implementation of the sum of functions:
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Functions | five  | 2 | four | five |
It is important to note that Backbone can make 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 with tools in a standard delivery kit. 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 have to make many decisions yourself when using Backbone.
CanJS is almost as flexible as Backbone, as it allows you to easily integrate other libraries with minimal effort. You can even use another rendering engine if you want. I used Rivets in CanJS without any problems. Although, I recommend using regular framework tools.
Ember and Angular are still somewhat flexible, but you find that sometimes you have to fight 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.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Flexibility | 3 | five | four | 3 |
Entry threshold and documentation
Angular initially quickly creates a wow effect. It easily allows you to do complex things like bidirectional synchronization. But after you have learned the basics, the learning threshold further becomes higher: a complex structure opens up with many features. Reading the documentation is difficult because of the specific jargon and few examples.
Backbone is quite easy to learn. But you soon discover that there is not enough understanding of how to structure the code better. You will need to review or read several textbooks to get acquainted with the best practitioners. You will find that you probably also need to find out a library add-on like Marionette or Thorax. So I don't think Backbone is easier to learn than CanJS.
CanJS - the easiest of this group on learning. Just from canjs.us you will know almost everything you need for productivity. There are, of course, other means of teaching, but I had the rare need to seek help.
Ember also has a high learning threshold, like Angular. I think learning is easier, but it requires a lot of input at the beginning to learn how to do basic things. Ember lacks the early wow effect.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Entry threshold and documentation | 2 | four | five | 3 |
Development Efficiency
After a sufficient study of the framework, the productivity of working with it begins to be of serious importance - its internal agreements, magic, available speed of actions.
Angular - if you know him well, there is no doubt that 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 sample code. What, I think, is completely unnecessary and turns out to be a direct threat to labor productivity.
CanJS - does not shine and does not disappoint. But because of the small threshold of entry, you can get results very early.
Ember is really great in this regard. Because he is a list of agreements that do a lot of things automatically. All you need to do is learn and apply the agreements, and Ember will work correctly.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Development Efficiency | four | 2 | four | five |
Community
Is it easy to find help, documentation and experts?
Backbone . The community is huge. Very active on StackOverflow and IRC. Dozens of textbooks and manuals.
Angular , Ember . Quite large communities are also active on StackOverflow and IRC, but smaller in volume.
Canjs . The community is small compared to others, but, fortunately, it is quite active and useful. I found no reason to consider the smaller size of the CanJS community a minus.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Community | four | five | 3 | four |
Infrastructure (ecosystem)
What is the infrastructure (or ecosystem) of plug-ins or libraries?
Here again, Backbone gives everyone a head start - for her there are a bunch of plugins. The Angular Ecosystem is starting to be interesting with its Angular UI type things. I think that the Ember ecosystem is developing less, although it should be better because of its popularity. CanJS has less developed infrastructure.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Infrastructure | four | five | 2 | four |
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 that does not require dependencies. | Requires at least Underscore and Zepto. There is a small template engine in Underscore, but you want a better one, like Mustache. Together - 61K | Requires at least Zepto - 57K | requires jQuery and handlebars. We have 269K |
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| The size | four | five | five | 2 |
Performance
I don’t think that productivity 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. Performance games are given more attention.
I saw and did many performance tests myself with these libraries ( one example ). But I'm not quite sure about the reliability of these tests. It is quite difficult to make sure that the test checks the right things and in the right direction.
From what I saw in the tests and read, CanJS seems to have an advantage, especially in tying the View to the data. On the other hand, I think that Angular is less productive on the grounds that it makes a “dirty check” of objects. It can not be as fast as others. Watch the test .
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Performance | 3 | four | five | four |
Maturity
Is this a mature framework, has it proven itself in production, do many sites use it?
Backbone has a lot of sites with its use. Its code base is already 2 years without major changes, it is a great thing in terms of maturity.
Ember is not too new, but in the process of improvements seriously changed, and the last stability is measured in a couple of months. This time I do not think the framework is mature.
Angular seems more stable and proven than Ember. But not as much as Backbone.
CanJS - it may seem that the solution is unverified, because there is no mass of sites with it. But it exists much longer. It is a “hood” from the JavaScriptMVC library that has existed since 2008 and has a lot of built-in experience.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Maturity | four | five | four | 3 |
Memory Leak Protection
This is an important factor for long-open single-page applications. You do not want this to be a problem. Unfortunately, this happens easily, especially when you create DOM event handlers yourself.
Angular , CanJS and Ember will work around problems efficiently, as if you only use best practices. Backbone requires you to do this work by timely removing handlers.
| Ratings | Angular | Backbone | Canjs | Ember |
|---|---|---|---|---|
| Memory Leak Protection | five | 3 | five | five |
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 | hard framework |
| then choose ... | Angular | Backbone | Canjs | Ember |
|---|
There is no way to evaluate tastes.
Final tally
Now let's put it all together into a summary table for counting. Remember that this is just my opinion. Please let me know if you think that I have compiled a table of weights incorrectly. If you put the same weight of each factor in this tough competition, then almost no framework will win.
From the translator: the author has a calculated table (like Excel / Calc) embedded directly in the text, in which the reader can, with one click, disable or change the weight of each line. With 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 estimates and preferences, go to the author's calculated table on JsFiddle: jsfiddle.net/sporto/5JVxh/light . There it will be possible both to change the significance of each line, and the author’s assessment for each of the factors.
Ratings Angular Backbone Canjs Ember Functions five 2 four five Flexibility 3 five four 3 Entry threshold and documentation 2 four five 3 Development Efficiency four 2 four five Community four five 3 four Ecosystem four five 2 four The size four five five 2 Performance 3 four five four Maturity four five four 3 Memory leak protection five 3 five five Amount 38 40 41 38
Thus, I assume that everything depends on personal taste or on the importance of each factor for you.
Note about Backbone
I can not finish the post without such comments. Beckbon was a great library 2 years ago, but now there are better things . I am sure that many people choose Beckbon exclusively from its popularity, and this is a vicious circle.
I strongly advise you to think twice before using Backbone in new projects. Mainly due to the small number of (basic) features and less convenience for the developer. It is very tempting because of the community and infrastructure, but this advantage will fade as other frameworks become more popular. It's time to move on .
Author: Sebastian Porto, github.com/sporto .
Source: https://habr.com/ru/post/177115/
All Articles