Samanburður á milli AngularJS VS React árið 2018

Í þessari grein erum við að bera saman 2 vinsælustu tæknina fyrir framþróunina: Hyrnd og bregðast við. Við ætlum að bera saman þá frá sjónarhóli verkefnisins og frá sjónarhóli verktaki sem og sjónarhóli fyrirtækja.

Að bera saman hyrnd og bregðast við er mjög vinsælt umræðuefni nú á dögum. React og Angular eru bæði mjög háþróuð, vel notuð JavaScript tækni sem við notum til að búa til móttækileg vefforrit og gagnvirkt forrit á einni síðu. Fjöldi JavaScript verkfæra fyrir hraðvirka einnar blaðsíðna umsóknar (SPAs) þróun er stöðugt að aukast. Svo það er erfiðara að velja réttan ramma fyrir vefur verktaki.

Helsti munurinn á AngularJS (Framework) og React (bókasafninu) er samsetning, gagnabinding, árangur, ósjálfstæði, tilskipanir og sniðmát. Við skulum skoða hvert þessara atriða í smáatriðum.

Hyrndur JS

Hyrnd útgáfa 2 og hærri hefur verið minna en að bregðast við, en ef þú telur í sögu forvera síns, AngularJS, myndin þróast. Google er viðhaldið og notað í Analytics, AdWords og Google Fiber. Þar sem AdWords er eitt af lykilverkefnum Google er ljóst að þeir hafa lagt mikið upp úr því og ólíklegt er að það hverfi fljótlega.

Bregðast við

React er þróað og viðhaldið af Facebook og einnig notað í vörur sínar eins og Instagram og WhatsApp. Það hefur staðið yfir í um það bil fjögur og hálft ár núna, svo það er ekki alveg nýtt. Það er líka eitt vinsælasta verkefnið á GitHub, með um 92.000 stjörnur þegar þetta er skrifað. Hljómar vel.

Íhlutun

Hyrndur JS

AngularJS er með mjög flókna og fasta uppbyggingu vegna þess að hún er byggð á fyrirmynd-Skoða-Controller arkitektúr dæmigerður fyrir eins blaðsíðna forrit. Hlutur $ umfangs í AngularJS er ábyrgur fyrir fyrirmyndarhlutanum sem er frumstilla af stjórnandanum og síðan umbreytt í HTML til að búa til View fyrir notandann. AngularJS býður upp á marga staðlaða þjónustu, verksmiðjur, stýringar, tilskipanir og aðra íhluti.

Við brjótum kóðann í nokkrar skrár í AngularJS. Til dæmis, þegar við búum til einnota hluti með eigin tilskipun, stjórnandi og sniðmát, verðum við að lýsa hverri klump kóða í sérstakri skrá. Þegar við höfum lýst tilskipun okkar bætum við svo við hlekk á sniðmátið okkar í tilskipuninni til að para þessa hluti. Tilskipanir AngularJS tákna sniðmátafræði fyrir umsókn þína. Sniðmátið er HTML útvíkkað með tilskipunum AngularJS, almennt skrifaðar sem merkingar eða eiginleikar. Við bætum einnig við stjórnendum til að veita gerðum okkar nauðsynlega $ umfang eða samhengi. Stýringar eru líka skrifaðir í aðskildar skrár. Þegar við mótum umsókn okkar á þann hátt getum við endurnýtt sniðmát okkar eða íhlut á öðrum hluta vefsíðunnar og það er mjög gagnlegt fyrir AngularJS þróunarfyrirtækið vegna þess að það sparar mikinn tíma og flýtir fyrir þróunarferlinu.

Bregðast við

Það er engin „rétt“ uppbygging fyrir forrit smíðuð með React. Það er stórt JavaScript bókasafn sem hjálpar okkur að uppfæra View fyrir notandann. En React leyfir okkur samt ekki að búa til forrit á eigin spýtur. Bókasafnið skortir líkan og stjórnandi lög. Til að fylla í skarðinn kynnti Facebook Flux, sem er með fjölmörg afbrigði núorðið, til að stjórna verkflæði forritsins.

