Angular vs React vs Vue 2022

Esistono tre framework per la creazione di applicazioni Web di cui ogni sviluppatore frontend ha sentito parlare: React, Vue.js e Angular.

React è una libreria dell'interfaccia utente, Angular è un framework front-end completo, mentre Vue.js è un framework progressivo.

Possono essere usati quasi in modo intercambiabile per creare applicazioni front-end, ma non sono uguali al 100%, quindi ha senso confrontarli e comprenderne le differenze.

Ogni framework è basato su componenti e consente la rapida creazione di funzionalità dell'interfaccia utente.

Tuttavia, hanno tutti una struttura e un'architettura diverse, quindi prima esamineremo le loro differenze architettoniche per capire la filosofia dietro di loro.

Architettura

Reagire

React non applica una struttura di progetto specifica e, come puoi vedere dall'esempio ufficiale "Hello World" di seguito, puoi iniziare a utilizzare React con poche righe di codice.

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

React può essere utilizzato come libreria dell'interfaccia utente per il rendering di elementi, senza imporre una struttura di progetto specifica, ed è per questo che non è strettamente un framework.

Gli elementi React sono gli elementi costitutivi più piccoli delle app React. Sono più potenti degli elementi DOM perché React DOM si assicura di aggiornarli in modo efficiente ogni volta che qualcosa cambia.

I componenti sono elementi costitutivi più grandi che definiscono pezzi indipendenti e riutilizzabili da utilizzare nell'intera applicazione. Accettano input chiamati oggetti di scena e producono elementi che vengono quindi visualizzati all'utente.

React è basato su JavaScript, ma è per lo più combinato con JSX (JavaScript XML), un'estensione di sintassi che consente di creare elementi che contengono HTML e JavaScript contemporaneamente.

Tutto ciò che crei con JSX può anche essere creato con l'API JavaScript React, ma la maggior parte degli sviluppatori preferisce JSX perché è più intuitivo.

Vue

La libreria principale Vue.js si concentra solo sul livello Visualizza. Si chiama framework progressivo perché puoi estendere le sue funzionalità con pacchetti ufficiali e di terze parti, come Vue Router o Vuex, per trasformarlo in un vero framework.

Sebbene Vue non sia strettamente associato al modello MVVM (Model-View-ViewModel), il suo design è stato in parte ispirato da esso. Con Vue, lavorerai principalmente sul livello ViewModel, per assicurarti che i dati dell'applicazione vengano elaborati in un modo che consenta al framework di eseguire il rendering di una vista aggiornata.

La sintassi dei modelli di Vue ti consente di creare componenti di visualizzazione e combina HTML familiare con direttive e funzionalità speciali. Questa sintassi di modelli è preferita, anche se sono supportati anche JavaScript grezzo e JSX.

I componenti in Vue sono piccoli, autonomi e possono essere riutilizzati in tutta l'applicazione. I componenti di file singoli (SFC) con estensione .vue contengono HTML, CSS e JavaScript in modo che tutto il codice rilevante risieda in un unico file.

Gli SFC sono il modo consigliato per organizzare il codice nei progetti Vue.js, specialmente quelli più grandi. Strumenti come Webpack o Browserify sono necessari per trasferire gli SFC in codice JavaScript funzionante.

Angolare

In questo articolo, sto discutendo di Angular 2 e non della prima versione del framework che ora è noto come AngularJS.

AngularJS, il framework originale, è un framework MVC (Model-View-Controller)). Ma in Angular 2, non esiste una stretta associazione con i modelli MV* poiché è anche basato su componenti.

I progetti in Angular sono strutturati in moduli, componenti e servizi. Ogni applicazione Angular ha almeno un componente radice e un modulo radice.

Ogni componente in Angular contiene un modello, una classe che definisce la logica dell'applicazione e i metadati (decoratori). I metadati per un componente indicano ad Angular dove trovare gli elementi costitutivi di cui ha bisogno per creare e presentare la sua vista.

I modelli angolari sono scritti in HTML ma possono anche includere la sintassi dei modelli angolari con direttive speciali per l'output di dati reattivi e il rendering di più elementi, tra le altre cose.

