Confronto tra AngularJS VS React nel 2018

In questo articolo, stiamo confrontando 2 tecnologie più popolari per lo sviluppo del front-end: Angular e React. Li confronteremo dall'architetto del progetto, dalla prospettiva degli sviluppatori e dalla prospettiva delle aziende.

Al giorno d'oggi il confronto tra angolare e reazione è un argomento molto popolare. React e Angular sono entrambe tecnologie JavaScript altamente avanzate e ampiamente utilizzate che utilizziamo per creare app Web reattive e applicazioni interattive a pagina singola. Il numero di strumenti JavaScript per lo sviluppo rapido di applicazioni a pagina singola (SPA) è in costante aumento, quindi scegliere il giusto framework per gli sviluppatori Web è più impegnativo.

Le principali differenze tra AngularJS (Framework) e React (la libreria) sono la componentizzazione, l'associazione dei dati, le prestazioni, la risoluzione delle dipendenze, le direttive e il templating. Diamo un'occhiata a ciascuno di questi aspetti in dettaglio.

AngularJS

La versione angolare 2 e successive è stata meno di React, ma se si conta nella storia del suo predecessore, AngularJS, l'immagine appare uniforme. È gestito da Google e utilizzato in Analytics, AdWords e Google Fiber. Poiché AdWords è uno dei progetti chiave di Google, è chiaro che hanno fatto una grande scommessa su di esso ed è improbabile che scompaia presto.

Reagire

React è sviluppato e gestito da Facebook e utilizzato anche nei loro prodotti come Instagram e WhatsApp. È in circolazione da circa quattro anni e mezzo ormai, quindi non è esattamente nuovo. È anche uno dei progetti più popolari su GitHub, con circa 92.000 stelle al momento della stesura. Per me va bene.

componentizzazione

AngularJS

AngularJS ha una struttura molto complessa e fissa perché basata sull'architettura Model-View-Controller tipica delle applicazioni a pagina singola. Un oggetto $ scope in AngularJS è responsabile della parte Model, che viene inizializzata dal controller e quindi trasformata in HTML per creare la vista per l'utente. AngularJS offre numerosi servizi standard, fabbriche, controller, direttive e altri componenti.

Suddividiamo il codice in diversi file in AngularJS. Ad esempio, quando creiamo un componente riutilizzabile con la nostra direttiva, controller e modello, dobbiamo descrivere ogni blocco di codice in un file separato. Una volta che descriviamo la nostra direttiva, aggiungiamo quindi un collegamento al nostro modello nella direttiva per abbinare queste parti. Le direttive AngularJS rappresentano la logica del modello per la tua applicazione. Il modello è HTML esteso con le direttive AngularJS, generalmente scritte come tag o attributi. Aggiungiamo anche controller per fornire ai nostri modelli il $ scope o il contesto necessari. I controller sono anche scritti in file separati. Quando modulare la nostra applicazione in questo modo, possiamo riutilizzare il nostro modello o componente in una parte diversa del sito Web e questo è molto utile per la società di sviluppo AngularJS perché consente di risparmiare molto tempo e velocizzare il processo di sviluppo.

Reagire

Non esiste una struttura "corretta" per le applicazioni create con React È una grande libreria JavaScript che ci aiuta ad aggiornare la vista per l'utente. Ma React non ci consente ancora di creare applicazioni da soli. Nella libreria mancano i livelli di modello e controller. Per colmare il divario, Facebook ha introdotto Flux, che ha numerose varianti al giorno d'oggi, per controllare il flusso di lavoro dell'applicazione.

React fornisce un modo molto semplice ed efficiente per costruire alberi dei componenti. Vanta uno stile di programmazione funzionale in cui le definizioni dei componenti sono dichiarative. Comporre l'app dai componenti di React è come comporre un programma JavaScript da funzioni.

Associazione dati

In MVC Patterns l'associazione è l'argomento più importante per passare qualsiasi dato nel flusso unidirezionale o bidirezionale. L'associazione dati è il processo di sincronizzazione dei dati che funziona tra il modello e i componenti della vista.

AngularJS

L'associazione di dati nelle app angolari è la sincronizzazione automatica dei dati tra il modello e i componenti di visualizzazione. Il modo in cui Angular implementa l'associazione dei dati consente di trattare il modello come unica fonte di verità nella propria applicazione. La vista è una proiezione del modello in ogni momento. Quando il modello cambia, la vista riflette la modifica e viceversa.
 Si tratta semplicemente di un allegato di dati da Modello a Vista o viceversa in modo sincronizzato, in modo tale che ogni volta che si verifica una modifica a uno qualsiasi di modello o vista, gli altri dovrebbero mostrare la modifica e questo è sincronizzato.

Reagire

La migliore caratteristica di reagire è Virtual-Dom. React inietta i dati nelle viste renderizzate in fase di costruzione, sia quando viene creata la vista radice sia tramite una vista nidificata. React utilizza l'associazione dati unidirezionale, il che significa che siamo in grado di dirigere il flusso di dati solo in una direzione. All'interno della classe, si accede ai dati passati tramite la proprietà props del contesto corrente.

Prestazione

AngularJS

Ci sono due cose da prendere in considerazione quando parliamo della performance di Angular. Come accennato in precedenza, Angular 1.xe successive si basano sull'associazione di dati bidirezionale. Questo concetto si basa sul "controllo sporco", un meccanismo che può rallentare il nostro sviluppo di applicazioni AngularJS.

