Share
Angular vs. React este o dezbatere populară între dezvoltatorii JavaScript de la front-end și, de cele mai multe ori, discuția sfârșește prin a fi părtinitoare față de o singură tehnologie sau de cealaltă. Dezvoltate de Google și respectiv de pe Facebook, Angular și React sunt cele două tehnologii populare folosite pentru a crea aplicații interactive pentru o singură pagină.
O comparație cuprinzătoare între Angular și React este iminentă, deoarece există anumite locuri în care acestea se suprapun în mod semnificativ în ceea ce privește oferta lor, adică construirea vederii frontale a aplicației dvs. și a altor locuri în care funcționalitatea lor rămâne incompletă, bibliotecă de partid. Adoptarea unei tehnologii asupra celeilalte este o întrebare dacă Angular sau React vă rezolvă mai bine problema și un pic de intuiție. În acest tutorial, vom compara și contrasta șapte caracteristici diferite ale Angular și React.
Sunt un susținător ardent al abordării cod-prim (codul vorbește mai tare decât cuvintele, spun ei). Ținând cont de acest lucru, am adăugat eșantioane de coduri Angular și React, ori de câte ori este posibil, astfel încât să vă puteți baza pe intuiția dvs. și să decideți ce lucrează pentru dvs. și care nu. Să începem.
Angular este un cadru, în timp ce React este o bibliotecă.
Deci ce înseamnă asta? Reacționați pe cont propriu nu vă va lăsa să creați o aplicație web deoarece este concepută pentru a crea vederi (prin urmare, "V" în MVC). Ce poate face React este construirea de vizualizări bazate pe componente, pentru care datele pot fi transmise la vizualizările copilului. Pentru a umple acest gol, Facebook a dezvoltat Flux, un model arhitectural care completează React. Arhitectura fluxului, când este cuplată cu React, oferă următorul scenariu:
Nu are sens? Această cifră ar trebui să-l sorteze pentru tine.
Completarea fluxurilor Reacționează și implementează conceptul de flux unidirecțional de date.Angular este un cadru pentru construirea de aplicații client.
AngularJS a fost construit ferm pe modelul MVC, care a separat aplicația în trei straturi diferite. Combinația dintre model, vizualizare și controler plus complexitatea adăugată implicată în direcționarea directivelor, fabricilor, serviciilor și altor componente pentru a crea o aplicație de o singură pagină a obligat dezvoltatorii de la Google să treacă la o arhitectură bazată pe componente.
Dar când cererea dvs. începe să crească, este important să aveți o structură solidă care să păstreze logica de afaceri a aplicației dvs. departe de componente. Fiind un cadru, Angular vă permite să impuneți organizarea structurală prin mutarea regulilor de afaceri într-un model de domeniu (folosind o combinație de clase de modele și servicii) și injectarea modelului în componentele dvs. prin injecție de dependență.
Iată un exemplu de cod care ilustrează modul în care logica de afaceri este încapsulată într-un model de utilizator și un serviciu utilizator și departe de componenta noastră.
/ * Cale: /app/models/User.ts * / clasa de export Utilizator id: number; username: string; parola: șir; firstName: șir; Nume: string;
/ * /app/services/user.service.ts * / import Injectable de la '@ angular / core'; import Http de la '@ angular / http'; import User de la "... / models / User"; User API pentru a returna toți utilizatorii (user: User) // API apel pentru a crea utilizator actualizare (utilizator: Utilizator) // apel API pentru a actualiza utilizatorul șterge (id: number) // apel API pentru a șterge utilizatorul
/ * Cale: /app/page/page.component.ts * / import Component de la '@ angular / core'; import User de la "... / models / User"; import UserService de la "... /services/user.service"; @Component (templateUrl: 'page.component.html') clasa de export PageComponent currentUser: User; utilizatori: Utilizator [] = []; constructor (user userService: UserService) // Dependența este injectată în interiorul argumentelor constructorului deleteUser (id: number) this.userService.delete (id) .subscribe (() => #Do Something); private loadAllUsers () this.userService.getAll (). subscribe (users => #Do altceva);
Toți utilizatorii:
- user.username (user.firstName user.lastName) - ștergeți
Componentele reprezintă cel mai elementar element de construcție al unui interfață utilizator într-o aplicație Angulară. O aplicație unghiulară este un arbore al componentelor unghiulare.
Care sunt componentele? În unghiular, componentele sunt clase tipScript care au a @Component decorator marcat peste ele. Mai mult, în interiorul acestor decoratori putem defini ceea ce Angular numește meta-datele, care include șablonul, stilurile, selectorii și așa mai departe.
Ierarhia de componente în Angular este proiectată astfel încât să puteți asocia structura și funcționalitatea într-o singură entitate. Aici este o prezentare arhitecturală la nivel înalt a componentelor și modul în care acestea fac legătura cu orice altceva în Angular.
Arhitectura lui Angular. Componentă în centru și tot ceea ce se învârte în jurul ei. Schimbul de date între componente este posibil prin asamblarea componentelor, așa cum este exemplificat mai jos.
/ * UserParentComponent.ts * / import Component din '@ angular / core'; // Theselectorul este imbricat în interior . Fiecare utilizator este transferat ca proprietate. @Component (selector: 'user-parent', șablon: ' Există users.length utilizatori înregistrați status acum
') clasa de export UserParentComponent utilizatori: id: numar, nume: string [id = "id" Dwayne ", " id ": 2," nume ":" Eva "]; status: string = "online";
/ * UserChildComponent.ts * / import Component, Input de la '@ angular / core'; // Proprietățile de intrare sunt împodobite cu @ decorații // user & status sunt proprietăți de intrare @Component (selector: 'user-child', template: 'nume de utilizator
id: user.id
Stare: status
') clasa de export UserChildComponent @Input () utilizator: id: number, name: string; Starea @Input (): șir;
Conceptul de componente este profund înrădăcinat în React, la fel ca în Angular. Apeluri Facebook Reacționează o bibliotecă bazată pe componente care vă permite să construiți interfețe interactive pentru utilizatori. Cu toate acestea, spre deosebire de Angular, componentele React sunt doar funcții JavaScript cu un număr arbitrar de intrări și o ieșire. Codul de mai jos prezintă o componentă definită utilizând o funcție JavaScript și utilizând o clasă ES6.
// Scrierea componentelor folosind funcțiile JavaScript Funcție Bine ați venit (recuzită) returnBună ziua, props.name
; // Scrierea componentelor utilizând ES6 Clasa de clasă Bine ați venit extinde React.Component render () returnBună ziua, this.props.name
;
Vom respecta standardele ES6 pentru compunerea componentelor de acum înainte pentru că asta recomandă Facebook. Fiecare componentă React acceptă un număr arbitrar de intrări, care este stocat în interiorul unui obiect numit recuzită.
De asemenea, are a face și, așa cum sugerează și numele, această metodă determină ce va fi redat atunci când componenta este invocată. Fiecare componentă menține o stare internă (prin this.state) și de fiecare dată când starea se schimbă, funcția de randare a acelei componente este invocată din nou.
Aplicațiile unghiulare sunt scrise în TipScript, care este un superset al ECMA2015 și utilizează un transpilator pentru a compila fișierul .ts puternic tipărit într-un fișier simplu .js. TypeScript oferă extensii de limbă care sunt proiectate pentru a ușura scrierea în JavaScript și asociază informații de tip cu entități JavaScript pentru a impune controlul tipului și pentru a îmbunătăți fluxul de lucru al dezvoltării.
Unele dintre caracteristicile cheie ale TypeScript includ opțiunea de scriere statică opțională și suport pentru interfețe, clase și decoratori. (Decoratorii sunt funcții care sunt prefixate cu '@' și imediat urmate de o clasă, un parametru sau o proprietate.)
Să ne aruncăm în reacție, nu? Una dintre caracteristicile importante ale limbajului din React este evidentă în acest eșantion de cod.
funcție Tweet (recuzită) return ();
Acesta este un tweet.
Nu e grozav? React vă permite să încorporați etichete XML / HTML în fișierul JavaScript, iar acest lucru se face prin JSX, care oferă capacitatea de extensie a sintaxei pentru JavaScript. Trebuie să folosim un compilator ca Babel, care compilează codul nostru JSX în JavaScript pe care browserii îl pot înțelege. Codul de mai sus se compilează până la următoarea:
Accentsconagua
"folosiți stricte"; Funcție Tweet (recuzită) retur React.createElement ("div", className: "tweet", React.createElement ("img", src: "images_4 / .png ", className:" tweet__avatar "), React.createElement (" div ", className:" tweet__body ", React.createElement (" p ", null, Deși se recomandă utilizarea JSX, puteți să vă lipiți React.createElement () dacă sunteți împotriva ideii de a încorpora etichete HTML în JavaScript.
În plus, puteți utiliza standardele ES6 sau formularul tradițional de JavaScript în timp ce lucrați cu React. Deși ES6 este relativ nou, se adaugă o mulțime de caracteristici, cum ar fi clasele, funcțiile săgeților, literalul șablonului, distrugerea și folosirea funcțiilor let și const. Singurul dezavantaj la care mă pot gândi este că adaugă un pic de cod de boilerplate, cum ar fi nevoia de a apela super() de fiecare dată când apelați a constructor(), și că nu leagă automat metodele de manipulare a evenimentelor acest.
user-ul de clasă extinde React.Component constructor (recuzită) // bloat code alert super (recuzită); this.handleSubmit = this.handleSubmit.bind (aceasta); this.handleInputChange = this.handleInputChange.bind (aceasta); handleSubmit (user) // Metoda de a trata trimite handleInputChange (user) // Metoda de a manipula intrarea render () return ();
Analiza tipului static se efectuează la timpul de compilare. Compilatorul vă avertizează cu privire la eventualele neconcordanțe de tip și detectează anumite erori care altfel ar trece neobservate. În plus, definirea unui contract pe o variabilă, o proprietate sau parametrii unei funcții poate avea ca rezultat un cod mai ușor de citit și mai ușor întreținut.
Declarațiile variabile și ale funcțiilor sunt făcute mai expresive prin declararea tipurilor de date. Puteți citi mai multe despre diferitele tipuri de date primitive din documentația TypeScript.
l este isLoggedIn: boolean = false; permiteți id: number = 10; da numele: string = "Davis"; listați numărul: numărul [] = [1, 2, 3]; culoarea roșie roșu, verde, albastru; c: Culoare = Culoare.Red; permiteți cupa: any = 4; bucket = "Eu pot fi un șir"; bucket = false; // sau un boolean
Definirea semnăturii unui API utilizând o interfață face ca codul să fie mai puțin ambiguu și mai ușor de înțeles. Interfața servește ca un ghid de pornire rapidă care vă ajută să începeți cu codul imediat și economisiți timp petrecut altfel pentru a citi documentația sau implementarea efectivă a bibliotecii.
interfață ButonSettings text: string; dimensiune ?: lățime: număr; înălțime: număr; ; culoare ?: șir; funcția createButton (setări: ButtonSettings) ... createButton (text: 'Trimite'); // OK createButton (text: 'Trimite', dimensiune: lățime: 70, înălțime: 30); // OK createButton (text: 'Trimite', culoare: 43); // Nu este OK: 43 nu este un șir createButton (text: 'Trimite', dimensiune: width: 70); // Nu este OK: dimensiunea are nevoie de o înălțime, de asemenea createButton (color: 'Blue'); // Nu este in regula: este necesar un membru "text"
tip cuvântul cheie din TypeScript poate fi folosit pentru a crea un alias pentru un tip. Apoi puteți crea noi tipuri care sunt o uniune sau intersecție a acestor tipuri primitive.
// Tipul tipului Uniunii Vârsta = numărul şir; funcția getAge (vârstă: vârstă): string retur 'Sunteți $ age!'; let ofSusan: vârsta = 21; let ofTyler: Vârsta = 'treizeci și una'; getAge (ofSusan); // Sunteți 21! getAge (ofTyler); // Sunteți treizeci și unu! // interfață Tipuri de interfață Nume nume (firstName: string, lastName: string): string; interfață Vârsta vârstă (curent: număr): număr; // aloca definiția intersecției la alias Tip utilizator User = Nume & vârstă; funcția createUser (testUser: User) testUser.name ("David", "John"); testUser.age (99); testUser.address (); //eroare React are un sprijin limitat pentru verificarea tipului, deoarece ES6 subiacentă nu o susține. Cu toate acestea, puteți implementa verificarea tipului folosind prop-tipuri biblioteca dezvoltată de echipa React. Verificați tipul recuzită a unei componente pentru a verifica dacă este un șir poate fi făcut așa cum se arată mai jos.
importarea tipurilor de tip "prop-type"; // importarea prop-tip clasă bibliotecă Felicitări extinde React.Component render () return (Bună ziua, this.props.name
Varsta mea este, this.props.age ); Greeting.propTypes = name: PropTypes.string; vârstă: PropTypes.number; ;
Dar prop-tipuri nu se limitează la șiruri, numere și boolean. Puteți face mult mai mult, așa cum este descris în documentația bibliotecii prop-types. Cu toate acestea, dacă luați în serios controlul tipului de tip, ar trebui să utilizați ceva asemănător cu Flow, care este o bibliotecă statică de verificare de tip pentru JavaScript.
Pornirea unui proiect de la început ar putea părea distractiv inițial. Cu toate acestea, procesul de configurare a structurii de directoare, de scriere a codului de boilerplate pentru componente și de obținere a aplicației bootstrapped este un exercițiu inutil și neproductiv. Strategia dvs. ar trebui să fie aceea de a continua cu aceasta cât mai repede posibil și de a vă concentra asupra dezvoltării efective a aplicației. Mulțumită Google și Facebook, aveți la dispoziție instrumente disponibile pentru a crea și a schița aplicațiile cu ușurință.
Configurarea funcției Angular-CLI pentru aplicația unghiulară și pentru crearea-reacție pentru React este simplă folosind npm.
// unghiular CLI $ npm install -g @ unghiular / cli // creare-reacție-app $ npm install -g create-react-app
Pentru a crea o nouă aplicație Angular, trebuie să utilizați următoarea comandă:
$ ng noi PROJECT-NAME $ ng servi
Dar asta nu este. ng genera vă permite să generați componente, rute, conducte, directive și servicii.
$ ng genera componenta Pagina de instalare a componentei creare src \ app \ page \ page.component.css creare src \ app \ pagina \ page.component.html creare src \ app \ page \ page.component.spec.ts creare src \ app \ pagina \ page.component.ts actualizați src \ app \ app.module.ts
CLI-ul unghiular poate face mult mai mult, cum ar fi crearea unei aplicații Angular, comenzi pentru testarea unităților de rulare și testări end-to-end. Puteți citi mai multe despre acesta pe GitHub.
Pe de altă parte, Create-reacționează aplicație este modul oficial de a crea o aplicație React fără fișiere de configurare.
$ Npm install -g creați-reacție-app
Aceasta ar trebui să creeze o aplicație funcțională React cu toate dependențele Babel și webpack luate în considerare. Puteți începe să rulați aplicația din browserul dvs. utilizând npm start.
Puteți găsi scripturile disponibile pentru aplicația de reacție în package.json fişier.
"script-uri": "start": "reactiv scripts start", "build": "script -scripts build", "test" scripturile se scot "
Legarea datelor este o caracteristică care permite sincronizarea datelor între starea aplicației (modelul) și vizualizarea. Într-o rutină de legare a datelor într-o singură direcție, orice modificare a stării aplicației actualizează automat vizualizarea. Dimpotrivă, legarea datelor bidirecționale leagă proprietățile și evenimentele dintr-o singură entitate, adică orice modificare a modelului actualizează vizualizarea și invers.
În Reacție, proprietățile sunt transmise de la componente părinte la copil, ceea ce este cunoscut ca fluxul de date unidirecțional sau de sus în jos. Starea unei componente este încapsulată și nu este accesibilă altor componente, cu excepția cazului în care aceasta este transmisă ca o componentă copilului, adică starea unei componente devine suportul componentei copil.
clasa UserChild extinde React.Component render () let userData = this.props.users.map ((user) => return (numele de utilizator : nume de utilizator
); ); întoarcere (); clasa UserParent extinde React.Component constructor () super (); // Stat se definește aici herestate = status: "Online" render () return (Salut. Serverul este this.props.status
datele utilizatorului); nume de utilizator: " nume de utilizator:" nume de utilizator ": nume de utilizator: Ajun" ]; ReactDOM.render (, document.getElementById ("container"));
Dar dacă trebuie să propagați datele prin arborele component? Acest lucru se face prin evenimentele copilului și apelurile părintești. Documentația React include un bun exemplu care tratează un astfel de scenariu.
Tehnicile de legare a datelor disponibile în Angular se numără printre câteva caracteristici care îl fac interesant. Angular are suportul extra-box pentru interpolare, legare unidirecțională, legare bidirecțională și legare la eveniment.
Interpolarea este cea mai simplă modalitate de a lega proprietatea dvs. componentă în interiorul textului dintre etichetele dvs. HTML și atribuirile de atribute.
Bine ați revenit currentUser.name!
Legarea proprietăților este similară cu interpolarea în sensul că puteți lega proprietățile elementelor de vizualizare de proprietățile componentelor. Legarea proprietății favorizează comunicarea componentelor și este identică cu modul în care sunt preluate funcțiile de recuzită în React.
Legarea evenimentelor permite fluxului de date în direcția opusă, adică de la un element la un element. Aici, clic este un eveniment țintă, iar în dreapta, avem onSave () care se invocă atunci când are loc evenimentul.
Dar cea mai importantă caracteristică este legarea bidirecțională folosind [(NgModel)]. Acest lucru îmbină proprietatea obligatorie și obligativitatea evenimentului cu o singură directivă și este deosebit de utilă cu formele și câmpurile de intrare.
Serverul de redare este o tehnică tradițională de redare. Aici, serverul returnează întregul fișier HTML la cerere, iar browser-ul este lăsat cu sarcina simplă de ao afișa utilizatorului. Pe de altă parte, randarea de pe partea clientului returnează un document HTML cu oase goale, foaia de stil și un fișier JavaScript.
JavaScript generează ulterior solicitări de redare a restului site-ului utilizând un browser. React, Angular și toate celelalte biblioteci moderne de front-end JavaScript sunt exemple bune de randare pe partea clientului. Acest lucru este evident dacă vedeți sursa aplicației dvs. Angular / React.
Dar redarea pe partea clientului are dezavantajele că nu funcționează excelent pentru SEO și că returnează conținut HTML incomplet atunci când partajați link-ul dvs. pe site-urile de social media. Angular are o soluție numită Angular Universal, care are grijă de a face prietenul tău cu motorul de căutare prietenos și social media prietenos. Este o bibliotecă construită de echipa Angular, iar utilizarea acesteia este cu siguranță favorizată.
Universal folosește o tehnică de pre-redare în cazul în care întregul site Web este redat din primul server, iar după câteva secunde, utilizatorul este schimbat la redarea de pe partea clientului. Deoarece toate acestea se întâmplă sub capotă, utilizatorul nu observă nimic diferit.
Dacă utilizați React cu Redux, documentația Redux are un tutorial bun în ceea ce privește setarea randării serverului. De asemenea, puteți configura React pentru a reda de la server folosind BrowserRouter și StaticRouter componentele disponibile în reacționează-router bibliotecă. Puteți citi mai multe despre el în acest articol Mediu. Dar dacă sunteți în performanță și optimizare, puteți încerca next.js, care este o bibliotecă pentru SSR în React.
Compararea unui cadru complet bogat, bogat în caracteristici cu o bibliotecă robustă de interfață poate să nu pară corectă. Cu toate acestea, acestea sunt tehnologii JavaScript avansate folosite pentru a crea aplicații interactive pentru o singură pagină și, în acest sens, acest articol ar trebui să vă ajute să decideți alegerea uneia dintre ele.
Care sunt gandurile tale despre Angular vs. React? Împărțiți-le în comentariile de mai jos.
