Angular VS React vs Vue: un’analisi (quasi) oggettiva sui framework JavaScript del momento

Una domanda che mi viene fatta di frequente durante gli eventi o a lavoro è questa: devo fare una nuova applicazione web, devo usare Angular, React o Vue?
La risposta esatta non è mai facile da dire e forse nemmeno c’è, ma quello che rispondo sempre è: dipende.
Può sembrare una risposta da classico consulente che non ti vuole dire il segreto della vita, ma in realtà non è così.
Dipende perchè effettivamente dipende da tanti fattori, spesso anche esterni al progetto, come la seniority del gruppo di lavoro, tempi di consegna o periodo di supporto da dare all’applicazione.

In questo articolo ho cercato di raccogliere più informazioni possibili riguardanti i tre framework di riferimento per lo sviluppo web e nel modo più oggettivo possibile, trovare vantaggi e svantaggi per ognuno di essi.

Iniziamo.

Le basi

Prima di tutto, prima di iniziare a leggere, devi partire dal presupposto che per usare uno dei linguaggi elencati nel titolo, devi conoscere un minimo JavaScript. Quando dico un minimo, non intendo dire che sai che alla fine di ogni riga si mette il punto e virgola e che è un linguaggio che “gira” nel browser.
Intendo al meno che sei riuscito a seguire correttamente o sei in grado comunque di capire questo corso: https://javascript30.com.
Ho fatto questo esempio del corso gratuito di Wes Bos perchè è fatto molto bene ed è possibile seguirlo con poco sforzo.

La carta d’identità dei tre framework

Prima di iniziare con le cose un po’ più tecniche, cerchiamo di capire con chi abbiamo a che fare con questo breve riepilogo.

• Angular: sviluppato da Google nel lontano 2010, ha subito una “drammatica” rivoluzione nel 2016, quando è uscito Angular 2. Dal nome è stato rimosso anche “JS” ed è stato introdotto TypeScript come base per lo sviluppo.
• React: sviluppato da Facebook (e utilizzato per tutti i suoi “prodotti”) è più giovane di qualche anno rispetto ad Angular, in quanto è nato nel 2013.
• Vue: è relativamente il più giovane perchè la prima versione risale al 2014, ma ha raggiunto la notorietà qualche anno più tardi. La versione 3 è quasi sicuro che si baserà su TypeScript.

Licenza: una per tutti

Stranamente tutti e tre i framework utilizzano la stessa licenza: MIT.
Praticamente è la migliore perchè implica poca restrizione nell’utilizzo nei progetti commerciali e non.
Comunque non essendo esperto in queste cose legali, vi rimando al link ufficiale della licenza: https://opensource.org/licenses/MIT

L’ascesa di Vue, lo stallo di React e Angular

Se da una parte la solidità di Angular e React negli anni ci ha fatto dormire tutti sonni tranquilli, dall’altra parte bisogna però anche vedere come Vue negli ultimi 24 mesi abbia fatto un’impennata di gradimento esponenziale negli ambienti lavorativi e nelle community di riferimento.
Questo grafico rappresenta le “stelle” presenti su GitHub.
Potete trovare altri riferimenti a questo link: https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190#why-vue-has-so-many-github-stars

Un’altra indagine, che ormai viene fatta ogni anno, è quella condotta e redatta da StateOfJS.

In questo grafico invece si nota che l’utlizzo di Vue ha superato quello di Angular (e dopo forse vedremo perchè) mentre React pare che ormai abbia preso la maggioranza del mercato delle applicazioni presenti nel web.
Se volete approfondire la questione, potete andare a vedere questo e altri risultati a questo link: https://2018.stateofjs.com/front-end-frameworks/overview/

Curva di apprendimento

Come mai Angular, se nelle prima versione faceva mercato da solo, adesso invece sta perdendo terreno?
Sicuramente non è più il solo framework esistente al momento. E questo è sicuramente un altro dato di fatto.
Ma sicuramente un altro “problema” di Angular è la sua curva di apprendimento molto elevata.
Vediamo il dettaglio dei tre framework a confronto.

