Jämförelse av The Ultimate JavaScript Frameworks: Angular vs React

En fråga som jag får nästan dagligen är att ska jag börja med ReactJS eller Angular? Men innan jag går vidare, låt mig ge dig en ansvarsfriskrivning.

Det är inte en blogg där jag kommer att slå det ena eller det andra eller säga att man alltid ska använda det ena framför det andra. Varje utvecklare och varje projekt är helt olika och de har olika krav så att säga att du alltid ska använda ReactJS eller alltid använda Angular är ganska dumt.

Det logiska argumentet

Du kan hävda att Angular är ett ramverk och att React tekniskt sett är ett bibliotek i sig. Jag förnekar inte detta faktum, men detta är argumentet jag inte vill gå in på just nu. Det finns paket du kan lägga till i React som gör det till ett ramverk som direkt konkurrerar med Angular. Vi jämför de två ekosystemen, inte det exakta ramverket kontra det exakta biblioteket.

Inlärningskurvan

Låt oss börja med Angular. Ännu en ansvarsfriskrivning: när jag säger Angular pratar jag om Angular 4 inte AngularJS.

Angular är ett stort ramverk vilket betyder att det är kraftfullt och det innehåller mycket. Det finns mycket att lära. Du kommer att få höra många nya skrämmande ordförråd som beroendeinjektion, direktivdekoratörer, rör, etc. Sedan måste du ta itu med Typescript, som är JavaScript plus en massa andra funktioner inklusive statisk typning.

Angular är mer egensinnig än React, vilket är en av fördelarna enligt mig eftersom man med React kan göra samma sak på miljontals olika sätt. Med Angular finns det i allmänhet ett eller två sätt att göra vissa saker, vilket gör det lättare att följa, ger dig mycket tydligare instruktioner om vad du ska göra.

Men återigen, det handlar om preferenser. Du kanske gillar flexibiliteten att göra saker på olika sätt. Som jag nämnde är ReactJS ett bibliotek om vi bara pratar om kärnbiblioteket, det är mycket mindre och mycket lättare att lära sig än Angular-ramverket. Du kan säga att du kommer att lära dig React på kortare tid. React är ett fantastiskt vybibliotek i sig men det är inte ens i närheten av lika kraftfullt för stora applikationer. Om du vill ha routing, validering, HTTP-förfrågningar i React, måste du installera andra paket och det bidrar till inlärningskurvan.

Om du tittar på React-kod från två olika utvecklare kommer de förmodligen att se helt olika ut oavsett om de gör HTTP-förfrågningar eller hanterar tillstånd och egenskaper. Allt det där kan hanteras väldigt olika och många gånger kan det vara på fel sätt.

Du hittar de bästa metoderna och alla problem försvinner men det bidrar till inlärningskurvan.

Till skillnad från Angular React använder inte mallar. Den använder något som kallas JSX eller JavaScript-tillägg eller JavaScript-syntaxtillägg, vilket gör att vi kan bädda in HTML i JavaScript. Till en början kan detta verka lite konstigt. Speciellt när du förmodligen fick lära dig att separera din markering och ditt JavaScript.

Tänk på det som att lägga HTML inuti JavaScript med ett par olika ändringar: du kan inte använda class-attributet och du måste använda class name.

Slutligen har vi Redux. React används ofta med Redux eller Flux som är applikationsnivåer som är tillståndshanterare. Enligt min åsikt är Redux jättesvårt att bara sätta upp det och lära sig begreppen för det är svårt.

Jag tror att den är överanvänd. Jag tror att många utvecklare använder redux där det inte behövs. Du behöver det inte för mindre applikationer men många utvecklare insisterar på att använda det. Det handlar återigen om preferenser. Redux är väldigt kraftfullt, jag vill inte ta bort det. När man pratar om inlärningskurvan är det jävligt svårt att förstå.

Funktioner	Reagera	Vinkel
Programmeringsspråk	JavaScript	TypeScript
Kodstruktur	Påstridig	Flexibel
Kärnbibliotek	Små	Väldigt stor
Mallar	JSX	HTML
Kompetens	Små applikationer	Storskaliga applikationer

Vinnare: Det är oavgjort

Prestanda

Det är inte rättvist att direkt jämföra prestandan för Angular to React. Angular är ett komplett fram-till-bak-ramverk som inkluderar routing, formulärverktyg, HTTP-bibliotek, reaktiva tillägg, etc. Alla dessa funktioner blåser upp ramverket och gör det långsammare. Reagera är dock i sig bara ett vybibliotek, som är mycket mindre och snabbare.

När du väl börjar lägga till paket som routern, HTTP-klienten eller vad du nu ska lägga till i din React-applikation så börjar det komma upp lite mer till var Angular är och sedan kan du börja jämföra dem rättvist men även efter det React fortfarande vinner prestationsavdelningen. Det är en väldigt snabb teknik i allmänhet.

