React Vs. Angular 2020

React is the framework du jour according to Google Trends. But how does it compare in bundle size, render performance, and build times to its forks and to the former leader Angular?

Our contrived benchmarking app is a "hello world" app that renders 1,000 links to other pages, here's how we implemented it:

1. Angular, from ng new schematic (the equivalent of create-react-app)
2. React from create-react-app
3. Preact (React clone that focuses on small bundle size) from preact create
4. Inferno (React clone that focuses on render performance) from npx create-inferno-app

We used production builds, e.g. react-scripts build and ng build --prod

Metric #1: Bundle Size

The size of the "transpiled" JavaScript from the build command. This matters not just for mobile users, but even lighting fast Internet connections with slower CPUs due to the cost in parsing all the JavaScript. Lower/smaller numbers are better.

1. Preact v10.3.2 39kb
2. Inferno v7.4.2 40kb
3. React v16.13.1 69kb
4. Angular v9.1.7 110kb (Angular's Router is particularly heavy)

Metric #2: Render Performance

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.

1. Inferno v7.4.2 2.4s
2. Preact v10.3.2 2.6s
3. React v16.13.1 2.6
4. Angular v9.1.7 3.6

• First Meaningful Paint (FMP) is important for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen. A fast FMP reassures the user that something is happening.
• Time To Interactive, is a useful check for FMP because it tells you whether (or how much) interactivity was compromised to achieve render performance.

In the case of this simple application, the FMP almost matches time to interactive. In a real world application this is not the case.

Build Time

Frontend web application build times matter:

1. CI/CD costs at scale (after many devs committing many times a day)
2. Local developer waiting for changes to apply after saving a file

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.

Results

This measurement was taken by invoking the production builds using time.

1. React v16.13.1 14s
2. Inferno v7.4.2 18s
3. Preact v10.3.2 30s
4. Angular v9.1.7 120s

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.

Conclusion

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.