Share
Angular vs React er en populær debatt blant front-end JavaScript-utviklere, og oftere end ikke, blir diskusjonen endeløs mot en teknologi eller den andre. Utviklet av henholdsvis Google og Facebook, Angular and React er de to populære teknologiene som brukes til å bygge interaktive enkeltsidige applikasjoner.
En omfattende sammenligning mellom Angular and React er nært, fordi det er visse steder hvor de overlapper betydelig i forhold til hva de tilbyr, dvs. å bygge frontfront-visningen av applikasjonen din og andre steder der funksjonaliteten deres forbli ufullstendig, festbibliotek. Å vedta en teknologi over den andre er et spørsmål om Angular or React bedre løser problemet og litt intuisjon. I denne veiledningen sammenligner og sammenligner vi syv sentrale forskjellige funksjoner i Angular and React.
Jeg er en ivrig forutsetning for kode-første tilnærming (koden snakker høyere enn ord, sier de). Med dette i bakhodet har jeg lagt til kodeprøver av Angular and React hvor det er mulig, slik at du kan bygge på din intuisjon og bestemme hvilke som fungerer for deg og som ikke gjør det. La oss komme i gang.
Vinkel er et rammeverk, mens React er et bibliotek.
Så hva betyr dette? Reagere på egenhånd vil ikke la deg lage et webprogram fordi det er laget for å skape visninger (dermed "V" i MVC). Hva React kan gjøre er å bygge komponentbaserte visninger for hvilke data som kan sendes ned til barnevisninger. For å fylle dette tomrummet har Facebook utviklet Flux, som er et arkitektonisk mønster som utfyller React. Fluxarkitektur, når kombinert med React, gir følgende scenario:
Er det ikke fornuftig? Denne figuren skal sortere den ut for deg.
Flux-komplementer React og implementerer begrepet Unidirectional data flow.Angular er et rammeverk for å bygge klientapplikasjoner.
AngularJS ble fast bygget på toppen av MVC-mønsteret, som separerte applikasjonen i tre forskjellige lag. Kombinasjonen av modell, visning og kontroller pluss den ekstra kompleksiteten som er involvert i å mastere direktiver, fabrikker, tjenester og andre komponenter for å lage en enkeltsidetapp, tvang utviklerne på Google til å skifte mot en komponentbasert arkitektur.
Men når søknaden din begynner å vokse, er det viktig å ha en solid struktur som holder forretningslogikken for søknaden vekk fra komponentene. Som et rammeverk, kan Angular håndheve strukturell organisasjon ved å flytte forretningsreglene til en domene modell (ved hjelp av en kombinasjon av modellklasser og tjenester) og injisere modellen i komponentene dine via avhengighetsinjeksjon.
Her er et eksempel på kode som illustrerer hvordan forretningslogikken er innkapslet i en brukermodell og en brukertjeneste og bort fra komponenten vår.
/ * Sti: /app/models/User.ts * / eksportklasse Bruker id: nummer; brukernavn: streng; passord: streng; firstName: string; etternavn: streng;
/ * /app/services/user.service.ts * / import Injectable fra '@ vinkel / kjerne'; importer Http fra '@ vinkel / http'; importer Bruker fra '... / models / User'; @Injectable () eksportklasse UserService constructor (privat http: Http) getAll () // API for å returnere alle brukere opprette (bruker: Bruker) // API-anrop for å opprette bruker oppdatering (bruker: Bruker) // API-anrop for å oppdatere brukeren slett (id: nummer) // API-anrop for å slette brukeren
/ * Sti: /app/page/page.component.ts * / import Component fra '@ vinkel / kjerne'; importer Bruker fra '... / models / User'; importer UserService fra '... /services/user.service'; @Component (templateUrl: 'page.component.html') eksportklasse PageComponent currentUser: User; brukere: Bruker [] = []; Konstruktør (privat brukerService: UserService) // Avhengighet er Injisert innenfor Konstruktørens argumenter deleteUser (id: nummer) this.userService.delete (id) .subscribe (() => #Do Something); private loadAllUsers () this.userService.getAll (). abonnere (users => #Do noe annet);
Alle brukere:
- user.username (user.firstName user.lastName) - Slett
Komponenter er den mest grunnleggende byggeblokken til et brukergrensesnitt i en kantet applikasjon. En kantet applikasjon er et tre av kantede komponenter.
Hva er komponenter? I Angular er komponenter TypeScript-klasser som har a @Komponent dekoratør merket over dem. Dessuten kan vi i disse dekoratørene definere hva Angular kaller metadataene, som inkluderer mal, stiler, selektorer og så videre.
Komponenthierarki i Angular er utformet på en slik måte at du kan knytte struktur og funksjonalitet til en enkelt enhet. Her er en arkitektonisk oversikt over komponenter på høyt nivå, og hvordan dette kobler til alt annet i Angular.
Arkitekturen til Angular. Komponent i sentrum, og alt annet dreier seg om det. Datadeling mellom komponenter er mulig ved å nesting komponenter, som eksemplifisert nedenfor.
/ * UserParentComponent.ts * / import Component fra '@ vinkel / core'; // Thevelgeren er nestet innvendig . Hver bruker er sendt ned som en eiendom. @Component (selector: 'user-parent', mal: ' Det er users.length registrerte brukere status nå
') eksportklasse UserParentComponent brukere: id: nummer, navn: streng [] = ["id": 0, "navn": "Chris", "id": 1, "navn" Dwayne ", " id ": 2," navn ":" Eve "]; status: streng = "online";
/ * UserChildComponent.ts * / import Komponent, Input fra '@ vinkel / kjerne'; // Inputegenskaper er utsmykket med @decorators // bruker og status er inntastingsegenskaper @Component (selector: 'user-child', template: 'User.name
id: user.id
Status: status
') eksportklasse UserChildComponent @Input () bruker: id: nummer, navn: streng; @Input () status: streng;
Konseptet med komponenter er dypt forankret i React, akkurat som det er i Angular. Facebook-samtaler Reag et komponentbasert bibliotek som lar deg bygge interaktive brukergrensesnitt. I motsetning til Angular, React-komponenter er det imidlertid bare JavaScript-funksjoner med et vilkårlig antall innganger og en utgang. Koden nedenfor viser en komponent som er definert ved hjelp av en JavaScript-funksjon og bruker en ES6-klasse.
// Skrive komponenter som bruker JavaScript funksjoner funksjon Velkommen (rekvisitter) returnHei, props.name
; // Skrive komponenter som bruker ES6 klasse klasse Velkommen utvider React.Component render () returnHei, this.props.name
;
Vi vil overholde ES6-standardene for komponering av komponenter fremover, fordi det er det Facebook anbefaler. Hver React-komponent aksepterer et vilkårlig antall innganger, som er lagret inne i en gjenstand som heter Rekvisitter.
Den har også a gjengi metode, og som navnet antyder, bestemmer denne metoden hva som skal gjengis når komponenten påberopes. Hver komponent opprettholder en intern tilstand (via this.state), og hver gang staten endres, gjengis gjengivelsesfunksjonen til den komponenten igjen.
Angulære applikasjoner er skrevet i TypeScript, som er en superset av ECMA2015 og bruker en transpiler til å kompilere din sterkt skrevet .ts-fil til en vanlig .js-fil. TypeScript tilbyr språkutvidelser som er laget for å gjøre skriving i JavaScript lettere, og det forbinder typen informasjon med JavaScript-enheter for å håndheve typekontroll og forbedre utviklingsarbeidet.
Noen av hovedtrekkene til TypeScript inkluderer valgfri statisk typing og støtte for grensesnitt, klasser og dekoratorer. (Dekoratører er funksjoner som er prefiks med '@' og umiddelbart etterfulgt av en klasse, parameter eller en egenskap.)
La oss dykke inn i React, skal vi? Et av de viktigste språkfunksjonene i React er tydelig i denne kodesamplesen.
funksjon Tweet (rekvisitter) retur ();
Dette er en tweet.
Er ikke dette bra? React lar deg legge inn XML / HTML-koder i JavaScript-filen din, og dette gjøres gjennom JSX, som tilbyr syntaksutvidelsesfunksjon til JavaScript. Vi må bruke en kompilator som Babel, som samler vår JSX-kode inn i JavaScript som nettlesere kan forstå. Koden ovenfor samler ned til dette:
Accentsconagua
"bruk strenge"; funksjon Tweet (rekvisitter) return React.createElement ("div", className: "tweet", React.createElement ("img", src: "images_4 / vinkel-vs-reagere-7-tast-funksjoner-sammenlignet_3 .png ", className:" tweet__avatar "), React.createElement (" div ", className:" tweet__body ", React.createElement (" p ", null," Dette er en tweet. "))); Selv om du bruker JSX anbefales, kan du holde fast ved React.createElement () hvis du er imot ideen om å legge inn HTML-koder i JavaScript.
Videre kan du enten bruke ES6-standarder eller den tradisjonelle formen for JavaScript mens du arbeider med React. Selv om ES6 er relativt ny, legger den til mange funksjoner som klasser, pilfunksjoner, malte bokstaver, destruksjon og bruk av let and const. Den eneste ulempen jeg kan tenke på er at den legger til en liten bit av boilerplate-koden, for eksempel behovet for å ringe super() hver gang du ringer a konstruktør (), og at den ikke automatisk binder hendelseshåndteringsmetoder med dette.
klassen bruker strekker seg React.Component constructor (rekvisitter) // bloat code alert super (rekvisitter); this.handleSubmit = this.handleSubmit.bind (dette); this.handleInputChange = this.handleInputChange.bind (dette); handleSubmit (bruker) // Metode til å håndtere sende handleInputChange (bruker) // Metode til å håndtere inngang gjengivelse () retur ();
Statisk typekontroll utføres ved kompileringstid. Kompilatoren advarer deg om mulige type feilmatchinger og oppdager visse feil som ellers ville gå ubemerket. I tillegg kan definere en kontrakt på en variabel, en egenskap eller parametrene til en funksjon resultere i mer lesbar og vedlikeholdbar kode.
Variabel- og funksjonsdeklarasjoner gjøres mer uttrykksfulle ved å erklære datatyper. Du kan lese mer om de forskjellige primitive datatyper i TypeScript-dokumentasjonen.
la isLoggedIn: boolean = false; la id: nummer = 10; la navnet: string = "davis"; la listen: tall [] = [1, 2, 3]; enum Farge Rød, Grønn, Blå; la c: Farge = Color.Red; la bøtte: any = 4; bøtte = "Jeg kan være en streng"; bøtte = false; // eller en boolsk
Definere signaturen til et API ved hjelp av et grensesnitt gjør koden mindre tvetydig og lettere å forstå. Grensesnittet fungerer som en hurtigstartguide som hjelper deg med å komme i gang med kode umiddelbart og sparer tid ellers brukt på å lese dokumentasjonen eller selve implementeringen av biblioteket.
grensesnitt ButtonSettings text: string; størrelse ?: bredde: tall; høyde: tall; ; farge ?: streng; funksjon createButton (innstillinger: ButtonSettings) ... createButton (text: 'Submit'); // OK createButton (text: 'Submit', størrelse: bredde: 70, høyde: 30); // OK createButton (text: 'Submit', farge: 43); // Ikke OK: 43 er ikke en streng createButton (text: 'Send', størrelse: bredde: 70); // Ikke OK: Størrelsen trenger også en høyde createButton (color: 'Blue'); // Ikke OK: 'tekst' medlem er påkrevd
De type Søkeord i TypeScript kan brukes til å opprette et alias for en type. Du kan da opprette nye typer som er en forening eller skjæringspunkt for disse primitive typer.
// Union Type type Alder = tall | strengen; funksjon getAge (alder: alder): streng retur 'Du er $ alder!'; la avSusan: Alder = 21; la ofTyler: Alder = 'trettien'; getAge (ofSusan); // Du er 21! getAge (ofTyler); // Du er trettien! // Interseksjonstyper grensesnitt Navn navn (fornavn: streng, etternavn: streng): streng; grensesnitt Alder alder (nåværende: nummer): tall; // tilordne kryssdefinisjon til alias Brukertype Bruker = Navn og Alder; funksjon createUser (testUser: User) testUser.name ("David", "John"); testUser.age (99); testUser.address (); //feil React har begrenset støtte for typekontroll fordi den underliggende ES6 ikke støtter den. Likevel kan du implementere typekontroll ved hjelp av prop-typer bibliotek utviklet av React team. Skriv inn sjekken Rekvisitter av en komponent for å sjekke om det er en streng kan gjøres som vist nedenfor.
importer PropTypes fra 'prop-typer'; // importerer prop-typer biblioteksklasse Hilsen utvider React.Component render () return (Hei, this.props.name
Min alder er, this.props.age ); Greeting.propTypes = navn: PropTypes.string; alder: PropTypes.number; ;
Men prop-typer er ikke begrenset til strenger, tall og boolean. Du kan gjøre mye mer, som beskrevet i dokumentasjonen til prop-typer bibliotek. Men hvis du tar statisk type sjekker seriøst, bør du bruke noe som Flow, som er et statisk type-kontroller bibliotek for JavaScript.
Å starte et prosjekt fra grunnen kan virke gøy først. Imidlertid er prosessen med å sette opp katalogstrukturen, skrive boilerplate-koden for komponenter, og å få programmet startet opp, en futil og uproduktiv trening. Din strategi bør være å komme videre med det så raskt som mulig og fokusere på den faktiske utviklingen av søknaden. Takket være Google og Facebook har du verktøy som er tilgjengelige for å lage og sette opp programmene dine med letthet.
Sette opp Angular-CLI for vinkel- og opprett-reagere-appen for React er rettferdig ved bruk av npm.
// Angular CLI $ npm installere -g @ angular / cli // create-react-app $ npm installere -g opprette-reagere-app
Hvis du vil opprette et nytt kantet program, bør du bruke følgende kommando:
$ ng nytt PROJECT-NAME $ ng tjene
Men det er det ikke. De ng generere Kommandoen lar deg generere komponenter, ruter, rør, direktiver og tjenester.
$ ng generere komponent Page installere komponent lage src \ app \ page \ page.component.css lage src \ app \ page \ page.component.html lage src \ app \ page \ page.component.spec.ts lage src \ app \ side \ side.component.ts oppdatering src \ app \ app.module.ts
Vinkel CLI kan gjøre mye mer, for eksempel å lage en konstruksjon av Angular app, kommandoer for å kjøre enhetstester og end-to-end testing. Du kan lese mer om det på GitHub.
På den andre siden, create reagere-app er den offisielt støttede måten å opprette en React-app uten konfigurasjonsfiler.
$ Npm installer-g create-react-app
Dette bør skape en funksjonell React app med alle Babel og webpack avhengigheter tatt vare på. Du kan begynne å kjøre appen på nettleseren din ved hjelp av npm start.
Du kan finne skriptene som er tilgjengelig for den reagerte appen i package.json fil.
"scripts": "start": "reaksjonsskripter start", "build": "reager scripts build", "test": "reagere scripts test --env = jsdom" skript utkastes "
Datainnbinding er en funksjon som muliggjør synkronisering av data mellom programtilstanden (modellen) og visningen. I en enveis databindingsrutine oppdaterer eventuelle endringer i programtilstanden automatisk visningen. Tvert imot binder toveisbinding sammen egenskaper og hendelser under en enkelt enhet, dvs. enhver modifikasjon av modellen oppdaterer visningen og omvendt.
I Reakt blir egenskapene gått ned fra foreldre til barnekomponenter, som er kjent som enriktet eller topp ned data-strømmen. Tilstanden til en komponent er innkapslet og er ikke tilgjengelig for andre komponenter, med mindre den blir sendt ned til en barnekomponent som en stikkontakt, dvs. tilstanden til en komponent blir stift av barnekomponenten.
klasse UserChild strekker React.Component render () let userData = this.props.users.map ((user) => return (bruker-ID : user.name
); ); komme tilbake (); klasse UserParent utvider React.Component constructor () super (); // Stat blir definert her this.state = status: "Online" render () return (Hallo. Serveren er this.props.status
brukerdata); var USERS = ["id": 0, "navn": "Chris", "id": 1, "navn": "Dwayne", "id": 2, "navn" Eve "]; ReactDOM.render (, document.getElementById ('container'));
Men hva om du trenger å formidle dataene opp gjennom komponenttreet? Dette gjøres gjennom barnehendelser og foreldre tilbakeringinger. React dokumentasjonen inneholder et godt eksempel som omhandler et slikt scenario.
Data bindende teknikker tilgjengelig i Angular er blant noen få funksjoner som gjør det interessant. Angular har ut-av-boks-støtte for interpolering, enveisbinding, toveisbinding og hendelsesbinding.
Interpolering er den enkleste måten å binde komponentegenskapen inne i teksten mellom HTML-kodene og attributtoppgaver.
Velkommen tilbake currentUser.name!
Eiendomsbindende ligner på interpolering i den forstand at du kan binde egenskapene til dine visningselementer til komponentegenskaper. Eiendomsbindende favoriserer komponentkommunikasjon og er identisk med hvordan rekvisitter sendes ned i React.
Hendelsesbindinger tillater datastrøm i motsatt retning, dvs. fra et element til en komponent. Her, klikk er en målhendelse, og til høyre har vi OnSave () metode som blir påkalt når hendelsen oppstår.
Men den viktigste funksjonen er toveisbindingen ved hjelp av [(NgModel)]. Dette fusjonerer egenskapsbindingen og hendelsesbindingen under ett direktiv og er spesielt nyttig med skjemaer og inntaksfelt.
Server-side gjengivelse er en tradisjonell gjengitt teknikk. Her returnerer serveren hele HTML-filen på forespørsel, og nettleseren er igjen med den enkle jobben med å vise den til brukeren. Klientsiden gjengivelse returnerer derimot et bare-bein HTML-dokument, stilarket og en JavaScript-fil.
JavaScript gjør etterfølgende forespørsler om å gjøre resten av nettstedet til en nettleser. React, Angular og alle andre moderne JavaScript-front-end-biblioteker er gode eksempler på klientsiden gjengivelse. Dette er tydelig hvis du ser kilden til Angular / React-applikasjonen.
Men gjengivelse av klientsiden har ulempene at det ikke fungerer bra for SEO, og at det returnerer ufullstendig HTML-innhold når du deler koblingen din på sosiale medier. Angular har en løsning kalt Angular Universal som tar seg av å gjøre appen din søkemotor vennlig og sosiale medier vennlig. Det er et bibliotek bygget av Angular teamet, og bruk av det er definitivt favorisert.
Universal bruker en pre-rendering teknikk hvor hele nettstedet blir gjort fra serveren først, og etter et par sekunder blir brukeren byttet til klient-side gjengivelsen. Siden alt dette skjer under hetten, merker brukeren ikke noe annet.
Hvis du bruker React med Redux, har Redux dokumentasjonen en god opplæring om å sette opp servergjenoppretting. Du kan også sette opp React for å gjengi fra serveren ved hjelp av BrowserRouter og StaticRouter komponenter tilgjengelig i reagere-router bibliotek. Du kan lese mer om det i denne middels artikkelen. Men hvis du er i ytelse og optimalisering, kan du prøve next.js, som er et bibliotek for SSR i React.
Sammenligning av en fullblåst, funksjonsrikt rammeverk til et robust brukergrensesnittbibliotek ser kanskje ikke ut til å være rettferdig. Imidlertid er de avanserte JavaScript-teknologier som brukes til å lage interaktive enkeltsidsprogrammer, og i den forbindelse bør denne artikkelen hjelpe deg med å bestemme deg for å velge en av dem.
Hva er dine tanker om Angular vs React? Del dem i kommentarene nedenfor.
