Web Framework Comparison: Angular, React, Vue.js, and Blazor

Web frameworks are collections of software libraries, functions, models, and structures that have been combined into one tool to make it easier for developers to implement and build web applications.

The annual Stack Overflow Survey lists various web frameworks used by professional developers as well as those new to programming. The survey for 2022 shows that Angular, React.js and Vue.js, the web frameworks presented here, are very popular. Even Blazor, which is a rather new web framework in comparison, already ranks as an emerging and popular framework in the Stack Overflow Survey. (Stack Overflow, 2022)

Following figure Stack Overflow Web Framework Ranking shows the ranking of the most frequently used web frameworks, surveyed by the Stack Overflow Survey. Here you can see that Angular, React.js and Vue.js are all in the top 10. Blazor is in 17th place, just behind Svelte, another popular and long-established web framework. (Stack Overflow, 2022)

In addition to the ranking of the most used web frameworks, they are also evaluated in the categories Loved and Dreaded. This rating shows that the featured web frameworks Angular, React.js, Vue.js and Blazor were each rated Loved by more than 50%. (Stack Overflow, 2022)

Following figure Stack Overflow Survey Loved und Dreaded Angular shows the Loved/Dreaded distribution for the Angular web framework. Angular is rated 52.2% positive with 5822 responses

Following figure Stack Overflow Survey Loved und Dreaded React shows the Loved/Dreaded distribution for the React web framework. React is rated 68.19% positive with 15873 responses.

Following figure Stack Overflow Survey Loved und Dreaded Vue.js shows the Loved/Dreaded distribution for the Vue.js web framework. Vue.js is rated 63.16% positive with 6492 responses.

Following figure Stack Overflow Survey Loved und Dreaded Blazor shows the Loved/Dreaded distribution for the Blazor web framework. Blazor is rated 62.67% positive with 1528 responses.

The following chapters describe the chosen web frameworks, their advantages and disadvantages, their application areas and how they differ from each other.

Overview

Angular, React and Vue.js are popular frameworks for web application development. Blazor, on the other hand, is rather new to the market compared to the former frameworks and is just establishing itself in the landscape of web technologies. All of them support the implementation of good usability in the application, among other features and capabilities, but they have some differences in the way they handle it.

Angular

Angular is a web framework developed by Google in 2016 that brings a large feature set out-of-the-box (Core, 2022). This feature set includes built-in functions, tools, and libraries that help implement high usability. Furthermore, additional libraries can be added through the large community and other third-party vendors. Applications are developed in Angular with HTML, CSS and TypeScript (Hutagikar & Hegde, 2020).

Advantages and disadvantages

The following tables show the advantages and disadvantages of Angular collected from publications by Seshadri, Ollila, Mäkitalo and Mikkonen and Hutagikar and Hegde, among others.

Advantages	Description
Custom components	A core concept of Angular is to bundle functionality into components to create concise and easily reusable parts.
Data binding	Data binding allows data to be exchanged fluidly between the script (TypeScript) and the view (HTML). This binding also simplifies responding to events in the script or view and removes the need to write custom code that deals with data modification at runtime.
Dependency injection	Modular services and components can be implemented in Angular. Dependency injection makes it easy to use dependencies in these services and components, increasing testability and reusability.
Testing	Testing is essential and Angular was designed with testability in mind.
Out-of-the-box	Angular brings with the default environment all the tools necessary for development.

Disadvantages	Description
Learnability	Angular is a very extensive framework which makes it difficult to learn, especially for beginners.
Overhead	If you take components as an example, you will notice that configuring them requires, among other things, 4 different files per component and various references to be set. This creates some overhead.
Performance	Compared to other web frameworks, Angular is a bit slower in script execution due to its size.
References	Whether creating routing, services or using dependency injection, it is often necessary to set various references within the application in different files, which makes working with Angular more cumbersome than with other web frameworks.
Application areas	Angular brings with it a wide range of features as described earlier, since it is the most comprehensive of all frameworks, it is also very suitable for large or complex applications and for enterprise applications. Angular is also preferred for applications with dynamic content. Dynamic content is content on web pages that needs to automatically adapt to various conditions such as certain user signals (Hutagikar & Hegde, 2020).

If you want dive deeper into Angular check out the Angular Architects website or get yourself a copy of the bestselling ng-book.

React