I servizi in Angular vengono utilizzati dai componenti per delegare attività di logica aziendale come il recupero dei dati o la convalida dell'input. Sono una parte distinta delle applicazioni angolari. Anche se Angular non ne impone l'uso, si consiglia vivamente di strutturare le app come un insieme di servizi distinti che possono essere riutilizzati.

Angular è integrato in TypeScript, quindi se ne consiglia l'uso per ottenere l'esperienza più fluida, ma è supportato anche JavaScript semplice.

Popolarità

Reagire

React è uno dei progetti JavaScript più popolari con 160.000 stelle su GitHub. È sviluppato e mantenuto da Facebook e viene utilizzato internamente in molti dei loro progetti. Inoltre, alimenta oltre 2 milioni di siti Web, secondo le statistiche di utilizzo di BuiltWith.

Vue

Dei tre framework, Vue ha il maggior numero di stelle su GitHub, con 176.000 stelle. Il progetto è sviluppato e guidato dall'ex googler Evan You. È un progetto molto forte e indipendente nella comunità open source ed è utilizzato da oltre 1 milione di siti Web, secondo BuiltWith.

Angolare

Angular è sviluppato da Google, ma sorprendentemente non viene utilizzato in alcuni dei loro prodotti di punta come Ricerca o Youtube. Viene spesso utilizzato in progetti aziendali e alimenta oltre 97.000 siti Web basati sui dati di BuiltWith.

È il meno stellato tra i tre framework, con 68.000 stelle su GitHub. Tuttavia, quando sono passati da Angular 1 ad Angular 2, hanno creato un repository completamente nuovo invece di continuare il progetto AngularJS, che ha anche 59k stelle.

Ecosistema

I pacchetti open source ti fanno risparmiare tempo prezioso durante lo sviluppo di applicazioni. Non solo, ma spesso sono migliori dei componenti e dei pacchetti personalizzati perché sono testati in battaglia.

È importante esaminare la disponibilità di componenti, temi e altri strumenti pronti per l'uso che possono aiutarti a creare nuove funzionalità più facilmente.

Reagire

Molte applicazioni front-end si basano sulla gestione dello stato globale per archiviare informazioni, ad esempio chi ha effettuato l'accesso e altre impostazioni utente.

Il progetto più popolare per la gestione dello stato JavaScript è Redux. La maggior parte degli sviluppatori utilizza le associazioni React ufficiali per Redux, che sono mantenute dal team Redux.

A causa della popolarità di React, trovare componenti di input ed elementi pronti per l'uso è estremamente facile. Sono tutti solo una ricerca su Google o GitHub.

L'ecosistema React include anche React Native che consente di creare applicazioni iOS e Android native da un'unica base di codice scritta in React. Quindi, React può essere un'ottima scelta anche per la creazione di applicazioni mobili utilizzando le tecnologie web.

React fa parte dello stack MERN, che contiene MongoDB, ExpressJS, React e NodeJS. Il bello di questa combinazione è che un unico linguaggio, JavaScript, alimenta l'intera applicazione.

Vue

Anche se Redux può essere utilizzato in Vue, non ci sono associazioni ufficiali. Ma questo non dovrebbe preoccuparti perché Vuex è la libreria ufficiale di gestione dello stato creata appositamente per le applicazioni Vue. Oltre a integrarsi molto bene con Vue, è facile eseguire il debug utilizzando gli strumenti di sviluppo di Vue.

All'inizio di Vue, era più difficile trovare componenti pronti per l'uso. Poiché la community è cresciuta, è disponibile un'ampia gamma di componenti di input ed elementi avanzati che puoi utilizzare per accelerare il tuo sviluppo.

Per lo sviluppo di app mobili, c'è un progetto emergente chiamato Weex. Weex è sviluppato e utilizzato da Alibaba, ma non è maturo e potente come React Native. Inoltre, poiché il progetto è sviluppato e utilizzato maggiormente in Cina, è più difficile trovare documentazione e soluzioni ai problemi in inglese.

Vue si integra bene con Laravel, ed è per questo che vengono spesso usati insieme. Laravel offre uno scaffolding completo di JavaScript e CSS per consentire l'uso di Vue in nuovi progetti.

Angolare

