7 min read
In 2011, when my code started to clutter with jQuery selectors and callbacks, AngularJS came as a life saver which helped in better management, rapid development and a lot more functionality out of the box. AngularJS’s two-way binding and philosophy of “model as the single-source-of-truth” blew me away and reduced data redundancy throughout my application.
Over time, however, I discovered that AngularJS has some pain points of its own. Eventually these caused me enough frustration that I began looking around for alternative solutions.
Pain points in AngularJS 1.x
DOM for execution
Angular heavily relies on the DOM for its execution flow. In the default bootstrapping of applications, it scans the DOM and compiles it with priorities of directives which makes it difficult to debug and test the execution order.
Its own dependency injection
Two-way binding is a double-edged sword
It is tempting to use two-way binding, but as the complexity of your component grows it may lead to a performance disaster.
Another problem with two-way binding is that many different components on the page are capable of changing the data, leading to multiple source of data-inputs. If not handled well it can lead to an ambiguous situation. But to be fair, this is purely an implementation issue.
Angular has its own world
Too many concepts and steep learning curve
Learning Angular requires learning a ton of concepts including modules, controllers, directives, scopes, templates, linking functions, filters, and dependency injection.
React re-thinks the best practices in web development. Reach encourages one-way data flow and believes in a philosophy that components are state machines driven by data. Whereas most of the other frameworks like working with the DOM and directly manipulating it, React hates the DOM and works to shield the developer from it. React provides only the basic API which is needed to define any UI component and nothing else. Reach follows UNIX philosophy: Small is beautiful. Do one thing and do it best.
It’s just a library. Do we need a framework with React?
Short answer: Your choice.
Using React, you can build user interfaces, but we still need to manage dependencies, make AJAX calls, apply data filters. If we do need a framework, why ditch AngularJS?
So, it’s better if we choose our own packages from a package repository like npm and organize them as we like. The good news is that React encourages the use of npm, which has a lot of ready-to-use packages. To get started with React, you may like to use one of these Full-Stack Starter Kits
Advantages of React
So why did I really switch to React?
React is fast!
The Virtual DOM also helps in solving cross browser issues, as it provides a unified cross-browser API which even works in Internet Explorer 8. (Phew!)
Everything is a component (UI widget)
Writing self-contained UI components modularizes your application and separates the concerns for each of them. Every component can be developed and tested in isolation and in turn use other components increasing maintainability.
One-way data flow for the win!
React plays well with RequireJS, Browserify and Webpack
React is built with Browserify, but if you’re looking to inject image assets and compile LESS or CoffeeScript, then probably Webpack stands as a better option.
I switched to React with some pain.
Since AngularJS is a framework, it comes with a lot of goodies, which includes an AJAX wrapper in the $http service, $q as a promise service, ng-show, ng-hide, ng-class and ng-if as controlling statements for template.
React isn’t a framework but a library to build the UI, so you need to think about all the other pieces on your own. I am working on an open source project which can be used with React to ease your development, and the community is also actively contributing similar reusable components.
React-components.com is an unofficial directory website where you can find such open source components.
React’s philosophy does not encourage you to use two-way binding, which brings a lot of pain when you’re dealing with form elements and editable data grids. However, as you start understanding the Flux data flow and Stores, things become clearer, simpler and easier.
React is new and so it will take some time for the community to grow.
Angular has gained huge popularity in recent times and has a relatively huge number of extensions available like AngularUI and Restangular. React’s open source community is new, but it is growing fast, with extensions like React Bootstrap. It’s just a matter of time before we have more components available, and React can easily be used for rapid web app development.
If you have used AngularJS before, then you may hate React at first, mainly because of it’s one-way data flow and lack of “framework” where you need to take care of many other things yourself. But as soon as you get comfortable with the Flux design pattern and React’s philosophy, you will realize it’s beauty.