Lately there has been a lot of buzz about React. People are already comparing it to Angular – another very popular framework. In this post I will look at some of the differences between React and Angular.
Comparing React to Angular is not an apples to apples comparison since React only supports a subset of the features offered by Angular. React is primarily a framework for composing UIs through components and doesn't support features like routing and two way binding. Components in React look, on the surface, very similar to directives in Angular. However, there are fundamental differences in terms of how they function internally. Angular encourages clear separation of concerns between object model and view by avoiding tight coupling between them. The object model is applied to the view through declarative data binding, and if done right, a model does not make any assumption about the view. The most common arguments in favor of this template based approach are unit testing and reuse of models.
The philosophy behind React is based on the idea that separation between view (template) and view logic is artificial and doesn't make sense. In React the abstraction between DOM and JavaScript happens through a virtual DOM that eventually is applied to the real DOM during rendering. The virtual DOM is an object model, mapped pretty much one to one with elements in the real DOM, so the environment should be familiar to most developers. Key to this idea is the ability to iterate the virtual DOM very quickly and only interact with the real DOM when it's absolutely necessary. In many cases this will translate into increased performance, but it also enables you to support modern html features in legacy browsers. Since the virtual DOM api is so one-to-one with the real DOM, it may seem as if we are returning to the days of spaghetti code with html and JavaScript intertwined. However, the virtual DOM idea is powerful. The ability to defer updates of the DOM and only update changed elements is key for performance since it enables you to batch your updates instead of updating the DOM piecemeal.
I find the virtual DOM concept, at least in spirit, to be analogous to a common optimization technique from the good old JavaScript-dynamic html days. When creating dynamic html in a loop one would make sure to first create the entire html as a single string in the loop. The string was then written back to the DOM in its entirety instead of writing the individual pieces back to the DOM during each iteration of the loop.
It's of course hard to make a blanket statement about performance, but many are claiming that the virtual DOM gives React an edge over Angular when it comes to rendering. It's of course a bit harder to ensure single batched updates in Angular since there is a live connection between DOM and tracked properties. However, in theory, a virtual DOM doesn't seem like it couldn't be implemented in Angular in order to achieve some of the same benefits.
Another approach is to create a hybrid application where React serves as the view component in Angular's MVC. I talk some more about that in another blog post.