När tekniken blomstrar exponentiellt, så gör webbutveckling.
När du tänker på JavaScript ekosystem, Angular och React kommer att dyka upp nästan omedelbart i ditt sinne eftersom de anses vara två av de mest populära Front-end-utvecklingsramarna. Men hur man väljer mellan båda? Ska du först titta på projektkraven för att fatta ett korrekt beslut? Eller ta hänsyn till dess popularitet och uppstartstid i ett tidigt skede?
För att hjälpa dig att hitta ett svar på dessa frågor kommer jag att dela med mig av min senaste personliga erfarenhet. JAG byggt en front-end för samma tillämpning i båda ramarna som gjorde det möjligt att rösta om vilka spel att köpa till PlayStation 4 som vi har på Imaginära moln Lissabon-kontoret.
Baserat på min erfarenhet av Angular kontra React, och för att klargöra dina tvivel eller frågor kommer jag att jämföra dessa ramar när det gäller popularitet över tid, huvudskillnader mellan dem, inlärningskurvor och deras övergripande njutbarhet.
kantig är ett webbramverk utvecklat och underhållet av Google som släpptes under namnet AngularJS redan 2010. Vid den tiden, det blev en av de mest populära webb- och JavaCript-ramarna. Detta berodde främst på dess funktioner som tvåvägs databindning och beroendeinjektion, och naturligtvis genom att backas upp av en teknisk jätte.
Under 2013, Reagera blev ett JavaScript-bibliotek med öppen källkod som stöds av Facebook. Detta ramverk populariserade ett koncept inom webbutveckling som kallas komponentbaserad arkitektur med React-komponenter.
React tog snabbt marknaden med storm och överskuggade de flesta ramverk vid den tiden, inklusive AngularJS. Därför uppgraderade Google 2016 sitt JavaScript-ramverk som en följd av samhällets entusiasm för den komponentbaserade arkitekturen: de kallade det Angular2.
Innan du bestämmer dig för vilket ramverk som ska användas är det klokt att titta på dess popularitet. Ju större och aktiv en gemenskap är, ju snabbare det blir att hitta en lösning för alla oväntade problem som kommer i din väg. Enligt de uppgifter jag kunde samla i skrivande stund uppstår olika resultat när det gäller hur populärt varje ramverk är övertid. Så vad är Skillnaden mellan Angular och React?
På Github, medan Reacts förvar har 207 000 stjärnor, hade Angular nästan 88.1k stjärnor. Detta visar att båda har en mycket stor gemenskap bakom sig, eftersom de håller sig på toppen av de mest stjärnmärkta förvaren.
Ett annat intressant ämne är antalet npm (Node pakethanterare) nedladdningar.
Som vi kan se i diagrammet ovan, React har fler npm nedladdningar än Angular sedan 2015. Antalet fortsätter att växa, i motsats till Angular, som tenderar att stagnera.
Källa: Stackoverflow 2022 undersökning
Om vi tittar på Stackoverflow 2022 undersökning, vi kan observera att när det gäller webbramar föredrar 42,6% av de svarande React, medan 20,3% använder Angular istället. Vidare illustrerar denna undersökning också att Angular, trots att det är en av de mest populära webbramarna, anses också vara den mest fruktade. Faktiskt, Angular har fler frågor taggade än sin rival. Detta kan förklaras eftersom man i allmänhet kan hitta Angular mer komplex än React. i alla fall, Jag upplevde inga problem hitta svar på tvivel eller frågor som kom upp, antingen för Angular eller React.
Källa: Hacker News Trender för tekniska verktyg
Om vi tittar på ovanstående diagram kan vi se att Angular var före React, när det gäller arbetsmarknaden, fram till slutet av 2015. Vid den tiden var Angular ett moget ramverk medan React fortfarande var en ny teknik. På senare tid, med häftig popularitet, React överträffade Angular.
Detta kan förklaras av några faktorer som:
Sammanfattningsvis, även om React är mer gynnad, kan vi se att båda är mycket populära.
Även om båda ramarna använder komponentbaserad arkitektur och delar många likheter, de skiljer sig också på många sätt.
För att du ska få en tydligare uppfattning om vad de viktigaste skillnaderna är tog jag upp tabellen nedan. Låt oss ta en närmare titt:
Å ena sidan består Angular av en Fullständigt ramverk för mjukvaruutveckling. Således kräver det vanligtvis inte ytterligare bibliotek eftersom funktioner som databindning, projektgenerering, komponentbaserad routing, beroendeinjektion och formulärvalidering ingår i Angulars paket. Dessutom erbjuder Angular en stark åsikt om applikationens struktur. Dessutom ger det olika inbyggda små bibliotek, vilket kan vara särskilt användbart när man bygger komplexa applikationer.
Å andra sidan är React en ramverk för UI-utveckling. Därför kräver appar skrivna med React implementering av ytterligare bibliotek. Följaktligen, att använda React ger mer frihet att organisera koden som man vill. Men det bryr sig främst om View on MVC-arkitektur och behöver Flux för att implementera denna arkitektur.
Databindning består av datasynkroniseringsprocessen mellan Model och View. Angular använder a dubbelriktad databindning process och föränderliga data. Detta innebär att när ändringar i användargränssnittets indata inträffar, då kommer modelltillståndet också att ändras och vice versa.
Tvärtom, React fungerar med en enkelriktad (eller enkelriktad) databindning process. Således ändrar en UI-elementmodifiering inte tillståndet för en komponent, vilket kan förbättra felsökningsprocessen.
Angular kan använda TypeScript, en superset av JavaScript och ett statiskt typat språk. I TypeScript är skrivfel lättare att upptäcka och totalt sett är koden lättare att navigera.
React kan skrivas i JavaScript ES6+ kombinerat med JSX-skript, som består av ett tillägg för syntax, vilket gör en JavaScript-kod identisk med HTML. För att kompilera JSX-koden i en webbläsare kan React kompletteras med ett kodöversättningsverktyg (t.ex. Babel). Vidare kan React också skrivas i TypeScript, men det ingår inte inbyggt.
Angular tillhandahåller olika materialdesignkomponenter, med olika layouter, knappar, popup-fönster och så vidare. Detta möjliggör en sömlös och snabb UI-konfiguration.
När du använder React är det nödvändigt att installera Material-UI-bibliotek och beroenden att använda tillgängliga materialkonstruktionskomponenter. Dessa UI-verktyg är utvecklade av samhället och erbjuder ett stort utbud av UI-komponenter (med både gratis och betalda alternativ).
Beroendeinjektion är en programmeringsteknik som används när klasser får referenser till andra klasser (beroenden). Till skillnad från React stöder Angular beroendeinjektion, vilket gör att den kan ha distinkta livscykler för olika butiker. Istället stöder React inte helt beroendeinjektion, med ett globalt tillstånd för alla komponenter, vilket inte överensstämmer med dataoföränderlighet och begreppet funktionell programmering.
Om en DOM (Dokumentobjektmodell) är nytt för dig, ta en smygtitt på vår Vue.js vs React blogginlägg, där vi förklarar DOM på ett mer detaljerat sätt. Lång historia kort, DOM är en graf som representerar den aktuella vyn som en användare ser i webbläsaren. Webbutvecklare manipulerar DOM för att ändra vad användarna ser, men dessa manipuleringar är kostsamma när det gäller prestanda. Det är därför båda ramarna försöker minimera kostnaden för dessa operationer, optimerar hur DOM återger vyn efter en uppdatering.
Sanningen ska sägas, båda ramarna använder DOM. Men medan Angular använder en riktig DOM, använder React en virtuell DOM. I Angulars fall uppdateras hela trädstrukturen när en modifiering görs. Ändå kompenserar Angular för sin nackdel genom att använda förändringsdetektering för att identifiera komponenter som kräver ändringar. Å andra sidan, med hjälp av en virtuell DOM, kan React implementera förändringar i ett enda element utan att uppdatera hela trädstrukturen.
React verkar ha en fördel jämfört med Angular i körtidsprestanda på grund av de virtuella DOM-träden, som är byggda på server och mycket lätta, vilket inte laddar webbläsaren mycket. Vidare, med React, databindningsprocessen är enkelriktad, vilket innebär att bindningar inte tilldelas bevakare, och följaktligen minskar arbetsbelastningen.
Detsamma händer inte med Angular. Eftersom det har en dubbelriktad databindningsprocess, varje bindning kräver en observatör för att spåra modifieringar, och varje slinga kvarstår tills alla tittare (och respektive värden) bekräftas. Därför kan Angulars prestanda påverkas negativt av den dubbelriktade databindningsprocessen. Det kan dock förändras med tillägg och förbättring av ny teknik Murgröna till Angular.
Från vad vi kan se har Angular andra funktioner än React. Också, React är mer beroende av ett statshanteringsbibliotek. I den meningen, bibliotek som Helmet, Redux, och React Router kan optimera tillståndshanteringsprocesserna, interaktionen med API och routing. Däremot kräver Angular inte ytterligare bibliotek och integrerar flera funktioner (t.ex. databindning, projektgenerering och komponentbaserad routing) i sitt paket. Men om så önskas kan den använda hjälp av statshanteringsbibliotek (som NGRX och RxJS) för att förbättra dess funktioner.
I början av detta decennium blomstrade smartphones. I samband med detta framkom behovet av att göra webbappar anpassningsbara till mindre skärmar, via responsivt användargränssnitt. Detta innebar en utmaning för dessa tekniker, eftersom de måste underlätta mobilintegration och samtidigt tillåta utvecklare att fortsätta använda en tech-stack som de redan känner till.
Dessa ramverk underlättar återanvändning av kod, mellan webb- och mobilapplikationer, och de kan erbjuda en bra körtidsprestanda nästan lika bra som inbyggda applikationer.
Båda Angular och React erbjuder plattformsoberoende ramverk för mobilapplikationer, även om vi i Angular inte har officiellt stöd för utveckling av mobilappar.
I Angular är de mest populära plattformarna för att bygga mobilapplikationer Jonisk och NativeScript, i React finns det ett officiellt ramverk som stöds av Facebook som är React Native. Jag måste nämna det React Native tar rampljuset i detta. Förutom att vara den mest använda för mobil är dess prestanda också närmast inbyggda applikationer.
Här på Imaginärt moln Vi tar våra lunchpauser på ett roligt sätt! Vi har nämnt det tidigare, men ifall du bara landar här nu har vi en PlayStation 4 på vårt kontor i Lissabon och vi gör det mesta av vår fritid med att spela några spel. Chillstunder spelar roll, rätt? Men detta ledde oss till en fråga: med så många åsikter delade, hur kunde vi bestämma vilka spel vi skulle köpa?
Efter lite brainstorming bestämde vi oss för att skapa en liten webbplats som kunde låta oss lägga till spelförslag och rösta upp våra favoriter. Detta skulle göra våra liv enklare eftersom vi kunde spåra de mest populära. Eftersom jag var angelägen om att lära mig hur de skiljer sig åt i implementering bestämde jag mig för att bygga det i Angular och React.
Som praktikant var min tidigare erfarenhet främst med vanilj JavaScript, HTML och CSS, så ja, jag var tvungen att lära mig båda ramarna från grunden.
Jag hade ett RESTful API som kunde kommunicera med front-end genom REST-förfrågningar och skicka svar in JSON.
Denna ansökan hade följande krav:
Jag vet vad du tänker: att lära sig något från grunden kan vara överväldigande, särskilt om du känner att din bakgrund inte kan ge dig stort stöd. Oroa dig inte, jag kände så också.
Först, att hantera en komponentbaserad arkitektur var lite krångel eftersom jag aldrig arbetat med det förut. Trots det, när jag började förstå och dyka djupare in i det, blev det mycket enklare och enklare än jag förväntade mig.
Viss forskning var definitivt nödvändig för att bestämma vilket ramverk som skulle användas först. Spoilervarning: Jag bestämde mig för att börja med React. Vi kommer dit om en minut, men först, låt oss ta en titt på Angular.
När jag började med Angular hittade jag det svårare att arbeta än React. Angular har många begrepp och syntax att lära sig. Men dess handledning spelade en stor roll för att påskynda den uppstartsprocessen när jag började bygga min applikation.
Angulars dokumentation är mycket längre, eftersom det har fler inbyggda bibliotek och funktioner eftersom Angular försöker lösa fler problem än React. Jag fann också att Angular är mycket mer utförlig, som det har en mer boilerplattekod.
Jag utnyttjade också många bibliotek som Angular tillhandahåller. Till exempel Vinkel/material, som låter dig ha komplexa komponenter utan att behöva implementera dem och det är inspirerat av Googles materialdesign. Jag använde också Vinkel/router, för att hålla mitt användargränssnitt synkroniserat med URL.
I Angular är det ovanligt att använda CSS i JavaScript, eftersom det redan har komponenten CSS-fil, så jag behövde inte söka efter några bibliotek för att tillämpa en stil på mina komponenter.
När du använder Vinkel/Vanlig/HTTP, Jag upplevde några problem. Det lät mig inte skapa autentiserade förfrågningar, eftersom det inte var inställt Förfalskning av begäran mellan webbplatser (CSRF) i förfrågningshuvudet. Jag undersökte mycket och försökte hitta en lösning på detta, men på grund av Angulars dåliga dokumentation för den här modulen, Jag kunde bara inte. Från vad jag har sett är det mycket vanligt att ha det här problemet med det här biblioteket. Eftersom de föreslagna lösningarna jag kunde hitta på Internet inte lyckades använde jag Axios istället. Det var ganska enkelt att ställa in eftersom jag arbetade med det tidigare i Reacts applikation.
Jag använde också ett tillståndshanteringsbibliotek i Angular för att hjälpa mig hantera mitt applikationstillstånd. Det gjorde det möjligt för mig att ha mer kontroll över applikationen vilket gjorde det lättare att upptäcka fel. Jag valde att använda NGRx, vilket är mycket identiskt med Redux vilket gör övergången smidigare.
Sammanfattningsvis använde jag följande bibliotek i Angular:
Till att börja med behövde jag lära mig den nya syntaxen som React ger: JSX. Ärligt talat tyckte jag inte att det var svårt eftersom jag gillade konceptet att ha all komponentens kod i samma fil.
En av mina första strider var hur man gör REST-förfrågningar till back-end. För det bestämde jag mig för att använda Axios.
, Jag började undra hur jag skulle återge innehåll enligt webbadressen. Detta är mycket vanligt i Single-Page Applications (SPA) och för att lösa detta behövde jag en router. Med detta i åtanke bestämde jag mig för att gå med det vanliga React-routingbiblioteket, vilket är React Router. Det har ett mycket bra exempel på deras webbplats och jag hade inga problem med att arbeta med det.
Eftersom React bara bryr sig om vyn var min applikation inte reaktiv. I början var jag inte bekant med den här typen av problem, eftersom jag bara arbetade med Model-View-Controller (MVC) ramverk. Sedan upptäckte jag Flux: en arkitektur som Facebook uppfann för att lösa detta problem. I grund och botten främjar det enkelriktat dataflöde genom en butik som sparar applikationens aktuella tillstånd - en åtgärd som är en begäran om att ändra applikationstillståndet och en reducerare för att utföra denna begäran.
För att implementera denna arkitektur fann jag Redux. Att lära sig att konfigurera och använda det var definitivt det svåraste när du arbetar med React.
Jag ville att webbplatsen skulle se tilltalande ut, men eftersom det inte var kärnan i projektet använde jag Material-UI, ett bibliotek som liknar Angular/material. Deras dokumentation är enorm. Lyckligtvis behövde jag inte gräva för djupt för att få det att fungera.
Jag valde också att använda Stilkomponenter som gör att du enkelt kan exportera snygga komponenter. Detta bibliotek har en mycket enkel syntax och gör komponenter mer läsbara när man jämför med React inline styling.
Sammanfattningsvis använde jag följande bibliotek i React:
Angular har verkligen Bra och lång dokumentation och många funktioner inbyggda, som låter dig bygga komplexa applikationer utan att söka efter några paket från tredje part. Det har dock en mycket brantare inlärningskurva, vilket leder till en längre uppstartstid. Programmerare som kommer från traditionella statiskt typade OOP-språk som C ++, C # eller Java kan ha roligare att arbeta med Angular, eftersom TypeScript har en liknande syntax som dessa språk.
Med tanke på dess enkelhet och syntaxen för JSX (som jag föredrar), Jag hade verkligen en bättre tid att utveckla i React snarare än i Angular. Trots att du i React måste lära dig många tredjepartspaket för att bygga en komplex applikation (som du kanske tycker är tråkig) och att dokumentationen är mycket kortare, har den bra kvalitet med massor av exempel. Enligt Stackoverflow-undersökningen 2019 utvecklare föredrar starkt React som ett av deras mest älskade ramverk, förklaras av dess enklare inlärningskurva.
Baserat på min forskning och i det utvecklade projektet kan jag konstatera att:
För detta specifika projekt, React var det bästa alternativet att gå. Dess enkelhet gjorde det lättare att lära sig, roligt att arbeta med och det jämnade övergången till komponentbaserad arkitektur - för nykomlingar som jag var detta en extremt värdefull hjälp. Emellertid för komplexa och längre projekt passar Angular bättre eftersom det låter dig ha explicita typer och upptäcka fel i kompileringstiden.
Med tanke på så många ramar att välja mellan, var och en med sina egna särdrag, kan det bli ett tufft uppdrag att bestämma sig för rätt ram. Vi kände det tidigare när vi bestämde oss för bygga applikationen i Vue.js först och nu när man överväger Angular.
När vi är mellan Angular eller React tror jag att det mest handlar om personliga preferenser, eftersom de löser samma problem men med olika implementeringar.
Men i beslutsprocessen är det viktigt att ta hänsyn till React har en enklare inlärningskurva, vilket leder till snabbare utveckling, medan Angular har fler inbyggda funktioner.
Båda teknikerna är mycket kraftfulla, en tydlig förbättring från de tidiga dagarna av webbprogrammering som förbättrar, underlättar och påskyndar utvecklingen.
I den här artikeln pratade jag om Angular vs React baserat på en webbapp som jag utvecklade från grunden, med båda ramarna.
F: Är Angular bättre än React?
A: Det beror i slutändan på de specifika behoven och kraven i ditt projekt. Medan Angular föredras av vissa utvecklare och kan vara bättre lämpad för vissa typer av projekt, till exempel storskaliga företagsapplikationer, är React också ett kraftfullt och allmänt använt bibliotek som erbjuder en mer flexibel och anpassningsbar strategi för utveckling. I slutändan bör valet mellan Angular och React baseras på noggrann övervägning av faktorer som projektomfattning, teamexpertis och utvecklingsmål.
F: Varför föredras Angular framför React?
S: Angular föredras framför React i vissa fall eftersom det ger ett mer meningsfullt och strukturerat tillvägagångssätt för utveckling, med inbyggda verktyg för att hantera tillstånd, routing och andra vanliga uppgifter. Detta kan göra det lättare att underhålla och skala stora applikationer, särskilt i företagsinställningar.
F: Ska jag byta till Angular från React?
S: Huruvida du ska byta från React till Angular beror på de specifika behoven i ditt projekt och dina personliga preferenser som utvecklare. Det kan vara värt att överväga om du arbetar med ett storskaligt företagsprojekt eller om du föredrar en mer opinionerad strategi för utveckling.
F: Är Angular lättare än React?
S: Angular anses generellt ha en brantare inlärningskurva än React på grund av dess mer komplexa syntax och inbyggda funktioner. Detta kan dock variera beroende på den enskilda utvecklarens tidigare erfarenhet och kompetens.
Vid Imaginärt moln Vi har erfarna mjukvaruutvecklare inom Angular och React. Behöver en boost i bygga din webbapplikation i någon av dessa tekniker? Hör av dig!
Hittade den här artikeln användbar? Du kanske gillar dessa också!
Mjukvaruutvecklare med intresse för teknik som förenklar våra liv, som Python och JavaScript. Också en gymentusiast på fritiden.
Mjukvaruutvecklare med stor nyfikenhet på teknik och hur det påverkar vårt liv. Kärlek till sport, musik, och lärande!
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
