Angular vs React vs Vue: quale quadro scegliere nel 2020

Questo post è una guida completa su cui forse è la soluzione giusta per te: Angolare vs React vs Vue.


Solo un paio d’anni fa, gli sviluppatori stavano discutendo principalmente sull’opportunità di utilizzare Angular vs React per i loro progetti. Ma nel corso degli ultimi due anni, abbiamo visto crescere l’interesse per un terzo giocatore chiamato Vue.js.

Se sei uno sviluppatore che inizia un progetto e non riesci a decidere quale framework JavaScript utilizzare, questa guida dovrebbe aiutarti a prendere una decisione.

Copriamo vari aspetti di Angular, Vue e React per vedere come soddisfano le tue esigenze. Questo post non è solo una guida su Angular vs React vs Vue ma mira a fornire una struttura per aiutare a giudicare i framework JavaScript front-end in generale. Nel caso in cui arriverà un nuovo framework l’anno prossimo, saprai esattamente quali parametri guardare!

* In questo post, supponiamo che tu abbia una conoscenza di base di JavaScript e di aver utilizzato anche framework JavaScript.

Angolare vs React vs Vue

Iniziamo:

Parte 1: una breve storia di Vue vs React vs Angular

Prima di entrare nei dettagli tecnici, parliamo prima della storia dietro questi quadri – solo per apprezzare meglio la loro filosofia e la loro evoluzione nel tempo.

Come è iniziato tutto ��

logo angolare

Angolare, sviluppato da Google, è stato rilasciato per la prima volta nel 2010, rendendolo il più vecchio del lotto. È un framework JavaScript basato su TypeScript. Nel 2016 si è verificato un cambiamento sostanziale nel rilascio di Angular 2 (e la caduta di "JS" dal nome originale – AngularJS). Angular 2+ è noto solo come Angular. Sebbene AngularJS (versione 1) riceva ancora aggiornamenti, concentreremo la discussione su Angular. L’ultima versione stabile è Angular 9, che è stata rilasciata nel febbraio 2020.

logo vue

Vue, noto anche come Vue.js, è il membro più giovane del gruppo. È stato sviluppato dall’ex dipendente di Google Evan You nel 2014. Negli ultimi tre anni, Vue ha visto un sostanziale cambiamento di popolarità, anche se non ha il sostegno di una grande azienda. L’attuale versione stabile è 2.6, rilasciata a febbraio 2019 (con alcune piccole versioni incrementali da allora). I collaboratori di Vue sono supportato da Patreon. Vue 3, attualmente in fase alfa, sta pianificando di farlo passa a TypeScript.

logo reattivo

Reagire, sviluppato da Facebook, è stato inizialmente rilasciato nel 2013. Facebook utilizza ampiamente React nei propri prodotti (Facebook, Instagram e WhatsApp). L’attuale versione stabile è 16.X, rilasciata a novembre 2018 (con aggiornamenti incrementali più piccoli da allora).

Ecco un breve riassunto di Angular vs React vs Vue, in termini di stato e cronologia:

La storia di Angular vs React vs Vue

Angolare
Reagire
Vue

Versione iniziale201020132014
Sito ufficialeangular.ioreactjs.orgvuejs.org
Circa. dimensione (KB)50010080
Versione corrente916.x2.6.x
Usato daGoogle, WixFacebook, UberAlibaba, GitLab

Licenza ��‍♂️

Prima di utilizzare un framework open source, assicurati di passare attraverso la sua licenza. È interessante notare che tutti e tre i framework utilizzano Licenza MIT, che prevede restrizioni limitate sul riutilizzo, anche nei software proprietari. Assicurarsi di conoscere le implicazioni della licenza prima di utilizzare qualsiasi framework o software.

Qui è un breve riepilogo della licenza del MIT in parole povere.

Popolarità ��

