Our contrived benchmarking app is a "hello world" app that renders 1,000 links to other pages, here's how we implemented it:
We used production builds, e.g.
react-scripts build and
ng build --prod
Some frameworks are faster than others at rendering ("painting") content on a screen.
This measurement (First Meaningful Paint, Time To Interactive) was taken using Chrome Lighthouse (Courtest of Mother Google). Lower/smaller numbers are better.
In the case of this simple application, the FMP almost matches time to interactive. In a real world application this is not the case.
Frontend web application build times matter:
This data should be directionally/relatively accurate as an app grows. It matters even more if your team is big or grows over the many years of an app's existence.
This measurement was taken by invoking the production builds using
Preact and Inferno are clones of React with optimizations for bundle size, and performance, respectively. You can start to see the trade-offs for those optimizations in build times.
Angular not only is a heavier framework but is written in TypeScript so it must compile the Typescript before the "conventional" bundling process can begin.
React, Preact, Inferno are all written in XML-like "JSX" syntax. Why do all 3 exist?
Preact forked for simplicity and size, and Inferno for performance. One of the Inferno devs now works on React at Facebook, so perhaps Inferno is no longer relevant. In either case, React is advancing quickly and is probably "good enough" for all use cases, but Preact's tiny bundle size makes it very
Angular apparently has not optimized for bundle size, build times, or even render performance. But with features, Angular wins. React/Preact/Inferno is more barebones and requires you to find 3rd party libraries.
If you have questions or concerns over these comparisons, or would like to add your own comparisons, feel free to open issues and PRs on the Github repository.