Per la gestione dello stato in Angular, puoi utilizzare il progetto NgRx. È stato ispirato da Redux, ma è stato creato appositamente per Angular.

Come nel caso di Vue e React, ci sono molti componenti pronti per l'uso che puoi importare nei tuoi progetti. La cosa leggermente diversa di Angular è che ci sono molti componenti ufficiali nel progetto Angular Material. Questo è un progetto ufficiale di Google che offre componenti Material Design per applicazioni Angular.

Puoi creare applicazioni mobili multipiattaforma in Angular usando NativeScript. Supporta anche Vue, ma il supporto Angular è più maturo.

Angular fa parte del noto stack MEAN che combina Angular con MongoDB, ExpressJS e NodeJS. Simile allo stack MERN, si basa interamente su JavaScript sia per il front-end che per il back-end.

Tecnologie comuni

Angular, React e Vue possono essere tutti utilizzati per sviluppare app Web progressive, note anche come PWA.

Le PWA non sono applicazioni mobili ma applicazioni Web che gli utenti di smartphone possono aggiungere come collegamenti alla schermata iniziale e offrono un aspetto simile alle app mobili native.

Puoi anche trovare modelli premium e applicazioni predefinite per ogni framework, ma Angular e React hanno più opzioni premium disponibili rispetto a Vue.

Prestazione

Quando si sceglie un framework o una libreria, è necessario pensare anche alle prestazioni.

In molti casi, non dovrai preoccuparti delle prestazioni, soprattutto se stai costruendo un piccolo progetto. Tuttavia, più un progetto cresce in termini di portata e complessità, le prestazioni possono (e diventeranno) un problema.

È importante notare che la qualità dello sviluppo e il rispetto delle migliori pratiche quando si tratta di prestazioni web è più importante della scelta del framework.

Ma poiché ci sono alcune metriche e differenze di prestazioni, le esaminerò e spiegherò come ciascuna potrebbe influenzare i tuoi sforzi di sviluppo.

Benchmark del framework JS: Angular vs React vs Vue

I risultati del benchmark JS Framework mostrano che funzionano tutti abbastanza bene nella maggior parte dei benchmark, come la creazione o l'aggiunta di righe in una tabella.

Come puoi vedere sopra, Vue è notevolmente più lento di Angular e React nella selezione delle righe. D'altra parte, Angular e React non sono molto efficienti nello scambio di righe.

Queste sono le uniche differenze sostanziali nei benchmark di rendering e, nella maggior parte dei casi, non producono risultati evidenti. Poiché la selezione delle righe è una funzionalità più comune rispetto allo scambio di righe, direi che questo benchmark mette Vue al terzo posto dietro Angular e React che condividono la prima posizione.

Quando si tratta di memoria e tempo di avvio, React e Vue ottengono ottimi punteggi, ma Angular è un po' più lento. Angular può impiegare 150 ms per avviare uno script di base e richiede più memoria per l'esecuzione.

Perf Track: Angular vs React vs Vue

Perf Track di Google Chrome Labs mostra i dati di produzione di migliaia di siti web. Queste statistiche sono influenzate da molte altre cose e non solo dal quadro di scelta, ma diamo un'occhiata ai numeri.

Prima pittura contenta

I siti Web Vue e React si classificano più in alto per questa metrica rispetto ad Angular, che può richiedere più tempo per l'avvio e la presentazione dei contenuti all'utente.

La più grande vernice contenta

Angular è anche il più lento tra i tre framework nel rendering di una pagina completa, con solo il 27% dei siti Web Angular che ottengono punteggi nell'intervallo accettabile.

Primo ritardo di ingresso

Per tutti e tre i framework, oltre l'80% dei siti Web rientra nell'intervallo accettabile per il primo ritardo di input, che mostra quanto ci vuole prima che l'utente possa interagire con la pagina.

Byte JavaScript

Le applicazioni più leggere sono di gran lunga quelle sviluppate con Vue, con il 68% delle app Vue che caricano meno di 1 MB di JavaScript. D'altra parte, le applicazioni Angular e React tendono ad avere una dimensione del codice maggiore.

Come utilizzare queste metriche

