React VS Angular VS Vue: framework Javascript a confronto

Negli ultimi 10 anni il Web è cambiato e cresciuto drasticamente. La complessità (e la potenza) delle tipologie di applicazioni realizzabili è aumentata a dismisura, e per il verificarsi di queste condizioni, è stato doveroso realizzare strumenti all’avanguardia che offrissero possibilità del tutto nuove agli sviluppatori.

In questo articolo prenderemo in considerazione i framework Javascript che hanno maggiormente segnato questa generazione di Web Development, analizzandone le caratteristiche e metttendole a confronto. Abbiamo dunque incluso:

• Angular (preso in considerazione dalla sua seconda versione in poi)
• React
• Vue.js

I link appena citati puntano alle rispettive guide di HTML.it. Chi vuole, può sfruttarle per approfondirne le caratteristiche.

Prima di presentare la nostra analisi comparativa, è bene precisare che non vogliamo produrre un verdetto in cui vengono stilati vincitori e perdenti, bensì semplicemente mettere in luce caratteristiche, vantaggi e svantaggi di questi framework.

Criteri di analisi

Per prima cosa, vediamo quali sono i criteri sulla base confronteremo i suddetti prodotti. Uno sviluppatore web deve considerare svariati fattori in fase di scelta di un determinato software o di un determinato strumento. Per questo motivo, lo studio è suddiviso in 2 voci, ognuna rappresentativa di determinati criteri:

1. Ecosistema
   • Storia e longevità: indica il grado di maturità del framework e le motivazioni per cui è stato realizzato
   • Popolarità: indica il grado di diffusione ed utilizzo del framework nel mondo dello sviluppo Web
   • Supporto aziendale: indica la presenza o meno di un’azienda coinvolta nello sviluppo o nella sponsorizzazione del framework, o semplicemente come parte interessata
   • Ecositema e community: analisi relativa all’universo ed all’ambiente generati dal framework, comprensiva di note sulla community, sulla presenza di librerie e plug-in solidi che estendono le funzionalità del framework in questione
2. Prodotto
   • Esperienza iniziale e curva d’apprendimento: analisi sul tipo di esperienza che l’utente si troverà ad affrontare utilizzando il suddetto framework, quanto velocemente potrà immergersi nelle dinamiche dello stesso e quanto sarà facile/difficile dedicarsi allo sviluppo di feature complesse
   • Capacità richieste: indica le skill che uno sviluppatore deve necessariamente possedere per essere competitivo utilizzando il framework, e quali sono quelle richieste per lo sviluppo inoltrato
   • Completezza: indica il grado di “completezza” del framework, ovvero quante feature fornisce allo sviluppatore
   • Fattori di performance: analisi riguardante il grado di performance del framework nel contesto di un’applicazione complessa

L’analisi di Vue, React e Angular

Storia e longevità

Angular è il framework più anziano tra i 3 prodotti presi in considerazione. La sua prima release risale ad ottobre 2010, con il nome di AngularJS. Tuttavia, la sua definitiva seconda versione, che è stata completamente riscritta, è molto più recente, rilasciata nell’ottobre 2016. Dunque per parlare di storia di Angular, occorre tenere in considerazione entrambi i fattori. L’ecosistema prodotto negli anni precedenti è ancora vivo e attivo, ma la versione 2.0 è relativamente recente. Angular è stato inizialmente creato per aiutare i team di sviluppo ad affrontare le sfide presenti nella realizzazione di applicazioni di nuova generazione, come le applicazioni a pagina singola (SPA).

React, che talvolta è identificato come come React.js/ReactJS, è stato rilasciato nel marzo 2013. Come nel caso di Angular, anche React ha recentemente subito una riscrittura del proprio Core, anche se a differenza del primo, i cambiamenti nelle API sono stati molto meno drastici, rendendo la nuova versione un’estensione piuttosto che un cambio di direzione. React è stato realizzato per assistere gli sviluppatori nella creazione di interfacce utente (UI) in modo semplice, veloce e scalabile dedicate ad applicazioni web complesse.

Vue.js è il più “piccolo” dei tre framework, ed è stato rilasciato nel febbraio 2014. Il creatore del progetto, Evan You, fu uno sviluppatore di Google che utilizzò intensivamente AngularJS per la realizzazione di svariati progetti. Vue.js è stato prodotto per essere un’alternativa “leggera” ad Angular. L’autore voleva fornire agli sviluppatori un framework dalla curva di apprendimento bassa, ma che potesse crescere fino a poter gestire applicazioni molto complesse.

