Võrdlus AngularJS VS Reakti vahel 2018. aastal

Selles artiklis võrdleme esiosa arendamisel kahte kõige populaarsemat tehnoloogiat: nurgeline ja reageeriv. Võrdleme neid nii projektiarhitekti ja arendajate kui ka ettevõtete vaatenurgast.

Nurga ja reageerimise võrdlemine on tänapäeval väga populaarne teema. React ja Angular on mõlemad kõrgelt arenenud, laialdaselt kasutusele võetud JavaScripti tehnoloogiad, mida kasutame tundlike veebirakenduste ja interaktiivsete üheleheliste rakenduste loomisel. JavaScripti tööriistade arv üheleheliste rakenduste kiireks arendamiseks kasvab pidevalt, seega on veebiarendajatele õige raamistiku valimine keerukam.

Peamised erinevused AngularJS (Framework) ja React (raamatukogu) vahel on komponenteerimine, andmete sidumine, jõudlus, sõltuvuse eraldamine, juhised ja mallid. Vaatame kõiki neid aspekte üksikasjalikult.

NurgaJS

Nurgaversioon 2 ja uuemad on olnud vähem kui reageerivad, kuid kui arvestada selle eelkäija AngularJS ajaloos, siis pilt tasandub. Seda haldab Google ja seda kasutatakse Analyticsis, Adwordsis ja Google Fiberis. Kuna AdWords on üks Google'i võtmeprojekte, on selge, et nad on sellele suure panuse teinud ja tõenäoliselt ei kao see niipea.

Reageeri

Reaktorit arendab ja haldab Facebook ning seda kasutatakse ka nende toodetes nagu Instagram ja WhatsApp. See on kestnud umbes neli ja pool aastat, nii et see pole täpselt uus. See on ka üks GitHubi populaarseimaid projekte, mille kirjutamise ajal oli umbes 92 000 tähte. Kõlab hästi.

Komponenteerimine

NurgaJS

AngularJS-l on väga keeruline ja fikseeritud struktuur, kuna see põhineb mudeli-vaate-kontrolleri arhitektuuril, mis on tüüpiline ühelehelistele rakendustele. Objekti $ ulatus AngularJS-is vastutab mudeli osa eest, mille käivitab kontroller ja seejärel teisendatakse HTML-i, et luua kasutaja jaoks vaade. AngularJS pakub palju standardteenuseid, tehaseid, kontrollereid, direktiive ja muid komponente.

Me jagame koodi AngularJS-is mitmeks failiks. Näiteks kui loome oma direktiivi, kontrolleri ja malli abil korduvkasutatava komponendi, peame iga koodipala kirjeldama eraldi failina. Kui oleme oma direktiivi kirjeldanud, lisame nende osade ühendamiseks oma direktiivi malli lingi. AngularJS-i direktiivid esindavad teie rakenduse malliloogikat. Mall on HTML-iga laiendatud AngularJS-i direktiividega, kirjutatud üldiselt siltide või atribuutidena. Lisame ka kontrollereid, et pakkuda meie mudelitele vajalikku ulatust või konteksti. Kontrollerid kirjutatakse ka eraldi failidena. Kui muudame oma rakendust sellisel viisil, saame oma malli või komponenti veebisaidi teises osas uuesti kasutada ja see on AngularJS arendusettevõttele väga kasulik, kuna see säästab palju aega ja kiirendab arendusprotsessi.

Reageeri

Reaktüübiga loodud rakenduste jaoks pole "õiget" struktuuri. See on suur JavaScripti kogu, mis aitab meil kasutaja jaoks vaadet värskendada. Kuid React ei lase meil ikkagi rakendusi iseseisvalt luua. Teekil puuduvad mudeli- ja kontrolleri kihid. Lünga täitmiseks tutvustas Facebook rakenduste töövoo juhtimiseks Fluxi, millel on tänapäeval arvukalt variante.