React was developed by Facebook in 2013 and is more of a library than a framework. It does not have as many built-in features as Angular, but offers the possibility to add more functionality using libraries (Hutagikar & Hegde, 2020). It has a strong focus on component-based design, this can help make the application more modular and easier to maintain (Kern, 2022). React has a large community and many third-party libraries that help implement usability. Applications are developed in React using HTML, CSS, and JavaScript (Banks & Porcello, 2017).

Advantages and disadvantages

The following tables show the pros and cons of React collected from the publications according to Banks and Porcello, Goetz and Hutagikar, and Hegde, among others.

Advantages	Description
Overhead	The overhead of generating components is lower with React, where usually only one file is needed for a component.
Performance	React offers better performance than Angular, for example, when rendering and executing scripts.
DOM manipulation	DOM manipulations are performed more efficiently in React, due to the use of a Virtual DOM, only the really necessary manipulations are performed.
Learnability	React has a flatter learning curve than Angular, for example, because it is also less extensive in its basic design and has a less complex file structure.
SEO	Through React, a more efficient search engine optimization can be achieved, which is especially relevant when ranking one’s website in search engines (Sens, 2018).

Disadvantages	Description
Functionality	Out-of-the-box, React offers less functionality than Angular and requires the subsequent addition of additional software libraries.
Programming style	React follows the Functional Programming approach rather than the current Object Oriented Programming standard.
Build tool	Due to the way components are programmed in React, an additional build tool is needed to make the code executable for browsers.
Application areas	React is somewhat more limited in scope and functionality than Angular, but its performance, flexibility, and search engine optimization are more pronounced. Thus, React is well suited for applications that require fast processing, increased flexibility, and versatility (Hutagikar & Hegde, 2020).

React sound like a Framework you want to give a try? Maybe start with a nice youtube channel I like myself Programming with Mosh and round it off with The Road to React or Learning React.

Vue.js

Vue.js is a lightweight framework developed in 2013 by Evan You that focuses on simplicity and flexibility. Vue.js, like Angular and React, has a strong focus on component-based design and has a set of directives and events that allow easy manipulation of the DOM (Macrae, 2018). The framework has a large number of third-party libraries and tools to help with implementation. However, out-of-the-box, Vue.js offers fewer standard libraries than is the case with Angular and React. Applications are developed in Vue.js using HTML, CSS, and JavaScript (Hutagikar & Hegde, 2020).

Advantages and disadvantages

The following tables show the pros and cons of Vue.js collected from the publications by Nelson, Hutagikar and Hegde and Ollila et al. among others.

Advantages	Description
Progressive framework	One feature Vue.js advertises is the ability to start with very small applications and expand them progressively.
Learnability	Vue.js has a flatter learning curve than Angular and React, due to the simplicity and flexibility that Vue.js relies on.
Overhead	The overhead of generating components, among other things, is lower with Vue.js, where usually only one file is needed for a component.
Performance	Vue.js offers better performance than Angular, for example, when rendering and executing scripts.

Disadvantages	Description
Scope	Vue.js was developed mainly for the view layer of applications and may not be sufficient for more complex applications.
Functionality	Compared to other frameworks, Vue.js offers less functionality and fewer plugins and libraries.
Flexibility	While the high flexibility of Vue.js is actually an advantage, too much flexibility can lead to inconsistencies in the code, as certain standards are no longer adhered to.
Application areas	Vue.js is somewhat more limited in scope and functionality than Angular, React and Blazor, but performance, flexibility and simplicity are the arguments in which Vue.js shines. Thus, Vue.js is very well suited for small or lightweight applications where it can be assumed that requirements will change a lot or be extended and where performance plays an important role (Hutagikar & Hegde, 2020).

Blazor

Blazor was released by Microsoft in 2018, making it the youngest of the featured frameworks. It allows developers to develop web applications using C# and .NET instead of JavaScript or TypeScript. Furthermore, it offers the possibility to develop applications server-side – requests are forwarded to the server – or as WebAssembly – requests are processed at the client (EckhartWöllkart, 2021). It provides a powerful collection of integrated components and templates, as standard .NET libraries can be included in the Blazor application. Blazor, like Angular, React, and Vue.js, works with component-based design (Himschoot, 2020). While the .NET part of Blazor has a huge community, Blazor itself does not have nearly as large a community as Angular, React, and Vue.js, requiring developers to spend more time in research and custom development (Ollila et al., 2022).

Advantages and disadvantages

