Finalmente siamo arrivati alla conclusione di questa mini serie riguardante 3 tra i più famosi frameworks del linguaggio Javascript attualmente esistenti. Dopo averli introdotti e parlato della loro storia in Vue.js al microscopio, Angular al microscopio e React al microscopio, è arrivato il momento di confrontarli, mettendo sul piatto i loro pregi ma anche i loro difetti.
L’obiettivo è cercare di dare una risposta al fatidico dubbio che riguarda il corretto framework per iniziare un nuovo progetto. Spesso questa scelta non è guidata da una corretta analisi, con il rischio di non riuscire a soddisfare le proprie esigenze applicative in corso d’opera.
Partiremo con un rapido riassunto delle loro features più importanti, fornendo anche dettagliati benchmarks delle loro prestazioni.
Perchè Angular?
Nonostante negli ultimi anni Angular abbia perso popolarità, riesce comunque a mantenere una posizione di spicco tra le varie community e classifiche.
Ciò non è solo dovuto al fatto che è un prodotto di Google e per questo motivo è costantemente mantenuto e migliorato, ma anche al fatto che Angular offre una struttura incredibile, fornendo un facile collegamento dei dati, un modello MVVM (model view viewModel), un sistema di moduli integrato, un ottimo routing unito ad un sistema di dependency injection e altre interessanti funzionalità.
Pro e benefici di Angular
Angular divide i componenti in diversi chunks, ossia pacchetti logici che permettono una maggiore ottimizzazione dei tempi di caricamento e performance migliori. Inoltre, il pattern MVVM facilita e velocizza lo sviluppo, integrando un two way data binding tra le view e le viewModel, permettendo la propagazione automatica dello stato applicativo.
Per questi motivi e molti altri, Angular continua ad attrarre un grosso numero di aziende e sviluppatori web, specialmente grazie al suo continuo supporto e all’ecosistema ricco di funzionalità già integrate che eliminano quasi del tutto la necessità di installare pacchetti di terze parti.
Problemi di Angular
Uno dei problemi comuni e noti di Angular è la sua difficile curva di apprendimento; a differenza dei suoi competitor come React e Vue.js, Angular richiede più tempo per poter essere imparato a dovere e necessita di competenze base superiori alla media, quindi non è consigliato per i neofiti.
Inoltre, data la sua natura nel fornire molteplici funzionalità out-of-the-box, cioè disponibili fin da subito, produce dei bundle pesanti, con il risultato di generare applicazioni a volte più lente di quelle dei suoi competitors.
Perchè React?
React, a differenza di Angular e Vue.js, nasce come una libreria con lo scopo di creare componenti riutilizzabili da integrare nei propri progetti web.
Data la sua natura di libreria, React non fornisce un design architetturale, il quale è lasciato al libero arbitrio del suo utilizzatore. Per intenderci, non implementa un pattern come l'MVC, ma lo sviluppatore web potrebbe decidere di implementarlo.
Pro e benefici di React
La missione principale di React è quella di proporsi come framework facile e veloce, permettendo di far scalare con agilità qualsiasi progetto attraverso la creazione di componenti custom riutilizzabili e componibili.
Uno dei suoi grossi vantaggi sono le performance, caratteristica che l’ha reso fin da subito popolare. Altre sue importanti features sono l’utilizzo di un Virtual Dom, che velocizza e migliora le operazioni di scrittura e aggiornamento, il supporto al tree-shaking in modo da ridurre al minimo le dimensioni del bundle finale.
Problemi di React
A differenza di Angular che offre un intero ambiente di sviluppo, React non implementa nessun pattern, offrendo piena libertà allo sviluppatore di installare librerie di terze parti per stato e modelli. Questo provoca una carenza nella documentazione, poiché, a causa dei suoi continui aggiornamenti e del numero ingente di sviluppi di librerie di terze parti che lo supportano, è spesso arduo allineare la documentazione al dettaglio.
Perchè Vue.js?
Vue.js è un framework progressivo, ovvero ideale per essere adattato in modo incrementale nel proprio progetto, in contrapposizione ai framework monolitici come Angular.
A differenza dei suoi competitor, Vue.js non ha una grande compagnia che lo supporta (pensiamo a Google nel caso di Angular e Facebook per React). Nonostante questo è uno dei framework Javascript più apprezzati su Github.
Pro e benefici di Vue.js
Quando si parla di Vue.js è facile confrontarlo con React, a causa di alcune loro caratteristiche simili. Ad esempio, entrambi i frameworks utilizzano un Virtual Dom e sono orientati verso lo sviluppo di componenti riusabili.
Un altro punto a favore di Vue.js sono le prestazioni in termini di velocità e bundle size. Inoltre, poiché è facile da imparare si appresta ad essere ideale sia per principianti, sia per professionisti. La sua documentazione è costantemente aggiornata e, grazie alla sua facilità di integrazione, consente di iniziare quasi istantaneamente con il suo utilizzo.
Problemi di Vue.js
Uno degli svantaggi di Vue.js è che, non avendo una grossa azienda alle spalle, si regge grazie alla community e ai suoi sponsor che, per fortuna, contribuiscono in modo costante al suo sviluppo. Tuttavia, questa situazione può intimorire un grosso numero di aziende e sviluppatori che opteranno per soluzioni più “sicure” da questo punto di vista.
Quindi Angular, React o Vue.js?
Dopo questo breve riepilogo, analizziamoli nello specifico in modo da scegliere lo strumento migliore per le nostre esigenze.
I criteri che analizzeremo riguardano la manipolazione del DOM, i tempi di avvio e il quantitativo di memoria richiesta, tre criteri molto importanti quando si parla di sviluppo web.
Le performance riguardanti la manipolazione del DOM sono un indice di valutazione essenziale per le applicazioni che richiedono un numero elevato di interazioni con il DOM; i tempi di avvio sono importanti per le applicazioni che richiedono velocità in fase di startup; l’allocazione di memoria è importante nei casi in cui si gestiscono grosse moli di dati.
Tutti i benchmarks presentati provengono dalla repository Github di Stefan Krause (visitando il link troverai anche le istruzioni per poter testare sulla tua macchina locale).
Partiamo!
N.B. il colore verde indica buone performance, mentre il rosso e giallo indicano performance minori
Manipolazione DOM
Come puoi osservare nella tabella soprastante, Vue.js risulta essere quello generalmente più efficiente, seguito da Angular e poi React. Queste analisi sono condotte su versioni molto recenti dei frameworks: infatti, nelle versioni precedenti era Angular a detenere il podio in ambito manipolazione del DOM.
Tempi di avvio
Anche in questo caso è Vue.js a detenere il podio. Sicuramente il bundle size molto contenuto facilita questa prima fase. Come puoi constatare, anche React ha performance simili, mentre Angular è quello che più fatica.
Memoria occupata
Guardando questi valori, salta subito all'occhio che è sempre Vue.js a detenere il podio, seguito da React e, infine, da Angular.
React e Vue.js non hanno significative differenze in termini di performance, Angular, invece, sembra arrancare un po’ su questo aspetto, anche se sembra scontato dopo averlo approfondito nel dettaglio.
Quale framework scegliere?
Nonostante i benchmarks siano piuttosto chiari e dichiarino vincitore Vue.js, la scelta del framework più adatto deve tener conto di altre situazioni: ad esempio è opportuno usare Angular quando si parla di applicazioni di livello enterprise e quindi di grosse dimensioni, che gestiscono e collegano una grossa mole di dati, in cui la modifica di un’informazione ha impatti su molteplici componenti e produce una serie di behaviours che, senza un controllo opportuno dello stato, sarebbe difficile mappare.
La natura monolitica di Angular può andar molto bene in applicazioni di grosse dimensioni ma non è adatta per piccole o medie applicazioni, in cui causerebbe soltanto rallentamenti.
React e Vue.js sono molto simili, entrambi offrono un modo di sviluppare veloce ed efficiente, sono versatili e hanno buone performance.
Inoltre React può vantare una community più ampia e un supporto più sicuro con Facebook alle spalle, mentre Vue.js, oltre alla velocità, può vantare anche la sua leggerezza, che lo rende più adatto ad essere integrato in corso d’opera, facendo convivere, senza problemi, il codice esistente con componenti Vue.js quando un progetto è già avviato: immagina Startup o idee nascenti!
Speriamo che questa mini serie su React, Angular e Vue.js sia stata di tuo gradimento e ti abbia aiutato nella scelta del principale framework Javascript da utilizzare per i tuoi futuri progetti. E tu quale sceglierai?