React veitir mjög einfaldan og skilvirkan hátt til að byggja hluti tré. Það státar af hagnýtum forritunarstíl þar sem skilgreiningar á íhlutum eru lýsandi. Að semja appið þitt frá React íhlutum er eins og að semja JavaScript forrit úr aðgerðum.

Gagnabinding

Í MVC mynstrum er bindingin mikilvægasta umræðuefnið til að koma gögnum í einstaka eða tvístefnu flæði. Upplýsingabinding er samstillingarferli gagna sem vinna milli líkansins og skoða hluti.

Hyrndur JS

Gagnabinding í Angular forritum er sjálfvirk samstilling gagna milli líkansins og sýnishlutanna. Hvernig Angular útfærir gagnabindingu gerir þér kleift að meðhöndla líkanið sem eina sannleiksgildi í umsókn þinni. Útsýnið er vörpun líkansins á öllum tímum. Þegar líkanið breytist endurspeglar útsýnið breytinguna og öfugt.
 Það er einfaldlega viðhengi gagna frá Model to View eða öfugt á samstillingar hátt þannig að hvenær sem einhver breyting verður á einhverju fyrirmynd eða view, þá ætti annað að sýna breytinguna og þetta er sync.

Bregðast við

Besti eiginleikinn sem bregðast við er Virtual-Dom. Hvarfið sprautar gögnum inn í endurskoðaðar skoðanir sínar á smíðartíma, verið að þegar rótarsýnin er búin til eða í gegnum hreiðurskoðun. React notar ein leið gagnabindingar, sem þýðir að við erum fær um að beina flæði gagna aðeins í eina átt. Inni í bekknum er hægt að nálgast gögnin sem liðin eru um eiginleikana leikmunir í núverandi samhengi.

Frammistaða

Hyrndur JS

Það er tvennt sem þarf að hafa í huga þegar við tölum um frammistöðu Angular. Eins og við nefndum áður treysta Hyrndur 1.x og hærri á tvíhliða gagnabindingu. Þetta hugtak er byggt á „óhreinum stöðvun“, vélbúnaði sem getur gert AngularJS umsóknarþróun okkar trega.

Þegar við bindum gildi í HTML við líkan okkar, býr AngularJS til að sjá fyrir hverja bindingu til að fylgjast með breytingum á DOM. Þegar View hefur uppfært sig, samanburðar AngularJS nýja gildið við upphafsgildið og keyrir $ meltingarlykkjuna. $ Meltan lykkjan athugar þá ekki aðeins gildi sem hafa í raun breyst, heldur einnig öll önnur gildi sem eru rakin í gegnum áhorfendur. Þess vegna mun árangur minnka mikið ef umsóknin þín hefur of marga áhorfendur.

Annar annmarki á AngularJS rammanum er hvernig það vinnur með DOM. Ólíkt React beitir AngularJS breytingum á raunverulegu DOM í vafranum. Þegar raunverulegur DOM er uppfærður þarf vafrinn að breyta mörgum innri gildum til að tákna nýjan DOM. Þetta hefur einnig neikvæð áhrif á árangur umsóknar.
 Léleg frammistaða er helsta ástæðan fyrir því að stuðningsmenn Angular 2 unnu að nýju hvernig Angular breytir áætluninni. Angular 2 og nýjustu Angular 4 rammaútgáfurnar eru einnig með netútgáfu netþjóna og ein leið gagnabinding á svipaðan hátt og React. Enn, Angular 2 og 4 bjóða upp á tvíhliða gagnabindingu sem valkost.

Bregðast við

React kynnti hugtakið sýndar DOM, sem er einn mesti kostur React í samanburði við AngularJS. Hvernig virkar sýndar DOM? Þegar HTML skjalið okkar er hlaðið skapar React létt DOM tré úr JavaScript hlutum og vistar það á netþjóninum. Þegar notandinn færir inn ný gögn á svæðið í vafranum býr React til nýjan sýndar DOM og ber þá saman við áður vistaða DOM. Bókasafnið finnur ágreining milli tveggja mótmæla módel á þann hátt og endurbyggir sýndar DOM aftur, en með nýju breyttu HTML. Öll þessi vinna er unnin á netþjóninum, sem dregur úr álaginu á vafranum.