The following tables show the advantages and disadvantages of Blazor collected from publications according to Engstrom, Eckhart-Wöllkart and Himschoot, among others.

Advantages	Description
Technology	Blazor offers the possibility to develop applications server-side or as WebAssembly. This increases the range of application areas for which Blazor applications can be created.
.NET	Many other frameworks rely on JavaScript or TypeScript. Here Blazor sets itself apart with the possibility to develop web applications in C# and with .NET. For .NET developers, this is an attractive argument.
Future	Of the frameworks presented, Blazor is the youngest and most immature and thus has the greatest potential to grow and learn from the experience of established frameworks.

Disadvantages	Description
Performance	Since Blazor is still rather young on the market and could not yet be optimized by empirical values from real implementations, it cannot currently keep up with the performance of Angular, React and Vue.js.
Projects	Blazor currently has few real-world implementations as a reference for its suitability as a relevant web framework.
Maturity	For complex applications, it may also be necessary to include JavaScript in the development, since there are already established tools or libraries that are not yet covered by Blazor.
.NET	For non .NET developers who have previously worked with JavaScript frameworks, Blazor has a steeper learning curve.
Application areas	Blazor is still in the improvement and build phase, nevertheless it is foreseeable that Blazor wants to be an alternative to Angular. It brings with it a large feature set and has almost the entire .NET framework behind it. Thus, it is also well suited for large or complex applications and for enterprise applications (Dorosh, 2023).

Framework conclusion

In summary, all of these frameworks support the implementation of good usability in applications. Angular offers many built-in features and tools and is well suited for complex applications, but has a steeper learning curve due to its large feature set. React incurs less overhead and has a flatter learning curve than Angular, but offers less functionality out-of-the-box. Vue.js focuses on simplicity and flexibility, but focuses almost exclusively on the view layer and provides less functionality than Angular and React, for example. Blazor offers a modern and intuitive syntax and is very attractive to .NET developers, but is not yet as established as Angular, React, and Vue.js and thus still has stability and performance issues

Personal note

In my professional career and my educational path I used Angular quite a bit, played around with Blazor, have seen some React but never used Vue.js so far. All of the stated facts in this blog I can agree on but as a .NET developer I thrive to see Blazor becoming a stable in the web framework landscape and push up its position in the Stack Overflow Survey in the next years. Besides my subjective bias to Blazor I can say that all of the mentioned web frameworks serve their purpose. Which one you choose relies heavily on the scale of the project you want to implement.

References

Banks, A. & Porcello, E. (2017). Learning react: Functional web development with react
and redux

Dorosh, K. (2023). Blazing a trail: Web app development with microsoft blazor in 2023.

Eckhart-Wöllkart, M. (2021). Single page applications mittels microsoft blazor entwi-
ckeln : Softwaretechnische untersuchungen im vergleich zu angular, react, vuejs
und co.

Engstrom, J. (2021). Web development with blazor and .net 5 a hands-on guide to
building interactive web uis with… blazor and c. PACKT PUBLISHING LIMITED.

Götz, F. (2020). Full stack web-applications-vom client bis zur datenbank analysen
und kombinationen unterschiedlichster technologien zur ableitung einer hand-
lungsempfehlung ausgeführt am studiengang informationstechnologien und wirt-
schaftsinformatik [Masterarbeit].

Himschoot, P. (2020). Microsoft blazor building web applications in .net. Apress.

Hutagikar, V. & Hegde, V. (2020). Analysis of front-end frameworks for web applicati-
ons. International Research Journal of Engineering and Technology . Zugriff auf
https://existek.com/blog/top-front-end-

Kern, K. A. (2022). Comparing modern front-end frameworks computer science

Macrae, C. (2018). Vue.js: Up and running: Building accessible and performant web
apps. O’Reilly Media.

Nelson, B. (2018). Getting to know vue.js: Learn to build single page applications in
vue from scratch. Apress

Ollila, R., Mäkitalo, N. & Mikkonen, T. (2022). Modern web frameworks : A comparison
of rendering performance. Journal of Web Engineering. doi: 10.13052/jwe15

Seshadri, S. (2018). Angular: Up and running: Learning angular, step by step. O’Reilly
Media. Zugriff auf https://books.google.at/books?id=CAFeDwAAQBAJ

Stack Overflow. (2022). Stack Overflow Developer Survey 2022. Zugriff am 2023-05-16
auf https://survey.stackoverflow.co/2022/