React on väga lihtne ja tõhus viis komponentpuude ehitamiseks. Sellel on funktsionaalne programmeerimisstiil, kus komponentide määratlused on deklaratiivsed. Rakenduse komponeerimine Reaxi komponentidest on nagu JavaScripti programmi koostamine funktsioonide põhjal.

Andmete sidumine

MVC mustrites on sidumine kõige olulisem teema, et edastada andmeid ühesuunalises või kahesuunalises voos. Andmete sidumine on andmete sünkroonimisprotsessid, mis töötavad mudeli ja vaatekomponentide vahel.

NurgaJS

Andme sidumine nurgarakendustes on andmete automaatne sünkroonimine mudeli ja vaatekomponentide vahel. See, kuidas Angular rakendab andmete sidumist, võimaldab teil käsitleda mudelit oma rakenduses ühe tõeallikana. Vaade on alati mudeli projektsioon. Kui mudel muutub, peegeldab vaade muutust ja vastupidi.
 See on lihtsalt andmete kinnitamine mudelilt vaatele või vastupidi sünkroonimise teel, nii et iga mudeli või vaate muutumisel peaks mõni muu seda muutust näitama ja see on sünkroonimine.

Reageeri

Parim funktsioon reageerimisel on Virtual-Dom. React lisab andmed oma renderdatud vaadetesse ehituse ajal, olgu siis siis, kui juurvaade luuakse või pesastatud vaate kaudu.React kasutab ühesuunalist andmete sidumist, mis tähendab, et suudame suunata andmevoo ainult ühes suunas. Klassis pääseb läbitud andmetele juurde praeguse konteksti rekvisiitide atribuudi kaudu.

Etendus

NurgaJS

Angulari esinemisest rääkides tuleb arvestada kahe asjaga. Nagu me varem mainisime, tugineb nurk 1.x ja kõrgem andmete kahesuunalisele sidumisele. See kontseptsioon põhineb "määrdunud kontrollimisel" - mehhanismil, mis võib muuta meie AngularJSi rakenduste arendamise aeglaseks.

Kui seome oma mudeliga HTML-i väärtused, loob AngularJS iga sidumise jaoks jälgija, et jälgida DOM-i muudatusi. Kui vaade on värskendatud, võrdleb AngularJS uut väärtust algväärtusega ja käivitab $ digesti silmuse. Seejärel ei kontrolli $ digest silmus mitte ainult tegelikult muutunud väärtusi, vaid ka kõiki teisi jälgijate kaudu jälgitavaid väärtusi. Seetõttu väheneb jõudlus palju, kui teie rakendusel on liiga palju jälgijaid.

Teine AngularJS-i raamistiku puudus on see, kuidas see töötab koos DOM-iga. Erinevalt Reaktist rakendab AngularJS brauseris tegeliku DOM-i muudatusi. Kui tegelikku DOM-i värskendatakse, peab brauser uue DOM-i tähistamiseks muutma palju sisemisi väärtusi. See mõjutab ka rakenduse toimimist negatiivselt.
 Halb jõudlus on peamine põhjus, miks Angular 2 toetajad töötasid uuesti läbi, kuidas Angular muudab programmi olekut. Nurga 2 ja uusimate nurga 4 raamiversioonide puhul on sarnaselt Reaketiga ka serveripoolne renderdamine ja ühesuunaliste andmete sidumine. Siiski pakuvad nurk 2 ja 4 lisavõimalusena kahesuunalist andmete sidumist.

Reageeri

React tutvustas virtuaalse DOM-i kontseptsiooni, mis on Reaketi üks suurimaid eeliseid võrreldes AngularJS-iga. Kuidas virtuaalne DOM töötab? Kui meie HTML-dokument on laaditud, loob React JavaScripti objektidest kerge DOM-puu ja salvestab selle serverisse. Kui kasutaja sisestab brauseris väljale uued andmed, loob React uue virtuaalse domeenidomeeri ja võrdleb seda seejärel varem salvestatud domeenide domineerimisega. Teek leiab kahe objektimudeli vahel sarnasusi ja ehitab taas üles virtuaalse DOM-i, kuid uue muudetud HTML-iga. Kogu see töö tehakse serveris, mis vähendab brauseri koormust.

