Angular or React: Ecosystem - 8th Sphere

Stas Demchuk

by Stas Demchuk on 09/15/2015

Ecosystem

Angular, with its big community, has many different plugins for solving all kinds of issues. It also works well with jQuery by aliasing it with angular.element if it's present on the page. Things go wrong when you need to use a non-Angular module. Angular's digest cycle is responsible for handling your data changes, and changing data without calling $scope.$apply() may cause that data to fall out of sync. This can lead to hours of debugging.

The good news is that the community always introduces analogs of non-Angular solutions and it's not too hard to wrap something you need into an Angular module. But then again, we don't want to spend time writing wrappers and fighting with digest loops, we want to write clean and efficient code that solves our initial problems.

React is a piece of a puzzle itself, which means that we can combine almost any other library with it and it will just work with minimal code changes. For example, React is using its own synthetic event system and does not work with the DOM unless it needs to. So using jQuery and its plugins directly on React nodes is not possible. But, there is a helper method, findDOMNode(), which returns a reference to a DOM node and allows us to operate it directly. The abstraction from the real DOM gives us a performance boost and at the same time, provides a simple API to get hacky under the hood if and when we need to.

Flux pattern allows us to use different libraries for communicating with a server, such as jQuery, Superagent, etc. It also allows you to organize the data models in a way we want, such as using Immutable.js for data sets. This streamlines application development by avoiding the defensive copying of objects. It also provides an easy way to use different change detection techniques.

React also works better with ES6, allowing you to use classes, modules, collection methods, and etc. In fact, React even uses some features of ES7, like spread attributes. This gives you the ability to create simple and reusable components without having to follow the framework's way of doing things, as you would with Angular.

React allows you to perform lazy loading of components by using RequireJS or any other approach, which is good for large applications.

Last but not least, React allows the use of webpack or browserify to help you modularize your application if you don't want to use ES6. Don't forget that you can use npm modules in your client-side code with these tools!

What was your experience with using 3rd party components with angular and react? Let us know in the comments below!

Previous article in this series: Angular Or React: Learning curve - 8th Sphere
Next article in this series: Angular or React: Performance - 8th Sphere