Ora disponibile in versione BETA, Angular JS 2 sta per diventare il nuovo quadro di riferimento nel 2016. Ora è il momento della valutazione. Vediamo come se la cava contro il beniamino del 2015: ReactJS.
Dichiarazione di non responsabilità : Mi è piaciuto molto lavorare con la versione 1 di AngularJS, ma sono passato a ReactJS nel 2015. Potrei non essere completamente obiettivo, ma credimi, attacco da entrambe le parti.
Dai, sanguiniamo!

Credito fotografico: @jwcarrol

Non cercare di confrontare frutta e verdura

Sì, AngularJS è un framework mentre ReactJS è una libreria. Per alcuni, questo rende impossibile un confronto oggettivo. Questa non è la mia opinione!

Scegliere tra AngularJS e ReactJS è un po' come scegliere tra l'acquisto di un computer pronto per l'avvio o l'acquisto di pezzi di ricambio per costruirne uno proprio.

Questo articolo presta particolare attenzione a entrambi gli approcci considerando i rispettivi vantaggi e svantaggi. Ho confrontato la sintassi e il modello dei componenti di ReactJS e AngularJS. Ciò corrisponde quindi al confronto di un processore per computer assemblato con un processore acquistato al dettaglio, un confronto fattibile.

I vantaggi di AngularJS 2

Iniziamo con i vantaggi di AngularJS 2 rispetto a ReactJS.

Nessuna decisione complicata

AngularJS è un framework, il che significa che fornisce un gran numero di opzioni e funzionalità native. Con ReactJS, è necessario aggiungere librerie di componenti esterne per avere la stessa quantità di funzionalità. Dovrai aggiungere elementi per il "routing", per forzare flussi unidirezionali, per chiamare API, impostare test, gestire dipendenze, ecc. Lo sviluppatore decide tutto e la minima evoluzione tecnologica si basa sulle sue scelte.
AngularJS consente di utilizzare direttamente una serie di opzioni, il che rende possibile avviare un progetto più rapidamente senza farsi intimidire dalle scelte da fare all'avvio. Questa standardizzazione rende anche molto facile cambiare gli sviluppatori poiché i progetti si basano su componenti standard incorporati e di fatto, facilitando anche il lavoro di squadra.
Ammiro anche l'adozione di TypeScript da parte del team di sviluppo di AngularJS, questo ci porta al secondo importante vantaggio di AngularJS.

TypeScript = ClearPath

TypeScript non è unanime. AngularJS 2 ha l'essenza di JavaScript anche se non è solo JavaScript. Da parte sua, gli esempi presentati di ReactJS sono a volte in ES5, a volte in ES6 nelle stesse proporzioni. E ReactJS ora ti consente di utilizzare tre diverse dichiarazioni per la stessa azione: la dichiarazione del componente. Questo ha l'effetto di confondere i nuovi arrivati.
Anche se AngularJS 2 non limita l'uso di TypeScript, lo zoccolo duro degli sviluppatori AngularJS spinge fortemente in questa direzione, specialmente attraverso la documentazione. Ciò significa che la maggior parte degli esempi disponibili nei progetti Open Source offrirà una sintassi familiare agli sviluppatori che seguono questo standard poiché la maggior parte segue questo standard. AngularJS ha esempi che dimostrano come utilizzare il compilatore TypeScript (queste dimostrazioni sono ammirevoli, non tutti usano TypeScript in questi giorni, ma sono pronto a scommettere che presto diventerà standard). Questo modo di lavorare evita qualsiasi errore relativo a una decisione sbagliata che potrebbe verificarsi in ReactJS.

Riduci il tasso di abbandono

Il 2015 è stato l'anno in cui alcuni JavaScript vanigliati stavano finendo. ReactJS è stato uno degli attori di questo cambiamento. mentre React è alla versione A 1.0, in futuro dovrebbero arrivare ulteriori modifiche. L'ecosistema attorno a ReactJS continua a soffrire di un fenomeno di abbandono, in particolare attorno ai componenti utilizzati all'interno di Flux. Ciò significa che qualsiasi cosa scritta in ReactJS oggi sarà probabilmente obsoleta quando ReactJS 1 verrà rilasciato o richiederà almeno una riscrittura importante.
Al contrario, AngularJS 2 è una reinvenzione metodologica e attenta della versione precedente. Questa versione è più matura, più comprensibile. Quindi sì, gli aggiornamenti a una versione successiva di AngularJS saranno molto meno dolorosi di quelli di ReactJS. E come framework completo, quando decidiamo di lavorare con AngularJS, sappiamo che gli elementi incorporati e disponibili in modo nativo funzionano bene insieme perché sono stati scelti per lavorare insieme. In ReactJS, è tua responsabilità scegliere i componenti che in alcuni casi potrebbero avere problemi di compatibilità, prestazioni, ecc. Gli aggiornamenti dei componenti possono anche generare ulteriori difficoltà e debug. Sappiamo tutti che queste fasi sono frustranti, possono richiedere molto tempo e sembrano davvero infinite.

Una vasta gamma di strumenti supportati

