Which web application framework to choose between Angular, React and Vue?

Which web application framework do I choose?

And what if when my application grows this framework will still be good?

Is it a current trend or have I really made the best choice?

These are the questions we ask ourselves every time we have to develop a web application. Choosing a framework for web applications is a key decision for every project and the risk of making a mistake is very high: new libraries are created quickly or updates are always released for existing ones which complicate the choice instead of simplifying it.

However, know that the key characteristics of the various web libraries remain unchanged, and today it is possible to orient yourself with a little attention and avoid finding yourself in frustrated situations where you don't know what to choose.

In this article I will help you understand which frameworks are currently most popular and which features you need to consider to choose the most suitable one for you.

We will focus on single page applications. I told you everything you need to know about this type of application in the article “Do you know what to consider before developing a web application?”

Don't be afraid: in a few minutes you will have clearer ideas on how to make your choice in an informed way.

Framework for web applications: the state of the art

Over the last few years, many libraries for web applications have been born and died. Those that have resisted over time and today compete for the majority of the market are: Vue.js, React and Angular.

Do you know why these are the most popular frameworks?

The reason is simple: they were born from large companies that had the time and budget to support them, document them and make them evolve together with the community. In fact, React is a Facebook project, Angular is a library created by Google. Vue.js is perhaps the only exception: it was born from Evan You who, after working at Google with Angular, decided to create a new library taking the best of Angular but making it lighter; Vue.js currently boasts the Patreon company among its contributors and is adopted by Chinese giants such as Badu and Alibaba.

All these frameworks are based on the concept of template, i.e. the possibility of defining components and describing them through html-like mark-up code, accompanied by replacement logic that describes how to associate data with the template to generate the html code that will be rendered by the browser.

If all three frameworks are based on the same model, what are the differences?

The features of Angular

To develop a web application it is not enough to equip yourself with a template engine, in fact you need other services such as validation, HTTP calls to connect to backend services, routing to manage navigation within your application, client state management…

The peculiarity of Angular is that it is an all-encompassing framework of all the services necessary to develop your application, avoiding the developer from having to integrate external libraries. The convenience is precisely this: knowing a library in depth allows you to develop the entire application without the need to make other technological choices. On the other hand, by choosing Angular you will always pay the price of carrying with you framework features that you may never use.

React and Vue.js, on the other hand, only offer the template and rendering engine, leaving the developer to choose and integrate the libraries necessary to provide the services useful to the application.

Another differentiating aspect of Angular is bidirectional data binding, i.e. the user's action causes the component state to be updated and a change in the state generates a change in the component and the subsequent update of the UI.

Bidirectional binding has the great advantage of working without writing a lot of code and makes the development experience very similar to that of a wpf application where the concept of bidirectional data binding is natively present.

On the other hand, bidirectional data binding has the problem of complicating debugging because the state of the application is potentially modified by all the components that subscribe to the UI events, making it difficult to understand who actually modified the state and how.

To work, Angular internally subscribes to all the events of all the nodes of the browser's DOM (Document Object Model) potentially subject to state updating, often even events that will not be used, burdening the browser with operations that could make the user experience slow and annoying.

The features of React

The rendering model of React and Vue.js are different from that of Angular. Specifically, React uses a one-way binding model exactly the same as server side rendering.

So does React bring with it the disadvantages of Server Side Rendering?

No, let me explain.

React works with what is called virtual DOM, which is a parallel DOM in memory to which the changes to be applied are applied; the mechanism is simple: following a change in data, the component is updated; each modification causes the total reworking of the virtual DOM. The advantage of modifying the virtual DOM is that the actual UI does not have to be completely reloaded every time as happens with server side rendering, generating that annoying page refresh effect.

Let me explain better.

The updating of the page occurs by difference through an algorithm called reconcile through which the engine compares each node of the DOM with the corresponding virtual node and, only where they are different, the algorithm updates the changed portion of HTML.

This technique allows you to obtain all the advantages of Server Side Rendering while eliminating the disadvantages and avoiding - as in the case of bidirectional databinding - having to subscribe to DOM events to understand which part of the UI has changed.

A big advantage of React is the ease of debugging thanks to a development model similar to the functional one. Without going into detail, instead of updating the application state by directly modifying the object that contains the state information (as happens with Angular), the function that generates the next state of the application is applied. Creating a new version of the state instead of modifying the same one allows you to maintain the history of how the state has changed following various changes. If you use this approach, in the event of a bug, you can start from the beginning, reapply all the changes and verify the exact operation that generated the anomaly.

Powerful right?

The features of Vue.js

And the Vue.js binding?

Vue.js uses a binding model called “reactive databinding” based on a one-way flow between components. This model dramatically simplifies the understanding of event flows, making it easier to debug in case of errors compared to Angular.

Vue.js like React uses the virtual DOM: changes to the UI are performed on the virtual DOM and subsequently applied by difference to the browser's DOM.

Ultimately, Vue.js took key Angular concepts, simplified them, and focused only on the rendering part. The goal is to optimize the performance of the library and drastically lower Vue's learning curve, so much so that the authors of the official Vue guide declare how a developer can start implementing their application in less than a day.

Which web application framework to choose?

In this article we have seen the most popular frameworks for developing Single Page Applications, we have analyzed the characteristics to understand which one to choose based on your needs.

The framework for developing SPA is an important choice because once made for your application you will hardly change it or, if you do, you will be forced to rewrite a large part of your code base.

The main advice is to base yourself on one of these three frameworks because, in addition to being very stable and widely adopted, they are managed or have large vendors among their contributors; plus all three frameworks are open source (MIT license to be precise).

Ultimately, if you are used to developing desktop applications with WPF perhaps the least invasive choice is Angular because it has a development model based on templates and bidirectional databinding that you and your team are already close to; furthermore, you will be able to use a single library for the entire application without having to worry about making other technological choices.

Vue.js and React, on the other hand, are more suitable if you develop a web application of which only part is dynamic, or you have a large application that you want to bring to the Single Page Application model: both frameworks can be introduced partially and in a less invasive way than Angular. Which one to choose between React and Vue.js? React is more suited to a functional programming model as well as having a very broad ecosystem but perhaps requires a slightly higher learning curve. Vue.js, on the other hand, of all the frameworks presented, is the simplest and fastest to adopt.

You don't want to risk making the wrong choice and you want to be sure of developing Single Page Application with a performant and robust backend without worries of mind?