Ultimate JavaScripti raamistike võrdlus: Angular vs React

Peaaegu iga päev esitatakse mulle küsimus, kas ma peaksin alustama ReactJS-i või Angulariga? Kuid enne kui jätkan, lubage mul esitada teile lahtiütlus.

See ei ole ajaveeb, kus ma hakkan üht või teist põrgatama või ütlema, et peaksite alati kasutama ühte või teist. Iga arendaja ja iga projekt on täiesti erinevad ja neil on erinevad nõuded, nii et öelda, et peaksite alati kasutama ReactJS-i või alati kasutama Angular, on päris loll.

Loogiline argument

Võite väita, et Angular on raamistik ja React on tehniliselt omaette raamatukogu. Ma ei eita seda fakti, kuid see on argument, millesse ma praegu laskuda ei taha. Reactile saate lisada pakette, mis muudavad selle raamistikuks, mis konkureerib otseselt Angulariga. Me võrdleme kahte ökosüsteemi, mitte täpset raamistikku ja täpset raamatukogu.

Õppimiskõver

Alustame Angulariga. Veel üks lahtiütlus: kui ma ütlen Angular, siis räägin Angular 4-st, mitte AngularJS-ist.

Angular on suur raamistik, mis tähendab, et see on võimas ja sisaldab palju. Õppida on palju. Kuulete palju uut hirmutavat sõnavara, nagu sõltuvuse süstimine, direktiivide dekoraatorid, torud jne. Seejärel peate tegelema Typescriptiga, mis on JavaScript ja hunnik muid funktsioone, sealhulgas staatiline tippimine.

Angular on rohkem arvamusel kui React, mis on minu arvates üks eeliseid, sest Reactiga saate teha sama asja miljonil erineval viisil. Angularis on teatud asjade tegemiseks üldiselt üks või kaks võimalust, mis muudab selle jälgimise lihtsamaks ja annab palju selgemad juhised selle kohta, mida peaksite tegema.

Aga jällegi taandub see eelistustele. Sulle võib meeldida paindlikkus teha asju erineval viisil. Nagu ma mainisin, on ReactJS teek, kui me räägime ainult põhiteegist, see on palju väiksem ja palju lihtsam õppida kui Angular raamistik. Võite öelda, et õpite reageerima lühema ajaga. React on ise suurepärane vaateteek, kuid suurte rakenduste jaoks pole see isegi nii võimas. Kui soovite Reactis marsruutimist, valideerimist ja HTTP-päringuid, peate installima muud paketid ja see suurendab õppimiskõverat.

Kui vaatate kahe erineva arendaja Reacti koodi, näevad nad tõenäoliselt täiesti erinevad, olenemata sellest, kas nad teevad HTTP-päringuid või käitlevad olekut ja atribuute. Kõiki neid asju saab käsitleda väga erinevalt ja sageli võib see olla valel viisil.

Leiad parimad tavad ja kõik probleemid kaovad, kuid see lisab õppimiskõverat.

Erinevalt Angular Reactist ei kasutata malle. See kasutab midagi, mida nimetatakse JSX-iks või JavaScripti laiendiks või JavaScripti süntaksilaiendiks, mis võimaldab meil JavaScripti manustada HTML-i. Alguses võib see tunduda pisut veider. Eriti siis, kui teile ilmselt õpetati märgistust ja JavaScripti eraldama.

Mõelge sellele nagu HTML-i sisestamine JavaScripti sisse koos paari erineva muudatusega: te ei saa kasutada klassi atribuuti ja peate kasutama klassi nime.

Lõpuks on meil Redux. Reacti kasutatakse sageli koos Reduxi või Fluxiga, mis on rakenduse taseme olekuhaldurid. Minu arvates on Reduxil lihtsalt selle seadistamine väga raske ja selle mõistete õppimine on raske.

Ma arvan, et see on ülekasutatud. Ma arvan, et paljud arendajad kasutavad reduxit seal, kus seda pole vaja. Te ei vaja seda väiksemate rakenduste jaoks, kuid paljud arendajad nõuavad selle kasutamist. See taandub jällegi eelistustele. Redux on väga võimas, ma ei taha seda ära võtta. Õppimiskõverast rääkides on seda kuradi raske mõista.

