The Ultimate JavaScript Frameworks’ sammenligning: Angular vs React

Et spørsmål jeg får nesten daglig er om jeg skal begynne med ReactJS eller Angular? Men før jeg går videre, la meg gi deg en ansvarsfraskrivelse.

Det er ikke en blogg der jeg skal slå det ene eller det andre eller si at du alltid skal bruke det ene fremfor det andre. Hver utvikler og hvert prosjekt er helt forskjellige og de har forskjellige krav, så det er ganske dumt å si at du alltid skal bruke ReactJS eller alltid bruke Angular.

Det logiske argumentet

Du kan hevde at Angular er et rammeverk og at React teknisk sett er et bibliotek i seg selv. Jeg benekter ikke dette faktum, men dette er argumentet jeg ikke ønsker å gå inn på akkurat nå. Det er pakker du kan legge til i React som vil gjøre det om til et rammeverk som direkte konkurrerer med Angular. Vi sammenligner de to økosystemene, ikke det eksakte rammeverket versus det eksakte biblioteket.

Læringskurven

La oss starte med Angular. Nok en ansvarsfraskrivelse: når jeg sier Angular, snakker jeg om Angular 4, ikke AngularJS.

Angular er et stort rammeverk som betyr at det er kraftig og det inkluderer mye. Det er mye å lære. Du kommer til å høre mye nytt skremmende ordforråd som avhengighetsinjeksjon, direktivdekoratører, piper osv. Så må du forholde deg til Typescript, som er JavaScript pluss en haug med andre funksjoner, inkludert statisk skriving.

Angular er mer selvstendig enn React, noe som er en av fordelene etter min mening fordi med React kan du gjøre det samme på en million forskjellige måter. Med Angular er det generelt en eller to måter å gjøre visse ting på, noe som gjør det lettere å følge, gir deg mye mer tydelige instruksjoner om hva du skal gjøre.

Men igjen, det kommer ned til preferanse. Du liker kanskje fleksibiliteten til å gjøre ting på forskjellige måter. Som jeg nevnte, er ReactJS et bibliotek hvis vi bare snakker om kjernebiblioteket, det er mye mindre og mye enklere å lære enn Angular-rammeverket. Du kan si at du vil lære React på kortere tid. React er et flott visningsbibliotek i seg selv, men det er ikke engang like kraftig for store applikasjoner. Hvis du vil ha ruting, validering, HTTP-forespørsler i React, må du installere andre pakker, og det legger til læringskurven.

Hvis du ser på React-kode fra to forskjellige utviklere, vil de sannsynligvis se helt annerledes ut enten de lager HTTP-forespørsler eller håndterer tilstand og egenskaper. Alle de tingene kan håndteres veldig forskjellig, og mange ganger kan det være på feil måte.

Du finner de beste praksisene og alle problemene forsvinner, men det øker læringskurven.

I motsetning til Angular React bruker ikke maler. Den bruker noe som kalles JSX eller JavaScript-utvidelse eller JavaScript-syntaksutvidelse, som lar oss bygge inn HTML i JavaScript. Til å begynne med kan dette virke litt rart. Spesielt når du sannsynligvis ble lært å skille markeringen og JavaScript.

Tenk på det som å legge HTML i JavaScript med et par forskjellige endringer: du kan ikke bruke klasseattributtet, og du må bruke klassenavn.

Til slutt har vi Redux. React brukes ofte med Redux eller Flux, som er applikasjonsnivåer som ledere. Etter min mening er Redux kjempevanskelig bare å sette den opp og lære konseptene til det er vanskelig.

Jeg tror det er overbrukt. Jeg tror at mange utviklere bruker redux der det ikke er nødvendig. Du trenger det ikke for mindre applikasjoner, men mange utviklere insisterer på å bruke det. Det kommer igjen ned til preferanse. Redux er veldig kraftig, jeg vil ikke ta det bort. Når man snakker om læringskurven er det forbanna vanskelig å forstå.

Funksjoner	Reagere	Kantete
Programmeringsspråk	JavaScript	TypeScript
Kodestruktur	Meningsfull	Fleksibel
Kjernebibliotek	Liten	Veldig stor
Mal	JSX	HTML
Kompetanse	Små applikasjoner	Applikasjoner i stor skala

Vinner: Det er uavgjort

Opptreden

Det er ikke rettferdig å direkte sammenligne ytelsen til Angular to React. Angular er et komplett front-to-back-rammeverk, det inkluderer ruting, skjemaverktøy, HTTP-bibliotek, reaktive utvidelser, etc. Alle disse funksjonene blåser opp rammeverket og gjør det tregere. Reager i seg selv er imidlertid bare et visningsbibliotek, som er mye mindre og raskere.

Når du begynner å legge til pakker som ruteren, HTTP-klienten eller hva du skal legge til i React-applikasjonen din, begynner det å komme opp litt mer til hvor Angular er, og så kan du begynne å sammenligne dem rettferdig, men selv etter det React fortsatt vinner ytelsesavdelingen. Det er en veldig rask teknologi generelt.

