Saturday, December 19, 2015

AngularVsReactVsSoManyOthers

Why  Not Angular Js ?

With two way binding and dirty checking in Angular js, users do experience dis-ruption. It works like this.After page load, the DOM elements marked by the ng-app directive is scanned. Each of the DOM elements has a listener function(java script function) bound to it. If the javascript function modifies the DOM (which you will do), again the re-scanning, re-bounding to js functions...in short dirty checking happens.
It is good for web applications that have fixed set of DOM elements, however if the number of DOM elements that are manipulated increases, Time to consider "Right Tool For The Right Job"

Why React Js ?

React Js is class based and application overrides the render function of the React class. Each React Class can compose an other class by Calling <Todo /> etc..
Then comes the virtual DOM. All these components are applied by react and a virtual DOM is computed. React's internal algorithm, diffs  the computed VIRTUAL HTML DOM with the existing HTML DOM , and applies the changes alone. Also with class based overriding, there is more precise control, over what behavior we want to override.

Why Not Both ? 

Yes. Of course. Use Angular js on DOM elements that interact with server, but do not get changed.
Surround only those with the ng-app directive. Then use ReactJs for say showing a lot of UI menu items, that get loaded from  the server.

Why Only Two ?

Yes Of Course. You do not have to stop with two. You can use more than one framework. If you do take this approach, please follow the following guidelines,

1. Use libraries/tool kits , instead of frameworks.

Frameworks have a larger foot print on the code, and your code is called by the framework.
Libraries provide functionality and the application invokes the library.

2. Organize. No Excuse.

Do write large pages, large java scripts or large anything. Organize your pages in to plain html and Js components. Use applicable design patterns with in js and import the as needed, wisely.

3. Switch Vs Stick With it.

Frog in the pond story applies. Know when to adapt your existing choice and know when to switch.

Pick libraries that play well with other libraries each time. "Feature Rich" tool kits are deceitful choices , rather tool kits that do one only one thing , very well are better choices.
To illustrate, If your requirement is to use just two way binding, then knockout.js is a better choice..
Not that Angular.js or React.js is bad, they are just an over kill for simple two way bindings.

No comments:

Post a Comment