Il confronto definitivo dei framework JavaScript: Angular vs React

Una domanda che mi viene posta quasi quotidianamente è che dovrei iniziare con ReactJS o Angular? Tuttavia, prima di procedere oltre, lasciate che vi dia una dichiarazione di non responsabilità.

Non è un blog in cui colpirò l’uno o l’altro o dirò che dovresti sempre usare l’uno sull’altro. Ogni sviluppatore e ogni progetto sono completamente diversi e hanno un diverso insieme di requisiti, quindi dire che dovresti sempre usare ReactJS o usare sempre Angular è dannatamente stupido.

L’argomentazione logica

Potresti sostenere che Angular è un framework e React è tecnicamente una libreria a sé stante. Non sto negando questo fatto, ma questo è l’argomento che non voglio entrare in questo momento. Ci sono pacchetti che puoi aggiungere a React che lo trasformeranno in un framework che compete direttamente con Angular. Stiamo confrontando i due ecosistemi, non la struttura esatta rispetto alla libreria esatta.

La curva di apprendimento

Iniziamo con Angular. Ancora un altro disclaimer: quando dico Angular sto parlando di Angular 4 non di AngularJS.

Angular è un grande framework, il che significa che è potente e include molto. C’è molto da imparare. Ascolterai un sacco di nuovi vocaboli intimidatori come l’iniezione di dipendenze, decoratori di direttive, pipe, ecc. Quindi dovrai occuparti di Typescript, che è JavaScript più un sacco di altre funzionalità tra cui la digitazione statica.

Angular è più supponente di React, il che è uno dei vantaggi secondo me perché con React puoi fare la stessa cosa in un milione di modi diversi. Con Angular, ci sono generalmente uno o due modi per fare certe cose, il che rende più facile da seguire, ti dà istruzioni molto più chiare su cosa dovresti fare.

Ma poi di nuovo, si riduce alle preferenze. Ti potrebbe piacere la flessibilità di fare le cose in modi diversi. Come ho già detto, ReactJS è una libreria se parliamo solo della libreria principale, è molto più piccola e molto più facile da imparare rispetto al framework Angular. Puoi dire che imparerai React in un lasso di tempo più breve. React è di per sé un’ottima libreria di visualizzazione, ma non è nemmeno così potente per applicazioni di grandi dimensioni. Se desideri instradamento, convalida, richieste HTTP in React, dovrai installare altri pacchetti e questo si aggiunge alla curva di apprendimento.

Se guardi il codice React di due diversi sviluppatori, probabilmente sembreranno completamente diversi sia che stiano effettuando richieste HTTP o gestendo lo stato e le proprietà. Tutta quella roba può essere gestita in modo molto diverso e molte volte può essere nel modo sbagliato.

Trovi le migliori pratiche e tutti i problemi scompaiono, ma ciò si aggiunge alla curva di apprendimento.

A differenza di Angular React non utilizza modelli. Utilizza qualcosa chiamato estensione JSX o JavaScript o estensione della sintassi JavaScript, che ci consente di incorporare l’HTML nel JavaScript. All’inizio questo può sembrare un po’ strano. Soprattutto, quando probabilmente ti è stato insegnato a separare il tuo markup e il tuo JavaScript.

Pensa a come inserire l’HTML all’interno di JavaScript con un paio di modifiche diverse: non puoi usare l’attributo class e devi usare il nome della classe.

Infine, abbiamo Redux. React viene spesso utilizzato con Redux o Flux, ovvero gestori di stato a livello di applicazione. A mio parere, Redux è dannatamente difficile solo impostarlo e apprenderne i concetti è difficile.

Penso che sia abusato. Penso che molti sviluppatori utilizzino redux dove non è necessario. Non ne hai bisogno per applicazioni più piccole, ma molti sviluppatori insistono nell’usarlo. Anche questo dipende dalle preferenze. Redux è molto potente, non voglio portarlo via. Quando si parla della curva di apprendimento è dannatamente difficile da cogliere.

Caratteristiche	Reagire	Angolare
Linguaggio di programmazione	javascript	Dattiloscritto
Struttura del codice	Supponente	Flessibile
Libreria principale	Piccolo	Molto largo
Modelli	JSX	HTML
Competenza	Piccole Applicazioni	Applicazioni su larga scala

Vincitore: È un pareggio

Prestazione

Non è giusto confrontare direttamente le prestazioni di Angular con React. Angular è un framework front-to-back completo che include routing, strumenti per moduli, libreria HTTP, estensioni reattive, ecc. Tutte queste funzionalità gonfiano il framework e lo rendono più lento. Tuttavia, React di per sé è solo una libreria di visualizzazione, che è molto più piccola e più veloce.

Una volta che inizi ad aggiungere pacchetti come il router, il client HTTP o qualsiasi altra cosa aggiungerai alla tua applicazione React, inizia a salire un po ‘di più rispetto a dove si trova Angular e quindi puoi iniziare a confrontarli in modo equo, ma anche dopo che React continua vince il dipartimento delle prestazioni. È una tecnologia molto veloce in generale.