• Angular: dei tre è quello con la curva di apprendimento più ripida e lunga di tutti. Prima di imparare bene Angular, dobbiamo padroneggiare TypeScript e il paradigma MVC. Da una mia esperienza diretta sul lavoro, secondo me, per una persona che conosce JavaScript come ho descritto all’inizio di questo articolo, ci vogliono almeno 6 mesi per padroneggiare questo framework. La documentazione ufficiale del sito è comunque ben fatta e in giro per la rete si trovano tantissimi tutorial, dalle cose più facili a quelle più complesse.
• React: in questo caso la partenza è molto meno complessa di quanto ci si possa aspettare. Già seguendo il mini tutorial presente sul sito ufficiale si riesce a capire il funzionamento abbastanza semplicemente. Diciamo che in un paio di ore siamo già operativi. Per dominare invece la tecnologia, invece, occorrono un paio di mesi. La differenza rispetto ad Angular è che, essendo un libreria e non un framework, oltre al core dobbiamo aggiungere librerie di terze parti per realizzare parti delle nostre applicazioni.
• Vue: il più immediato da capire e il più facile da apprendere totalmente in poco tempo. Forse (sminuendolo un po’) perchè è quello che fa meno cose rispetto agli altri, cioè solo la parte di rendering. Una volta che si capisce il funzionamento, è possibile iniziare a lavorare su un progetto di medie dimensioni fin dalla prima settimana. Come contro ha che essendo così semplice da scrivere e poco architetturato è più difficile testarlo in modo automatico. La cosa che piace a molti è che può essere usato semplicemente aggiungendolo alle pagine HTML e utilizzarlo solo per il semplice binding, o usarlo invece nella sua versione più completa che lo rende un mix fra React e Angular.

Le dimensioni contano

Una pagina web mediamente oggi si aggira intorno ai 2MB. Quindi chi naviga su un sito, deve scaricarsi ogni volta che fa click su un link, questi due megabyte sul proprio disco.
I tre framework hanno praticamente due ordini di grandezza diversi, almeno per quanto riguarda il core.
Vue è il più piccolo di tutti, circa 80kb nella sua ultima versione, React poco sopra con i suoi 100Kb, mentre Angular detiene il primato con i suoi 500kb!
Nella prossima versione pare che questa dimensione venga ridotta di molto, ma ad oggi, praticamente vuol dire che se avete usato Angular nella vostra applicazione, un quarto (più o meno) del traffico della vostra applicazione è dato da Angular.
Ovviamente utilizzando un CDN è possibile che la vostra libreria sia già stata scaricata prima di arrivare al vostro sito, ma comunque è un dato da tenere in considerazione.

Migrazioni, Breaking Changes e Compatibilità

Ogni volta che esce una versione nuova delle librerie o framework di frontend, vedo la gente sbiancare in volto per paura di qualche problema negli ambienti di produzione o comunque sia nella noia mortale che ogni programmatore ha nel rivedere e aggiornare il proprio codice scritto mesi prima.

In questo caso Vue è quello che ci fa soffrire meno. Nella sua breve storia non ha mai avuto grossi problemi di compatibilità con il passato e la migrazione dalla versione 1 alla versione 2 è stata praticamente indolore per i progetti.
Anche React in questo è abbastanza lineare e i cambi di versione di solito non incidono molto sulla retro compatibilità. Essendo utilizzato internamente e anche da grandi colossi del web, credo sia stato e sarà uno dei suoi punti di forza.
Angular invece in questo pecca un po’. Si prende lo scettro del cattivo per quanto riguarda questo argomento. Ogni sei mesi viene rilasciata una versione nuova e quando questo accade, la migrazione spesso non è stata indolore, anzi. Ci sono state frequenti breaking changes che in alcuni casi hanno fatto rinunciare ad utilizzare la nuova versione del framework perchè i vantaggi non giustificavano lo sforzo.

Community e Opensource

