Wednesday, August 5, 2015

Facebook's ReactJS: Finding its own space

React is a one of the most talked about Javascript frameworks of 2015 and in some way it has made its own space amongst the bigger frameworks in market currently.

Facebook's React is filling in gaps where there was a serious room for improvement i.e. the view portion of MVC. Different frameworks in past and present didn't seem to fit in with any other framework as well as React does now. Well ! I would be wrong in saying if React is actually a framework by itself as most part of it its just the view but for a Javascript developer MVC is what it is for 80% of the time.

So where does React 
"V" framework fits in ?

Lets say you are building a heavy component like a grid in a popular AngularJS, it would limit you in some way on how much bigger you can actually build it without hitting the huge watchers count along the way. Just googling for "Angular Grid" will give you a bunch of grids which have a lot of performance issues when the number of rows increases beyond a 1000 using the famously infamous ng-repeat

Before React came into picture many performance workarounds for Angular came from using some sort of DOM manipulating libraries manipulating it in directives but these libraries didn't fill in as a "V" framework. In a world of microservices view frameworks like React actually make a lot of sense as something which you could rely on for getting you out of a trench if you do fall while going full steam on an existing full blown framework.

Web is hellbent comparing "React Vs Angular Vs Ember Vs Backbone Vs NoMatterWhat" - Please don't compare, its not even Apples and Oranges.

To me react is complimentary to existing frameworks if you want to make your view component to be fast, faster or real fast.... Just to give a scale on how fast it is - in my recent encounter with ng-repeat the performance improvement from porting a tree component to react was about 200% .

In the following example React.render() function is used to render the react component within an angular directive. The function also does 2 way communication between Angular and React.

/** @ngInject */ function FastComponent($window) { return { restrict: 'E', scope: { angularCallbackFn: '=', data: '&' }, link: function (scope, el, attrs) { scope.$watchCollection(,function(newVal,oldValue){ if(newVal !== oldValue){ React.render( React.createElement($window.components.FastTree, {data: newVal,callback:scope.angularCallbackFn}), el[0] ); } }); } }; }