Puoi vedere una tendenza da queste cifre, ma non dovresti essere troppo veloce nel trarre conclusioni. Per l'ultima cifra, ad esempio, una spiegazione potrebbe essere che Vue viene utilizzato per sviluppare applicazioni più leggere mentre Angular viene utilizzato per progetti più grandi.

Le statistiche possono aiutarti a guidarti nel prendere una buona decisione, ma non puoi usarle per dimostrare che un framework è più veloce o migliore dell'altro.

Funzionalità avanzate

Per le applicazioni più avanzate, il framework front-end in uso dovrebbe essere in grado di eseguire alcune attività che migliorano le prestazioni e possono scalare meglio.

Due tecnologie fondamentali sono il rendering lato server (SSR) e la virtualizzazione.

Reagire

React supporta il rendering lato server con il pacchetto ufficiale ReactDOMServer. Per la virtualizzazione, puoi utilizzare un popolare strumento di terze parti chiamato React Virtualized.

Vue

Il rendering lato server è supportato anche in Vue con il pacchetto SSR ufficiale. Inoltre, puoi anche utilizzare il framework Nuxt.js che è basato su Vue e supporta SSR.

Le opzioni di virtualizzazione in Vue non sono così forti, sfortunatamente. Secondo me, Vue Virtual Scroll List è la soluzione migliore per lo scorrimento virtuale, ma è un po' difettoso e non stabile come le opzioni per React e Angular.

Angolare

Angular ha il pacchetto Angular Universal ufficiale per SSR e un componente ufficiale per lo scorrimento virtuale e il rendering efficiente di elenchi di grandi dimensioni.

Curva di apprendimento

Quanto è facile imparare ciascuno di questi framework?

Per rispondere a questa domanda, dobbiamo guardare alla complessità di ciascun framework e ai concetti che introducono.

Reagire

Nel suo caso d'uso più elementare, React è il meno complesso dei tre framework. Questo perché devi solo importare la libreria, quindi puoi iniziare a scrivere la tua applicazione React con poche righe di codice.

Ma a parte l'esempio Hello World, la maggior parte delle applicazioni React sono basate su componenti e non si limitano a eseguire il rendering di alcuni elementi sulla pagina.

Una cosa che alcuni sviluppatori trovano strano o difficile in React, è il fatto che l'apprendimento di JSX è una strada a senso unico. Puoi anche usare JavaScript grezzo, ma poiché la maggior parte degli sviluppatori React usa JSX, impararlo è praticamente inevitabile.

Questa è la cosa principale che può rendere la curva di apprendimento di React un po' più ripida, ma a parte questo, è una libreria facile da imparare per gli sviluppatori che conoscono JavaScript e comprendono i concetti di sviluppo web.

Vue

Vue è un po' più complesso da configurare rispetto a React. Puoi usarlo come libreria per definire componenti che puoi utilizzare nel tuo HTML, ma simile a React, non è così che viene costruita la maggior parte dei progetti.

La maggior parte dei progetti Vue avrà un componente radice chiamato App.vue e una serie di componenti figlio per la visualizzazione di varie cose.

Quando si tratta di sintassi, l'unica cosa nuova che devi imparare è la sintassi dei modelli di Vue, che è molto facile da capire se conosci l'HTML. Le direttive di base, come v-if e v-for per il rendering condizionale e il rendering di elenchi, sono facili da capire anche per i principianti.

Inoltre, i componenti a file singolo di Vue mantengono tutto il codice front-end in un unico posto, semplificando l'organizzazione di nuovi progetti.

Vue è il più facile da imparare, secondo me, per la sua semplicità e sintassi intuitiva.

Angolare

Angular ha la struttura di progetto più complessa delle tre e, poiché è un framework front-end completo, si basa su più concetti.

Oltre ai componenti, Angular supporta moduli e servizi. Si aspetta che tu scriva e progetti la tua base di codice in un modo specifico che renda il tuo progetto più gestibile quando aumenta la scalabilità.

Per quanto riguarda la sintassi, poiché Angular funziona meglio con TypeScript, è importante che tu conosca TypeScript quando crei un progetto Angular.

Come con Vue, devi anche familiarizzare con la sintassi simile a HTML in modo da poter iniziare a codificare nuove funzionalità dell'interfaccia utente con Angular.