Endringen fra Angular 2 til Angular 4 under panseret de gjorde ganske mye for å øke ytelsen. Angular 4 presterer bedre enn Angular 2. Likevel vinner React i ytelsesavdelingen.

Angular vs React. Kilde: Academind.com

Vinner: Reager

Funksjoner

Begge rammeverkene har mange av de samme generelle funksjonene og fordelene: de organiserer koden din, de er komponentbaserte, de tilbyr dynamisk markering osv. De er vant til å gjøre mye av de samme tingene, og de deler en mange av de samme funksjonene.

Funksjoner	AngularJS	Reagere
Lanseringsdato	2009	2013
Språk	TypeScript, JavaScript	JavaScript
Markedsandel	0,3 %
Modell	Ja	Nei
Utsikt	Ja	Ja
Kontroller	Ja	Nei
Læringskurve	Kompleks	Lett
Mal	Ja	Nei
Feil	Kjøretid	Kompileringstid
Gjengivelse på serversiden	Nei	Ja
DOM	Ja	Virtuell
Mobilstøtte	Ja	Ja
Gjengivelse på serversiden	Nei	Ja

Vi skal se på noen av de enkelte funksjonene. Angular har åpenbart mye flere funksjoner enn React i kjernen. La meg minne deg på at vi snakker om to økosystemer og vanlige pakker som brukes med React.

Angular er et rammeverk som er inkludert. Den kommer med komponentruter, reaktive utvidelser for observerbare, en HTTP-klient, en skjemamodul for validering, og listen fortsetter. Dessuten tilbyr den toveis databinding på en måte som ingen andre rammeverk egentlig gjør. Det er ekstremt enkelt å binde data fra visningen til modellen ved å bruke ng modelldirektivet.

Angular støtter også MVC (Model View-kontroller) eller i det minste andre aspekter fra det designmønsteret. den kommer også med funksjoner som lar deg enkelt implementere testing: både enhetstesting og ende-til-ende-testing. Angular er fullpakket med funksjoner for å bygge front-end-applikasjoner på bedriftsnivå. React på den annen side inkluderer ikke mye i kjernen. Imidlertid kan ting legges til for å gi den funksjonene som Angular inkluderer ut-av-boksen pluss noen ekstra.

React bruker en virtuell DOM som er veldig kraftig. Den lager sin egen lettvektsversjon av selve Dom og inkluderer og oppdaterer bare det som trengs i stedet for å oppdatere hele greia. Virtual DOM er en hovedårsak til at React er lynraskt.

React bruker JSX som er kraftigere enn standardmaler fordi du kan legge absolutt hvilken som helst type JavaScript du vil ha i den. JSX er ikke nødvendig for å bruke React, men det gjør ting mye enklere. Jeg kan ikke komme på noen grunn til at du ikke vil bruke JSX med Angular også. React gjør også en veldig god jobb med å administrere komponenttilstand og egenskaper. Det gjør data veldig enkelt å jobbe med og overføre mellom komponentene. Å sende data mellom komponenter, Angular er mye vanskeligere enn å gjøre det i React.

Core React er vanskelig å opprettholde appnivåstatus. Component State er enkelt, men hvis du vil ha ekte appnivåstyring, trenger du Redux eller Flux, som jeg sa før er ganske forvirrende å lære. Eksterne pakker som ofte brukes som den nye React-ruteren versjon 4 er litt vanskelig å forstå, men den er også veldig kraftig når du først har lært å kjøre og sette den opp. Det er mange forskjellige måter å bruke den på. React har ikke en kjerne-HTTP-komponent slik Angular har, men du kan bruke Fetch eller Axios, som er en ekstern HTTP-klient, og da er Enzyme populært for å attestere React. Det er noen av de forskjellige pakkene som ofte brukes med React selv om de ikke er en del av det faktiske biblioteket.

Mens begge teknologiene deler en god del funksjoner, hvis du bare sammenligner kjerneteknologiene, er Angular vinneren.

Vinner: Angular

Verktøy

Angular og React har noen ganske fine kommandolinjegrensesnitt. Angular CLI og Create React-appen er begge ganske gode, og de lar oss virkelig strømlinjeforme utviklingen. Angular CLI er litt kraftigere fordi vi raskt kan generere ting som komponenter og tjenester. Create React kan ikke gjøre det. Du må lage alt selv så langt som filene og den grunnleggende strukturen. Begge systemene bruker webpakke, har sine egne utviklerservere for automatisk lasting og har kompilerings- og byggeverktøy. Åpenbart har Angular tilleggsoppgaven med å transpilere Typescript. CLI har et skript for det når vi kjører ng serve. Alt som skjedde bak kulissene. Den bruker noe som heter TSC eller Typescript Compiler for det, og begge har også testverktøy.

Funksjoner	Kantete	Reagere
Kommandolinjegrensesnitt	Kantet CLI	Lag React
Tilleggsoppgaver	Transpilerende skriveskrift	Ingen
Testing	Jasmin og Karma	Er

