CODEWITHSUNDEEP
angularjsreactjs
gihan-maduranga
gihan-maduranga

Reputation: 4801

Is it worth to build a web application combining AngularJs and ReactJs components

I have web application that is written in AngularJs 1.x so i have decided to convert it into either AngularJs2 or ReactJs+AngualrJs2. Reason to choosed ReactJs was that it is rendered faster than AngualrJs and i choosed AnguarJs was that it's two way data binding and i can keep my legacy model as it is and data bind into ReactJs components.I prefer AngualrJs data model over flux.I am deciding to create reuslable HTML components in ReactJs and bind AngularJs model data into it.

Sample Code Snippet using AngualrJs + ReactJs

angular.module('app').directive('greeting',[function(){
    return {
        restrict:'AE',
        scope:{name:'@'},
        link: function (scope, elem, attrs){
            var GreetingSection = React.createClass({displayName: 'Greeting',
                render: function() {
                    var message = "Good morning " + this.props.data.name + ", how are you?";
                    return React.createElement('div', {className: "greeting"},message);
                }
            });
            React.renderComponent(GreetingSection({data:scope}), elem[0]);
        }
    };
}]);

My questions are,

  1. Are there any performance benefits if i combined AngualrJs(2.x or 1.x) with ReactJs components?
  2. Can i achieve faster rendering using AngularJs 2.x without ReactJs?

Please help me to take an decision.

Upvotes: 1

Views: 170

Answers (2)

vijay
vijay

Reputation: 10997

Trying to answer generally

Analysis :

Note : i have used both

Remember on all performance post on internet there is MICRO seconds difference & people start shouting "this is fast".."that is slow" ... you could notice.Both are having cutthroat performance

so if you really worried about performance then try to categorize your app based on below criteria .

so that you don't mess up loading "angular 10 libs" + "react 10 libs" = 20 libs on ui , without analyzing

Angular category

  1. Famous for two way data binding
  2. Best for lots of data computation on UI Eg - rate * quantity = amount
  3. Its stubborn(typed lang,framework driven) for creating components.

React category

  1. Famous for component simplicity & rendering
  2. Best for lots of visual changes on UI Eg : adding bulk markers on map
  3. Worst for lots of data computation on UI Eg - rate * quantity = amount.So if you miss 1 setState() and final computation will be wrong

Confusion :

So if person wants to use both then person have not defined his use case clearly,As after using both libraries he will be adding extra dozens of libraries which will slow down app from other side

So if person chooses only 1 than he is on very much right direction & his use case falls in above 2 categories

Note :

The tipping decision to choose 1 from both will largely depend on how Massively, Badly, Largely, Mostly you be using two way data binding feature/setState. As in react for two way data binding you have to write setState() , where as in angular you don't have such tension.

so if you have very less ui data computations like 2..3 per form than react is fine else straight away choose angular

Eg : suppose if you have 40 computations in local state like rate * quantity = amount so in react you have to write setState() for 40 times .so you miss 1 setState and final numbers will be wrong.So its better to use angular in this case

Eg : suppose if you have 40 computations in redux state .the it will be BULL**IT to write 40*50 extra coding lines.

For 1 computation

In angular you will write rate * quantity = amount total 1 line in angular.

But react Action 4 lines , Reducer 5 lines ,Component 3 lined total 12 lines in react.

Advice :

If you are not sure,then choose angular as it is having all extreme case features

Conclusion :

Its Not worth combining angular with react

Upvotes: 1

Kuldeep Umale
Kuldeep Umale

Reputation: 26

Not sure about using both together but yes You should play around with these together and see if you can improve your application. Reactjs will help you to improve faster rendering but angular js 2.x will help you to improve Performance

Upvotes: 0

Related Questions