Nüüd, selle asemel et saata brauserisse täiesti uus HTML, saadab Reakt ainult muudetud elemendi HTML-i. See lähenemisviis on palju tõhusam kui AngularJS pakub.

Sõltuvuste lahendamine

NurgaJS

Sõltuvuse süst on tarkvara kujundamise muster, milles komponentidele antakse nende sõltuvused, selle asemel, et neid komponentis kodeerida. See vabastab komponendi sõltuvuse asukohast ja muudab sõltuvused konfigureeritavaks. See aitab muuta komponendid korduvkasutatavaks, hooldatavaks ja testitavaks.
 AngularJS leiab automaatselt sobivad objektid, mis sisestatakse parameetriteks $ routeParams, $ filter, store ja $. AngularJS-i raamistikus võimaldab sõltuvuse süstimist teha kaks funktsiooni: $ inject ja $ suteikti.

Reageeri

Erinevus sõltuvuse süstimise osas on Reacti ja AngularJSi vahel see, et React ei paku sõltuvuse süstimiseks sisseehitatud mahuti kontseptsiooni. Kuid see ei tähenda, et peaksime mõtlema meetodile sõltuvuse süstimiseks meie Reacti projekti. Saate kasutada mitut instrumenti sõltuvuse süstimiseks rakendusse React automaatselt. Selliste instrumentide hulka kuuluvad Browserify, RequireJS, ECMAScript 6 moodulid, mida saame kasutada Babeli, ReactJS-di kaudu jne. Ainus väljakutse on valida tööriist, mida kasutada.

Direktiivid ja mallid

NurgaJS

AngularJS-i direktiivid on viis, kuidas korraldada meie kood DOM-i ümber. Kui töötame AngularJS-iga, pääseme DOM-i juurde ainult direktiivide kaudu. AngularJS-l on palju standardseid direktiive, näiteks ng-bind või ng-app, kuid mõnikord koostame AngularJS-is oma direktiivid andmete mallidesse lisamiseks. Mallil peab olema element, mille atribuudina on kirjutatud meie direktiiv. See on nii lihtne. Kuid AngularJS-i direktiivid, kui need on täielikult määratletud, on keerukad. Seadetega objekt, mille me direktiivis tagastame, sisaldab umbes kümme omadust. Selliseid omadusi nagu templateUrl või mall on lihtne mõista.

Reageeri

React ei paku mallideks ja direktiivideks jagamist ega malliloogikat. Malli loogika tuleks kirjutada malli enda sisse. Kuidas see välja näeb, avage GitHubi näide. Võite märgata, et Reacti komponendi rakendus.TodoItem on loodud standardse React.createClass () meetodiga. Anname sellele funktsioonile omadustega objekti. Sellised omadused nagu komponentDidUpdate, peaksidComponentUpdate, handleKeyDown või handleSubmit esindavad loogikat - mis juhtub meie malliga. Komponendi lõpus määratleme tavaliselt renderdamise atribuudi, mis on brauseris renderdatav mall. Kõik asub ühes kohas ja malli JSX-i süntaks on hõlpsasti mõistetav, isegi kui te ei tea, kuidas JSX-is kirjutada. On selge, mis juhtub meie malliga, kuidas see tuleks renderdada ja millist teavet selle kohta atribuudid esitavad.

Järeldus:

Arutelu algusesse jõudes on nüüd mõlemas raamistikus teile selge paar punkti ja see on veebirakenduste arendamiseks parem. Seega, kui otsustate valida ühe neist, on siin minu arvamus.Kui proovite välja töötada tavalist veebirakendust, saab neid mõlemaid kasutada. Siiski on ReactJS SEO-sõbralik, reaalajas ja ühilduv tiheda liiklusega. Arvestades, et AngularJS pakub sujuvat arendamist ja testimist koos töökindlusega.

Algselt avaldati ajakirjas Angular Minds.