I am currently working on a major project which is currently built on top of Backbone and JQuery. My foray into angular has been for the past few days and am still getting my head around it. Coming from a Flex world, HTML and JS seem like a step back. ( Not trying to incite any kind of a debate here! But this is just my personal opinion.. ). Like the authors of Angular profess, HTML is made for static documents. Its not meant for dynamic apps. So, given the fact that Flex was built specifically for dynamic RIA's it should be easy to see the logic.

Edit :

*I ported my Backbone application to angular. The Code size went down from 5k lines of code to guess what? 750 lines. Not just that.. The code is much cleaner.. Earlier, there was a huge technical debt attached to this implementation in backbone.. Each time I had to sit with it.it took me quite a while to understand all the hooks and how the individual models and classes and views interacted together.. ..Now its a breeze.. *

Now, the chosen libraries help you. I have to admit it. Coming from writing pure old javascript/ jQuery to using Backbone has been a huge leap. Your app is now pretty well structured, thanks to the MV* division of concerns. You have views, models and templates. While Angular banks completely on data binding, Backbone has no direct way of specifying any kind of two way data-binding.

The advantage of Backbone is that its not opinionated. It has none whatsoever except for structure. It just asks you to split your app into models and views and start putting them together. Thats about it. This is advantageous in terms of separation of concerns. But thats where the buck stops in Backbone. You can of course use meta-frameworks / plugins built on top of it like Backbone LayoutManager or Backbone Marionette ( I use Marionette ). This makes creating one level higher structure than what Backbone gives you. Marionette, for example takes care of closing views and showing them. Takes care of removing events when you remove the view from the DOM etc.. This helps you to not clean up after yourself. It helps..

For a person coming from the Flex world where everything is provided to you off the box as a component and all that you need to do is include an xml ( declarative way of defining UI! ) to say specify a Data Grid or any such complex component imagine going back to div's and table's in order to specify your UI. Its like starting to code in assembler after you are writing code in say a 4th Gen Language. Its powerful but you have to write everything ( almost ! ) from scratch. Of course, you are provided some kind of higher level application components in JQuery UI. You have tabs, accordions and such basic stuff. Lets take an example... tabs. To include JQuery UI tabs in your HTML, this is what you need to do. ( Taken directly from JQuery UI site )

    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>



    <div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>first bla bla bla</p>
    </div>
    <div id="tabs-2">
        <p>sec bla bla bla</p>
    </div>
    <div id="tabs-3">
        <p>another bla bla bla</p>
        <p>bla bla bla</p>
    </div>
</div>

</div><!-- End demo -->

In Angular if you use directives you could do the same using :

<tabs>
    <pane header="First Pane">first bla bla bla</pane>
    <pane header="Second Pane">second bla bla bla</pane>
</tabs>

The beauty is that someone else would have written the JS file ( exactly as JQuery UI! but I think you can notice the difference! ), I don't know call it a plugin? call it a component? You do see how very terse your code is now?

Now this gives way for a component architecture. What do you need for developing RIA's? Yes, a Rich Component Architecture. What Angular is creating is the ability to write this architecture. Currently it has still not hit v1.0 ( though its very close to hitting that! ). But I think if you are starting a new application, I would strongly suggest you to try Angular.

Of course, Backbone gives you the ability to "extend" a model. This basically means that you are creating an object of a class called Backbone Model ( or a class derived from it..) Angular doesn't do that. It says declare variables in this scope and It will take care of all the changes to those variables.

Pitfalls currently in Angular:

Its an extremely new framework. So the number of tutorials and screencasts you are going to find is limited, which means that you have go to the source, become Neo. ( This is in comparison to Backbone which is now perhaps one of the most famous MV* framework! ).

• If you don't understand Dependancy Injection, then there is some learning curve because it will feel like magic.

• At the outset, writing services or directives seem non trivial. This perhaps can be attributed to its current "infancy" state. More tuts should make it easier.

• There isnt a single library or framework out there which tells you "Don't write any DOM manipulating code in your controllers! " . This is a radical shift in thinking. So you will need some time to readjust your brain to think like this.

Pitfalls in Backbone :

• No opinions. No opinion means that you cannot stand on the shoulder of stalwarts. If you are stupid ( or have a fear that you are ! ) you will make stupid and costly mistakes.

• Its too generic. This is both its strength and weakness. Strength
  because now you can mould it to do anything you want. Weakness
  because wanting to make it anything means you have to write a lot of boilerplate code.

Having worked professionally with both Backbone.js and Angular.js -- with brief usage of both Knockout.js and Spine; I do have some idea of which is "Better".

I'm a huge fan of Angular.js as it lets you write very intuitive code which let's you create apps without including extra libraries; such as: jQuery, Underscore.js etc. It's purely Angular, then your scripts(s).

As the "To-Do MVC App on the Client-Side" has become the de-facto way of demonstrating a frameworks prowess; I suggest taking a look at To-Do MVC . Note the required libraries in each project and the actual code. The choice is fairly obvious!

Surely the argument between the two frameworks should be focused on what is the better 'MVC, MVP' part of it. Any other extra feature can be ported in via another library or framework. You don't need a testing framework with your mvc. You can load in an external one.

Angular.js

Pros: You don't have to write all the event listening and event triggering. Its automatic.

Cons:

1. invents its own syntax which requires learning

2. Obtrusively mixes all controller, model and view into the html. Therefore you could argue it isn't any kind of M V C framework, because they the controller, model and view are one. Removes the control from the developer.

3. It only provides an interface between a combined M, V and C. What if you wanted a Model to subscribe to another Model but didn't want to update a view. You can't do this witn Angular.js, but you can with Backbone. It doesn't truly seperate the concerns.

4. clutters the globl namespace with every single controller that you add.

   window.myCtr = function(){}
   window.anotherCtr = function(){}
   

5. Javascript errors happen if you DON'T clutter the window object.

6. It provides custom event declarations: example - <input onclick="doStuff"

   Atleast it doesn't require learning a new syntax.

Backbone.js

Pros: Truly enforces seperating concerns between model, view and controller, is lightweight, and easier to maintain or change in the future. Allows more control for the developer to handle anything. Although with control comes responsibility.

Cons: A bit clunky, always having to create both the event trigger and event listener in all all view, model, router etc, which makes for larger code and longer figuring it out writing it.

Conclusion: Do you want control, and compatibility with other frameworks? Use backbone. Do you want to write something more quickly in a language that isn't technically javascript which has extra bloat? Use Angular.js