Perché sono passato da AngularJS a React

Nel 2011, quando il mio codice ha iniziato a ingombrare di selettori e callback jQuery, AngularJS è arrivato come un salvavita che ha aiutato a una migliore gestione, uno sviluppo rapido e molte più funzionalità pronte all'uso. L'associazione a due vie di AngularJS e la filosofia del "modello come unica fonte di verità" mi hanno lasciato senza parole e hanno ridotto la ridondanza dei dati in tutta la mia applicazione.

Nel corso del tempo, tuttavia, ho scoperto che AngularJS ha alcuni punti deboli. Alla fine questi mi hanno causato abbastanza frustrazione che ho iniziato a cercare soluzioni alternative.

Punti deboli in AngularJS 1.x

• DOM per l'esecuzione

  Angular fa molto affidamento sul DOM per il suo flusso di esecuzione. Nel bootstrap predefinito delle applicazioni, esegue la scansione del DOM e lo compila con le priorità delle direttive, il che rende difficile il debug e il test dell'ordine di esecuzione.

• La propria iniezione di dipendenza

  JavaScript non ha un gestore di pacchetti e un risolutore di dipendenze propri. Ma ultimamente, implementazioni come AMD, UMD e CommonJS hanno risolto molto bene questo problema. Purtroppo, AngularJS non torna utile con nessuno di questi. Piuttosto, introduce una propria iniezione di dipendenza (DI); sebbene ci siano implementazioni DI AngularJS non ufficiali che utilizzano RequireJS.

• La rilegatura a due vie è un'arma a doppio taglio

  Si è tentati di utilizzare l'associazione a due vie, ma con l'aumentare della complessità del componente potrebbe causare un disastro delle prestazioni.

  In che modo l'associazione a due vie influisce sulle prestazioni? Ebbene, JavaScript ES5 non ha alcuna implementazione per notificare eventuali modifiche alle sue variabili o oggetti, quindi Angular usa qualcosa chiamato "controllo sporco" per tenere traccia delle modifiche ai dati e sincronizzarli con l'interfaccia utente. Il controllo sporco viene eseguito dopo qualsiasi operazione eseguita nell'ambito di Angular ($ ciclo digest) che porta a prestazioni più lente all'aumentare del numero di associazioni.

  Un altro problema con l'associazione a due vie è che molti componenti diversi sulla pagina sono in grado di modificare i dati, portando a più origini di input di dati. Se non gestito bene, può portare a una situazione ambigua. Ma per essere onesti, questo è puramente un problema di implementazione.

• Angular ha il suo mondo

  Ogni operazione in Angular deve passare attraverso il suo ciclo di digest, altrimenti i tuoi componenti non si sincronizzeranno con i tuoi modelli di dati. Quindi, se stai utilizzando una libreria JavaScript esistente di terze parti, devi avvolgerla con la funzione $apply di Angular se comporta modifiche ai dati o dovrai convertirla in un servizio se si tratta di una libreria di utilità. È come reinventare ogni modulo JavaScript disponibile per Angular.

• Troppi concetti e curva di apprendimento ripida

  L'apprendimento di Angular richiede l'apprendimento di un sacco di concetti tra cui moduli, controller, direttive, ambiti, modelli, funzioni di collegamento, filtri e iniezione di dipendenze.

Incontra Reagire

React, la nuova libreria JS open source di Facebook e Instagram, è un modo diverso di scrivere app JavaScript. Quando è stato presentato alla JSConf EU nel maggio 2013, il pubblico è rimasto scioccato da alcuni dei suoi principi di progettazione come "flusso di dati unidirezionale" e "DOM virtuale".

Il sito Web ufficiale di React dice: "React è una libreria JavaScript per la creazione di interfacce utente" e sì, solo interfacce e nient'altro. Non è un framework come AngularJS. Ma puoi scrivere componenti autonomi che più o meno si confrontano con le direttive angolari. Veloce panoramica

React ripensa le migliori pratiche nello sviluppo web. Reach incoraggia il flusso di dati unidirezionale e crede in una filosofia secondo cui i componenti sono macchine a stati guidate dai dati. Mentre alla maggior parte degli altri framework piace lavorare con il DOM e manipolarlo direttamente, React odia il DOM e lavora per proteggere lo sviluppatore da esso. React fornisce solo l'API di base necessaria per definire qualsiasi componente dell'interfaccia utente e nient'altro. Reach segue la filosofia UNIX: Small is beautiful. Fai una cosa e falla al meglio.

Questo è un confronto molto carino tra i due di Pete Hunt (del team di Instagram)

È solo una libreria. Abbiamo bisogno di un framework con React?

Risposta breve: la tua scelta.

Usando React, puoi creare interfacce utente, ma dobbiamo comunque gestire le dipendenze, effettuare chiamate AJAX, applicare filtri di dati. Se abbiamo bisogno di un framework, perché abbandonare AngularJS?

I framework sono un insieme di pacchetti e un insieme di regole. Cosa succede se non ho bisogno di alcuni pacchetti o se voglio scambiare con un altro pacchetto. Come lo faccio? Abbiamo bisogno di un gestore di pacchetti. Come gestiamo i pacchetti in AngularJS? Questa è una tua scelta, ma Angular ha il suo mondo. Avrai bisogno di avvolgere ogni pacchetto esterno nel mondo di Angular e quindi usarlo. Ma React è solo JavaScript e qualsiasi pacchetto scritto in JavaScript non avrà bisogno di alcun wrapping in React.