Il passaggio da Angular 2 ad Angular 4 sotto il cofano ha fatto un bel po’ per aumentare le prestazioni. Angular 4 ha prestazioni migliori di Angular 2. Tuttavia, React vince ancora nel reparto prestazioni.

Angolare vs Reagire. Fonte: Academind.com

Vincitore: Reagisci

Caratteristiche

Entrambi i framework hanno molte delle stesse caratteristiche e vantaggi generali: organizzano il tuo codice, sono basati su componenti, offrono markup dinamico, ecc. Sono abituati a fare molte delle stesse cose e condividono un molte delle stesse caratteristiche.

Caratteristiche	AngularJS	Reagire
Ora di pranzo	2009	2013
Lingua	Dattiloscritto, JavaScript	javascript
Quota di mercato	0,3%
Modello	sì	No
Visualizzazione	sì	sì
Controllore	sì	No
Curva di apprendimento	Complesso	Facile
Modelli	sì	No
Fallimento	Tempo di esecuzione	Tempo di compilazione
Serve-side-rendering	No	sì
DOM	sì	Virtuale
Supporto mobile	sì	sì
Serve-side-rendering	No	sì

Vedremo alcune delle caratteristiche individuali. Angular ha ovviamente molte più funzionalità di React al suo interno. Lascia che te lo ricordi, stiamo parlando di due ecosistemi e pacchetti comuni utilizzati con React.

Angular è un framework tutto incluso. Viene fornito con un router componente, estensioni reattive per osservabili, un client HTTP, un modulo del modulo per la convalida e l’elenco potrebbe continuare. Inoltre, offre data binding bidirezionale in un modo che nessun altro framework offre realmente. L’associazione dei dati dalla vista al modello è estremamente semplice utilizzando la direttiva del modello ng.

Angular supporta anche MVC (Model View controller) o almeno aspetti diversi da quel modello di progettazione. è inoltre dotato di funzionalità che consentono di implementare facilmente i test: sia il test unitario che il test end-to-end. Angular è ricco di funzionalità per creare applicazioni front-end di livello aziendale. React d’altra parte non include molto al suo interno. Tuttavia, è possibile aggiungere elementi per dargli le funzionalità che Angular include immediatamente, più alcune aggiuntive.

React utilizza un DOM virtuale molto potente. Crea la propria versione leggera dell’attuale Dom e include e aggiorna solo ciò che è necessario anziché aggiornare l’intera cosa. Il DOM virtuale è uno dei motivi principali per cui React è incredibilmente veloce.

React utilizza JSX che è più potente dei modelli standard perché puoi inserire assolutamente qualsiasi tipo di JavaScript che desideri. JSX non è necessario per utilizzare React, ma rende le cose molto più semplici. Non riesco a pensare a nessun motivo per cui non dovresti usare JSX anche con Angular. React fa anche un ottimo lavoro nella gestione dello stato e delle proprietà dei componenti. Rende i dati davvero facili da lavorare e passare tra i componenti. Passare i dati tra i componenti, Angular è molto più difficile che farlo in React.

Core React è difficile mantenere lo stato a livello di app. Component State è facile ma se vuoi una vera gestione dello stato a livello di app, allora avrai bisogno di Redux o Flux, che ho detto prima è piuttosto confuso da imparare. I pacchetti esterni che vengono spesso utilizzati come la nuova versione 4 del router React sono un po’ difficili da comprendere ma sono anche molto potenti una volta imparato a eseguirlo e configurarlo. Ci sono anche molti modi diversi per usarlo. React non ha un componente HTTP di base come Angular, ma puoi usare Fetch o Axios, che è un client HTTP esterno e quindi Enzyme è popolare per attestare React. Ci sono alcuni dei diversi pacchetti comunemente usati con React anche se non fanno parte della libreria vera e propria.

Sebbene entrambe le tecnologie condividano un buon numero di funzionalità, se stai solo confrontando le tecnologie di base, allora Angular è il vincitore.

Vincitore: Angolare

Utensili

Angular e React hanno alcune interfacce a riga di comando piuttosto carine. La CLI di Angular e l’app Create React sono entrambe fantastiche e ci consentono davvero di semplificare lo sviluppo. La CLI di Angular è un po’ più potente perché possiamo generare rapidamente cose come componenti e servizi. Create React non può farlo. Devi creare tutto da solo per quanto riguarda i file e la struttura di base. Entrambi i sistemi utilizzano il web pack, hanno i propri server di sviluppo con caricamento automatico e dispongono di strumenti di compilazione e creazione. Ovviamente, Angular ha il compito aggiuntivo di transpilare Typescript. La CLI ha uno script per questo quando eseguiamo ng serve. Tutto quello che è successo dietro le quinte. Usa qualcosa chiamato TSC o Typescript Compiler per questo ed entrambi hanno anche strumenti di test.

