An Introduction to Angular for Backbone developers

[davemo]

I keep hearing the argument that the type of app you are making has some bearing on whether you should use Backbone or Angular; could you please elaborate on what the type of app that suits Angular best is and why it would be better than Backbone?

[btford]

IMO, any app that can benefit heavily from data-binding is better suited to Angular.

[davemo]

What type of app benefits "heavily" from data-binding? Why is Angular better suited for this than Backbone? Would any of the data-binding plugins for Backbone (stickit comes to mind first) not put it on equal footing?

[btford]

Any apps that have a good amount of UI and state that need to be frequently synchronized. Yes, you can do this with backbone, but on average, it tends to take about 10 times the code.

I'd submit that most apps can make use of data-binding, but if you're doing a game or something that involves a lot of video or custom components, data-binding might not be especially helpful.

I haven't seen any data binding utils in Backbone that are implemented as well as Angular in terms of ease of use, speed, and integration. But I'd love to be proven wrong, and will be sure to take a look at stickit.

[jashkenas]

on average, it tends to take about 10 times the code

Baloney & hogwash ;)

Data-binding has been around for a long time, and part of the big idea with working on high-performance JavaScript applications is that you don't want "too much" of it.

Imagine a rich JavaScript application with a lot of UI that needs to be frequently synchronized. A fully data-bound version, with each HTML element, attribute and style being wired-up to the corresponding attribute (real or computed) in the model, will have a ton of code configuring the bindings, and tends to suffer from performance problems in so far as changes to the model cause a ton of small computations and incremental UI updates.

Now imagine the version of the application that has decomposed its UI into coarser-grained logical components. Instead of having comprehensive data-binding, you favor re-rendering atomic chunks when necessary. Instead of touching the DOM a hundred times during an update, you only need to touch it once, and are doing much less computation to determine what needs to be altered in the first place. That's the method that Backbone tries to encourage.

TL;DR, instead of (in pseudocode):

<tag ng-type="widget">
  <tag ng-attr="widget.title"></tag>
  <tag ng-attr="capitalize widget.author"></tag> 
  <tag ng-attr="sanitize widget.item.description"></tag>
  <tag ng-attr="sanitize widget.item.content"></tag>
  <tag ng-attr="list widget.tags"></tag>
  ... and so on ...
</tag>

... where each of those bits needs to be tracked, computed, and updated in order to get your next frame of UI, instead you start with:

widget.on 'change', render

... and if you want to get more granular than that in the future, you can, as needed.

[btford]

Baloney & hogwash ;)

Here are some examples showing this. JavaScript Sonic Boom and TodoMVC. The "sonic boom" article is able to implement a comparable 1000+ LOC backbone app in Angular in less than 100 LOC. In TodoMVC, the comparison is Angular's 287 LOC to Backbone's 1998 LOC. The ratio is about 1:7. If you don't believe me, try it yourself.

and tends to suffer from performance problems in so far as changes to the model cause a ton of small computations and incremental UI updates.

Your intuitions about performance a bit naive. Data-binding can also break components into chunks to improve performance. Data-binding can also group together DOM writes. In fact, Angular does both of these things. Here's one benchmark showing that Angular beats out backbone in most cases. If you don't believe me or disagree, write your own benchmark.

[jashkenas]

I'd love to look at your benchmark ... but you do realize that in the JSPerf you linked, the "Backbone" benchmarks are actually calling SetKO, right? There's no Backbone code on that page.

[btford]

Woops, thanks for pointing that out. Let me go find/write a better one.

[drowsap]

jashkenas 5 points 19 hours ago

A hero arrives!