In the last 10 years the Web has changed and grown dramatically. The complexity (and the power) of the types of applications that can be implemented has increased dramatically, and because of these conditions, it was necessary to create cutting-edge tools that would offer entirely new possibilities for developers.
In this article we will take into consideration the Javascript frameworks that have most marked this generation of Web Development, analyzing its characteristics and comparing them. We have therefore included:
- Angular (taken into account from his second version onwards)
- React
- Vue.js
The links mentioned above point to the respective HTML.it guides. Whoever wants, can use them to deepen their characteristics.
Before presenting our comparative analysis, it is worth pointing out that we do not want to produce a verdict in which winners and losers are drawn up, but simply to highlight the characteristics, advantages and disadvantages of these frameworks.
Criteria of analysis
First, let’s see what the criteria are based on compare the aforementioned products. A web developer must consider several factors when choosing a particular software or instrument. For this reason, the study is divided into 2 items, each representative of certain criteria:
- Ecosystem
- History and longevity : indicates the degree of maturity of the framework and the reasons for which it was created
- Popularity : indicates the degree of diffusion and use of the framework in the world of Web development
- Corporate support : indicates the presence or absence of a company involved in the development or sponsorship of the framework, or simply as an interested party
- Ecosystem and community : analysis of the universe and the environment generated by the framework, including community notes, the presence of libraries and solid plug-ins that extend the functionality of the framework in question
- Product
- Initial experience and learning curve : analysis on the type of experience that the user will face using the aforementioned framework, how fast he can immerse himself in the dynamics of the same and how easy / difficult it will be to devote to the development of complex features
- Required skills : indicates the skills that a developer must necessarily possess to be competitive using the framework, and which ones are required for development forwarded
- Completeness : indicates the degree of “completeness” of the framework, ie how many features it provides to the developer
- Performance factors : analysis regarding the degree of performance of the framework in the context of a complex application
The analysis
History and longevity
Angular is the oldest framework of the 3 products taken into consideration. Its first release dates back to October 2010, with the name of AngularJS . However, its definitive second version, which has been completely rewritten, is much more recent, released in October 2016. So to talk about Angular’s story, both factors must be taken into account. The ecosystem produced in previous years is still alive and active, but version 2.0 is relatively recent. Angular was initially created to help development teams meet the challenges of implementing next-generation applications, such as single-page applications ( SPAs ).
React , which is sometimes identified as React.js / ReactJS, was released in March 2013. As in the case of Angular, React has recently undergone a rewrite of its Core, although unlike the first, changes in the API are been much less drastic, making the new version an extension rather than a change of direction. React was created to assist developers in creating user interfaces (UI) in a simple, fast and scalable way for complex web applications.
Vue.js is the “smallest” of the three frameworks, and was released in February 2014. The project’s creator, Evan You, was a Google developer who intensively used AngularJS for the realization of several projects. Vue.js was produced to be a “light” alternative to Angular. The author wanted to provide developers with a framework from the low learning curve, but that could grow to handle very complex applications.
All three feamework have their consistent history behind them, and have matured to the point where they dominate the market scene.
Popularity
Popularity is a considerable indicator of the maturity of a product. A popular library is a product that is used intensively in the development of real web applications, is an indicator of how and how much the framework meets the needs of users and companies. Popular applications that have been realized with a particular framework by “famous” development teams indicate that the framework itself should be seriously considered. Popularity is measurable quantitatively and qualitatively. In the first case, the numbers obtained from GitHub , from monthly downloads from npm and open topics on StackOverflow are the following:
For qualitative analysis, let’s see which notable brands use these products.
- Angular
- Wix
- Weather.com
- Healthcare.gov
- Forbes
- React
- Netflix
- Paypal
- AirBnB
- Uber
- Vue.js
- Alibaba
- Baidu
- Expedia
- Nintendo
- GitLab
As we can see, all three software are very popular, although in numerical terms the leader is definitely React. In terms of use by popular brands, React, Angular and Vue are in a balanced position, being used in production environments of the highest level. Obviously, if one of these companies deals with aspects similar to those we need to deal with in a project, this factor can be a good indicator of choice.
Corporate support
In the implementation of high-level projects, adopting open source software can be risky for a company. If the library development is interrupted, the company that uses it in its application is in an unstable situation. The support of a product by a consistent sponsor is instead an indicator of stability and longevity of the product itself. In fact, the opposite is also true: both Google and Facebook have abandoned the development of important projects in the past, so it is always better to have a “plan B”.
Both React, Angular, and Vue enjoy such support, with a difference that particularly affects Vue. While Angular is maintained by Google developers, and React is under the control of Facebook developers, Vue.js is supported by a variety of small / medium-sized organizations, primarily through Patreon , an online tool dedicated to service creators.
Ecositema and community
The universe produced by a particular framework certainly also includes its degree of popularity, but this factor is not the only one to be taken into consideration. For the purpose of our analysis, we add the following points:
- the number of npm packages that make use of a framework available to developers
- the dimension of the Core Team that develops the framework
The ecosystem of a framework does not depend only on its degree of popularity. Take for example jQuery : although it is still a very used library, its innovation curve is very low, as is the declining community.
The number of npm packages that make use of a framework are indicative as they represent a quantity of plug-ins and extensions that a developer has available for his projects, not to mention that the quality of the same plug-ins could also be guaranteed by number of downloads via npm received.
Regarding the number of members in the official development team, Angular has the largest group, with 36 members dedicated to its production. The core team of Vue.js has reached 16, while from some global considerations the React team should have a number of developers between 6 and 10 members. Angular has the largest code base among the 3, which is why a team of development so nurtured has a real sense.
Initial experience and learning curve
Angular offers perhaps the initial experience of more complex use. To launch an application, it is necessary to install the CLI, and set a couple of parameters:
<pre class=”brush: php; html-script: true”>
// installazione CLI
npm install -g @angular/cli
// creazione di un nuovo progetto
ng new my-app
// avvio del server (‘open’ apre automaticamente il browser)
cd my-app ng serve –open
</pre>
At this point it will be possible to work with the component files generated by Angular, such as src / app / app.component.ts :
export class AppComponent {
title = 'Mio titolo';
}
The Tour of Heroes tutorial is a mandatory step to start immersing yourself in the Angular dynamics, showing how to deal with the implementation of a professional application.
React offers two different guides to start writing code using its features. The first , very simple, contains the snippet (with an explanation) necessary to generate the classic “Hello World”:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Obviously React assumes that the developer is able to write Javascript applications that conform to the latest ECMA standards , which include:
keywords letand constto define variables
the keyword classto define the classes
the arrow functions , which write asx => x * 2
The second guide shows all the essential concepts (from installation to setup, from configuration to distribution) of React to a much higher level, allowing the reader to create his first complete application. This step-by-step guide can be completed in one hour by most developers.
Vue.js definitely offers the simplest initial experience. To install Vue, simply include a tag scriptin an HTML document:
<pre class=”brush: php; html-script: true”>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
</pre>
The official guide explains the most vue-clicomplex installation procedures, including the use of the CLI, which is however not recommended for those who are using Vue.js for the first time or who are unfamiliar with the Node.js structures.
The syntax of Vue.js is based on a system that allows the DOM to be produced in batches from a specific template:
<pre class=”brush: php; html-script: true”>
<div id=”app”>
{{ message }}
</div>
</pre>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Vue is a progressive framework, which means that some components, such as server-side routing or rendering are not included by default. However, Vue has official libraries that are responsible for adding the above and other features accompanied by excellent documentation.
The easiest framework to learn is therefore Vue, followed by React, which takes slightly longer to devote to learning. Angular is spaced out, given that its purpose is to allow the creation of new generation applications even at high levels of complexity.
Required skills
This parameter is fundamental in the choice of the framework.
React requires the use of modern JavaScript (ECMA script 6+) with all its concepts, such as string interpolation, arrow functions, modules. A developer must necessarily know this way of developing Javascript code to use React. Furthermore, React makes use of JSX , a sort of “extension” of the Javascript syntax useful for mixing HTML and JS in a single code, for example:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello,
{formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
Although JSX is not required to use React, it is almost impossible to find a real application that does not use it.
Vue.js is the framework that is more familiar to the “traditional” web developer, which comes from libraries such as jQuery or Prototype. It is based on components such as HTML, Javascript (ECMA 5 or 6) and CSS in their traditional version, with some exceptions, for the construction of UI and stylization. Similar to Angular, Vue uses “custom” HTML attributes to handle tasks such as data-binding and flow control. An example of a Vue code:
<pre class=”brush: php; html-script: true”>
<a v-bind:href=”url”></a>
<a :href=”url”></a>
<button v-bind:disabled=”someDynamicCondition”>Button</button>
<button :disabled=”someDynamicCondition”>Button</button>
</pre>
Angular 2 was written using TypeScript , a super-set of Javascript made by Microsoft. For this reason, TypeScript is a programming language to be known for working with Angular. Applications made with Angular make intensive use of TypeScript, with concepts that are not part of the Javascript standard, such as static types. A “standard” Javascript developer will have more difficulties, since it will have to become familiar with a language in which the typing is static, while a programmer coming from C # or Java , languages ​​with excellent static typing, will be more at ease.
The following table contains the requirements for each framework:
Completeness
Angular turns out to be the most complete framework, with its “all-in-one” structure that provides UI management, state management, routing, end-to-end testing and much more.
React, on the other hand, is mainly based on UI, which means that for advanced features it is necessary to extend its core through external tools, such as Redux and MobX (state management).
Vue.js is instead a “progressive” framework in nature, which provides a core capable of producing applications using its logic and its basic engine. For additional features, however, it is necessary to use extra components. The core of Vue is in fact mainly based on the level of “View”. However, there are many high quality components, which cover all the major features required by a new generation application, both produced by third parties and official ones, such as Vuex , for centralized state management.
A full-featured solution like Angular may not be the best choice if you are building an application that does not require all of its functionality, or one that needs to be implemented in the short term, using a new technology that offers a curve suitable learning. In the case of lighter (and natively less complete) frameworks such as Vue and React, we have the possibility to choose between official extensions (Vue case) or between a large ecosystem of additional third-party libraries (React case).
Performance factors
In the production environment, an application (of any degree of complexity) that runs with poor quality performance will soon be abandoned by users. Each framework has different characteristics, from the total size to the runtime performance, with the addition of different tools to optimize the application increasing its performance.
Because of its “all-in-one” completeness, Angular turns out to be the heaviest library, with the zipped package (GZip) weighing 143 kb. It follows React with 43 kb and Vue with 23kb.
The results of the bechmark produced by Stefan Krause show a slight deviation of performance between the three frameworks, where Angular is the “slower” and Vue.js the “fastest”.
The performance is not only derived from the native framework, but also from its ability to provide tools that allow the final appearance of the application to provide the best possible experience to users, such as, for example:
- Ahead-of-time compiling: removing compile time dependencies (runtime) by producing static assets in advance
- Bundling: optimization of production codes
- Tree-shaking: removal of code and dependencies not used by the application
- Lazy-loading: loading the code only when actually requested by the application, and not before
- Server side rendering: representation of the code in strings of HTML that can be indexed for purposes of Search Engine Optimization (SEO) and downloaded faster, increasing the performance of the first upload by the user (fist load experience)
As we can see, since the framework is natively heavier, Angular provides all the tools necessary to optimize the performance of the applications, even if all the products offer an excellent range of tools for the same purpose.
Final considerations
There are many factors to consider in order to choose one framework instead of another, and for obvious reasons of space, we have not been able to analyze others. Furthermore, with the exception of rare cases, where in one sector of analysis a name stands out from the others, there is no situation in which we can find a winner at the expense of the losers. The choice does not depend only on the framework, but also on the starting requirements of the developers, and above all on the type of application to be implemented. The key is in context .
However, let’s recap some key points:
- If we need a complete all-in-one solution to meet the need to build an application at any level of complexity, or if the development team derives from C #, from Java or static-typed languages, the best choice is Angular.
- If we look for a high-level solution centered on the UI, equipped with a large-scale ecosystem, the best choice is React.
- If we seek a solution that we can quickly learn, closer to the “classic” version of HTML / CSS / Javascript and that we can gradually expand depending on the complexity of the expansion, the best choice is Vue.js.
