API Paradigms in Angular and React

I have been using AngularJS on projects for some time and Facebook's new React framework has caught my eye. Comparing the two directly is not entirely fair as Angular provides a nearly complete solution for building an application including testing frameworks, while React is only trying to provide fill the role of view inside of a larger framework of your choice. There are some interesting differences between the two frameworks regarding how your author your user interface components.

AngularJS allows bi-directional data binding between components. This allows you to share a common data proivder among your components, for instance if you have a TODO application with a structure like:

TodoApp:
        TodoList:
                - TodoItem
                - TodoItem

Angular TodoList can share its scope with each of its TodoItems which allows the children to edit their contents directly without needing a callback. This has certain advantages but it does make it more complicated to understand and debug an application. The two controllers can confilct with each other's scope and encounter unexpected issues. Tp remove an item the TodoItem can just remove itself from the data model and Angular will update the view.

React takes the opposite approach in its data binding and only allows unidirectional bindings between parents and their children. The data passed to a particular component is also explicit in your templates. The TodoItems then must have an event handler that the parent provides a callback to handle things like removing an item from the list. Angular can use isolated scopes to behave much more like React does, but it does not appear to be the default behavior for directives.

I am starting to prefer the React design as it seems to encourage more clearly defined APIs in your compoments. Because each component instance has its own property scope you have to create callbacks in components to handle events. These explicit API definitions make it easier for new people starting to work on your code to understand each piece and how they related much faster than the implicit binding of Angular.