Tutti e tre i framework hanno la loro consistente storia alle spalle, e sono maturati al punto tale da dominare la scena del mercato.

Popolarità dei framework JavaScript

La popolarità è un indice considerevole della maturità di un prodotto. Una libreria popolare è un prodotto che viene utilizzato intensivamente nello sviluppo di applicazioni web reali, è un’indicatore di come e quanto il framework soddisfa le esigenze degli utilizzatori e delle aziende. Applicazioni popolari che sono state realizzate con un particolare framework da parte di team di sviluppo “famosi” indicano che il framework stesso è da prendere seriamente in considerazione. La popolarità è misurabile quantitativamente e qualitativamente. Nel primo caso, i numeri ricavati da GitHub, dai download mensili da npm e dai topic aperti su StackOverflow sono i seguenti:

Per l’analisi qualitativa, vediamo quali brand notabili utilizzano questi prodotti.

• Angular
  • Google
  • Wix
  • Weather.com
  • Healthcare.gov
  • Forbes
• React
  • Facebook
  • Netflix
  • Paypal
  • AirBnB
  • Uber
• Vue.js
  • Alibaba
  • Baidu
  • Expedia
  • Nintendo
  • GitLab

Come possiamo vedere, tutti e tre i software sono molto popolari, anche se in termini numerici il leader è sicuramente React. In termini di utilizzo da parte di brand popolari, React, Angular e Vue sono in una posizione di equilibrio, venendo utilizzati in ambienti di produzione di altissimo livello. Ovviamente, se una di queste aziende si occupa di aspetti simili a quelli che ci serve trattare in un progetto, questo fattore può essere un buon indicatore di scelta.

Supporto aziendale

Nella realizzazione di progetti di alto livello, adottare software open source può essere rischioso per un’azienda. Se lo sviluppo della libreria viene interrotto, l’azienda che la utilizza nelle proprie applicazione viene a trovarsi in una situazione instabile. Il supporto di un prodotto da parte di uno sponsor consistente è invece un indicatore di stabilità e longevità del prodotto stesso. In realtà, è vero anche il contrario: sia Google che Facebook hanno abbandonato lo sviluppo di progetti importanti in passato, dunque è sempre meglio avere un “piano B”.

Sia React, sia Angular, sia Vue godono di un supporto di questo tipo, con una differenza che riguarda in particolare Vue. Mentre Angular è mantenuto da sviluppatori Google, e React è sotto il controllo di sviluppatori Facebook, Vue.js è supportato da svariate organizzazioni di piccola/media taglia, principalemente attraverso Patreon, un tool online dedicato ai creatori di servizi.

Ecositema e community

L’universo prodotto da un particolare framework comprende certamente anche il suo grado di popolarità, ma questo fattore non è l’unico da tenere in considerazione. A scopo della nostra analisi, aggiungiamo i seguenti punti:

• il numero di pacchetti npm che fanno uso di un framework disponibili per gli sviluppatori
• la dimensione del Core Team che sviluppa il framework

L’ecosistema di un framework non dipende infatti solo dal suo grado di popolarità. Prendiamo ad esempio jQuery: sebbene sia una libreria ancora molto utilizzata, la sua curva d’innovazione è decisamente bassa, così come la community in declino.

Il numero di pacchetti npm che fanno uso di un framework sono indicativi in quanto rappresentano una quantità di plug-in ed estensioni che uno sviluppatore ha a disposizione per i suoi progetti, senza contare che la qualità degli stessi plug-in potrebbe essere garantita anche dal numero di download via npm ricevuto.

Per quanto riguarda il numero di membri nel team di sviluppo ufficiale, Angular possiede il gruppo più consistente, con ben 36 membri dediti alla sua produzione. Il core team di Vue.js ha raggiunto quota 16, mentre da alcune considerazioni globali il team di React dovrebbe avere un numero di sviluppatori compreso tra i 6 e i 10 membri. Angular ha la base di codice più grande tra i 3, per questo motivo un team di sviluppo così nutrito ha un senso concreto.

Esperienza iniziale e curva d’apprendimento

Angular offre forse l’esperienza iniziale di utilizzo più complessa. Per lanciare un’applicazione, è infatti necessario installare la CLI, ed impostare un paio di parametri:

// 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

A questo punto sarà possibile lavorare con i file dei componenti generati da Angular, come src/app/app.component.ts:

export class AppComponent {
title = 'Mio titolo';
}

Il tutorial Tour of Heroes è un passaggio obbligatorio per iniziare ad immergersi nelle dinamiche di Angular, mostrando come affrontare l’implementazione di un’applicazione professionale.

React offre due guide differenti per iniziare a scrivere codice avvalendosi delle sue funzionalità. La prima, molto semplice, racchiude lo snippet (con tanto di spiegazione) necessario per generare il classico “Hello World”:

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

Ovviamente React assume che lo sviluppatore sia in grado di scrivere applicazioni Javascript conformi agli ultimi standard ECMA, che includono:

• le keywords let e const per definire variabili
• la keyword class per definire le classi
• le arrow functions, che scrivono come x => x * 2

La seconda guida mostra tutti i concetti essenziali (dall’installazione al setup, dalla configurazione alla distribuzione) di React ad un livello decisamente più alto, permettendo al lettore di creare la sua prima applicazione completa. Questa guida step-by-step può essere completata in un’ora di tempo dalla maggior parte degli sviluppatori.

Vue.js offre decisamente l’esperienza iniziale più semplice. Per installare Vue, è sufficiente includere un tag script in un documento HTML:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Nella guida ufficiale sono spiegate le procedure più composite di installazione, che comprendo anche l’uso della CLI vue-cli che è però sconsigliata a chi si trova ad utilizzare Vue.js per la prima volta o che ha scarsa dimestichezza con le strutture di Node.js.

La sintassi di Vue.js è basata su un sistema che permette di produrre il DOM a partite da un apposito template:

<div id="app">
{{ message }}
</div>

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

Vue è un framework progressivo, il che significa che alcune componenti, come il routing o il rendering server-side non sono inclusi di default. Tuttavia, Vue ha librerie ufficiali che si occupano di aggiungere le suddette ed altre funzionalità corredate da un’ottima documentazione.

Il framework più facile da imparare è dunque Vue, seguito da React, che richiede un tempo leggermente superiore da dedicare all’apprendimento. Angular è distanziato, dato che il suo scopo è quello di consentire la realizzazione di applicazioni di nuova generazione anche a livelli di complessità elevati.

Capacità richieste dai framework JavaScript

Questo parametro risulta fondamentale nella scelta del framework.

React richiede l’utilizzo del Javascript moderno (ECMA script 6+) con tutti i suoi concetti, come l’interpolazione di stringhe, le arrow functions, i moduli. Uno sviluppatore deve necessariamente conoscere questo modo di sviluppare codice Javascript per utilizzare React. Inoltre, React fa uso di JSX, una sorta di “estensione” della sintassi Javascript utile a mescolare HTML e JS in un unico codice, ad esempio:

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')
);

Sebbene JSX non sia obbligatorio per utilizzare React, è quasi impossibile trovare un’applicazione reale che non ne faccia uso.

Vue.js è il framework che risulta più familiare allo sviluppatore web “tradizionale”, che proviene da librerie quali jQuery o Prototype. Si basa su componenti quali HTML, Javascript (ECMA 5 o 6) e CSS nella loro versione tradizionale, con qualche eccezione, per la costruzione di UI e la stilizzazione. Similmente ad Angular, Vue utilizza attributi HTML “custom” per gestire compiti quali data-binding e controllo del flusso. Un esempio di codice Vue:

<a v-bind:href="url"></a>
<a :href="url"></a>
<button v-bind:disabled="someDynamicCondition">Button</button>
<button :disabled="someDynamicCondition">Button</button>

Angular 2 è stato scritto utilizzando TypeScript, un super-set di Javascript realizzato da Microsoft. Per questo motivo, TypeScript è un linguaggio di programmazione da conoscere per lavorare con Angular. Le applicazioni realizzate con Angular fanno uso intensivo di TypeScript, con concetti che non sono parte dello standard Javascript, come i tipi statici. Uno sviluppatore Javascript “standard” avrà maggiori difficoltà, dato che dovrà prendere confidenza con un linguaggio in cui la tipizzazione è statica, mentre un programmatore che proviene da C# o Java, linguaggi d’eccellenza a tipizzazione statica, si troveranno maggiormente a loro agio.

Nella seguente tabella sono racchiusi i requisiti per ogni framework:

Completezza

Angular risulta essere il framework nativamente più completo, con la sua struttura “all-in-one” che fornisce UI management, state management, routing, test end-to-end e molto altro.

