Confronto tra i framework JavaScript definitivi: Angular vs React

Una domanda che mi viene posta quasi ogni giorno è che dovrei iniziare con ReactJS o Angular? Tuttavia, prima di procedere oltre, lascia che ti dia un disclaimer.

Non è un blog in cui insulterò l'uno o l'altro o dirò che dovresti sempre usarne 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'argomento logico

Potresti obiettare che Angular è un framework e React è tecnicamente una libreria di per sé. Non sto negando questo fatto, ma questo è l'argomento in cui 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 il framework esatto con la libreria esatta.

La curva di apprendimento

Iniziamo con Angular. Ancora un altro disclaimer: quando dico Angular parlo 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à inclusa la digitazione statica.

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

Ma poi di nuovo, si tratta di preferenza. 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 lontanamente potente per applicazioni di grandi dimensioni. Se vuoi routing, 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 stato e 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 questo si aggiunge alla curva di apprendimento.

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

Pensalo come inserire 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, che sono gestori di stato a livello di applicazione. Secondo me, Redux è davvero difficile solo configurarlo e impararne i concetti è difficile.

Penso che sia abusato. Penso che molti sviluppatori utilizzino redux dove non è necessario. Non è necessario per applicazioni più piccole, ma molti sviluppatori insistono nell'utilizzarlo. Anche questo si riduce alla preferenza. Redux è molto potente, non voglio portarlo via. Quando si parla della curva di apprendimento è dannatamente difficile da afferrare.

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. React tuttavia da solo è solo una libreria di viste, che è molto più piccola e veloce.

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

Il passaggio da Angular 2 ad Angular 4 sotto il cofano hanno 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: Reagire

Caratteristiche

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

Esamineremo alcune delle singole caratteristiche. 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 per la convalida e l'elenco potrebbe continuare. Inoltre, offre l'associazione dei dati a due vie in un modo che nessun altro framework offre davvero. L'associazione dei dati dalla vista al modello è estremamente semplice utilizzando la direttiva ng model.

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. Reagire d'altra parte non include molto al suo interno. Tuttavia, è possibile aggiungere cose per dargli le funzionalità che Angular include pronte all'uso più alcune aggiuntive.

React utilizza un DOM virtuale che è molto potente. Crea la sua versione leggera dell'attuale Dom e include e aggiorna solo ciò che è necessario piuttosto che 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 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 davvero facile lavorare con i dati e scambiarli tra i componenti. Passare i dati tra i componenti, Angular è molto più difficile che farlo in React.

Core React è difficile da mantenere lo stato a livello di app. Lo stato del componente è facile, ma se vuoi una vera gestione dello stato a livello di app, allora avrai bisogno di Redux o Flux, che ho detto prima è dannatamente confuso da imparare. I pacchetti esterni che vengono spesso utilizzati come il nuovo router React versione 4 sono un po' difficili da comprendere ma sono anche molto potenti una volta che si impara a eseguirlo e configurarlo. Ci sono anche molti modi diversi per usarlo. React non ha un componente HTTP di base come fa 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 effettiva.

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

Vincitore: angolare

Utensili

Angular e React hanno delle interfacce a riga di comando piuttosto carine. La CLI angolare e l'app Create React sono entrambe ottime e ci consentono davvero di semplificare lo sviluppo. Angular CLI è 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 compilazione. Ovviamente, Angular ha il compito aggiuntivo di trascrivere 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. L'app Create React utilizza Jest per i test e quindi una delle parti di questi strumenti è la capacità di creare la tua applicazione in produzione in risorse statiche che puoi semplicemente caricare su un server o inserirla nella cartella del client back-end.

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

Sono entrambi carini 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 angolare che viene eseguita all'interno di un wrapper nativo per app mobili. Puoi creare app mobili usando 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 iOS e Android con Angular e JavaScript.

Tuttavia, NativeScript non sembra essere buono come React Native di Facebook almeno a questo punto. Angular ha anche una libreria di componenti per il design dei materiali se sei un fan del design dei materiali. Angular Universal è un progetto seed che può essere utilizzato per eseguire 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 riduttori di pari. Ha anche l'integrazione con le estensioni reattive.

Avresti notato. Una volta, uno di loro fa qualcosa che l'altro copia in un modo diverso. React e Angular sono diventati Microsoft e Apple di framework 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 applicazioni, se costruite correttamente, sono all'altezza delle app native basate su Swift o Java. React ha una libreria di progettazione dei materiali chiamata Material-UI che è molto simile alla componente di progettazione dei materiali di Angular ma più matura. JS è un framework per il rendering di applicazioni React lato server. Mira a 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 sulla libreria Reacts che presumibilmente porta un'esperienza desktop nativa sul Web, con molti componenti macOS e Windows 10. L'ecosistema React è estremamente grande e potente. React si sta facendo strada in ogni aspetto della tecnologia ed è un chiaro vincitore.

Vincitore: Reagire

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

In conclusione: è un pareggio

Se stai decidendo tra questi framework, guarda le diverse categorie e vedi cosa ti interessa. Provali entrambi e vedi quale raccogli 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 leggi un po' di più.

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ù funzioni di quelle di cui hai bisogno.