Nú, í stað þess að senda alveg nýjan HTML í vafrann, sendir React HTML aðeins fyrir breytta þáttinn. Þessi aðferð er mun skilvirkari en það sem AngularJS býður upp á.

Að leysa háð

Hyrndur JS

Dependency Injection er hugbúnaðarhönnunarmynstur þar sem íhlutum er veitt háðir í stað þess að harka kóða þá í íhlutanum. Þetta léttir þætti frá því að finna ánauðarástandið og gerir ósjálfstæði stillanlegar. Þetta hjálpar til við að gera íhluti einnota, viðhalds og prófa.
 AngularJS finnur sjálfkrafa viðeigandi hluti sem sprautaðir eru sem $ routeParams, $ filter, store, og $ scope breytur. Það eru tvær aðgerðir sem gera háð innspýting mögulega í AngularJS umgjörðinni: $ sprauta og $ veita.

Bregðast við

Munurinn á React og AngularJS með tilliti til innspýtingar á ánauðar er að React býður ekki upp á neitt hugtak um innbyggt ílát til innspýtingar í ánauðar. En það þýðir ekki að við verðum að hugsa um aðferð til að sprauta okkur í ósjálfstæði í React verkefninu. Þú getur notað nokkur tæki til að sprauta sjálfkrafa í ósjálfstæði í React forriti. Slík tæki eru Browserify, RequireJS, ECMAScript 6 einingar sem við getum notað í gegnum Babel, ReactJS-di, og svo framvegis. Eina áskorunin er að velja tæki til að nota.

Tilskipanir og sniðmát

Hyrndur JS

Tilskipanir í AngularJS eru leið til að skipuleggja kóðann okkar í kringum DOM. Ef við vinnum með AngularJS, fáum við aðgang að DOM aðeins með tilskipunum. AngularJS hefur margar staðlaðar tilskipanir, svo sem ng-bind eða ng-app, en stundum gerum við okkar eigin tilskipanir í AngularJS um að setja gögn inn í sniðmát. Sniðmátið verður að vera með frumefni með tilskipun okkar skrifað sem eiginleiki. Það er eins einfalt og það. En tilskipanir AngularJS, ef þær eru skilgreindar að fullu, eru háþróaðar. Hluturinn með stillingum, sem við skilum í tilskipuninni, inniheldur um það bil tíu eiginleika. Auðvelt er að skilja slíka eiginleika eins og templateUrl eða sniðmát.

Bregðast við

React býður ekki upp á skiptingu í sniðmát og tilskipanir eða sniðmátafræði. Rétt er að skrifa sniðmátið í sniðmátinu sjálfu. Opnaðu dæmi frá GitHub til að sjá hvernig þetta lítur út. Þú munt taka eftir því að íhlutarforrit React.TodoItem er búið til með stöðluðu React.createClass () aðferð. Við sendum hlut með eiginleika til þessarar aðgerðar. Slíkir eiginleikar eins og componentDidUpdate, shouldComponentUpdate, handleKeyDown eða handleSubmit tákna rökfræði - hvað mun gerast með sniðmátið okkar. Í lok hlutans skilgreinum við venjulega render eignina, sem er sniðmát sem á að gera í vafranum. Allt er staðsett á einum stað og JSX setningafræðin í sniðmátinu er auðvelt að skilja jafnvel þó þú veist ekki hvernig á að skrifa í JSX. Ljóst er hvað er að fara að gerast með sniðmátið okkar, hvernig það ætti að koma fram og hvaða upplýsingar verða kynntar fyrir það eftir eiginleikum.

Niðurstaða:

Þegar þú kemst að botni umræðunnar eru nú fá stig skýr fyrir þig bæði um rammann og sem er betra fyrir þróun vefforrita. Þess vegna, ef þú ákveður að velja einn af þeim, þá er þetta mín skoðun. Ef þú ert að reyna að þróa grunnnetforrit, þá er hægt að nota bæði. ReactJS er samt SEO vingjarnlegur, rauntíma og samhæft við mikla umferð. Meðan AngularJS býður upp á slétt þróun og prófanir ásamt áreiðanleika.

Upphaflega gefin út á Angular Minds.