\n En fr\u00e5ga som jag f\u00e5r n\u00e4stan dagligen \u00e4r att ska jag b\u00f6rja med ReactJS eller Angular? Men innan jag g\u00e5r vidare, l\u00e5t mig ge dig en ansvarsfriskrivning.\n<\/p>\n
\n Det \u00e4r inte en blogg d\u00e4r jag kommer att sl\u00e5 det ena eller det andra eller s\u00e4ga att man alltid ska anv\u00e4nda det ena framf\u00f6r det andra. Varje utvecklare och varje projekt \u00e4r helt olika och de har olika krav s\u00e5 att s\u00e4ga att du alltid ska anv\u00e4nda ReactJS eller alltid anv\u00e4nda Angular \u00e4r ganska dumt.\n<\/p>\n
\n Du kan h\u00e4vda att Angular \u00e4r ett ramverk och att React tekniskt sett \u00e4r ett bibliotek i sig. Jag f\u00f6rnekar inte detta faktum, men detta \u00e4r argumentet jag inte vill g\u00e5 in p\u00e5 just nu. Det finns paket du kan l\u00e4gga till i React som g\u00f6r det till ett ramverk som direkt konkurrerar med Angular. Vi j\u00e4mf\u00f6r de tv\u00e5 ekosystemen, inte det exakta ramverket kontra det exakta biblioteket.\n<\/p>\n
\n L\u00e5t oss b\u00f6rja med Angular. \u00c4nnu en ansvarsfriskrivning: n\u00e4r jag s\u00e4ger Angular pratar jag om Angular 4 inte AngularJS.\n<\/p>\n
\n Angular \u00e4r ett stort ramverk vilket betyder att det \u00e4r kraftfullt och det inneh\u00e5ller mycket. Det finns mycket att l\u00e4ra. Du kommer att f\u00e5 h\u00f6ra m\u00e5nga nya skr\u00e4mmande ordf\u00f6rr\u00e5d som beroendeinjektion, direktivdekorat\u00f6rer, r\u00f6r, etc. Sedan m\u00e5ste du ta itu med Typescript, som \u00e4r JavaScript plus en massa andra funktioner inklusive statisk typning.\n<\/p>\n
\n Angular \u00e4r mer egensinnig \u00e4n React, vilket \u00e4r en av f\u00f6rdelarna enligt mig eftersom man med React kan g\u00f6ra samma sak p\u00e5 miljontals olika s\u00e4tt. Med Angular finns det i allm\u00e4nhet ett eller tv\u00e5 s\u00e4tt att g\u00f6ra vissa saker, vilket g\u00f6r det l\u00e4ttare att f\u00f6lja, ger dig mycket tydligare instruktioner om vad du ska g\u00f6ra.\n<\/p>\n
\n Men \u00e5terigen, det handlar om preferenser. Du kanske gillar flexibiliteten att g\u00f6ra saker p\u00e5 olika s\u00e4tt. Som jag n\u00e4mnde \u00e4r ReactJS ett bibliotek om vi bara pratar om k\u00e4rnbiblioteket, det \u00e4r mycket mindre och mycket l\u00e4ttare att l\u00e4ra sig \u00e4n Angular-ramverket. Du kan s\u00e4ga att du kommer att l\u00e4ra dig React p\u00e5 kortare tid. React \u00e4r ett fantastiskt vybibliotek i sig men det \u00e4r inte ens i n\u00e4rheten av lika kraftfullt f\u00f6r stora applikationer. Om du vill ha routing, validering, HTTP-f\u00f6rfr\u00e5gningar i React, m\u00e5ste du installera andra paket och det bidrar till inl\u00e4rningskurvan.\n<\/p>\n
\n Om du tittar p\u00e5 React-kod fr\u00e5n tv\u00e5 olika utvecklare kommer de f\u00f6rmodligen att se helt olika ut oavsett om de g\u00f6r HTTP-f\u00f6rfr\u00e5gningar eller hanterar tillst\u00e5nd och egenskaper. Allt det d\u00e4r kan hanteras v\u00e4ldigt olika och m\u00e5nga g\u00e5nger kan det vara p\u00e5 fel s\u00e4tt.\n<\/p>\n
\n Du hittar de b\u00e4sta metoderna och alla problem f\u00f6rsvinner men det bidrar till inl\u00e4rningskurvan.\n<\/p>\n
\n Till skillnad fr\u00e5n Angular React anv\u00e4nder inte mallar. Den anv\u00e4nder n\u00e5got som kallas JSX eller JavaScript-till\u00e4gg eller JavaScript-syntaxtill\u00e4gg, vilket g\u00f6r att vi kan b\u00e4dda in HTML i JavaScript. Till en b\u00f6rjan kan detta verka lite konstigt. Speciellt n\u00e4r du f\u00f6rmodligen fick l\u00e4ra dig att separera din markering och ditt JavaScript.\n<\/p>\n
\n T\u00e4nk p\u00e5 det som att l\u00e4gga HTML inuti JavaScript med ett par olika \u00e4ndringar: du kan inte anv\u00e4nda class-attributet och du m\u00e5ste anv\u00e4nda class name.\n<\/p>\n
\n Slutligen har vi Redux. React anv\u00e4nds ofta med Redux eller Flux som \u00e4r applikationsniv\u00e5er som \u00e4r tillst\u00e5ndshanterare. Enligt min \u00e5sikt \u00e4r Redux j\u00e4ttesv\u00e5rt att bara s\u00e4tta upp det och l\u00e4ra sig begreppen f\u00f6r det \u00e4r sv\u00e5rt.\n<\/p>\n
\n Jag tror att den \u00e4r \u00f6veranv\u00e4nd. Jag tror att m\u00e5nga utvecklare anv\u00e4nder redux d\u00e4r det inte beh\u00f6vs. Du beh\u00f6ver det inte f\u00f6r mindre applikationer men m\u00e5nga utvecklare insisterar p\u00e5 att anv\u00e4nda det. Det handlar \u00e5terigen om preferenser. Redux \u00e4r v\u00e4ldigt kraftfullt, jag vill inte ta bort det. N\u00e4r man pratar om inl\u00e4rningskurvan \u00e4r det j\u00e4vligt sv\u00e5rt att f\u00f6rst\u00e5.\n<\/p>\n
| \n Funktioner<\/span><\/span>\n <\/td>\n | \n Reagera<\/span><\/span>\n <\/td>\n | \n Vinkel<\/span><\/span>\n <\/td>\n<\/tr>\n| \n Programmeringsspr\u00e5k<\/span><\/span>\n <\/td>\n | \n JavaScript<\/span><\/span>\n <\/td>\n | \n TypeScript<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kodstruktur<\/span><\/span>\n <\/td>\n | \n P\u00e5stridig<\/span><\/span>\n <\/td>\n | \n Flexibel<\/span><\/span>\n <\/td>\n<\/tr>\n | \n K\u00e4rnbibliotek<\/span><\/span>\n <\/td>\n | \n Sm\u00e5<\/span><\/span>\n <\/td>\n | \n V\u00e4ldigt stor<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Mallar<\/span><\/span>\n <\/td>\n | \n JSX<\/span><\/span>\n <\/td>\n | \n HTML<\/span><\/span>\n <\/td>\n<\/tr>\n | \n Kompetens<\/span><\/span>\n <\/td>\n | \n Sm\u00e5 applikationer<\/span><\/span>\n <\/td>\n | \n Storskaliga applikationer<\/span><\/span>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n | \n Vinnare: Det \u00e4r oavgjort<\/strong>\n<\/p>\n \n Det \u00e4r inte r\u00e4ttvist att direkt j\u00e4mf\u00f6ra prestandan f\u00f6r Angular to React. Angular \u00e4r ett komplett fram-till-bak-ramverk som inkluderar routing, formul\u00e4rverktyg, HTTP-bibliotek, reaktiva till\u00e4gg, etc. Alla dessa funktioner bl\u00e5ser upp ramverket och g\u00f6r det l\u00e5ngsammare. Reagera \u00e4r dock i sig bara ett vybibliotek, som \u00e4r mycket mindre och snabbare.\n<\/p>\n \n N\u00e4r du v\u00e4l b\u00f6rjar l\u00e4gga till paket som routern, HTTP-klienten eller vad du nu ska l\u00e4gga till i din React-applikation s\u00e5 b\u00f6rjar det komma upp lite mer till var Angular \u00e4r och sedan kan du b\u00f6rja j\u00e4mf\u00f6ra dem r\u00e4ttvist men \u00e4ven efter det React fortfarande vinner prestationsavdelningen. Det \u00e4r en v\u00e4ldigt snabb teknik i allm\u00e4nhet.\n<\/p>\n \n Bytet fr\u00e5n Angular 2 till Angular 4 under huven gjorde en hel del f\u00f6r att \u00f6ka prestandan. Angular 4 presterar b\u00e4ttre \u00e4n Angular 2. \u00c4nd\u00e5 vinner React fortfarande i prestationsavdelningen.\n<\/p>\n \n \n Vinnare: Reagera<\/strong>\n<\/p>\n \n B\u00e5da ramverken har mycket av samma allm\u00e4nna funktioner och f\u00f6rdelar: de organiserar din kod, de \u00e4r komponentbaserade, de erbjuder dynamisk uppm\u00e4rkning, etc. De \u00e4r vana vid att g\u00f6ra m\u00e5nga av samma saker, och de delar en m\u00e5nga av samma funktioner.\n<\/p>\n \n Vi kommer att titta p\u00e5 n\u00e5gra av de individuella funktionerna. Angular har uppenbarligen mycket fler funktioner \u00e4n React i sin k\u00e4rna. L\u00e5t mig p\u00e5minna dig om att vi pratar om tv\u00e5 ekosystem och vanliga paket som anv\u00e4nds med React.\n<\/p>\n \n Angular \u00e4r ett ramverk som ing\u00e5r. Den levereras med komponentrouter, reaktiva till\u00e4gg f\u00f6r observerbara, en HTTP-klient, en formul\u00e4rmodul f\u00f6r validering och listan forts\u00e4tter. Dessutom erbjuder den tv\u00e5v\u00e4gsdatabindning p\u00e5 ett s\u00e4tt som inget annat ramverk verkligen g\u00f6r. Att binda data fr\u00e5n vyn till modellen \u00e4r extremt enkelt med hj\u00e4lp av ng modelldirektivet.\n<\/p>\n \n Angular st\u00f6der ocks\u00e5 MVC (Model View controller) eller \u00e5tminstone andra aspekter fr\u00e5n det designm\u00f6nstret. den kommer ocks\u00e5 med funktioner som g\u00f6r att du enkelt kan implementera testning: b\u00e5de enhetstestning och end-to-end-testning. Angular \u00e4r fullsp\u00e4ckad med funktioner f\u00f6r att bygga front-end-applikationer p\u00e5 f\u00f6retagsniv\u00e5. React \u00e5 andra sidan inneh\u00e5ller inte mycket i k\u00e4rnan. Saker kan dock l\u00e4ggas till f\u00f6r att ge den de funktioner som Angular inneh\u00e5ller f\u00e4rdiga plus n\u00e5gra ytterligare.\n<\/p>\n \n React anv\u00e4nder en virtuell DOM som \u00e4r mycket kraftfull. Den skapar sin egen l\u00e4tta version av den faktiska Domen och inkluderar och uppdaterar bara det som beh\u00f6vs ist\u00e4llet f\u00f6r att uppdatera hela grejen. Virtual DOM \u00e4r en viktig anledning till att React \u00e4r blixtsnabbt.\n<\/p>\n \n React anv\u00e4nder JSX som \u00e4r kraftfullare \u00e4n standardmallar eftersom du kan l\u00e4gga in absolut vilken typ av JavaScript du vill i den. JSX kr\u00e4vs inte f\u00f6r att anv\u00e4nda React men det g\u00f6r saker och ting mycket enklare. Jag kan inte komma p\u00e5 n\u00e5gon anledning till varf\u00f6r du inte skulle anv\u00e4nda JSX med Angular ocks\u00e5. React g\u00f6r ocks\u00e5 ett riktigt bra jobb med att hantera komponenttillst\u00e5nd och egenskaper. Det g\u00f6r data verkligen l\u00e4tt att arbeta med och f\u00f6ra runt mellan komponenter. Att skicka data mellan komponenter, Angular \u00e4r mycket sv\u00e5rare \u00e4n att g\u00f6ra det i React.\n<\/p>\n \n Core React \u00e4r sv\u00e5rt att uppr\u00e4tth\u00e5lla appniv\u00e5status. Component State \u00e4r l\u00e4tt men om du vill ha \u00e4kta app-niv\u00e5tillst\u00e5ndshantering s\u00e5 beh\u00f6ver du Redux eller Flux, vilket jag sa tidigare \u00e4r ganska f\u00f6rvirrande att l\u00e4ra sig. Externa paket som ofta anv\u00e4nds som den nya React router version 4 \u00e4r lite sv\u00e5ra att f\u00f6rst\u00e5 men det \u00e4r ocks\u00e5 v\u00e4ldigt kraftfullt n\u00e4r man v\u00e4l l\u00e4rt sig att k\u00f6ra och st\u00e4lla in det. Det finns m\u00e5nga olika s\u00e4tt att anv\u00e4nda det ocks\u00e5. React har ingen k\u00e4rn-HTTP-komponent som Angular har, men du kan anv\u00e4nda Fetch eller Axios, som \u00e4r en extern HTTP-klient och d\u00e5 \u00e4r Enzyme popul\u00e4rt f\u00f6r att attestera React. Det finns n\u00e5gra av de olika paketen som ofta anv\u00e4nds med React \u00e4ven om de inte \u00e4r en del av det faktiska biblioteket.\n<\/p>\n \n \u00c4ven om b\u00e5da teknologierna delar ett stort antal funktioner, om du bara j\u00e4mf\u00f6r k\u00e4rnteknikerna, \u00e4r Angular vinnaren.\n<\/p>\n \n Vinnare: Angular<\/strong>\n<\/p>\n \n Angular och React har n\u00e5gra ganska trevliga kommandoradsgr\u00e4nssnitt. Angular CLI och Create React-appen \u00e4r b\u00e5da ganska bra och de till\u00e5ter oss verkligen att effektivisera utvecklingen. Angular CLI \u00e4r lite kraftfullare eftersom vi snabbt kan generera saker som komponenter och tj\u00e4nster. Create React kan inte g\u00f6ra det. Du m\u00e5ste skapa allt sj\u00e4lv s\u00e5 l\u00e5ngt som filerna och grundstrukturen. B\u00e5da systemen anv\u00e4nder webbpaket, har sina egna utvecklarservrar f\u00f6r automatisk laddning och har kompilerings- och byggverktyg. Uppenbarligen har Angular den extra uppgiften att transpilera Typescript. CLI har ett skript f\u00f6r det n\u00e4r vi k\u00f6r ng serve. Allt som h\u00e4nde bakom kulisserna. Den anv\u00e4nder n\u00e5got som kallas TSC eller Typescript Compiler f\u00f6r det och b\u00e5da har ocks\u00e5 testverktyg.\n<\/p>\n \n Om det \u00e4r en fullstack-applikation s\u00e5 \u00e4r dessa verkligen viktiga. Du beh\u00f6ver inte anv\u00e4nda dem. Du kan bygga en React-applikation bara fr\u00e5n grunden med webbpaket. Dessa g\u00f6r det mycket l\u00e4ttare att inte bara bygga applikationen utan ocks\u00e5 kompilera och bygga ut den f\u00f6r produktion.\n<\/p>\n \n De \u00e4r b\u00e5da ganska j\u00e4mna p\u00e5 den avdelningen.\n<\/p>\n \n Vinnare: Angular<\/strong>\n<\/p>\n \n Som jag sa har b\u00e5da dessa teknologier sina egna ekosystem som nu sprider sig l\u00e5ngt utanf\u00f6r webbl\u00e4saren.\n<\/p>\n \n Ionic \u00e4r ett popul\u00e4rt hybridramverk som \u00e4r en Angular-applikation som k\u00f6rs i en inbyggd omslag f\u00f6r mobilappar. Du kan skapa mobilappar med Angular. Hybridappar kan vara lite klumpiga j\u00e4mf\u00f6rt med inbyggda applikationer. Anv\u00e4ndarupplevelsen kan ibland inte vara s\u00e5 bra \u2013 inte lika snabb och lyh\u00f6rd. Bland de olika hybridramverken \u00e4r Ionic 3 den b\u00e4sta. Det finns ocks\u00e5 NativeScript, som l\u00e5ter oss bygga \u00e4kta inbyggda appar f\u00f6r iOS och Android med Angular s\u00e5v\u00e4l som JavaScript.\n<\/p>\n \n \u00c4nd\u00e5 verkar NativeScript inte vara lika bra som Facebooks React Native \u00e5tminstone vid det h\u00e4r laget. Angular har ocks\u00e5 ett materialdesignkomponentbibliotek om du \u00e4r ett fan av materialdesign. Angular Universal \u00e4r ett s\u00e5ddprojekt som kan anv\u00e4ndas f\u00f6r att rendera Angular p\u00e5 serversidan. Det finns ocks\u00e5 NgRx butik som \u00e4r ett statligt f\u00f6rvaltningsbibliotek inspirerat av Reax redux. Det \u00e4r baserat p\u00e5 tillst\u00e5nd muterat av peer-reducerare. Den har ocks\u00e5 integration med Reactive extensions.\n<\/p>\n \n Du skulle ha m\u00e4rkt. En g\u00e5ng g\u00f6r en av dem n\u00e5got som den andra kopierar p\u00e5 ett annat s\u00e4tt. React och Angular har blivit Microsoft och Apples JavaScript-ramverk.\n<\/p>\n \n React har ett ganska ekosystem. Den har React native som \u00e4r popul\u00e4r. Det \u00e4r det b\u00e4sta s\u00e4ttet att bygga mobilappar med webbteknik. React Native \u00e4r snabb och m\u00e5nga av applikationerna om de byggs r\u00e4tt, de finns d\u00e4r med inbyggda appar som \u00e4r byggda p\u00e5 Swift eller Java. React har ett materialdesignbibliotek som heter Material-UI som ungef\u00e4r liknar Angulars materialdesignkomponent men mer mogen. JS \u00e4r ett ramverk f\u00f6r att rendera React-applikationer p\u00e5 serversidan. Det syftar till att g\u00f6ra detta p\u00e5 enklast m\u00f6jliga s\u00e4tt s\u00e5 att det h\u00e4r kan j\u00e4mf\u00f6ras med Angular Universal. MobX \u00e4r ett annat s\u00e4tt att hantera tillst\u00e5nd. Det fungerar lite annorlunda \u00e4n redux g\u00f6r. Det tillhandah\u00e5ller en upps\u00e4ttning dekorat\u00f6rer f\u00f6r att definiera observerbara och observat\u00f6rer och den introducerar reaktiv logik i ditt tillst\u00e5nd.\n<\/p>\n \n Storybook \u00e4r en utvecklingsmilj\u00f6 f\u00f6r React. Det l\u00e5ter dig bl\u00e4ddra i ett komponentbibliotek, se olika tillst\u00e5nd f\u00f6r varje komponent och interaktivt utveckla och testa komponenter. Reactive VR f\u00e5r React till virtuell verklighet. React desktop \u00e4r ett JavaScript-bibliotek byggt ovanp\u00e5 Reacts-biblioteket som f\u00f6rmodligen ger en inbyggd skrivbordsupplevelse till webben, med m\u00e5nga macOS- och Windows 10-komponenter. Reacts ekosystem \u00e4r extremt stort och kraftfullt. React \u00e4r p\u00e5 v\u00e4g in i alla aspekter av teknik och det \u00e4r en klar vinnare.\n<\/p>\n \n Vinnare: Reagera<\/strong>\n<\/p>\n \n Om du v\u00e4ljer mellan dessa ramverk, titta p\u00e5 de olika kategorierna och se vad som intresserar dig. Prova b\u00e5da och se vilken du tar snabbare. G\u00f6r lite mer research \u00e4n den h\u00e4r bloggen. Du kommer aldrig att f\u00e5 all information du beh\u00f6ver fr\u00e5n en blogg s\u00e5 l\u00e4s lite mer.\n<\/p>\n \n Om du tittar p\u00e5 ett st\u00f6rre ekosystem som inkluderar utveckling av inbyggd mobilapp, v\u00e4lj React utan att t\u00e4nka tv\u00e5 g\u00e5nger. Om du \u00e4r ute efter funktioner \u00e4r Angular enorm. Det finns fler funktioner \u00e4n du beh\u00f6ver.\n<\/p>\n<\/p>\n |