Share
Angular vs. React is een populair debat onder front-end JavaScript-ontwikkelaars en, vaker wel dan niet, de discussie eindigt bevooroordeeld naar de ene technologie of de andere. Angular en React, respectievelijk ontwikkeld door Google en Facebook, zijn de twee populaire technologieën die worden gebruikt om interactieve applicaties met één pagina te bouwen.
Een uitgebreide vergelijking tussen Angular en React is aanstaande omdat er bepaalde plaatsen zijn waar ze aanzienlijk overlappen in termen van wat ze bieden, namelijk het bouwen van het front-end-beeld van je applicatie en andere plaatsen waar hun functionaliteit onvolledig is, tenzij geholpen door een derde feestbibliotheek. De ene technologie overnemen op de andere is een kwestie van of Angular of React je probleem en een beetje intuïtie beter oplost. In deze zelfstudie vergelijken en contrasteren we zeven belangrijke verschillende functies van Angular en React.
Ik ben een vurig voorstander van de code-eerst benadering (code spreekt luider dan woorden, zeggen ze). Met dit in gedachten heb ik waar mogelijk codevoorbeelden van Angular en React toegevoegd, zodat u kunt voortbouwen op uw intuïtie en beslissen welke voor u werkt en welke niet. Laten we beginnen.
Hoekig is een raamwerk, terwijl React een bibliotheek is.
Dus wat betekent dit? Door alleen te reageren, kunt u geen webtoepassing maken omdat deze is ontworpen om weergaven te maken (vandaar de 'V' in MVC). Wat React kan doen, is het bouwen van op componenten gebaseerde weergaven waarvoor gegevens kunnen worden doorgegeven aan onderliggende weergaven. Om deze leegte te vullen, heeft Facebook Flux ontwikkeld, een architecturaal patroon dat React aanvult. Flux-architectuur biedt in combinatie met React het volgende scenario:
Klinkt niet logisch? Dit cijfer zou het voor jou moeten oplossen.
Flux-complementen Reageer en implementeer het concept Unidirectionele gegevensstroom.Angular is een raamwerk voor het bouwen van clienttoepassingen.
AngularJS was stevig gebouwd bovenop het MVC-patroon, dat de toepassing in drie verschillende lagen scheidde. De combinatie van model, weergave en controller plus de extra complexiteit bij het beheersen van richtlijnen, fabrieken, services en andere componenten om een applicatie met één pagina te maken dwong de ontwikkelaars bij Google om over te schakelen naar een op componenten gebaseerde architectuur.
Maar wanneer uw toepassing begint te groeien, is het belangrijk om een solide structuur te hebben die de bedrijfslogica van uw toepassing weghoudt van de componenten. Omdat Angular een raamwerk is, kunt u de structurele organisatie afdwingen door de bedrijfsregels om te zetten in een domeinmodel (met behulp van een combinatie van modelklassen en services) en het model in uw componenten te injecteren via afhankelijkheidsinjectie.
Hier is een voorbeeld van de code die illustreert hoe de bedrijfslogica is ingekapseld in een gebruikersmodel en een gebruikersservice en weg van onze component.
/ * Pad: /app/models/User.ts * / exportklasse Gebruiker id: number; gebruikersnaam: string; wachtwoord: string; firstName: string; LastName: string;
/ * /app/services/user.service.ts * / import Injectable van '@ angular / core'; importeer Http van '@ angular / http'; importeer Gebruiker van '... / models / User'; @Injectable () exportklasse UserService constructor (privé http: Http) getAll () // API om alle gebruikers terug te sturen create (gebruiker: gebruiker) // API-aanroep om gebruiker update (gebruiker: gebruiker) te maken // API-oproep om gebruiker bij te werken verwijderen (id: nummer) // API-oproep om gebruiker te verwijderen
/ * Pad: /app/page/page.component.ts * / import Component uit '@ angular / core'; importeer Gebruiker van '... / models / User'; importeer UserService van '... /services/user.service'; @Component (templateUrl: 'page.component.html') exportklasse PageComponent currentUser: User; gebruikers: Gebruiker [] = []; constructor (private userService: UserService) // Dependency is geïnjecteerd in de argumenten van de constructor deleteUser (id: number) this.userService.delete (id) .subscribe (() => #Do Something); private loadAllUsers () this.userService.getAll (). subscribe (users => #Do something else);
Alle gebruikers:
- user.username (user.firstName user.lastName) - Verwijderen
Componenten zijn de meest elementaire bouwsteen van een gebruikersinterface in een Angular-toepassing. Een hoekapplicatie is een boom met hoekcomponenten.
Wat zijn componenten? In Angular zijn componenten TypeScript-klassen met een @Component decorateur gemarkeerd over hen. Bovendien kunnen we binnen deze decorators definiëren wat Angular de metagegevens noemt, waaronder de sjabloon, stijlen, selectors enzovoort.
Componenthiërarchie in Angular is zo ontworpen dat u structuur en functionaliteit onder één entiteit kunt associëren. Hier volgt een hoogstaand architecturaal overzicht van componenten en hoe dit verband houdt met al het andere in Angular.
De architectuur van Angular. Component in het midden en al het andere draait eromheen. Het delen van gegevens tussen componenten is mogelijk door componenten te nesten, zoals hieronder wordt toegelicht.
/ * UserParentComponent.ts * / import Component uit '@ angular / core'; // Deselector is genest binnen . Elke gebruiker wordt doorgegeven als een eigenschap. @Component (selector: 'user-parent', sjabloon: ' Er zijn nu users.length geregistreerde gebruikers status
') exportklasse UserParentComponent users: id: number, name: string [] = ["id": 0, "name": "Chris", "id": 1, "name": " Dwayne ", " id ": 2," name ":" Eve "]; status: string = "online";
/ * UserChildComponent.ts * / import Component, Input uit '@ angular / core'; // Input-eigenschappen zijn versierd met @decorators // user & status zijn input-eigenschappen @Component (selector: 'user-child', template: 'User.name
id: user.id
Status: status
') exportklasse UserChildComponent @Input () user: id: number, name: string; @Input () status: string;
Het concept componenten is diep geworteld in React, net als in Angular. Facebook-oproepen Reageer een op componenten gebaseerde bibliotheek waarmee u interactieve gebruikersinterfaces kunt bouwen. In tegenstelling tot Angular zijn React-componenten echter gewoon JavaScript-functies met een willekeurig aantal ingangen en een output. De onderstaande code toont een component die is gedefinieerd met een JavaScript-functie en een ES6-klasse gebruikt.
// Componenten schrijven met JavaScript-functies functie Welkom (rekwisieten) ga terugHallo, props.name
; // Componenten schrijven met behulp van ES6 Class class Welcome extends React.Component render () returnHallo, this.props.name
;
Voortaan houden we ons aan de ES6-normen voor het componeren van componenten, omdat Facebook dit aanbeveelt. Elke React-component accepteert een willekeurig aantal ingangen, dat is opgeslagen in een genoemd object rekwisieten.
Het heeft ook een geven methode, en zoals de naam al doet vermoeden, bepaalt deze methode wat er wordt weergegeven wanneer het onderdeel wordt aangeroepen. Elke component behoudt een interne status (via this.state) en elke keer dat de status verandert, wordt de renderfunctie van dat onderdeel opnieuw opgeroepen.
Hoektoepassingen worden geschreven in TypeScript, een superset van ECMA2015 en gebruiken een transponder om uw sterk getypte .ts-bestand te compileren naar een gewoon .js-bestand. TypeScript biedt taalextensies die zijn ontworpen om het schrijven in JavaScript gemakkelijker te maken, en het koppelt typegegevens aan JavaScript-entiteiten om typecontrole af te dwingen en de ontwikkelingsworkflow te verbeteren.
Enkele van de belangrijkste kenmerken van TypeScript zijn optioneel statisch typen en ondersteuning voor interfaces, klassen en decorateurs. (Decorateurs zijn functies die worden voorafgegaan door '@' en onmiddellijk gevolgd door een klasse, parameter of eigenschap.)
Laten we Duik in duiken, zullen we? Een van de belangrijke taalkenmerken in React is duidelijk in dit codevoorbeeld.
functie Tweet (rekwisieten) terug ();
Dit is een tweet.
Is dit niet geweldig? Met React kunt u XML / HTML-tags insluiten in uw JavaScript-bestand en dit gebeurt via JSX, dat Javascript-uitbreidingsmogelijkheden biedt. We moeten een compiler gebruiken zoals Babel, die onze JSX-code compileert in het JavaScript dat browsers kunnen begrijpen. De bovenstaande code compileert dit:
Accentsconagua
"gebruik strikt"; functie Tweet (rekwisieten) 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," Dit is een tweet. "))); Hoewel het gebruik van JSX wordt aanbevolen, kun je blijven React.createElement () als je tegen het idee bent om HTML-tags in JavaScript te embedden.
Bovendien kunt u ES6-standaarden of de traditionele vorm van JavaScript gebruiken tijdens het werken met React. Hoewel ES6 relatief nieuw is, voegt het een groot aantal functies toe, zoals klassen, pijlfuncties, sjabloonlettertypen, destructing en het gebruik van let en const. Het enige nadeel dat ik kan bedenken is dat het een beetje boilerplate code toevoegt, zoals de noodzaak om te bellen super() elke keer dat je belt constructor (), en dat het de methoden voor het afhandelen van gebeurtenissen niet automatisch bindt deze.
klasse Gebruiker breidt React.Component uit constructor (rekwisieten) // bloat code alert super (rekwisieten); this.handleSubmit = this.handleSubmit.bind (this); this.handleInputChange = this.handleInputChange.bind (this); handleSubmit (gebruiker) // methode om submit te verwerken handleInputChange (gebruiker) // Methode om invoer te verwerken render () return ());
Statische typecontrole wordt uitgevoerd tijdens het compileren. De compiler waarschuwt u voor mogelijke mismatches van het type en detecteert bepaalde fouten die anders onopgemerkt zouden blijven. Bovendien kan het definiëren van een contract op een variabele, een eigenschap of de parameters van een functie resulteren in meer leesbare en onderhoudbare code.
Variabele en functie-verklaringen worden expressiever gemaakt door hun gegevenstypen te declareren. U kunt meer lezen over de verschillende primitieve gegevenstypen in de TypeScript-documentatie.
let isLoggedIn: boolean = false; let id: nummer = 10; let name: string = "Davis"; let list: nummer [] = [1, 2, 3]; enum Kleur Rood, Groen, Blauw; laat c: Color = Color.Red; laat emmer: elke = 4; bucket = "Ik kan een reeks zijn"; bucket = false; // of een boolean
Het definiëren van de handtekening van een API met behulp van een interface maakt de code minder dubbelzinnig en gemakkelijker te begrijpen. De interface dient als een snelstartgids die u helpt direct aan de slag te gaan met de code en tijd bespaart die anders wordt besteed aan het lezen van de documentatie of de daadwerkelijke implementatie van de bibliotheek.
interface ButtonSettings tekst: string; grootte ?: width: number; hoogte: aantal; ; kleur ?: string; function createButton (instellingen: ButtonSettings) ... createButton (text: 'Submit'); // OK createButton (text: 'Submit', grootte: width: 70, height: 30); // OK createButton (text: 'Submit', kleur: 43); // Niet OK: 43 is geen tekenreeks createButton (text: 'Submit', size: width: 70); // Niet OK: de grootte heeft ook een hoogte nodig createButton (color: 'Blue'); // Niet OK: 'tekst'-lid is verplicht
De type trefwoord in TypeScript kan worden gebruikt om een alias voor een type te maken. U kunt vervolgens nieuwe typen maken die een unie of intersectie van deze primitieve typen zijn.
// Union Types type Age = nummer | draad; function getAge (age: Age): string return 'U bent $ age!'; let ofSusan: Leeftijd = 21; let ofTyler: Age = 'éénendertig'; getAge (ofSusan); // Je bent 21! getAge (ofTyler); // Je bent eenendertig! // Interface intersectietypen Naam name (firstName: string, lastName: string): string; interface Leeftijd leeftijd (huidige: getal): aantal; // wijs intersectiedefinitie toe aan alias Gebruikerstype Gebruiker = Naam & Leeftijd; function createUser (testUser: User) testUser.name ("David", "John"); testUser.age (99); testUser.address (); //fout React heeft beperkte ondersteuning voor typecontrole omdat de onderliggende ES6 het niet ondersteunt. Niettemin kunt u typecontrole implementeren met behulp van de prop-types bibliotheek ontwikkeld door het React-team. Typ het controleren van de rekwisieten van een component om te controleren of het een string is, kan gedaan worden zoals hieronder getoond.
importeer PropTypes van 'prop-types'; // import van prop-types bibliotheekklasse Groet breidt React.Component render () retourneren (Hallo, this.props.name
Mijn leeftijd is, this.props.age ); Greeting.propTypes = name: PropTypes.string; leeftijd: PropTypes.number; ;
Maar prop-types zijn niet beperkt tot strings, getallen en boolean. U kunt veel meer doen, zoals beschreven in de documentatie van de prop-types bibliotheek. Als u statische typecontrole echter serieus neemt, moet u iets als Flow gebruiken, dat een statische typecontrolebibliotheek is voor JavaScript.
Het starten van een project vanaf de grond lijkt misschien in eerste instantie leuk. Het proces van het instellen van de directorystructuur, het schrijven van boilerplate-code voor componenten en het opstarten van de toepassing is echter een nutteloze en niet-productieve oefening. Uw strategie zou moeten zijn om zo snel mogelijk door te gaan en zich te concentreren op de daadwerkelijke ontwikkeling van de applicatie. Dankzij Google en Facebook beschikt u over tools om uw applicaties met gemak te maken en te stealen.
Het instellen van Angular-CLI voor hoek en create-react-app voor React is eenvoudig met behulp van npm.
// Angular CLI $ npm install -g @ angular / cli // create-react-app $ npm install -g create-react-app
Als u een nieuwe Angular-toepassing wilt maken, moet u de volgende opdracht gebruiken:
$ ng nieuwe PROJECT-NAME $ ng serve
Maar dat is het niet. De ng genereren Met Command kunt u componenten, routes, leidingen, richtlijnen en services genereren.
$ ng genereren component Pagina installeren component maken src \ app \ page \ page.component.css maken src \ app \ page \ page.component.html create src \ app \ page \ page.component.spec.ts create src \ app \ page \ page.component.ts update src \ app \ app.module.ts
Angular CLI kan veel meer doen, zoals het maken van een build van uw Angular-app, opdrachten voor het uitvoeren van unit-tests en end-to-end testen. Je kunt er meer over lezen op GitHub.
Anderzijds, create-reactie-app is de officieel ondersteunde manier om een React-app te maken zonder configuratiebestanden.
$ Npm install -g create-react-app
Dit zou een functionele React-app moeten creëren met alle Babel- en webpack-afhankelijkheden waarvoor gezorgd wordt. U kunt beginnen met het uitvoeren van de app in uw browser met npm start.
U kunt de scripts beschikbaar voor de react-app vinden in de package.json het dossier.
"scripts": "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env = jsdom", "eject": "react- scripts uitwerpen "
Gegevensbinding is een functie waarmee gegevens tussen de toepassingsstatus (model) en de weergave kunnen worden gesynchroniseerd. In een eenrichtingsgegevensbindingsroutine werkt elke wijziging in de status van de toepassing de weergave automatisch bij. Integendeel, bidirectionele data binding bindt eigenschappen en gebeurtenissen samen onder een enkele entiteit, d.w.z. elke wijziging van het model werkt de weergave bij en vice versa.
In React worden de eigenschappen doorgegeven van bovenliggende naar onderliggende componenten, die bekend staat als de unidirectionele of top-down gegevensstroom. De status van een component is ingekapseld en is niet toegankelijk voor andere componenten, tenzij deze wordt doorgegeven aan een onderliggende component als een prop, d.w.z. de toestand van een component wordt de prop van de onderliggende component.
class UserChild breidt React.Component uit render () laat userData = this.props.users.map ((user) => retourneren (gebruikersnaam : user.name
); ); terugkeer (); class UserParent breidt React.Component constructor () super () uit; // Staat wordt hier gedefinieerd this.state = status: "Online" render () retourneren (Hallo. De server is this.props.status
gebruikersgegevens); var USERS = ["id": 0, "name": "Chris", "id": 1, "name": "Dwayne", "id": 2, "name": " Eve "]; ReactDOM.render (, document.getElementById ('container'));
Maar wat als u de gegevens via de componentboom moet doorsturen? Dit gebeurt via onderliggende gebeurtenissen en bovenliggende callbacks. De documentatie van React bevat een goed voorbeeld dat een dergelijk scenario behandelt.
Data-bindende technieken die beschikbaar zijn in Angular, behoren tot enkele functies die het interessant maken. Angular heeft out-of-the-box-ondersteuning voor interpolatie, binding in één richting, binding in twee richtingen en binding van gebeurtenissen.
Interpolatie is de eenvoudigste manier om uw componenteigenschap binnen de tekst te binden tussen uw HTML-tags en attribuuttoewijzingen.
Welkom terug currentUser.name!
Eigenschapsbinding is vergelijkbaar met interpolatie, in die zin dat u de eigenschappen van uw weergave-elementen aan componenteigenschappen kunt binden. Eigenschapsbinding is gunstig voor componentcommunicatie en is identiek aan hoe rekwisieten worden doorgegeven in React.
Gebeurtenisbindingen maken gegevensstromen in de tegenovergestelde richting mogelijk, dat wil zeggen van een element naar een component. Hier, Klik is een doelgebeurtenis, en aan de rechterkant hebben we de OnSave () methode die wordt aangeroepen wanneer de gebeurtenis plaatsvindt.
Maar het belangrijkste kenmerk is de bidirectionele binding met behulp van de [(NgModel)]. Dit combineert de eigenschapsbinding en gebeurtenisbinding onder één richtlijn en is vooral handig met formulieren en invoervelden.
Server-side rendering is een traditionele renderingtechniek. Hier retourneert de server het volledige HTML-bestand op verzoek en de browser heeft de taak om het aan de gebruiker weer te geven. Client-side rendering retourneert aan de andere kant een kaal HTML-document, de stylesheet en een JavaScript-bestand.
JavaScript maakt opeenvolgende verzoeken om de rest van de website met behulp van een browser weer te geven. React, Angular en alle andere moderne JavaScript-front-endbibliotheken zijn goede voorbeelden van client-side rendering. Dit is duidelijk als u de bron van uw Angular / React-toepassing bekijkt.
Maar client-side rendering heeft de nadelen dat het niet geweldig werkt voor SEO en dat het onvolledige HTML-inhoud retourneert wanneer u uw link deelt op sociale mediasites. Angular heeft een oplossing genaamd Angular Universal die ervoor zorgt dat uw app zoekmachine vriendelijk en social media-vriendelijk is. Het is een bibliotheek die is gebouwd door het Angular-team en het gebruik ervan is absoluut favoriet.
Universal maakt gebruik van een pre-renderingtechniek waarbij de hele website eerst van de server wordt weergegeven en na een paar seconden wordt de gebruiker overgeschakeld naar de weergave aan de clientzijde. Omdat dit allemaal gebeurt onder de motorkap, merkt de gebruiker niets anders op.
Als u React met Redux gebruikt, heeft de documentatie van Redux een goede zelfstudie over het instellen van serverweergave. U kunt ook React instellen om te renderen vanaf de server met behulp van de BrowserRouter en StaticRouter componenten beschikbaar in de reactie-router bibliotheek. Je kunt er meer over lezen in dit Medium-artikel. Maar als u op zoek bent naar prestaties en optimalisatie, kunt u next.js proberen, een bibliotheek voor SSR in React.
Het vergelijken van een volledig framework met veel functies en een robuuste UI-bibliotheek lijkt misschien niet eerlijk. Het zijn echter geavanceerde JavaScript-technologieën die worden gebruikt om interactieve toepassingen met één pagina te maken, en in dat verband zou dit artikel u moeten helpen bij het kiezen van een van deze.
Wat vind je van Angular vs. React? Deel ze in de reacties hieronder.