Un po’ per moda e un po’ perchè anche le grandi aziende hanno capito la potenza delle community, tutti e tre i framework sono opensource e disponibili su Github.
Questo porta una grande interazione con i developers e soprattutto alcune features e bug vengono realizzate e risolti direttamente dalla community.
Dalla tabella qua sotto possiamo vedere che Vue è sicuramente quello più popolare di tutti, ma quello meno “attivo”. Un motivo è sicuramente perchè è un progetto portato avanti solamente dalla community e quindi non ha una grande azienda alle spalle con persone interamente dedicate al suo sviluppo.

Quale editor?

L’editor devo ammettere che è una cosa molto personale, soprattutto per quanto riguarda la produttività. Io ormai dalle sue prime versioni, sto usando Visual Studio Code. Per sua natura quando lo installate non ha supporto a nessuno dei tre framework qua citati.
Ci sono però un sacco di estensioni che potete trovare nel marketplace che fanno al caso vostro e che vi faranno aumentare la produttività. Uno dei motivi di successo di Visual Studio Code è la sua leggerezza e stabilità rispetto ad altri competitor.
Se siete interessati a sapere quali sono le estensioni che più fanno al caso vostro, potete andare a vedere un altro post che ho scritto qua sul blog, con l’elenco delle migliori estensioni del momento.

Ci sono comunque tanti developers che utilizzano WebStorm di JetBrains. Sicuramente rispetto a Visual Studio Code è un vero e proprio IDE. Ha bisogno di una licenza a pagamento ma si aggira intorno ai 129€ all’anno e a partire dal secondo intorno ai 100€.
Una cifra comunque abbordabile per chiunque, sia aziende che professionisti.

Framework o libreria?

Durante la scrittura di questo articolo o cercato di evitare di usare queste due parole quando mi riferivo ai tre temi. Questo perchè una delle diatribe più frequenti che si trova in rete è proprio questa: XXX è un framework o una libreria? Potete sostituire XXX con uno dei tre nomi.
Sicuramente Angular è un framework. Questo di solito accomuna tutti i frontendisti e non.
Ma React? Vue?
Nemmeno io so la risposta e nessuno forse la sa perchè qua entriamo quasi nella filosofia. Quello che vi posso dire io è che ho trovato, leggendo vari articoli, un esempio che riporto spesso quando mi fanno la stessa domanda.
Pensate che uno di questi framework sia una casa.
Un framework è un qualcosa che, dati i disegni da cui partire, vi fa fare il primo buco per mettere le fondamenta, tirare su i primi muri, le finestre, le porte e poi la potete arredare come meglio credete.
Una libreria invece è un qualcosa in cui avete già la casa, la prendete in affitto, e andate da Ikea o da Poltrone e Sofà per comprare le cose e arredarla. Ecco, Ikea è la vostra libreria.
A questo punto potete farvi da soli un’idea, sia per questi tre framework/librerie, sia per altre.

Conclusioni

Se sei arrivato qua, vuol dire che vuoi sapere chi è il vincitore, ma come ti avevo spoilerato all’inizio, un vero vincitore non c’è.
Dipende come sempre da quello che dovete fare e dalla grandezza del vostro progetto.

Personalmente sceglierei Angular per un progetto di lunga durata, in cui devono lavorare tante persone (in modo da separare le varie responsabilità di sviluppo) e soprattutto in cui lavorano persone che già conoscono TypeScript e molto bene JavaScript.
Sicuramente un progetto con pochi developers junior e tanti senior.

React invece va bene se si vuole dare un bel bootstrap all’inizio del progetto. Anche se si cerca comunque stabilità e soprattutto longevità. Avendo anche React alle spalle un colosso come Facebook, possiamo dormire sonni abbastanza tranquilli sotto questo aspetto. Inoltre è abbastanza semplice da usare e quindi anche aggiungere risorse durante il progetto risulta comunque più semplice.

Andrei invece a scegliere Vue in tutti quei casi in cui non ho grande dimestichezza con JavaScript e il frontend in generale, non conosco molto bene TypeScript o non mi sento ancora pronto per usarlo e il mio team è composto da molte figure Junior.

Quindi, per arrivare al punto, non esiste un framework o una libreria migliore di un’altra, esiste semplicemente la miglior scelta che potete fare per il progetto che state per iniziare.