Caratteristiche	Angolare	Reagire
Interfaccia della riga di comando	CLI angolare	Crea Reagisci
Compiti aggiuntivi	Dattiloscritto transpiling	Nessuno
Test	Gelsomino e karma	È

Se si tratta di un’applicazione full stack, questi sono davvero importanti. Non è necessario utilizzarli. Puoi creare un’applicazione React da zero con il web pack. Questi rendono molto più semplice non solo creare l’applicazione, ma anche compilarla e crearla per la produzione.

Sono entrambe carine anche in quel reparto.

Vincitore: Angolare

Ecosistema

Come ho detto, entrambe queste tecnologie hanno i propri ecosistemi che ora si diffondono ben oltre il browser web.

Ionic è un popolare framework ibrido che è un’applicazione Angular che viene eseguita all’interno di un wrapper nativo per app mobili. Puoi creare app mobili utilizzando Angular. Le app ibride possono essere un po’ goffe rispetto alle applicazioni native. L’esperienza dell’utente può non essere così eccezionale a volte, non così veloce e reattiva. Tra i vari framework ibridi, Ionic 3 è il migliore. C’è anche NativeScript, che ci consente di creare vere app native per iOS e Android con Angular e JavaScript.

Caratteristiche	Angolare	Reagire
Sviluppo di app ibride	Ionico	*Non richiesto
Sviluppo di app native	NativeScript	Reagisci nativo
Rendering lato server	Universale angolare	QUELLO
Biblioteca di gestione dello stato	Negozio NgRx	Reax Redux, MobX
Libreria dell’interfaccia utente dei materiali	Materiale angolare	Materiale-UI
Realta virtuale	VR reattivo	QUELLO

Tuttavia, NativeScript non sembra essere buono come React Native di Facebook almeno a questo punto. Angular ha anche una libreria di componenti di material design se sei un fan del material design. Angular Universal è un progetto seed che può essere utilizzato per il rendering di Angular sul lato server. C’è anche il negozio NgRx che è una libreria di gestione dello stato ispirata a Reax redux. Si basa sullo stato mutato dai peer reducer. Ha anche l’integrazione con le estensioni reattive.

Te ne saresti accorto. Una volta, uno di loro fa qualcosa che l’altro copia in modo diverso. React e Angular sono diventati framework Microsoft e Apple di JavaScript.

React ha abbastanza l’ecosistema. Ha React nativo che è popolare. È il modo migliore per creare app mobili con tecnologie web. React Native è veloce e molte delle applicazioni, se create correttamente, sono all’altezza delle app native basate su Swift o Java. React ha una libreria di material design chiamata Material-UI che è molto simile al componente di material design di Angular ma più maturo. JS è un framework per il rendering di applicazioni React lato server. Ha lo scopo di farlo nel modo più semplice possibile in modo che possa essere paragonato ad Angular Universal. MobX è un altro modo per gestire lo stato. Funziona in modo leggermente diverso rispetto a redux. Fornisce una serie di decoratori per definire osservabili e osservatori e introduce la logica reattiva nel tuo stato.

Storybook è un ambiente di sviluppo per React. Ti consente di sfogliare una libreria di componenti, visualizzare diversi stati di ciascun componente e sviluppare e testare i componenti in modo interattivo. Reactive VR sta portando React nella realtà virtuale. React desktop è una libreria JavaScript costruita sopra la libreria Reacts che presumibilmente porta un’esperienza desktop nativa sul web, con molti componenti macOS e Windows 10. L’ecosistema React è estremamente ampio e potente. React si sta facendo strada in ogni aspetto della tecnologia ed è un chiaro vincitore.

Vincitore: Reagisci

Le persone in giacca e cravatta usano Angular e gli hipster con la barba trasandata usano React.

	AngularJS	Reagire
Principali sviluppatori	Google	Facebook+Instagram
Età	6Anno	2 anni
Estensibilità	sì	sì
Velocità*	1,35 secondi	310 millisecondi
DOM	Navigatore	Virtuale; esegue il rendering solo dei dati modificati con il meccanismo di patching
Architettura	Framework MVC completo	Solo il componente vista
Curva di apprendimento	Difficile all’inizio; richiede la conoscenza di concetti specifici come direttive DOM, filtri e factory.	Più facile da avviare; contiene un’API e una sintassi semplificate
Struttura e Componenti	HTML,JS e CSS	Stesso; ma può integrare HTML con JS, utilizzando JSX

In conclusione: è un pareggio

Se stai decidendo tra questi framework, guarda le diverse categorie e vedi cosa ti interessa. Provali entrambi e vedi quale prendi più velocemente. Fai qualche ricerca in più rispetto a questo blog. Non otterrai mai tutte le informazioni di cui hai bisogno da un blog, quindi leggine altre.

Se stai guardando un ecosistema più ampio che include lo sviluppo di app mobili native, scegli React senza pensarci due volte. Se cerchi funzionalità, Angular è enorme. Ci sono più funzionalità di quelle di cui hai bisogno.