Hvis det er en full stack-applikasjon, så er disse veldig viktige. Du trenger ikke bruke dem. Du kan bygge en React-applikasjon helt fra bunnen av med webpakke. Disse gjør det mye enklere å ikke bare bygge applikasjonen, men også kompilere og bygge den ut for produksjon.

De er begge ganske jevne i den avdelingen.

Vinner: Angular

Økosystem

Som jeg sa har begge disse teknologiene sine egne økosystemer som nå sprer seg langt utover nettleseren.

Ionic er et populært hybridrammeverk som er en Angular-applikasjon som kjører inne i en innebygd innpakning for mobilapper. Du kan lage mobilapper ved å bruke Angular. Hybridapper kan være litt klønete sammenlignet med native applikasjoner. Brukeropplevelsen kan til tider ikke være så god – ikke så rask og responsiv. Blant de forskjellige hybridrammene er Ionic 3 den beste. Det er også NativeScript, som lar oss bygge ekte native apper for iOS og Android med Angular så vel som JavaScript.

Funksjoner	Kantete	Reagere
Hybrid apputvikling	Ionisk	*Ikke obligatorisk
Innebygd apputvikling	NativeScript	Reager Native
Gjengivelse på serversiden	Angular Universal	AT
Statens ledelsesbibliotek	NgRx butikk	Reax Redux, MobX
Material UI-bibliotek	Kantet materiale	Material-UI
Virtuell virkelighet	Reaktiv VR	AT

Ikke desto mindre ser ikke NativeScript ut til å være like bra som Facebooks React Native i det minste på dette tidspunktet. Angular har også et materialdesign-komponentbibliotek hvis du er en fan av materialdesign. Angular Universal er et frøprosjekt som kan brukes til å gjengi Angular på serversiden. Det er også NgRx-butikken som er et statlig administrasjonsbibliotek inspirert av Reax redux. Den er basert på tilstand mutert av peer-redusere. Den har også integrasjon med reaktive utvidelser.

Du ville ha lagt merke til. En gang gjør en av dem noe den andre kopierer på en annen måte. React og Angular har blitt Microsoft og Apple av JavaScript-rammeverk.

React har ganske økosystemet. Den har React native som er populær. Det er den beste måten å bygge mobilapper med nettteknologi. React Native er rask og mange av applikasjonene hvis de er bygget riktig, er de rett der oppe med native apper som er bygget på Swift eller Java. React har et materialdesignbibliotek kalt Material-UI som ligner på Angulars materialdesignkomponent, men mer modent. JS er et rammeverk for å gjengi React-applikasjoner på serversiden. Den har som mål å gjøre dette på enklest mulig måte, slik at dette kan sammenlignes med Angular Universal. MobX er en annen måte å administrere staten på. Det fungerer litt annerledes enn redux gjør. Den gir et sett med dekoratører for å definere observerbare og observatører, og den introduserer reaktiv logikk i staten din.

Storybook er et utviklingsmiljø for React. Den lar deg bla gjennom et komponentbibliotek, se forskjellige tilstander for hver komponent og interaktivt utvikle og teste komponenter. Reactive VR får React inn i virtuell virkelighet. React desktop er et JavaScript-bibliotek bygget på toppen av Reacts-biblioteket som visstnok bringer en naturlig skrivebordsopplevelse til nettet, med mange macOS- og Windows 10-komponenter. React-økosystemet er ekstremt stort og kraftig. React er på vei inn i alle aspekter av teknologi, og det er en klar vinner.

Vinner: Reager

Personene i dress og slips bruker Angular og hipsterne med det rufsete skjegget bruker React.

	AngularJS	Reagere
Hovedutviklere	Google	Facebook+Instagram
Alder	6 år	2 år
Utvidbarhet	Ja	Ja
Hastighet*	1.35 sekunder	310 millisekunder
DOM	Nettleser	Virtuell; gjengir bare endrede data med oppdateringsmekanisme
Arkitektur	Full MVC-rammeverk	Bare visningskomponenten
Læringskurve	Vanskelig i begynnelsen; krever kunnskap om spesifikt konsept som DOM-direktiver, filtre og fabrikker.	Lettere å starte; inneholder en forenklet API og syntaks
Struktur og komponenter	HTML, JS og CSS	Samme; men kan integrere HTML med JS, ved å bruke JSX

Bunnlinjen: Det er uavgjort

Hvis du velger mellom disse rammene, se på de forskjellige kategoriene og se hva som interesserer deg. Prøv dem begge og se hvilken du plukker opp raskere. Gjør litt mer research enn denne bloggen. Du kommer aldri til å få all informasjonen du trenger fra én blogg, så les litt mer.

Hvis du ser på et større økosystem som inkluderer utvikling av innebygd mobilapp, velg React uten å tenke to ganger. Hvis du er ute etter funksjoner, er Angular enorm. Det er flere funksjoner enn du trenger.