Quando associamo valori in HTML con il nostro modello, AngularJS crea un watcher per ogni associazione per tenere traccia delle modifiche nel DOM. Una volta aggiornato View, AngularJS confronta il nuovo valore con il valore iniziale ed esegue il ciclo $ digest. Il ciclo $ digest quindi controlla non solo i valori che sono stati effettivamente modificati, ma anche tutti gli altri valori che vengono monitorati attraverso gli watcher. Ecco perché le prestazioni diminuiranno molto se l'applicazione ha troppi osservatori.

Un altro difetto del framework AngularJS è il modo in cui funziona con il DOM. A differenza di React, AngularJS applica le modifiche al DOM reale nel browser. Quando il vero DOM viene aggiornato, il browser deve modificare molti valori interni per rappresentare un nuovo DOM. Ciò ha anche un impatto negativo sulle prestazioni dell'applicazione.
 Le scarse prestazioni sono il motivo principale per cui i sostenitori di Angular 2 hanno rielaborato il modo in cui Angular cambia lo stato del programma. Angular 2 e le ultime versioni del framework Angular 4 presentano anche il rendering sul lato server e l'associazione dei dati unidirezionali in modo simile a React. Tuttavia, Angular 2 e 4 offrono un'opzione di associazione dati bidirezionale.

Reagire

React ha introdotto il concetto di DOM virtuale, che è uno dei maggiori vantaggi di React rispetto ad AngularJS. Come funziona il DOM virtuale? Quando viene caricato il nostro documento HTML, React crea un albero DOM leggero da oggetti JavaScript e lo salva sul server. Quando l'utente immette nuovi dati nel campo nel browser, React crea un nuovo DOM virtuale e quindi lo confronta con il DOM precedentemente salvato. La libreria rileva le differenze tra due modelli di oggetti in questo modo e ricostruisce nuovamente il DOM virtuale, ma con un nuovo HTML modificato. Tutto questo lavoro viene svolto sul server, il che riduce il carico sul browser.

Ora, invece di inviare HTML completamente nuovo al browser, React invia l'HTML solo per l'elemento modificato. Questo approccio è molto più efficiente di quello che offre AngularJS.

Risolvere le dipendenze

AngularJS

Iniezione delle dipendenze è un modello di progettazione software in cui i componenti ricevono le loro dipendenze invece di codificarle nel componente. Ciò allevia un componente dall'individuazione della dipendenza e rende configurabili le dipendenze. Questo aiuta a rendere i componenti riutilizzabili, gestibili e testabili.
 AngularJS trova automaticamente gli oggetti appropriati che vengono iniettati come parametri $ routeParams, $ filter, store e $ scope. Esistono due funzioni che rendono possibile l'iniezione di dipendenza nel framework AngularJS: $ inject e $ fornire.

Reagire

La differenza tra React e AngularJS per quanto riguarda l'iniezione di dipendenza è che React non offre alcun concetto di contenitore incorporato per l'iniezione di dipendenza. Ma questo non significa che dobbiamo pensare a un metodo per iniettare dipendenze nel nostro progetto React. È possibile utilizzare diversi strumenti per iniettare dipendenze automaticamente in un'applicazione React. Tali strumenti includono i moduli Browserify, RequireJS, ECMAScript 6 che possiamo usare tramite Babel, ReactJS-di e così via. L'unica sfida è scegliere uno strumento da usare.

Direttive e modelli

AngularJS

Le direttive in AngularJS sono un modo per organizzare il nostro codice attorno al DOM. Se lavoriamo con AngularJS, accediamo al DOM solo tramite direttive. AngularJS ha molte direttive standard, come ng-bind o ng-app, ma a volte realizziamo le nostre direttive in AngularJS per inserire dati nei template. Il modello deve avere un elemento con la nostra direttiva scritto come un attributo. E 'così semplice. Ma le direttive AngularJS, se definite in modo completo, sono sofisticate. L'oggetto con impostazioni, che restituiamo nella direttiva, contiene una decina di proprietà. Proprietà come templateUrl o template sono facili da capire.

Reagire

React non offre divisione in modelli e direttive o logica dei modelli. La logica del modello deve essere scritta nel modello stesso. Per vedere come appare, apri un esempio da GitHub. Noterai che l'app componente di React.TodoItem è creata con un metodo React.createClass () standard. Passiamo un oggetto con proprietà a questa funzione. Proprietà come componentDidUpdate, shouldComponentUpdate, handleKeyDown o handleSubmit rappresentano la logica: cosa accadrà con il nostro modello. Alla fine del componente, di solito definiamo la proprietà render, che è un modello da renderizzare nel browser. Tutto si trova in un unico posto e la sintassi JSX nel modello è facile da capire anche se non sai come scrivere in JSX. È chiaro cosa accadrà con il nostro modello, come dovrebbe essere reso e quali informazioni verranno presentate dalle proprietà.

Conclusione:

Man mano che si arriva alla fine della discussione, ora alcuni punti sono chiari su entrambi i framework e quale è meglio per lo sviluppo di applicazioni web. Quindi, se stai decidendo di sceglierne una, ecco la mia opinione. Se stai cercando di sviluppare un'app Web di base, puoi usare entrambe. Tuttavia, ReactJS è SEO friendly, in tempo reale e compatibile con traffico intenso. Considerando che, AngularJS offre sviluppo e prove regolari con affidabilità.

Originariamente pubblicato su Angular Minds.