Quindi, è meglio se scegliamo i nostri pacchetti da un repository di pacchetti come npm e li organizziamo come vogliamo. La buona notizia è che React incoraggia l'uso di npm, che ha molti pacchetti pronti per l'uso. Per iniziare con React, potresti voler utilizzare uno di questi Starter Kit Full-Stack

Vantaggi di Reagire

Allora perché sono davvero passato a React?

La reazione è veloce!

React adotta un approccio diverso rispetto ad altri framework. Non ti consente di lavorare direttamente con il DOM. Piuttosto, introduce uno strato di DOM virtuale tra la tua logica JavaScript e il DOM effettivo. Questo aiuta a migliorare drasticamente la velocità. Nei rendering successivi, React esegue una differenza sul DOM virtuale e aggiorna solo quella parte del DOM reale che deve essere aggiornata.

Il Virtual DOM aiuta anche a risolvere i problemi tra browser, in quanto fornisce un'API cross-browser unificata che funziona anche in Internet Explorer 8. (Accidenti!)

Tutto è un componente (widget dell'interfaccia utente)

La scrittura di componenti dell'interfaccia utente autonomi modularizza la tua applicazione e separa le preoccupazioni per ciascuno di essi. Ogni componente può essere sviluppato e testato in isolamento e, a sua volta, utilizzare altri componenti aumentandone la manutenibilità.

Flusso di dati unidirezionale per la vittoria!

Flux è un'architettura per la creazione di livelli di dati unidirezionali nelle applicazioni JavaScript. È stato progettato su Facebook insieme alla libreria di visualizzazione React. Semplifica lo sviluppo e rende più facile rintracciare e correggere i bug. Il flusso è più un concetto che un'implementazione. Può essere implementato anche in altri framework. Alex Rattray ha un'ottima implementazione di Flux usando Backbone Collection e Model in React.

JavaScript e nient'altro

Le moderne app Web funzionano in modo diverso rispetto al Web tradizionale. Il livello di visualizzazione deve essere aggiornato con le interazioni dell'utente senza colpire il server. E quindi View e Controller devono fare molto affidamento l'uno sull'altro. Molti altri framework utilizzano motori di creazione di modelli come Handlebars e Moustache per il loro livello di visualizzazione, ma React ritiene che le due parti siano così interdipendenti da dover risiedere in un unico posto senza l'uso di alcun motore di creazione di modelli di terze parti e senza uscire dall'ambito di JavaScript.

JavaScript isomorfo

Il più grande svantaggio delle app Web JavaScript a pagina singola è che presenta limitazioni durante la scansione dei motori di ricerca. React ha una soluzione per questo. React può eseguire il pre-rendering delle app sul server prima di inviarle al browser e inoltre può ripristinare lo stesso stato nell'applicazione live dal contenuto statico pre-renderizzato dal server. Poiché i crawler dei motori di ricerca fanno molto affidamento sulla risposta del server piuttosto che sull'esecuzione di JavaScript, il pre-rendering di tali app aiuta nell'ottimizzazione dei motori di ricerca.

React funziona bene con RequireJS, Browserify e Webpack

Caricatori e bundler sono molto necessari quando si crea un'applicazione di grandi dimensioni. Sfortunatamente, l'attuale versione di JavaScript non fornisce un bundler o un caricatore di moduli, sebbene sia proposto nella prossima versione di EcmaScript 6 (System.import). Fortunatamente abbiamo alcune alternative come RequireJS e Webpack, che sono abbastanza decenti.

React è costruito con Browserify, ma se stai cercando di iniettare risorse di immagini e compilare LESS o CoffeeScript, probabilmente Webpack rappresenta un'opzione migliore.

Sono passato a React con un po' di dolore.

• Poiché AngularJS è un framework, viene fornito con molte chicche, che includono un wrapper AJAX nel servizio $http, $q come servizio di promessa, ng-show, ng-hide, ng-class e ng-if come istruzioni di controllo per modello.

• React non è un framework ma una libreria per costruire l'interfaccia utente, quindi devi pensare a tutti gli altri pezzi da solo. Sto lavorando a un progetto open source che può essere utilizzato con React per facilitare il tuo sviluppo e anche la comunità sta contribuendo attivamente con componenti riutilizzabili simili.

  React-components.com è un sito Web di directory non ufficiale in cui è possibile trovare tali componenti open source.

• La filosofia di React non ti incoraggia a utilizzare l'associazione a due vie, il che porta molto dolore quando hai a che fare con elementi di moduli e griglie di dati modificabili. Tuttavia, quando inizi a comprendere il flusso di dati Flux e gli Store, le cose diventano più chiare, più semplici e più facili.

React è nuovo e quindi ci vorrà del tempo prima che la comunità cresca.

Angular ha guadagnato un'enorme popolarità negli ultimi tempi e ha un numero relativamente elevato di estensioni disponibili come AngularUI e Restangular. La comunità open source di React è nuova, ma sta crescendo rapidamente, con estensioni come React Bootstrap. È solo questione di tempo prima che abbiamo più componenti disponibili e React può essere facilmente utilizzato per lo sviluppo rapido di app Web.

Conclusione

Se hai già utilizzato AngularJS, all'inizio potresti odiare React, principalmente a causa del flusso di dati unidirezionale e della mancanza di "framework" in cui devi occuparti di molte altre cose da solo. Ma non appena ti sentirai a tuo agio con il design pattern Flux e la filosofia di React, ti renderai conto della sua bellezza.

Facebook e Instagram utilizzano entrambi React. Il nuovo Atom Editor di Github è stato creato utilizzando React. Il prossimo Yahoo Mail è stato ricostruito in React. Di quali altri esempi hai bisogno? Prova React oggi.