Come "angolare" e "reagire" sono parole comuni, è difficile coglierne la popolarità da Google Trends. Tuttavia, è un buon proxy per la loro popolarità il numero di stelle ottenute dai loro repository GitHub. Un improvviso cambiamento nel numero di stelle di Vue si è verificato a metà 2016 e, recentemente, Vue è stato lassù con React tra i framework più popolari.

Stelle su progetti GitHub per Angular vs React vs VueNumero di stelle nei progetti GitHub per Angular, React e Vue

Controlliamo come è il mercato del lavoro per Angular vs React vs Vue, che è anche una buona misura di popolarità:

Mercato del lavoro per Angular vs React vs Vue ��‍♂️

Il migliore fonti di dati che indicano le tendenze nel mercato del lavoro sono le varie schede di lavoro.

Come visto dalle tendenze della fine del 2018, il numero di lavori che richiedono un set di competenze di Angular o React è all’incirca lo stesso, mentre quello di Vue era ancora solo una frazione di questo numero (circa il 20%). Questo elenco non è assolutamente esaustivo ma offre una buona immagine dell’intero settore tecnologico.

Se stai osservando rigorosamente dal punto di vista dell’attuale mercato del lavoro, la soluzione migliore è imparare Angular o React. Tuttavia, dato che Vue ha guadagnato popolarità negli ultimi tre anni, potrebbe essere necessario del tempo perché i progetti utilizzino Vue o nuovi progetti che adottano Vue per raggiungere un livello di maturità che comanda un numero maggiore di sviluppatori.

Parte 2: Comunità e sviluppo

Ora che hai familiarità con la storia e le tendenze di ciascuno di questi framework, esamineremo la community per valutare lo sviluppo di questi framework. Abbiamo già visto che per tutti i framework, le versioni incrementali sono state spedite regolarmente nell’ultimo anno, il che indica che lo sviluppo sta procedendo a pieno ritmo.

Vediamo Angular vs React vs Vue per quanto riguarda le statistiche sui loro repository GitHub:

Angolare
Reagire
Vue

# Osservatori3.2K6.6k6.0k
# Stelle57K144k157k
# Forchette15.9k27.6k23.7k
# Contributori1.0891.361289

Vue ha un numero enorme di osservatori, stelle e forchette. Ciò dimostra la sua popolarità tra gli utenti e il suo valore quando si confrontano Vue vs React. Tuttavia, il numero di collaboratori per Vue è inferiore a Angular e React.

Una possibile spiegazione è quella Vue è guidato interamente dalla comunità open source, mentre Angular e React hanno una quota significativa di dipendenti di Google e Facebook che contribuiscono ai repository.

Dalle statistiche, tutti e tre i progetti mostrano un’importante attività di sviluppo, e questo sicuramente continuerà in futuro – proprio queste statistiche non possono essere la base per non decidere di utilizzare nessuno dei due.

Parte 3: Migrazioni

Mentre lavori con il tuo framework di scelta, non devi preoccuparti di un aggiornamento del framework in arrivo e di incasinare il tuo codice. Sebbene nella maggior parte dei casi non si verifichino molti problemi da una versione all’altra, è importante tenere il dito sul polso perché alcuni aggiornamenti possono essere più significativi e richiedere modifiche per mantenere le cose compatibili.

Angolare pianifica importanti aggiornamenti ogni sei mesi. Vi è anche un periodo di altri sei mesi prima che le principali API vengano deprecate, il che ti dà il tempo di due cicli di rilascio (un anno) per apportare le modifiche necessarie se presenti.

Quando si tratta di Angular vs React, Facebook lo ha affermato la stabilità è della massima importanza a loro, poiché grandi aziende come Twitter e Airbnb usano React. Gli aggiornamenti attraverso le versioni sono generalmente i più semplici in React, con script come reagire-codemod aiutandoti a migrare.

Nella sezione Migrazione delle FAQ, Vue lo menziona Il 90% dell’API è lo stesso se si esegue la migrazione da 1.xa 2. C’è un strumento di supporto alla migrazione che funziona sulla console per valutare lo stato della tua app.