Funktsioonid	Reageerige	Nurgeline
Programmeerimiskeel	JavaScript	TypeScript
Koodi struktuur	Arvamuslik	Paindlik
Põhiraamatukogu	Väike	Väga suur
Mallimine	JSX	HTML
Pädevus	Väikesed rakendused	Suuremahulised rakendused

Võitja: See on viik

Esitus

Angular to Reacti jõudlust pole aus võrrelda. Angular on täielik esi-tagasi raamistik, mis sisaldab marsruutimist, vormitööriistu, HTTP-teeki, reaktiivseid laiendusi jne. Kõik need funktsioonid ajavad raamistiku üles ja muudavad selle aeglasemaks. React ise on aga lihtsalt vaateteek, mis on palju väiksem ja kiirem.

Kui hakkate lisama selliseid pakette nagu ruuter, HTTP-klient või mis iganes, mida soovite oma Reacti rakendusele lisada, hakkab see veidi rohkem välja tulema, kus Angular asub ja seejärel saate hakata neid õiglaselt võrdlema, kuid isegi pärast seda React ikkagi võidab esitusosakonna. See on üldiselt väga kiire tehnoloogia.

Üleminek Angular 2-lt Angular 4-le kapoti all tegid nad jõudluse suurendamiseks üsna palju. Angular 4 toimib paremini kui Angular 2. Sellegipoolest võidab React jõudlusosakonnas.

Nurk vs reageerimine. Allikas: Academind.com

Võitja: reageerige

Funktsioonid

Mõlemal raamistikul on palju samu üldisi funktsioone ja eeliseid: nad korraldavad teie koodi, on komponendipõhised, pakuvad dünaamilist märgistust jne. Neid kasutatakse paljudeks samadeks asjadeks ja neil on ühine palju samu funktsioone.

Funktsioonid	AngularJS	Reageerige
Käivitamise kuupäev	2009	2013. aasta
Keel	TypeScript, JavaScript	JavaScript
Turuosa	0,3%	<0,1%
Mudel	Jah	Ei
Vaade	Jah	Jah
Kontroller	Jah	Ei
Õppimiskõver	Kompleksne	Lihtne
Mallimine	Jah	Ei
Ebaõnnestumine	Tööaeg	Koostamise aeg
Serveerimispool renderdamine	Ei	Jah
DOM	Jah	Virtuaalne
Mobiilne tugi	Jah	Jah
Serveerimispool renderdamine	Ei	Jah

Vaatleme mõnda üksikut funktsiooni. Angularil on ilmselgelt palju rohkem funktsioone kui Reactil. Lubage mul teile meelde tuletada, et me räägime kahest ökosüsteemist ja levinud pakettidest, mida Reactiga kasutatakse.

Angular on kõikehõlmav raamistik. Kaasas komponent ruuter, reaktiivsed laiendused vaadeldavate objektide jaoks, HTTP-klient, vormi moodul valideerimiseks ja nimekiri jätkub. Lisaks pakub see kahesuunalist andmete sidumist viisil, mida ükski teine ​​raamistik tegelikult ei tee. Andmete sidumine vaatest mudeliga on ng model direktiivi abil äärmiselt lihtne.

Angular toetab ka MVC-d (Model View kontroller) või vähemalt selle disainimustri erinevaid aspekte. sellega on kaasas ka funktsioonid, mis võimaldavad teil hõlpsasti testimist rakendada: nii üksuse testimist kui ka täielikku testimist. Angular on täis funktsioone ettevõtte tasemel esiotsa rakenduste loomiseks. Teisest küljest ei sisalda React oma tuumas palju. Siiski saab asju lisada, et anda sellele funktsioonid, mida Angular sisaldab juba karbist ja mõned täiendavad.

React kasutab virtuaalset DOM-i, mis on väga võimas. See loob tegeliku Domi oma kerge versiooni ning sisaldab ja värskendab ainult seda, mis on vajalik, selle asemel et värskendada kogu asja. Virtuaalne DOM on peamine põhjus, miks React on ülikiire.