React è invece improntato principalmente sulla UI, il che significa che per funzionalità avanzate è necessario estendere il suo core tramite strumenti esterni, quali ad esempio Redux e MobX (state management).

Vue.js è invece un framework “progressivo” in natura, che fornisce un core in grado di produrre applicazioni sfruttando la sua logica ed il suo motore di base. Per le funzionalità aggiuntive è però necessario utilizzare componenti extra. Il core di Vue è infatti principalmente basato sul livello delle “View”. Esistono comunque svariati componenti di alta qualità, che coprono tutte le maggiori caratteristiche richieste da un’applicazione di nuova generazione, sia prodotte da terze parti, sia ufficiali, come Vuex, per lo state management centralizzato.

Una soluzione full-featured come Angular potrebbe non essere la scelta migliore nel caso in cui si stia realizzando un’applicazione che non necessita di tutte le sue funzionalità, oppure una che deve essere realizzata nel breve termine, sfruttando una nuova tecnologia che offra una curva d’apprendimento idonea. Nel caso di framework più leggeri (e nativamente meno completi) come Vue e React, abbiamo la possibilità di scegliere tra estensioni ufficiali (caso di Vue) oppure tra un ampio ecosistema di librerie aggiuntive di terze parti (caso di React).

Fattori di performance di React, Angular e Vue

In ambiente di produzione, un’applicazione (di qualsiasi grado di complessità) che gira con performance di scarsa qualità, sarà presto abbandonata dagli utenti. Ogni framework ha caratteristiche differenti, dalle dimensioni totali alle prestazioni di runtime, con l’aggiunta di diversi tool per ottimizzare l’applicazione aumentandone le prestazioni.

A causa della sua completezza “all-in-one”, Angular risulta essere la libreria più pesante, con il pacchetto zippato (GZip) del peso di 143 kb. Segue React con 43 kb e Vue con 23kb.

I risultati del bechmark prodotto da Stefan Krause mostrano una leggera deviazione di performance tra i tre framework, dove Angular risulta il più “lento” e Vue.js il più “veloce”.

Le performance non derivano solo dal framework nativo, ma anche dalla sua capacità nel fornire strumenti che permettano alla veste finale dell’applicazione di fornire la migliore esperienza possibile agli utenti, quali, ad esempio:

• Ahead-of-time compiling: rimozione di dipendenze a tempo di compilazione (runtime) producendo in anticipo gli assetti statici
• Bundling: ottimizzazione dei codici per la produzione
• Tree-shaking: rimozione di codice e dipendeze non utilizzati da parte dell’applicazione
• Lazy-loading: caricamento del codice solamente quando richiesto realmente dall’applicazione, e non prima
• Server side rendering: rappresentazione del codice in stringhe di HTML che possono essere indicizzate per scopi di Search Engine Optimization (SEO) e scaricate più velocemente, aumentando le performance del primo caricamento da parte dell’utente (fist load experience)

Come possiamo vedere, essendo il framework nativamente più pesante, Angular fornisce tutti gli strumenti necessari per ottimizzare le performance delle applicazioni, anche se tutti i prodotti offrono un’ottima gamma di tool per il medesimo scopo.

Considerazioni finali

Ci sono molti fattori da considerare per scegliere un framework al posto di un altro, e per ovvi motivi di spazio, non abbiamo potuto analizzarne anche altri. Inoltre, ad eccezione di rari casi, in cui in un settore d’analisi un nome si distingue bene dagli altri, non esiste una situazione in cui possiamo trovare un vincitore a scapito di sconfitti. La scelta non dipende inoltre solo dal framework, ma anche dai requisiti di partenza degli sviluppatori, e soprattutto dal tipo di applicazione che si deve realizzare. La chiave sta nel contesto.

Ricapitoliamo comunque alcuni punti chiave:

• Se necessitiamo di una soluzione completa all-in-one per soddisfare l’esigenza di realizzare un’applicazione a qualunque grado di complessità, o se il team di sviluppo deriva dal C#, da Java o da linguaggi a tipizzazione statica, la scelta migliore è Angular.
• Se cerchiamo una soluzione di alto livello centrata sulla UI, dotata di ecosistema di estensioni di grandi dimensioni, la scelta migliore è React.
• Se cerchiamo una soluzione che si possa apprendere rapidamente, più vicina alla versione “classica” dell’HTML/CSS/Javascript e che si possa espandere progressivamente a seconda dell’espansione della complessità dell’applicazione, la scelta migliore è Vue.js.