Bytet från Angular 2 till Angular 4 under huven gjorde en hel del för att öka prestandan. Angular 4 presterar bättre än Angular 2. Ändå vinner React fortfarande i prestationsavdelningen.

Angular vs React. Källa: Academind.com

Vinnare: Reagera

Funktioner

Båda ramverken har mycket av samma allmänna funktioner och fördelar: de organiserar din kod, de är komponentbaserade, de erbjuder dynamisk uppmärkning, etc. De är vana vid att göra många av samma saker, och de delar en många av samma funktioner.

Funktioner	AngularJS	Reagera
Lanseringsdag	2009	2013
Språk	TypeScript, JavaScript	JavaScript
Marknadsandel	0,3 %
Modell	Ja	Nej
Se	Ja	Ja
Kontroller	Ja	Nej
Inlärningskurva	Komplex	Lätt
Mallar	Ja	Nej
Fel	Körning	Kompileringstid
Server-side-rendering	Nej	Ja
DOM	Ja	Virtuell
Mobilsupport	Ja	Ja
Server-side-rendering	Nej	Ja

Vi kommer att titta på några av de individuella funktionerna. Angular har uppenbarligen mycket fler funktioner än React i sin kärna. Låt mig påminna dig om att vi pratar om två ekosystem och vanliga paket som används med React.

Angular är ett ramverk som ingår. Den levereras med komponentrouter, reaktiva tillägg för observerbara, en HTTP-klient, en formulärmodul för validering och listan fortsätter. Dessutom erbjuder den tvåvägsdatabindning på ett sätt som inget annat ramverk verkligen gör. Att binda data från vyn till modellen är extremt enkelt med hjälp av ng modelldirektivet.

Angular stöder också MVC (Model View controller) eller åtminstone andra aspekter från det designmönstret. den kommer också med funktioner som gör att du enkelt kan implementera testning: både enhetstestning och end-to-end-testning. Angular är fullspäckad med funktioner för att bygga front-end-applikationer på företagsnivå. React å andra sidan innehåller inte mycket i kärnan. Saker kan dock läggas till för att ge den de funktioner som Angular innehåller färdiga plus några ytterligare.

React använder en virtuell DOM som är mycket kraftfull. Den skapar sin egen lätta version av den faktiska Domen och inkluderar och uppdaterar bara det som behövs istället för att uppdatera hela grejen. Virtual DOM är en viktig anledning till att React är blixtsnabbt.

React använder JSX som är kraftfullare än standardmallar eftersom du kan lägga in absolut vilken typ av JavaScript du vill i den. JSX krävs inte för att använda React men det gör saker och ting mycket enklare. Jag kan inte komma på någon anledning till varför du inte skulle använda JSX med Angular också. React gör också ett riktigt bra jobb med att hantera komponenttillstånd och egenskaper. Det gör data verkligen lätt att arbeta med och föra runt mellan komponenter. Att skicka data mellan komponenter, Angular är mycket svårare än att göra det i React.

Core React är svårt att upprätthålla appnivåstatus. Component State är lätt men om du vill ha äkta app-nivåtillståndshantering så behöver du Redux eller Flux, vilket jag sa tidigare är ganska förvirrande att lära sig. Externa paket som ofta används som den nya React router version 4 är lite svåra att förstå men det är också väldigt kraftfullt när man väl lärt sig att köra och ställa in det. Det finns många olika sätt att använda det också. React har ingen kärn-HTTP-komponent som Angular har, men du kan använda Fetch eller Axios, som är en extern HTTP-klient och då är Enzyme populärt för att attestera React. Det finns några av de olika paketen som ofta används med React även om de inte är en del av det faktiska biblioteket.

Även om båda teknologierna delar ett stort antal funktioner, om du bara jämför kärnteknikerna, är Angular vinnaren.

Vinnare: Angular

Verktyg

Angular och React har några ganska trevliga kommandoradsgränssnitt. Angular CLI och Create React-appen är båda ganska bra och de tillåter oss verkligen att effektivisera utvecklingen. Angular CLI är lite kraftfullare eftersom vi snabbt kan generera saker som komponenter och tjänster. Create React kan inte göra det. Du måste skapa allt själv så långt som filerna och grundstrukturen. Båda systemen använder webbpaket, har sina egna utvecklarservrar för automatisk laddning och har kompilerings- och byggverktyg. Uppenbarligen har Angular den extra uppgiften att transpilera Typescript. CLI har ett skript för det när vi kör ng serve. Allt som hände bakom kulisserna. Den använder något som kallas TSC eller Typescript Compiler för det och båda har också testverktyg.

Funktioner	Vinkel	Reagera
Kommandoradsgränssnitt	Vinkel CLI	Skapa React
Ytterligare uppgifter	Transpilerande typskrift	Ingen
Testning	Jasmin och Karma	Det finns