Come puoi vedere di seguito, considero React JSX un grande passo avanti, sebbene sia necessario scegliere componenti che supportino JSX. React è diventato così popolare che il supporto per uno strumento particolare è raramente un problema, sii paziente. In effetti, i nuovi strumenti raramente hanno il supporto JSX quando vengono avviati (esempi: IDE, linter, ecc.). I modelli AngularJS 2 e il relativo markup delle stringhe sono archiviati in file HTML separati. Tale metodo, infatti, non necessita di alcuno strumento particolare per facilitarne la lettura.

Compatibile con i componenti Web

Il design di AngularJS 2 rispetta gli standard di Web Components. In poche parole, i componenti che crei in AngularJS 2 dovrebbero essere molto più facili da convertire in componenti puri rispetto a quelli prodotti in ReactJS. Il supporto del browser rimane limitato, ma questo potrebbe essere un acceleratore a lungo termine durante le migrazioni, ad esempio.
Ora che abbiamo una migliore comprensione dei punti salienti di AngularJS 2, è tempo di rivedere i punti salienti di ReactJS.

I vantaggi di ReactJS

Quindi cosa distingue davvero React?

JSX

JSX è uno pseudo-linguaggio con una sintassi simile all'HTML compilata da JavaScript. Il markup e il codice dell'applicazione sono composti nello stesso file. Il vantaggio è che questa architettura consente un completamento automatico efficiente durante lo sviluppo, specialmente quando si inserisce una variabile, una parola chiave, ecc. Questa è una differenza importante con AngularJS 2. Di conseguenza, ReactJS ha un'evidenziazione della sintassi buona, coerente e completa nella maggior parte degli editor, spesso inoltre con un completamento automatico almeno parziale e la capacità di identificare gli errori.scrittura in fase di progettazione (senza attendere la compilazione ). Detto questo, AngularJS offre un analizzatore fatto in casa superare questa difficoltà (bravo!).
Se sei allergico ai modelli basati su stringhe come in AngularJS, è anche possibile dividere il contenuto in più file ma a costo di tornare a un'architettura di file "vecchio stile".

ReactJS identifica rapidamente gli errori

Quando commettiamo un errore di sintassi in ReactJS, non verrà compilato. È una cosa grandiosa. Ciò significa che sei in grado di identificare immediatamente quale riga ha un errore. Il compilatore JSX ce lo dice immediatamente quando un elemento non è chiuso ad esempio o quando una proprietà viene utilizzata in modo improprio o non esiste nel contesto della pagina. Questo approccio snellisce notevolmente le fasi di sviluppo.
Al contrario, quando viene commesso un errore di tipo di riferimento variabile errato in AngularJS 2, non vi è alcuna indicazione... AngularJS 2 si arresta in modo anomalo in modo silenzioso, ma viene comunque compilato. L'errore viene identificato durante l'avvio. Questo ha l'effetto di rallentare lo sviluppo. Carichiamo l'applicazione e poi dobbiamo chiederci perché i dati non si caricano, ad esempio...

ReactJS è basato su Javascript

Qui risiede la differenza fondamentale tra ReactJS e AngularJS 2. Purtroppo, AngularJS 2 rimane focalizzato sull'HTML piuttosto che sul JavaScript . Questo è, di fatto, un difetto di progettazione fondamentale.

AngularJS 2 continua ad aggiungere JavaScript all'HTML. ReactJS inserisce HTML nel JavScript.

Questo ha un impatto fondamentale sull'esperienza di sviluppo. L'approccio incentrato sull'HTML è il più grande punto debole di AngularJS. JavaScript è molto più potente dell'HTML. In tal modo, sembra più logico che JavaScript supporti il markup HTML che no. HTML e javascript devono lavorare insieme, sono correlati. L'approccio javascript di ReactJS è quindi fondamentalmente superiore all'approccio di AngularJS, EmberJS o Knockout che si basa sul paradigma opposto.
Ecco perché

ReactJS: design incentrato su JavaScript = semplicità

AngularJS 2 è la continuità dell'approccio AngularJS. L'approccio è sempre quello di dare più potenza all'HTML. Utilizziamo quindi la sintassi AngularJS 2 per elaborazioni semplici come loop, condizioni, ecc. Sfortunatamente, questo manca di standard. Ad esempio AngularJS 2 offre due metodi di binding (semplice o bidirezionale) con una sintassi diversa:

{{myVar}} //One-way binding
ngModel="myVar" //Two-way binding

In ReactJS, entrambi accettano lo stesso tipo di sintassi.

{myVar}

AngularJS 2 supporta una sintassi 'inline' direttamente nell'elemento:

&lt;ul&gt;
&lt;li *ngFor="#hero of heroes"&gt;
    {{hero.name}}
  &lt;/li&gt;
&lt;/ul&gt;

L'esempio di codice sopra scorre su un array chiamato 'heroes'. Ho diverse domande a questo punto:

Un modello 'master' deve essere dichiarato tramite un'istruzione precedente.
l'hash (#) prima che hero dichiari una variabile locale. Questo concetto chiave in AngularJS suona come un rumore non necessario. Puoi anche usare var se preferisci.
L'istruzione ngFor aggiunge la semantica di loop all'HTML tramite attributi specifici di AngularJS.

