Blog

React vs Angular vs Vue.js: cosa scegliere?

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?

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
UI UX design: un settore dalle mille sfaccettature Il design dell’esperienza utente (UX) e dell’interfaccia utente (UI) costituisce il fondamento su cui si costruiscono le interazioni digitali coinvo…
Nel contesto dello sviluppo web, il backend riveste un ruolo cruciale nell’assicurare il corretto funzionamento di un sito. Il backend, si occupa delle operazioni non visibili agli utenti finali, gest…
Il Data Analyst è una figura professionale sempre più richiesta nel mondo del lavoro, grazie alla sua capacità di analizzare e interpretare grandi quantità di dati per supportare le decisioni azie…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 112 €/mese.

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/07/2023 al 31/12/2023.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.