Parte 4: Lavorare con Vue vs Angular vs React

Ci sono alcune caratteristiche importanti da considerare qui, principalmente le dimensioni complessive e i tempi di caricamento, i componenti disponibili e la curva di apprendimento.

Dimensioni e tempi di caricamento ⏲️

Le dimensioni delle librerie sono le seguenti:

  • Angolare 4+: dipende dalla dimensione del pacchetto prodotta
  • Reagire: 116 KB
  • Vue: 91 KB

Sebbene vi sia una differenza significativa tra le dimensioni dei framework, sono ancora piccole rispetto alla dimensione media della pagina Web (2+ MB nel 2018). Inoltre, se si utilizza un CDN popolare per caricare queste librerie, è molto probabile che un utente abbia già la libreria caricata nel proprio sistema locale.

Componenti ��️

I componenti sono parti integranti di tutte e tre le strutture, non importa se stiamo parlando di Vue, React o Angular. Un componente generalmente riceve un input e cambia il comportamento in base ad esso. Questa modifica del comportamento si manifesta generalmente come una modifica dell’interfaccia utente di alcune parti della pagina. L’uso di componenti semplifica il riutilizzo del codice. Un componente può essere un carrello su un sito di e-commerce o una casella di accesso su un social network.

Angolare Angolare:
In Angolare, i componenti sono indicati come direttive. Le direttive sono solo dei marcatori sugli elementi DOM, che Angular può tracciare e associare anche comportamenti specifici. Pertanto, Angular separa la parte dell’interfaccia utente dei componenti come attributi dei tag HTML e i loro comportamenti sotto forma di codice JavaScript. Questo è ciò che lo distingue quando si guarda Angular vs React.
Reagire Reagire:
React, interessante, combina l’interfaccia utente e il comportamento dei componenti. Ad esempio, eccolo qui il codice per creare un componente ciao mondo in React. In React, la stessa parte del codice è responsabile della creazione di un elemento dell’interfaccia utente e del suo comportamento.
Vue Vue:
In Vue, anche l’interfaccia utente e il comportamento fanno parte dei componenti, il che rende le cose più intuitive quando si guarda Vue vs React. Inoltre, Vue è altamente personalizzabile, che consente di combinare l’interfaccia utente e il comportamento dei componenti all’interno di uno script. Inoltre, puoi anche usa i pre-processori in Vue piuttosto che in CSS, che è una grande funzionalità. Vue è eccezionale quando si tratta di integrazione con altre librerie, come Bootstrap.

Per confrontare l’aspetto della stessa app con librerie diverse, ecco un ottimo post su creando lo stesso per fare la lista app su React e Vue e contrastando le differenze tra i due quadri.

Curva di apprendimento ��

Quindi, quanto è difficile imparare ciascuno di questi quadri?

Angolare Angolare:
Angolare ha una ripida curva di apprendimento, considerando che si tratta di una soluzione completa e la padronanza di Angular richiede di imparare concetti associati come TypeScript e MVC. Anche se ci vuole tempo per imparare Angular, l’investimento paga dividendi in termini di comprensione del funzionamento del front-end.
reagire Reagire:
React offre a Iniziare guida che dovrebbe aiutare a impostare React in circa un’ora. La documentazione è completa e completa, con soluzioni a problemi comuni già presenti su StackTranslate.it. React non è un framework completo e funzionalità avanzate richiedono l’uso di librerie di terze parti. Ciò rende la curva di apprendimento del framework principale non così ripida, ma dipende dal percorso intrapreso con funzionalità aggiuntive. Tuttavia, imparare a usare React non significa necessariamente che stai usando le migliori pratiche.
vue Vue:
Vue offre una maggiore personalizzazione e quindi è più facile da imparare rispetto ad Angular o React. Inoltre, Vue ha una sovrapposizione con Angular e React rispetto alla loro funzionalità come l’uso di componenti. Quindi, il passaggio a Vue da uno dei due è un’opzione facile. Tuttavia, la semplicità e la flessibilità di Vue è un’arma a doppio taglio: consente un codice scadente, rendendo difficile il debug e il test.