C'è un contrasto importante tra la sintassi di AngularJS 2 sopra e quella di ReactJS che è in puro javascript (sotto).

&lt;ul&gt;
  { heroes.map(hero =&gt;
&lt;li key={hero.id}&gt;{hero.name}&lt;/li&gt;
  )}
&lt;/ul&gt;

Poiché JavaScript fondamentalmente supporta i loop, JSX di ReactJS riutilizza tutta la potenza di JavaScript direttamente per questo tipo di operazioni e molte altre, come mappe, filtri, ecc.

Per leggere AngularJS: è essenziale conoscere un gran numero di parole chiave specifiche di AngularJS.
Per leggere ReactJS: devi solo conoscere JavaScript.

La sintassi di ReactJS è quindi una sintassi concettualmente abbastanza semplice rispetto ad altri framework che offrono specificità.

Brace: {{# ciascuno}}
Angolare 1: ng-ripetizione
Angolo 2: ngFor
Knockout: data-bind="foreach"
Reagire: USARE APPENA JS. 🙂

Tutti, tranne ReactJS, utilizzano parole chiave specifiche che sostituiscono le istruzioni native disponibili in JavaScript: a loop. Ecco la bellezza di ReactJS. Questo rispetta le convenzioni di JavaScript e ne mantiene il potere. Non ci sono brutte sorprese o grammatica discutibile.
Le stranezze di AngularJS 2 continuano con l'associazione dei clic:

(click)=”onSelect(hero)"

In contrasto con la naturalezza del javascript nativo in ReactJS

onClick={this.onSelect.bind(this, hero)}

ReactJS include anche un sistema di eventi (come AngularJS 2 per quella materia). Pertanto, la dichiarazione di eventi non rappresenta un problema di prestazioni quando si dichiarano gli ascoltatori.
Perché imparare una sintassi e una grammatica del codice specifiche del framework quando è possibile tenere a mente solo javascript puro?

Una lussuosa esperienza di sviluppo

Il supporto del completamento automatico per JSX, la convalida in tempo reale e una vasta gamma di messaggi di errore possono accelerare notevolmente lo sviluppo.

La questione del peso

Ecco il peso dei framework più diffusi (source)
Angolare 2: 566k (766k con RxJS)
2 angolare : 764k minimizzati
brace : 435 k
1 angolare: 143 k
Reagire + Redux : 151k minimizzati
Quindi AngularJS 2 è 4 volte più pesante di ReactJS + Redux che sono di semplicità comparabile. AngularJS 2 probabilmente perderà peso nei prossimi mesi e prima del rilascio finale della versione ufficiale, ma comunque!
Framework come AngularJS o EmberJS sono più pesanti in termini di peso perché ci sono molte più funzionalità disponibili in modo nativo.
Questo solleva interrogativi. Molte applicazioni non necessitano di tutti questi elementi offerti in questi framework. Nel mondo in cui stanno emergendo sempre più micro-servizi o micro-app, ReactJS offre una buona capacità di potenza consentendo di incorporare solo lo stretto necessario. In un mondo che conosce più di 200.000 moduli di tipo NPM, questo è un posizionamento interessante.

ReactJS rispetta la filosofia del mondo UNIX

Ricorda, ReactJS è una libreria. Questo è esattamente l'opposto della filosofia di framework più grandi come AngularJS ed EmberJS. Quando selezioni ReactJS sei libero di scegliere la migliore libreria complementare moderna per risolvere questa o quella difficoltà. Javascript sta avanzando rapidamente e React consente di passare da un piccolo pezzo di codice a un'applicazione che incorpora librerie più grandi in un batter d'occhio.

In sintesi

AngularJS 2 è un notevole miglioramento rispetto a quanto offerto nella sua prima versione. Il nuovo modello di componenti è più facile da comprendere e integrare rispetto alle direttive della versione 1. Questa versione supporta l'isomorfismo/rendering universale e utilizza una versione DOM virtuale che offre prestazioni da 3 a 10 volte superiori. Queste modifiche rendono AngularJS 2 un framework che non deve vergognarsi rispetto a ReactJS. Non si può negare che le funzionalità offerte da AngularJS 2 siano complete e offrano notevoli vantaggi riducendo la scrittura di JavaScript.
Tuttavia, il peso di AngularJS 2 e la sua sintassi sollevano interrogativi. Il fatto che AngularJS sia incentrato sull'HTML rende complesso il confronto con ReactJS che è incentrato su JavaScript. In React, non è necessario imparare una lingua particolare per utilizzare il framework. Hai solo bisogno di conoscere JavaScript. Tuttavia, ReactJS non scrive nulla per lo sviluppatore, quindi c'è molto più codice da scrivere in generale, anche se è solo JavaScript. Questo è il futuro in cui credo.
Articolo originale di Casa Cory, pubblicato su medium.freecodecamp.com
Tradotto dall'inglese da Matteo Bretone – CTO JS Repubblica
[tipo separatore=”” size=”” icon=”stella”] [actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]