Why are We Using ReactJS for Our Front-end?
“Why we migrated our front-end to ReactJS from AngularJS”
ReactJs has become a super hot topic these days. Yes, it has, because it should be! ☺️
Earlier we used AngularJS (1.x) and for a large amount of DOM related updates, it sucked.
In our application, ShoutOUT, before we switched into ReactJS, we used AngularJS for generating the contact list. In AngularJS, when the number of contacts increases, it takes like 5 seconds just to render the list. All together with the network delay and back-end delays, it takes like 10 seconds totally.
We tried different ways to fix this performance issue. We tried limiting the number of contacts getting from the back-end, improving the back-end performance to return the list fast, reducing the payload size, and also minimizing the front end DOM update element size. None of these worked up to the expected level because the problem is in the DOM rendering time. We were looking for a solution and found out that ReactJS solved this performance issue with the help of its Virtual DOM. ☺️
Well, with ReactJS, now it’s just a matter of loading the contacts from the back-end.
As you can see now the total Rendering + Painting time is less than 200 ms. Forget the IDLE time as it’s the time gap between starting the recording and refreshing the loading. So the total time for loading and rendering the list is 889 milliseconds 😮 which is an awesome performance increase.
Okay. The next question is how to migrate our existing code base into ReactJS. Believe me, it’s just a matter of putting ReactJS libraries and a little bit of tweaking of the existing code which will take less than an hour.
Ex: Converting static HTML component into React component.
Original code:
<div class=”commentBox”>
Hello, world!
</div>
Equal React component:
var CommentBox = React.createClass({
render: function() {
return (
<div className=”commentBox”>
Hello, world!
</div>
);
}
});
- Wrap the content with render method
- Change the class into className as class is a javascript reserved word
Let’s check why the ReactJS is awesome.
The following comparison will answer most of your questions regarding why ReactJS is better in the performance aspect. By the way, one correction in the comparison, in ReactJS you can render in both client side and server side.
So, What is this Virtual DOM? Given below is the best explanation I’ve found so far.
“The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.” 😮
In a nutshell, Virtual DOM is an almost similar HTML DOM tree which doesn’t have browser specific implementation. And whenever you need to change the view, ReactJS will,
- recalculate its Virtual DOM
- get the difference between previous Virtual DOM and the new one
- update the actual DOM only at the node where there is an actual change along with its children.
You can find more in detail here.
Don’t migrate your application to ReactJS just because I say 😉. It always depends on what your application is and what kind of functionalities it has. Sometimes Angular JS (1.x or 2.x) will perform better than ReactJS in your application. And of course you don’t have to migrate the whole application. What you can do is just migrate the components which have the performance issues. That will minimize your migration.