Secondo me, Angular è il più difficile da imparare per lo sviluppatore medio perché è più complesso e si basa su TypeScript.

Previsioni future

Molti progetti e framework open source svaniscono nell'oblio e non vengono mantenuti. Dovresti essere preoccupato per qualcuno dei framework di cui stiamo discutendo qui?

Sebbene non possiamo prevedere completamente cosa accadrà, il lavoro di sviluppo in corso è un buon indicatore dello stato di salute di questi progetti. Anche popolarità e crescita sono parametri importanti per prevedere la longevità di un progetto, quindi diamo un'occhiata a ciascun framework.

Reagire

React v17.0 è stato rilasciato, ma sorprendentemente non include nuove funzionalità per gli sviluppatori.

Il cambiamento principale è che questa nuova versione semplifica l'aggiornamento di React stesso. Puoi aggiornare solo alcune parti di React dalla versione precedente a quella più recente, senza dover aggiornare l'intero progetto.

Se la tua applicazione si basa su funzionalità che cambiano o diventano obsolete con la nuova versione, puoi mantenere la vecchia versione per mantenere attiva questa funzionalità. Questo aggiornamento rende React un'ottima scelta a lungo termine perché rende più facile rimanere aggiornato con le nuove versioni.

React è cresciuto del 44% rispetto allo scorso anno nei download settimanali di npm. In numeri assoluti, è ancora il più scaricato dei tre progetti.

Vue

Vue 3 è stato rilasciato a settembre 2020 e affronta molti problemi seri che Vue 2 ha nei grandi progetti. Introduce l'API di composizione che si ispira a React Hooks e semplifica il riutilizzo della logica tra i componenti.

L'intero progetto è stato riscritto in TypeScript, che migliora il supporto di TypeScript nei nuovi progetti Vue e allo stesso tempo rende il progetto più gestibile.

Vue 3 è un aggiornamento tanto necessario e rende Vue una soluzione migliore per progetti su larga scala.

I download settimanali di Vue sono cresciuti dell'87% rispetto allo scorso anno, rendendo Vue il framework in più rapida crescita in termini relativi. Se Vue riesce a mantenere questo tasso di crescita, presto supererà sicuramente Angular.

Angolare

Angular ha recentemente introdotto l'Ivy Compiler. Riduce i tempi di creazione, ottimizza le risorse, consente test più rapidi e, in generale, migliora l'esperienza degli sviluppatori.

Il team di Angular rilascia aggiornamenti importanti più volte all'anno, che possono includere nuove funzionalità o semplicemente aggiornare il framework con le nuove versioni del browser.

Angular è cresciuto di circa il 50% nei download settimanali rispetto allo scorso anno, quindi è ancora un progetto popolare.

Conclusione

Angular, React e Vue sono tutti in fase di sviluppo molto attivo. Rilasciano regolarmente nuove versioni e mantengono quelle esistenti. Poiché l'attuale livello di supporto è elevato in ogni caso, puoi tranquillamente utilizzare uno qualsiasi di questi framework.

È importante notare che Angular non sta crescendo velocemente come prima, mentre Vue, anche se è iniziato più di recente, sembra crescere molto.

Come affermato in precedenza, non possiamo prevedere quali framework rimarranno rilevanti a lungo termine, ma ogni progetto ha una grande comunità alle spalle ed è in continua evoluzione.

Il mio obiettivo con questo articolo era spiegare le differenze architettoniche, abbattere i punti di forza e di debolezza di ogni framework e confrontarli ovunque sia applicabile.

Prima di entrare in un nuovo framework, ci sono alcune cose da considerare.

Innanzitutto, l'esperienza del tuo team può essere un fattore decisivo nella scelta di una nuova tecnologia.

Allo stesso modo, devi considerare il talento disponibile nella tua zona in modo da poter assumere sviluppatori per il tuo progetto.

Infine, quando si tratta del progetto stesso, la complessità e la portata possono anche influenzare la scelta del framework.

Tenendo conto di tutte le differenze chiave, spero che tu possa decidere quale sia il miglior framework front-end per i tuoi obiettivi e le tue esigenze.