Rising to New Heights: Angular 16’s Epic Battle with Vue, React, and Svelte
Discover the power of Angular 16 as it flexes its muscles against Vue, React, and Svelte in a performance face-off
While React is a library for web and native UIs, we’ll refer to Angular, Vue, Svelte, and React collectively as frameworks for this article’s simplicity
According to Angular’s release calendar, Angular v16 is slated for release on next 1st of May, and it’s all the rage, as fair as it may be.
The updated Angular Ivy compiler now delivers faster build times and reduced bundle sizes.
With the introduction of Signals, a reactive programming feature, Angular v16 can handle asynchronous events even more effectively.
The new DevTools extension improves the debugging experience, ensuring a more seamless development process.
Performance-wise, Angular 16 has made significant advancements in server-side rendering (SSR) through the improved Angular Universal, offering faster initial load times, enhanced SEO, and more fluid transitions between client and server-rendered views.
Embracing Web Workers and WebAssembly, the framework optimizes performance for computation-heavy tasks and has enhanced support for stricter type checking and more detailed error reporting, potentially resulting in improved code quality and reduced occurrences of runtime issues.
As the release approaches, 😵💫headlines such as “Angular is going to kill React”… “Angular is going to crush the competition”… have become increasingly common. And while these deaths are often announced, it’s important to distinguish information from all the noise.
And with that being said, the purpose of this article is to provide a benchmarking performance analysis of Angular 15, Angular 16, React, Vue, and Svelte.
Framework trends
By examining Google Trends, we can see the distribution of popularity for “Google’s research” against these frameworks in 2022:
If we extend the interval from 2020 to the end of the first quarter of 2023, the distribution remains relatively stable.
These pictures, demonstrate a global stability scenario around the analyzed tools, with React leading Google research scoped to the category of Engineering and Technology.
Notice, this will vary across countries as a general trend, and if you want to go further click over the links 2022 and 2023 to access the full Google Trends report.
Despite having a relatively small representation in the graph, Svelte will be analyzed due to its growing popularity and potential impact on the web development industry.
Benchmark scenario
The test scenario for this benchmark will be a simple application rendering this simple HTML piece of code below, running in Angular v15, Angular v16, React, Vue, and Svelte:
<header>
<h1>Hello, world!</h1>
</header>Except for the Angular 16 app, all frameworks are being managed with pnpm. The Angular 16 app was not building with pnpm at the moment I was writing this article.
Note, at this moment Angular 16 is not officially released and I’m benchmarking its metrics with a beta version, against the latest stable versions of the other frameworks.
These applications are intentionally kept simple, as the purpose of this analysis is focused on the tools themselves, rather than the context in which they are used.
It means they don’t have CSS styles or anything that customizes the UI being rendered. This approach allows for a possible generalization of the results, providing a basis for further analysis, while specific analyses should be conducted within the appropriate context.
If you would like to review the applications being benchmarked, please visit this repository for a more in-depth analysis. Note profiles were taken using Google Chrome 112.0.5615.138.
Performance Analysis
In this benchmark, 9 critical browser performance metrics were evaluated and analyzed. The performance criteria that were analyzed included:
- Loading, time to download all resources
- Scripting, time to parse and execute scripts
- Rendering, time to generate and display the page
- Painting, time to fill pixels with content
- System, time spent waiting for system tasks
- Idle, time with no user interaction
- DOMContentLoaded, time to load HTML and DOM
- Load time, total time to load the page
- Total blocking time, time to become interactive after user input
Upon further analysis, it is evident that the frameworks have varying strengths and weaknesses, and selecting “who crushes who” is a challenging and risky task.
However, considering the overall performance, it is possible to identify certain frameworks that stand out in some aspects.
Svelte emerges as a strong contender, with the lowest load time (396ms) and DOMContentLoaded (100ms), which are crucial for delivering a fast and responsive user experience.
The low load time suggests that Svelte is highly efficient in delivering content to users quickly. However, Svelte’s total time blocking (289.3ms) is on the higher side, which may slightly impact the smoothness of user interactions.
React is another top performer, boasting the lowest total time blocking (257.47ms), which indicates that it provides a smoother user experience with fewer delays or interruptions during interactions.
Although React’s load time (449ms) is slightly higher than Svelte’s, it still outperforms Angular 15, Angular 16, and Vue in this metric. Angular 16 demonstrates a marked improvement over Angular 15, particularly in terms of idle time (361ms reduction) and load time (285ms reduction).
However, Angular 16’s load time (548ms) and total time blocking (263.09ms) are still higher compared to React and Svelte, which positions it as a middle-ground choice.
Vue offers consistent performance across all metrics, but it doesn’t excel in any particular area, making it a decent all-rounder without any significant drawbacks or advantages over the other frameworks.
Based on this analysis, React stand out as the strongest competitor in terms of delivering the smoothest user experience, while Svelte excels at providing faster initial load times.
Angular 16 and Vue perform admirably but don’t quite match the efficiency of React and Svelte. Lastly, Angular 15 can be seen as the least desirable choice due to its comparatively high load time and total time blocking, which may affect the user experience negatively.
Looking at the stacked version of the chart, note the amount portion of the stacked used by Svelte to idle; and all the other stacks it stand out, really interesting isn’t it?
But, we can also ask: what means criteria where all the frameworks have similar rates, even though in a microscopic analysis they may be different in a magnitude of 100, 200ms? Only that each framework has its own strengths that are suited for different use cases.
However, it is important to consider several questions before selecting a framework, such as its scalability, the stability of its community, and how easily engineers can develop high-quality user interfaces.
This means that performance analysis like the one we’ve just made provides some overall picture, but will never be able to translate and provide strong arguments to use or not a specific technology in real-world scenarios.
While there are certainly some decisions that we simply know are not the best, there are often doubts when it comes to evaluating the effectiveness of different technology options and multiple trade-offs.
Therefore, regardless of how much we may love a particular choice, it is important to carefully analyze and consider some factors before making an important decision as choosing a framework to engineer something:
- Architectural characteristics of the solution
- Architectural decisions ruling the solution
- Design patterns adopted for the solution
- Constraints (hardware, cost, legal, etc)
- Technologies the engineering workforce knows how to use the best
At the end of the day, even the most powerful technology can be rendered ineffective without the necessary expertise to use it effectively. That’s why the Solution Stimmung is crucial when analyzing frameworks.
Understanding how a framework works, interacts with the browser, and utilizes the available resources with minimum performance and operational overhead is essential.
Conclusion
In summary, the data, despite the 40% error rate, suggests that React and Svelte are leading frameworks in terms of delivering smooth user experiences and fast initial load times for such a simple app, with minimum requirements and, basically, no complexity.
Angular v16 beta demonstrates improvements over its predecessor, while Vue is a well-rounded choice with no major drawbacks or advantages.
Final head’s up! This is an overall analysis and should never be enough to inform any final architectural decision. We may use, on the other hand, as part of the key aspects you’ll explore in your real-world proof of concept.
Maybe, the next analysis could address a complex reactive scenario and how each of these frameworks would perform in its own way.
If you found this article useful for you, please share it with your fellow walkers! 🖖
Let’s connect? https://www.linkedin.com/in/andrekardec