Om det är en fullstack-applikation så är dessa verkligen viktiga. Du behöver inte använda dem. Du kan bygga en React-applikation bara från grunden med webbpaket. Dessa gör det mycket lättare att inte bara bygga applikationen utan också kompilera och bygga ut den för produktion.

De är båda ganska jämna på den avdelningen.

Vinnare: Angular

Ekosystem

Som jag sa har båda dessa teknologier sina egna ekosystem som nu sprider sig långt utanför webbläsaren.

Ionic är ett populärt hybridramverk som är en Angular-applikation som körs i en inbyggd omslag för mobilappar. Du kan skapa mobilappar med Angular. Hybridappar kan vara lite klumpiga jämfört med inbyggda applikationer. Användarupplevelsen kan ibland inte vara så bra – inte lika snabb och lyhörd. Bland de olika hybridramverken är Ionic 3 den bästa. Det finns också NativeScript, som låter oss bygga äkta inbyggda appar för iOS och Android med Angular såväl som JavaScript.

Funktioner	Vinkel	Reagera
Hybrid apputveckling	Jonisk	*Inte nödvändig
Inbyggd apputveckling	NativeScript	Reager Native
Rendering på serversidan	Angular Universal	DET DÄR
Statens förvaltningsbibliotek	NgRx butik	Reax Redux, MobX
Material UI-bibliotek	Kantigt material	Material-UI
Virtuell verklighet	Reaktiv VR	DET DÄR

Ändå verkar NativeScript inte vara lika bra som Facebooks React Native åtminstone vid det här laget. Angular har också ett materialdesignkomponentbibliotek om du är ett fan av materialdesign. Angular Universal är ett såddprojekt som kan användas för att rendera Angular på serversidan. Det finns också NgRx butik som är ett statligt förvaltningsbibliotek inspirerat av Reax redux. Det är baserat på tillstånd muterat av peer-reducerare. Den har också integration med Reactive extensions.

Du skulle ha märkt. En gång gör en av dem något som den andra kopierar på ett annat sätt. React och Angular har blivit Microsoft och Apples JavaScript-ramverk.

React har ett ganska ekosystem. Den har React native som är populär. Det är det bästa sättet att bygga mobilappar med webbteknik. React Native är snabb och många av applikationerna om de byggs rätt, de finns där med inbyggda appar som är byggda på Swift eller Java. React har ett materialdesignbibliotek som heter Material-UI som ungefär liknar Angulars materialdesignkomponent men mer mogen. JS är ett ramverk för att rendera React-applikationer på serversidan. Det syftar till att göra detta på enklast möjliga sätt så att det här kan jämföras med Angular Universal. MobX är ett annat sätt att hantera tillstånd. Det fungerar lite annorlunda än redux gör. Det tillhandahåller en uppsättning dekoratörer för att definiera observerbara och observatörer och den introducerar reaktiv logik i ditt tillstånd.

Storybook är en utvecklingsmiljö för React. Det låter dig bläddra i ett komponentbibliotek, se olika tillstånd för varje komponent och interaktivt utveckla och testa komponenter. Reactive VR får React till virtuell verklighet. React desktop är ett JavaScript-bibliotek byggt ovanpå Reacts-biblioteket som förmodligen ger en inbyggd skrivbordsupplevelse till webben, med många macOS- och Windows 10-komponenter. Reacts ekosystem är extremt stort och kraftfullt. React är på väg in i alla aspekter av teknik och det är en klar vinnare.

Vinnare: Reagera

Människorna i kostymer och slipsar använder Angular och hipsters med de tråkiga skäggen använder React.

	AngularJS	Reagera
Huvudutvecklare	Google	Facebook+Instagram
Ålder	6 år	2 år
Sträckbarhet	Ja	Ja
Fart*	1.35 sekunder	310 millisekunder
DOM	Webbläsare	Virtuell; återger endast ändrad data med patchmekanism
Arkitektur	Fullständig MVC-ram	Bara vykomponenten
Inlärningskurva	Svårt i början; kräver kunskap om specifika koncept som DOM-direktiv, filter och fabriker.	Lättare att starta; innehåller ett förenklat API och syntax
Struktur och komponenter	HTML, JS och CSS	Samma; men kan integrera HTML med JS, med JSX

Sammanfattning: Det är en slips

Om du väljer mellan dessa ramverk, titta på de olika kategorierna och se vad som intresserar dig. Prova båda och se vilken du tar snabbare. Gör lite mer research än den här bloggen. Du kommer aldrig att få all information du behöver från en blogg så läs lite mer.

Om du tittar på ett större ekosystem som inkluderar utveckling av inbyggd mobilapp, välj React utan att tänka två gånger. Om du är ute efter funktioner är Angular enorm. Det finns fler funktioner än du behöver.