React kasutab JSX-i, mis on võimsam kui standardsed mallid, kuna saate sellesse panna absoluutselt mis tahes tüüpi JavaScripti, mida soovite. JSX pole Reacti kasutamiseks vajalik, kuid see muudab asjad palju lihtsamaks. Ma ei suuda välja mõelda ühtegi põhjust, miks te ei kasutaks JSX-i ka Angulariga. React teeb ka väga head tööd komponentide oleku ja omaduste haldamisel. See muudab andmetega töötamise ja komponentide vahel liikumise väga lihtsaks. Andmete edastamine komponentide vahel on Angular palju keerulisem kui Reactis.

Core Reactil on rakenduse tasemel olekut raske säilitada. Komponendi olek on lihtne, kuid kui soovite tõelist rakenduse tasemel olekuhaldust, siis on teil vaja Reduxi või Fluxi, mida ma varem ütlesin, on päris segane õppida. Välised paketid, mida sageli kasutatakse nagu uus Reacti ruuteri versioon 4, on pisut raskesti mõistetavad, kuid see on ka väga võimas, kui õpite seda käivitama ja seadistama. Selle kasutamiseks on ka palju erinevaid viise. Reactil pole HTTP põhikomponenti nagu Angularil, kuid saate kasutada Fetch või Axios, mis on väline HTTP-klient ja seejärel on Reacti tõendamiseks populaarne Enzyme. Mõned erinevad paketid, mida tavaliselt Reactiga kasutatakse, kuigi need ei ole tegeliku teegi osa.

Kuigi mõlemal tehnoloogial on palju funktsioone, siis kui võrrelda põhitehnoloogiaid, on Angular võitja.

Võitja: Nurk

Tööriistad

Angularil ja Reactil on päris kenad käsurea liidesed. Angular CLI ja Create React App on mõlemad üsna suurepärased ja võimaldavad meil arendust sujuvamaks muuta. Angular CLI on pisut võimsam, kuna saame kiiresti genereerida selliseid asju nagu komponendid ja teenused. Loo React ei saa seda teha. Failide ja põhistruktuurini tuleb kõik ise luua. Mõlemad süsteemid kasutavad veebipaketti, neil on oma automaatse laadimise arendusserverid ning kompileerimis- ja koostamistööriistad. Ilmselgelt on Angularil lisaülesanne Typescripti ülekandmine. CLI-l on selle jaoks skript, kui käivitame teenindamise. Kõik see, mis toimus kulisside taga. See kasutab selleks midagi nimega TSC või Typescript Compiler ja mõlemal on ka testimisriistad.

Funktsioonid	Nurgeline	Reageerige
Käsurea liides	Nurgaline CLI	Loo React
Lisaülesanded	Masinakirja ümberkirjutamine	Mitte ühtegi
Testimine	Jasmiin ja karma	On

Kui see on täispakki rakendus, on need tõesti olulised. Te ei pea neid kasutama. Veebipaketi abil saate Reacti rakenduse luua juba algusest peale. Need muudavad palju lihtsamaks mitte ainult rakenduse loomise, vaid ka selle kompileerimise ja tootmiseks ehitamise.

Nad on mõlemad kenad isegi selles osakonnas.

Võitja: Nurk

Ökosüsteem

Nagu ma ütlesin, on mõlemal tehnoloogial oma ökosüsteemid, mis levivad nüüd veebibrauserist kaugemale.

Ionic on populaarne hübriidraamistik, mis on Angular-rakendus, mis töötab mobiilirakenduste jaoks mõeldud ümbrises. Angulari abil saate luua mobiilirakendusi. Hübriidrakendused võivad omarakendustega võrreldes olla pisut kohmakad. Kasutajakogemus ei pruugi mõnikord olla nii suurepärane – mitte nii kiire ja tundlik. Erinevate hübriidraamistike seas on Ionic 3 parim. Samuti on olemas NativeScript, mis võimaldab meil luua tõelisi kohalikke rakendusi iOS-i ja Androidi rakendusi nii Angulari kui ka JavaScriptiga.

