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:
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:
- Ecosistema
- Storia e longevità
- Popolarità
- Supporto aziendale
- Ecositema e community
- Prodotto
- Esperienza iniziale e curva d'apprendimento
- Capacità richieste
- Completezza
- Fattori di performance
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:
Framework | Stelle GitHub | Download npm | Topic su StackOverflow |
---|---|---|---|
Angular | 31 mila | 1,93 milioni | 87 mila |
React | 83 mila | 5,85 milioni | 67 mila |
Vue.js | 76 mila | 0,78 milioni | 12 mila |
Per l'analisi qualitativa, vediamo quali brand notabili utilizzano questi prodotti.
- Angular
- Wix
- Weather.com
- Healthcare.gov
- Forbes
- React
- Netflix
- Paypal
- AirBnB
- Uber
- Vue.js
- Alibaba
- Baidu
- Expedia
- Nintendo
- GitLab
- il numero di pacchetti npm che fanno uso di un framework disponibili per gli sviluppatori
- la dimensione del Core Team
- le keywords
let
const
- la keyword
class
- le arrow functions
x => x * 2
- 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)
- 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
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.
Framework | Sponsor |
---|---|
Angular | |
React | |
Vue.js | Supporto da svariate compagnie |
Framework | Numero di pacchetti npm |
---|---|
Angular | 18.300 |
React | 43.000 |
Vue.js | 8.200 |
Framework | Requisiti |
---|---|
React | JS (ES6+), JSX, CSS-in-JS |
Vue.js | HTML, JS (ES5+), CSS |
Angular | TypeScript |
Framework | Strumenti e scopo principale |
---|---|
Angular | All-in-one |
React | UI management |
Vue | Livello View, componenti aggiuntivi ufficiali |
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 MobX
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:
Framework | Performance feature |
---|---|
Angular | Ahead-of-Time compiling, Bundling, Tree-shaking, Lazyloading, Angular Universal (Server-side rendering) |
React | Bundling, Tree-shaking, Server-side rendering |
Vue.js | Progressività, Bundling, Tree-shaking, Server-side rendering |