Migrating from AngularJS to React — how do you measure your performance gains?
- Here is rendered HTML for the similar ticker component in React: – – React component (left side), Rendered HTML (right side) – No wrapper elements created for child components – In our specific example, AngularJS created an additional 1400 DOM nodes compared to React for rendering the same number of…
- Script execution time comparison (AngularJS vs. React/Redux vs. React/Mobx) — Replacing 150 tickers every 0.5 sec – The below chart shows the frames per sec(fps) as the refresh happens.
- AngularJS emitted lot of GC events as the ticker list is refreshed with 150 new items – The Redux performance profile shows no GC pauses whatsoever during the script execution.
- Adding Tickers — Script execution time comparison – With AngularJS, adding new items caused jank in the browser right from the start (red bars) and the number of frames per second dropped from 60 early on and never recovered (green area) during the entire add operation.
- Mobx — Add tickers timeline – Memory GC eventsRedux consumed about half the heap size as AngularJS during the entire run.
Are you looking into migrating a large AngularJS single page application to React? If so, you may be wondering what sort of performance gains you are going to get with React and how the code will…
Migrating from AngularJS to React — how do you measure your performance gains?Are you looking into migrating a large AngularJS single page application to React? If so, you may be wondering what sort of performance gains you are going to get with React and how the code will morph (with state management libraries Redux or Mobx).
In this post, I’ll try to answer some of these questions, and give you a lot of data you can use to make more informed decisions.
First, I will go over the performance and memory profiles of various UI scenarios implemented using AngularJS, React/Redux and React/Mobx. We will compare and contrast the performance of these frameworks on measures like script execution time, frames per sec, and usedJSHeapSize for each scenario.
I provided the links to the test pages and source code so you can try out those scenarios and can review the code to get a feel for constructs that React (with Redux or Mobx) will bring to the table.
Performance test setupTo evaluate the performance of AngularJS and React, I created a benchmark application, a stock ticker dashboard. This application shows a list of stocks and has some controls to automate UI test actions. For each stock, the application shows the ticker symbol, company name, sector name, current price, volume and simple moving averages (10 days, 50 days and 200 days), and a visual indicator showing whether the price went up or down. The test dataset consists of…