Funktsioonid	Nurgeline	Reageerige
Hübriidrakenduste arendamine	Iooniline	*Pole nõutud
Omarakenduste arendus	NativeScript	Reageerige emakeelena
Serveripoolne renderdamine	Nurgaline universaalne	SEE
Riigijuhtimise raamatukogu	NgRx pood	Reax Redux, MobX
Materjali kasutajaliidese raamatukogu	Nurgeline materjal	Materjal-UI
Virtuaalne reaalsus	Reaktiivne VR	SEE

Sellegipoolest ei tundu NativeScript vähemalt praegu nii hea kui Facebooki React Native. Angularil on ka materjalidisaini komponentide raamatukogu, kui olete materjalidisaini fänn. Angular Universal on algprojekt, mida saab kasutada Angulari renderdamiseks serveri poolel. Seal on ka NgRx pood, mis on Reax reduxist inspireeritud riigihalduse raamatukogu. See põhineb kaaslaste reduktorite poolt muteeritud olekul. Sellel on ka integratsioon Reactive laiendustega.

Oleksite märganud. Kord teeb üks neist midagi, mida teine ​​kopeerib teistmoodi. Reactist ja Angularist on saanud JavaScripti raamistikud Microsoft ja Apple.

Reactil on üsna ökosüsteem. Sellel on React native, mis on populaarne. See on parim viis veebitehnoloogiate abil mobiilirakenduste loomiseks. React Native on kiire ja paljud rakendused, kui need on õigesti üles ehitatud, on Swiftile või Javale üles ehitatud omarakendustega kohe olemas. Reactil on materjalikujunduse raamatukogu nimega Material-UI, mis sarnaneb Angulari materjalidisaini komponendiga, kuid on küpsem. JS on serveripoolsete Reacti rakenduste renderdamise raamistik. Selle eesmärk on teha seda võimalikult lihtsal viisil, et seda saaks võrrelda Angular Universaliga. MobX on veel üks viis oleku haldamiseks. See töötab natuke teistmoodi kui redux. See pakub dekoraatorite komplekti vaadeldavate objektide ja vaatlejate määratlemiseks ning tutvustab teie olekus reaktiivloogikat.

Storybook on Reacti arenduskeskkond. See võimaldab teil sirvida komponentide teeki, vaadata iga komponendi erinevaid olekuid ning interaktiivselt arendada ja testida komponente. Reactive VR viib Reacti virtuaalreaalsusesse. React desktop on JavaScripti teek, mis on üles ehitatud Reactsi teegile, mis väidetavalt toob veebi natiivse töölauakogemuse, mis sisaldab paljusid macOS-i ja Windows 10 komponente. Reacti ökosüsteem on äärmiselt suur ja võimas. React on jõudmas tehnoloogia igasse aspekti ja on selge võitja.

Võitja: reageerige

Ülikondades ja lipsudes inimesed kasutavad Angularit ning räsitud habemega hipsterid Reacti.

	AngularJS	Reageerige
Peamised arendajad	Google	Facebook+Instagram
Vanus	6 aastat	2 aastat
Laiendatavus	Jah	Jah
Kiirus*	1,35 sekundit	310 millisekundit
DOM	Brauser	Virtuaalne; ainult muudab muudetud andmed paikamismehhanismiga
Arhitektuur	Täielik MVC raamistik	Ainult vaate komponent
Õppimiskõver	Alguses raske; nõuab teadmisi konkreetsete kontseptsioonide kohta, nagu DOM-i direktiivid, filtrid ja tehased.	Lihtsam alustada; sisaldab lihtsustatud API-d ja süntaksit
Struktuur ja komponendid	HTML, JS ja CSS	Sama; kuid saab integreerida HTML-i JS-iga, kasutades JSX-i

Alumine rida: see on lips

Kui otsustate nende raamistike vahel, vaadake erinevaid kategooriaid ja vaadake, mis teid huvitab. Proovige neid mõlemaid ja vaadake, kumma neist kiiremini valite. Uurige rohkem kui see blogi. Te ei saa kunagi ühest blogist kogu vajalikku teavet, nii et lugege rohkem.

Kui vaatate suuremat ökosüsteemi, mis hõlmab ka natiivse mobiilirakenduse arendamist, valige React ilma kaks korda mõtlemata. Kui otsite funktsioone, on Angular tohutu. Funktsioone on rohkem kui vaja.