Share
Angular vs. React è un dibattito popolare tra gli sviluppatori JavaScript front-end e, il più delle volte, la discussione finisce per essere distorta verso una tecnologia o l'altra. Sviluppati rispettivamente da Google e Facebook, Angular e React sono le due tecnologie popolari utilizzate per creare applicazioni interattive a pagina singola.
Un confronto completo tra Angular e React è imminente perché ci sono alcuni punti in cui si sovrappongono in modo significativo in termini di ciò che offrono, ovvero la creazione della vista front-end dell'applicazione e di altri luoghi in cui la loro funzionalità rimane incompleta a meno che non sia supportata da un terzo biblioteca di partito. Adottare una tecnologia rispetto all'altra è una questione se Angular o React risolvono meglio il tuo problema e un po 'di intuizione. In questo tutorial, confronteremo e contrapponiamo sette caratteristiche chiave diverse di Angular e React.
Sono un fervente sostenitore dell'approccio al codice (il codice parla più delle parole, dicono). Tenendo presente questo, ho aggiunto campioni di codice di Angular and React laddove possibile, in modo che tu possa costruire sul tuo intuito e decidere quale funziona per te e quale no. Iniziamo.
Angular è un framework, mentre React è una libreria.
Che cosa significa questo? Reagire da solo non ti consente di creare un'applicazione web perché è progettata per creare viste (da cui la "V" in MVC). Ciò che React può fare è creare viste basate su componenti per le quali i dati possono essere passati alle viste secondarie. Per riempire questo vuoto, Facebook ha sviluppato Flux, che è un modello architettonico complementare a React. L'architettura di flusso, se accoppiata con React, fornisce il seguente scenario:
Non ha senso? Questa cifra dovrebbe risolverlo per te.
Flux integra React e implementa il concetto di flusso di dati unidirezionale.Angolare è un framework per la creazione di applicazioni client.
AngularJS è stato saldamente costruito sopra il pattern MVC, che ha separato l'applicazione in tre diversi livelli. La combinazione di modello, visualizzazione e controller, oltre alla maggiore complessità necessaria per padroneggiare direttive, fabbriche, servizi e altri componenti per creare un'applicazione a pagina singola, obbligava gli sviluppatori di Google a spostarsi verso un'architettura basata su componenti.
Ma quando l'applicazione inizia a crescere, è importante avere una struttura solida che mantenga la logica aziendale dell'applicazione lontano dai componenti. Trattandosi di un framework, Angular consente di imporre l'organizzazione strutturale spostando le regole aziendali in un modello di dominio (utilizzando una combinazione di classi e servizi del modello) e iniettando il modello nei componenti tramite l'iniezione della dipendenza.
Ecco un esempio di codice che illustra come la logica aziendale è incapsulata all'interno di un modello utente e di un servizio utente e lontano dal nostro componente.
/ * Percorso: /app/models/User.ts * / export class Utente id: numero; username: string; password: string; firstName: string; lastName: string;
/ * /app/services/user.service.ts * / import Injectable da '@ angular / core'; importa Http da '@ angular / http'; importare Utente da '... / models / User'; @Injectable () classe di esportazione UserService costruttore (http: Http privato) getAll () // API per restituire tutti gli utenti create (utente: utente) // chiamata API per creare utente aggiornamento (utente: utente) // Chiamata API per aggiornare utente elimina (id: numero) // Chiamata API per eliminare utente
/ * Percorso: /app/page/page.component.ts * / import Component da '@ angular / core'; importare Utente da '... / models / User'; import UserService da '... /services/user.service'; @Component (templateUrl: 'page.component.html') export class PageComponent currentUser: User; utenti: Utente [] = []; costruttore (private userService: UserService) // La dipendenza è iniettata all'interno degli argomenti del costruttore deleteUser (id: number) this.userService.delete (id) .subscribe (() => #Do Something); private loadAllUsers () this.userService.getAll (). subscribe (users => #Do else else);
Tutti gli utenti:
- user.username (user.firstName user.lastName) - Elimina
I componenti sono il componente base di un'interfaccia utente in un'applicazione angolare. Un'applicazione angolare è un albero di componenti angolari.
Quali sono i componenti? In Angular, i componenti sono classi TypeScript che hanno a @Componente decoratore segnato su di loro. Inoltre, all'interno di questi decoratori, possiamo definire ciò che Angular chiama i meta-dati, che include il modello, gli stili, i selettori e così via..
La gerarchia dei componenti in Angular è progettata in modo tale che è possibile associare la struttura e la funzionalità in un'unica entità. Ecco una panoramica architettonica di alto livello dei componenti e come questo si collega a tutto il resto in Angular.
L'architettura di Angular. Componente al centro e tutto il resto ruota attorno ad esso. La condivisione dei dati tra i componenti è possibile tramite componenti di nesting, come esemplificato di seguito.
/ * UserParentComponent.ts * / import Component da '@ angular / core'; // Ilil selettore è annidato all'interno . Ogni utente viene passato come una proprietà. @Component (selector: 'user-parent', template: ' Ci sono users.length utenti registrati status adesso
') export class UserParentComponent utenti: id: numero, nome: stringa [] = ["id": 0, "nome": "Chris", "id": 1, "nome": " Dwayne ", " id ": 2," nome ":" Eve "]; status: string = "online";
/ * UserChildComponent.ts * / import Component, Input da '@ angular / core'; // Le proprietà di input sono adornate con @decorators // utente e lo stato sono proprietà di input @Component (selector: 'user-child', template: 'nome utente
id: user.id
Stato: stato
') esportazione classe UserChildComponent @Input () utente: id: numero, nome: stringa; @Input () status: string;
Il concetto di componenti è profondamente radicato in React, proprio come lo è in Angular. Chiamate di Facebook Reagire su una libreria basata su componenti che consente di creare interfacce utente interattive. Tuttavia, a differenza di Angular, i componenti React sono solo funzioni JavaScript con un numero arbitrario di input e un'uscita. Il codice seguente mostra un componente definito utilizzando una funzione JavaScript e utilizzando una classe ES6.
// Scrittura dei componenti usando la funzione di funzioni JavaScript Benvenuto (oggetti di scena) ritornoCiao, props.name
; // Scrittura dei componenti mediante la classe ES6 La classe Welcome estende React.Component render () returnCiao, this.props.name
;
Adereremo agli standard ES6 per la composizione dei componenti d'ora in poi, perché è ciò che Facebook raccomanda. Ogni componente React accetta un numero arbitrario di input, che è memorizzato all'interno di un oggetto chiamato oggetti di scena.
Ha anche un rendere metodo, e come suggerisce il nome, questo metodo determina ciò che sarà reso quando il componente è invocato. Ogni componente mantiene uno stato interno (via this.state), e ogni volta che lo stato cambia, la funzione di rendering di quel componente viene richiamata di nuovo.
Le applicazioni angolari sono scritte in TypeScript, che è un superset di ECMA2015 e utilizza un transpiler per compilare il tuo file .ts fortemente scritto in un semplice file .js. TypeScript offre estensioni di linguaggio progettate per semplificare la scrittura in JavaScript e associano informazioni di tipo con entità JavaScript per rafforzare il controllo dei tipi e migliorare il flusso di lavoro di sviluppo.
Alcune delle funzionalità chiave di TypeScript includono la tipizzazione statica facoltativa e il supporto per interfacce, classi e decoratori. (I decoratori sono funzioni precedute da '@' e immediatamente seguite da una classe, un parametro o una proprietà.)
Immergiamoci in React, vero? Una delle caratteristiche linguistiche importanti in React è evidente in questo esempio di codice.
funzione Tweet (oggetti di scena) ritorno ();
Questo è un tweet.
Non è grandioso? React ti consente di incorporare tag XML / HTML nel tuo file JavaScript, e ciò avviene tramite JSX, che offre funzionalità di estensione della sintassi a JavaScript. Dobbiamo usare un compilatore come Babel, che compila il nostro codice JSX nel codice JavaScript che i browser possono capire. Il codice sopra riportato si basa su questo:
Accentsconagua
"usare rigorosamente"; function Tweet (props) return React.createElement ("div", className: "tweet", React.createElement ("img", src: "images_4 / angular-vs-react-7-key-features-comparison_3 .png ", className:" tweet__avatar "), React.createElement (" div ", className:" tweet__body ", React.createElement (" p ", null," Questo è un tweet. "))); Anche se si consiglia di utilizzare JSX, è possibile utilizzarlo React.createElement () se sei contrario all'idea di incorporare tag HTML in JavaScript.
Inoltre, puoi utilizzare gli standard ES6 o la forma tradizionale di JavaScript mentre lavori con React. Sebbene ES6 sia relativamente nuovo, aggiunge molte funzionalità come classi, funzioni di freccia, letterali di template, destrutturazione e uso di let e const. L'unico lato negativo che posso pensare è che aggiunge un po 'di codice boilerplate come la necessità di chiamare super() ogni volta che chiami a costruttore(), e che non associa automaticamente i metodi di gestione degli eventi con Questo.
class User estende React.Component costruttore (oggetti di scena) // bloat code alert super (props); this.handleSubmit = this.handleSubmit.bind (this); this.handleInputChange = this.handleInputChange.bind (this); handleSubmit (utente) // Metodo per gestire submit handleInputChange (utente) // Metodo per gestire input render () return ());
Il controllo statico del tipo viene eseguito in fase di compilazione. Il compilatore ti avvisa di potenziali discrepanze di tipo e rileva alcuni errori che altrimenti passerebbero inosservati. Inoltre, la definizione di un contratto su una variabile, una proprietà o i parametri di una funzione può risultare in un codice più leggibile e gestibile.
Le dichiarazioni di variabili e funzioni sono rese più espressive dichiarando i loro tipi di dati. Puoi leggere di più sui diversi tipi di dati primitivi nella documentazione di TypeScript.
let isLoggedIn: boolean = false; let id: number = 10; let name: string = "Davis"; let list: number [] = [1, 2, 3]; colore enum rosso, verde, blu; sia c: Color = Color.Red; let bucket: any = 4; bucket = "I can be a string"; bucket = false; // o un booleano
Definire la firma di un'API utilizzando un'interfaccia rende il codice meno ambiguo e più facile da comprendere. L'interfaccia funge da guida di avvio rapido che consente di iniziare immediatamente con il codice e consente di risparmiare tempo altrimenti speso per la lettura della documentazione o l'effettiva implementazione della libreria.
interfaccia ButtonSettings text: string; taglia ?: larghezza: numero; altezza: numero; ; color ?: string; function createButton (settings: ButtonSettings) ... createButton (text: 'Submit'); // OK createButton (text: 'Submit', size: width: 70, height: 30); // OK createButton (text: 'Submit', color: 43); // Not OK: 43 non è una stringa createButton (text: 'Submit', size: width: 70); // Not OK: size ha bisogno anche di un'altezza createButton (color: 'Blue'); // Non OK: è richiesto il membro 'testo'
Il genere la parola chiave in TypeScript può essere utilizzata per creare un alias per un tipo. È quindi possibile creare nuovi tipi che sono un'unione o un'intersezione di questi tipi primitivi.
// Tipi di unione tipo Età = numero | stringa; function getAge (age: Age): string return 'Sei $ age!'; let ofSusan: Age = 21; diTyler: Età = 'trentuno'; getAge (ofSusan); // Hai 21 anni! getAge (ofTyler); // Hai trentuno anni! // Interfaccia dei tipi di intersezione Nome nome (firstName: string, lastName: string): string; interfaccia Età età (corrente: numero): numero; // assegna la definizione dell'intersezione all'alias User type User = Name & Age; function createUser (testUser: User) testUser.name ("David", "John"); testUser.age (99); testUser.address (); //errore React ha un supporto limitato per il controllo dei tipi perché il sottostante ES6 non lo supporta. Tuttavia, è possibile implementare il controllo dei tipi utilizzando il comando prop-tipi libreria sviluppata dal team di React. Digitare il controllo del oggetti di scena di un componente per verificare se si tratta di una stringa può essere fatto come mostrato di seguito.
importare PropTypes da 'prop-types'; // importando la classe di libreria prop-types Greeting estende React.Component render () return (Ciao, this.props.name
La mia età è, this.props.age ); Greeting.propTypes = name: PropTypes.string; età: PropTypes.number; ;
Ma prop-tipi non sono limitati a stringhe, numeri e valori booleani. Puoi fare molto di più, come descritto nella documentazione della libreria prop-types. Tuttavia, se si prende seriamente il controllo di tipo statico, è necessario utilizzare qualcosa come Flow, che è una libreria di controllo di tipo statico per JavaScript.
Iniziando un progetto da zero potrebbe sembrare inizialmente divertente. Tuttavia, il processo di impostazione della struttura delle directory, la scrittura del codice boilerplate per i componenti e il riavvio dell'applicazione sono un esercizio inutile e improduttivo. La vostra strategia dovrebbe essere quella di andare avanti il più rapidamente possibile e concentrarsi sullo sviluppo reale dell'applicazione. Grazie a Google e Facebook, hai a disposizione strumenti per creare e impalcare le tue applicazioni con facilità.
L'impostazione di Angular-CLI per angular e create-react-app per React è semplice utilizzando npm.
// CLI angolare $ npm install -g @ angular / cli // create-react-app $ npm installa -g crea-react-app
Per creare una nuova applicazione Angolare, è necessario utilizzare il seguente comando:
$ ng nuovo PROJECT-NAME $ ng servire
Ma non è quello. Il ng generare comando consente di generare componenti, rotte, condotte, direttive e servizi.
$ ng genera componente Componente installazione pagina crea src \ app \ page \ page.component.css crea src \ app \ page \ page.component.html crea src \ app \ page \ page.component.spec.ts crea src \ app \ page \ page.component.ts aggiorna src \ app \ app.module.ts
La CLI angolare può fare molto di più, come creare una build della tua app Angular, comandi per eseguire test di unità e test end-to-end. Puoi leggere ulteriori informazioni su GitHub.
D'altro canto, Create-reagiscono-app è il modo ufficialmente supportato per creare un'app React senza file di configurazione.
$ Npm install -g create-react-app
Questo dovrebbe creare un'app React funzionale con tutte le dipendenze Babel e webpack prese in considerazione. Puoi iniziare a eseguire l'app sul tuo browser usando inizio di npm.
Puoi trovare gli script disponibili per l'app di reazione nel package.json file.
"script": "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env = jsdom", "espulsione": "react- Script di script "
L'associazione dati è una funzionalità che consente la sincronizzazione dei dati tra lo stato dell'applicazione (modello) e la vista. In una routine di associazione dati unidirezionale, qualsiasi modifica nello stato dell'applicazione aggiorna automagicamente la vista. Al contrario, l'associazione dati bidirezionale lega insieme proprietà ed eventi sotto un'unica entità, cioè qualsiasi modifica del modello aggiorna la vista e viceversa.
In React, le proprietà vengono passate dai componenti padre a figlio, che è noto come flusso di dati unidirezionale o top-down. Lo stato di un componente è incapsulato e non è accessibile ad altri componenti a meno che non venga passato a un componente figlio come elemento prop, ovvero lo stato di un componente diventa l'elemento prop del componente figlio.
la classe UserChild estende React.Component render () let userData = this.props.users.map ((user) => return (ID utente : user.name
); ); ritorno (); classe UserParent estende React.Component constructor () super (); // Lo stato viene definito qui this.state = status: "Online" render () return (Ciao. Il server è this.props.status
dati utente); var USERS = ["id": 0, "nome": "Chris", "id": 1, "nome": "Dwayne", "id": 2, "nome": " Vigilia" ]; ReactDOM.render (, document.getElementById ('container'));
Ma cosa succede se hai bisogno di propagare i dati attraverso l'albero dei componenti? Questo viene fatto attraverso eventi figlio e callback genitore. La documentazione di React include un buon esempio che tratta di tale scenario.
Le tecniche di associazione dei dati disponibili in Angular sono tra le poche caratteristiche che lo rendono interessante. Angular dispone del supporto immediato per l'interpolazione, il binding unidirezionale, il binding a due vie e il binding di eventi.
L'interpolazione è il modo più semplice per associare la proprietà del componente all'interno del testo tra tag HTML e assegnazioni di attributi.
Bentornato currentUser.name!
L'associazione di proprietà è simile all'interpolazione nel senso che è possibile associare le proprietà degli elementi di visualizzazione alle proprietà del componente. L'associazione di proprietà favorisce la comunicazione dei componenti ed è identica a come gli oggetti di scena vengono passati in React.
I binding di eventi consentono il flusso di dati nella direzione opposta, vale a dire da un elemento a un componente. Qui, clic è un evento target e, a destra, abbiamo il onSave () metodo che viene richiamato quando si verifica l'evento.
Ma la caratteristica più importante è l'associazione a doppio senso usando il [(NgModel)]. Questo unisce l'associazione di proprietà e l'associazione di eventi sotto un'unica direttiva ed è particolarmente utile con i campi di moduli e di input.
Il rendering lato server è una tecnica di rendering tradizionale. Qui, il server restituisce l'intero file HTML su richiesta e il browser rimane con il semplice compito di visualizzarlo all'utente. Il rendering lato client, d'altra parte, restituisce un documento HTML bare-bone, il foglio di stile e un file JavaScript.
JavaScript inoltra richieste successive per il rendering del resto del sito Web utilizzando un browser. Le librerie front-end JavaScript React, Angular e tutte le altre sono buoni esempi di rendering lato client. Questo è evidente se si visualizza la fonte della propria applicazione Angolare / Reagire.
Ma il rendering lato client ha gli svantaggi che non funziona perfettamente per SEO e che restituisce contenuti HTML incompleti quando condividi il tuo link sui siti di social media. Angular ha una soluzione chiamata Angular Universal che si occupa di rendere il tuo motore di ricerca app amichevole e social media friendly. È una libreria creata dal team Angular e il suo utilizzo è decisamente favorito.
Universal utilizza una tecnica di pre-rendering in cui viene eseguito il rendering dell'intero sito Web dal server e, dopo un paio di secondi, l'utente passa al rendering lato client. Dal momento che tutto ciò accade sotto il cofano, l'utente non nota nulla di diverso.
Se stai usando React with Redux, la documentazione di Redux ha un buon tutorial sull'impostazione del rendering del server. Puoi anche configurare React per eseguire il rendering dal server usando il comando BrowserRouter e StaticRouter componenti disponibili nel reagiscono-router biblioteca. Puoi leggere ulteriori informazioni in questo articolo Medium. Ma se ti piacciono le prestazioni e l'ottimizzazione, puoi provare next.js, che è una libreria per SSR in React.
Confrontare un quadro completo e ricco di funzionalità con una robusta libreria dell'interfaccia utente potrebbe non sembrare equo. Tuttavia, sono tecnologie JavaScript avanzate utilizzate per creare applicazioni interattive a pagina singola e, a tale proposito, questo articolo dovrebbe aiutarti a decidere di sceglierne uno.
Quali sono le tue opinioni su Angular vs. React? Condividile nei commenti qui sotto.