Sebbene Angular, React e Vue abbiano una curva di apprendimento significativa, i loro usi su padronanza sono illimitati. Ad esempio, puoi integrare Angular e React con WordPress e WooCommerce per creare app Web progressive.

Angular vs React vs Vue: chi vince?

Verso la fine di questo post, ricordiamo le caratteristiche di ciascun framework per cercare di rispondere alla domanda: Angular vs React vs Vue: quale scegliere??

logo angolare Angolare è il più maturo dei framework, ha un buon supporto in termini di collaboratori ed è un pacchetto completo.

Tuttavia, la curva di apprendimento è ripida e i concetti di sviluppo in Angular potrebbero rimandare i nuovi sviluppatori.

Angular è una buona scelta per le aziende con grandi team e sviluppatori che già utilizzano TypeScript.

Extra �� Ecco alcuni modelli di dashboard di amministrazione angolare che potrebbero interessarti.

reagire logo Reagire è abbastanza grande da essere maturo e ha un enorme numero di contributi da parte della comunità. Ha ottenuto un’accettazione diffusa. Il mercato del lavoro per React è davvero buono e il futuro di questo quadro sembra brillante.

React sembra una buona scelta per qualcuno che inizia con framework JavaScript front-end, startup e sviluppatori a cui piace una certa flessibilità. La capacità di integrarsi perfettamente con altri framework offre un grande vantaggio per coloro che desiderano una certa flessibilità nel proprio codice.

logo vue Vue è il più recente nell’arena, senza il sostegno di una grande azienda.

Tuttavia, negli ultimi anni ha funzionato molto bene diventando un forte concorrente di Angular e React. Questo sta forse giocando un ruolo con molti giganti cinesi come Alibaba e Baidu che scelgono Vue come loro principale framework JavaScript front-end.

Tuttavia, resta da vedere come andrà in futuro ed è giustificato essere cauti con esso. Vue dovrebbe essere la tua scelta se preferisci la semplicità, ma anche la flessibilità.

Extra �� Ecco alcuni modelli di amministrazione di Vue creati con Bootstrap che potrebbero interessarti.

La risposta al dibattito tra Angular vs React vs Vue è che non esiste una scelta assolutamente giusta, che probabilmente ti aspettavi.

Ognuna di queste librerie ha i suoi vantaggi e svantaggi. In base al progetto su cui stai lavorando e alle tue esigenze individuali, uno di questi sarà più adatto degli altri. È sempre fondamentale fare le tue ricerche prima di decidere, specialmente se stai per lavorare in un’impresa commerciale e non in un progetto personale.

Quale quadro pensi sia il vincitore qui – Angular vs React vs Vue? Fatecelo sapere nei commenti qui sotto.

Ulteriori letture: ��

  • Modelli di design dei materiali per Vue, Angular, React (Material UI)
  • Librerie / frame migliori di React UI Component
  • Interessanti librerie di componenti dell’interfaccia utente di Vue
  • I migliori modelli di dashboard di amministrazione angolare
  • I migliori modelli gratuiti Bootstrap per ReactJS
  • Modelli nativi gratuiti React
  • Modelli amministrativi gratuiti e premium di VueJS creati con Bootstrap

In un’altra nota, che ne dici di usare ancora WordPress? WordPress è perfettamente adatto per eseguire quasi tutti i progetti di siti Web immaginabili e ci sono alcuni temi fantastici disponibili per rendere il tuo design fantastico (molti dei quali gratuiti). Per non parlare del fatto che puoi ospitare un sito Web WordPress a un prezzo inferiore.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout e presentazione di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map