Primerjava podjetja AngularJS VS React v letu 2018

V tem članku primerjamo 2 najbolj priljubljeni tehnologiji za razvoj sprednjega dela: Angular in React. Primerjali jih bomo z vidika projektnega arhitekta in projektantov ter z vidika podjetij.

Primerjava kotnih in reaktivnih je danes zelo priljubljena tema. React in Angular sta zelo napredni, široko sprejeti tehnologiji JavaScript, ki ju uporabljamo za ustvarjanje odzivnih spletnih aplikacij in interaktivnih enostranskih aplikacij. Število orodij JavaScript za razvoj hitrih aplikacij za eno stran (SPA) nenehno raste, zato je izbira ustreznega okvira za spletne razvijalce zahtevnejša.

Glavne razlike med AngularJS (Framework) in React (knjižnica) so komponentizacija, vezava podatkov, zmogljivost, ločljivost odvisnosti, direktive in predloge. Oglejmo si vsakega od teh vidikov podrobno.

KotniJS

Kotna različica 2 in višje je bila približno manj kot React, če pa računate na zgodovino predhodnika AngularJS, slika izravna. Vzdržuje ga Google in se uporablja v storitvah Analytics, Adwords in Google Fiber. Ker je AdWords eden ključnih projektov v Googlu, je jasno, da so se nanj veliko stavili in verjetno ne bo kmalu izginil.

Reagirajte

Facebook razvija in vzdržuje Facebook in ga uporabljajo tudi v njihovih izdelkih, kot so Instagram in WhatsApp. To je že približno štiri leta in pol, tako da ni ravno novo. To je tudi eden najbolj priljubljenih projektov na GitHubu, ki je imel v času pisanja približno 92.000 zvezd. Sliši se dobro.

Komponentacija

KotniJS

AngularJS ima zelo zapleteno in fiksno strukturo, saj temelji na arhitekturi Model-View-Controller, značilni za aplikacije na eni strani. Objekt $ obseg v AngularJS je odgovoren za del modela, ki ga krmilnik inicializira in nato pretvori v HTML, da ustvari pogled za uporabnika. AngularJS ponuja številne standardne storitve, tovarne, krmilnike, direktive in druge komponente.

Kodo razdelimo na več datotek v AngularJS. Ko na primer sestavimo komponento za večkratno uporabo z lastno direktivo, regulatorjem in predlogo, moramo vsak kos kode opisati v ločeni datoteki. Ko opisujemo našo direktivo, nato v direktivo dodamo povezavo do naše predloge, da povežemo te dele. AngularJS direktive predstavljajo logiko predloge za vašo aplikacijo. Predloga je razširjena s HTML z direktivami AngularJS, navadno napisana kot oznake ali atributi. Dodamo tudi krmilnike, da našim modelom zagotovimo potreben $ obseg ali kontekst. Krmilniki so zapisani tudi v ločenih datotekah. Ko na tak način modulariziramo svojo aplikacijo, lahko ponovno uporabimo predlogo ali komponento na drugem delu spletnega mesta in to je za razvojno podjetje AngularJS v veliko pomoč, saj prihrani veliko časa in pospeši razvojni proces.

Reagirajte

Za aplikacije, zgrajene z Reactom, ni »pravilne« strukture. To je velika knjižnica JavaScript, ki nam pomaga posodobiti pogled za uporabnika. Vendar React še vedno ne omogoča, da sami ustvarjamo aplikacije. V knjižnici manjkajo modeli in krmilni sloji. Za zapolnitev vrzeli je Facebook predstavil Flux, ki ima dandanes številne različice za nadzor nad potekom dela v aplikacijah.

React zagotavlja zelo preprost in učinkovit način za gradnjo sestavnih dreves. Ponaša se s funkcionalnim slogom programiranja, kjer so definicije komponent deklarativne. Sestavljanje aplikacije iz komponent React je podobno kot sestavljanje programa JavaScript iz funkcij.

Vezava podatkov

V vzorcih MVC je vezava najpomembnejša tema za prenos podatkov v enosmerni ali dvosmerni tok. Povezovanje podatkov so procesi sinhronizacije podatkov, ki delujejo med modelom in si ogledujejo komponente.

KotniJS

Vezava podatkov v kotnih aplikacijah je samodejna sinhronizacija podatkov med modelom in pregledovanjem komponent. Način, na katerega Angular izvaja zavezujoče podatke, vam omogoča, da model obravnavate kot edini vir resnice v svoji aplikaciji. Pogled je ves čas projekcija modela. Ko se model spremeni, pogled odraža spremembo in obratno.
 To je preprosto pripenjanje podatkov iz modela na pogled ali obratno na način sinhronizacije, tako da bi vsakič, ko se katera koli sprememba modela ali pogleda pojavi, sprememba prikazala tudi druge in to je sinhronizacija.

Reagirajte

Najboljša funkcija v reagiranju je Virtual-Dom. React vnese podatke v svoje izrisane poglede v času konstrukcije, bodisi ko je ustvarjen korenski pogled ali preko ugnezdenega pogleda.React uporablja enosmerno vezavo podatkov, kar pomeni, da lahko pretok podatkov usmerimo le v eno smer. Znotraj razreda so do posredovanih podatkov dostopni prek lastnosti rekvizitov trenutnega konteksta.

Izvedba

KotniJS

Ko govorimo o uspešnosti podjetja Angular, moramo upoštevati dve stvari. Kot smo že omenili, se kotna 1.x in višja različica opira na dvosmerno vezavo podatkov. Ta koncept temelji na "umazanem preverjanju", mehanizmu, zaradi katerega je naš AngularJS razvoj aplikacij zaostajal.

Ko z našim modelom vežemo vrednosti v HTML, AngularJS ustvari opazovalnik za vsako vezavo za sledenje spremembam v DOM-u. Ko se Pogled posodobi, AngularJS primerja novo vrednost z začetno vrednostjo in zažene zanko $ prebavitve. Zdaj prebavi $ nato preveri ne samo vrednosti, ki so se dejansko spremenile, ampak tudi vse druge vrednosti, ki jih spremljamo z opazovalci. Zaradi tega se bo učinkovitost zelo zmanjšala, če ima vaša aplikacija preveč gledalcev.

Druga pomanjkljivost okvira AngularJS je način sodelovanja z DOM. Za razliko od React-a AngularJS v brskalniku uporabi spremembe v dejanskem DOM-u. Ko se resnični DOM posodobi, mora brskalnik spremeniti številne notranje vrednosti, da predstavlja nov DOM. To negativno vpliva tudi na uspešnost aplikacije.
 Slaba zmogljivost je glavni razlog, zakaj so podporniki Angular 2 ponovno delali, kako Angular spreminja stanje programa. Angular 2 in najnovejše okvirne različice Angular 4 imajo tudi upodabljanje na strani strežnika in enosmerno vezavo podatkov, podobno kot React. Kljub temu kotni 2 in 4 ponujata dvosmerno vezavo podatkov kot možnost.

Reagirajte

React je predstavil koncept virtualnega DOM-a, kar je ena največjih prednosti Reacta v primerjavi z AngularJS. Kako deluje virtualni DOM? Ko se naloži naš dokument HTML, React ustvari lahkotno drevo DOM iz predmetov JavaScript in ga shrani na strežnik. Ko uporabnik v polje v brskalnik vnese nove podatke, React ustvari nov virtualni DOM in ga nato primerja s prej shranjenim DOM-om. Knjižnica na tak način najde razlike med dvema objektnima modeloma in na novo na novo naredi virtualni DOM, vendar z novim spremenjenim HTML-jem. Vse to delo poteka na strežniku, kar zmanjša obremenitev brskalnika.

Zdaj, namesto da bi popolnoma brskalnik HTML poslal v brskalnik, React pošlje HTML samo za spremenjen element. Ta pristop je veliko bolj učinkovit od tistega, kar ponuja AngularJS.

Reševanje odvisnosti

KotniJS

Dependency Injection je vzorec načrtovanja programske opreme, v katerem se komponentam dodeli svoje odvisnosti, namesto da bi jih trdo kodirali znotraj komponente. To razbremeni komponento pri iskanju odvisnosti in naredi odvisnosti prilagodljive. To pomaga pri pripravi komponent za večkratno uporabo, vzdrževanje in preizkušnjo.
 AngularJS samodejno najde ustrezne predmete, ki se vbrizgajo kot parametri $ routeParams, $ filter, store in $ obseg. Obstajata dve funkciji, ki omogočata vbrizgavanje odvisnosti v okvir AngularJS: $ inject in $ provide.

Reagirajte

Razlika med Reactom in AngularJS glede vbrizgavanja odvisnosti je v tem, da React ne ponuja nobenega koncepta vgrajenega vsebnika za injiciranje odvisnosti. Vendar to ne pomeni, da moramo razmišljati o načinu, kako vbrizgati odvisnosti v naš projekt React. S pomočjo več instrumentov lahko v aplikacijo React samodejno vstavite odvisnosti. Takšni instrumenti vključujejo Browserify, RequireJS, ECMAScript 6 module, ki jih lahko uporabljamo prek Babel, ReactJS-di in tako naprej. Edini izziv je izbrati orodje za uporabo.

Direktive in predloge

KotniJS

Direktive v AngularJS so način, kako organizirati našo kodo okoli DOM. Če delamo z AngularJS, do DOM dostopamo le prek direktiv. AngularJS ima veliko standardnih direktiv, na primer ng-bind ali ng-app, včasih pa v AngularJS naredimo svoje lastne direktive za vstavljanje podatkov v predloge. Predloga mora imeti element z našo direktivo, zapisan kot atribut. To je tako preprosto. Toda direktive AngularJS, če so opredeljene v celoti, so izpopolnjene. Objekt z nastavitvami, ki ga vrnemo v direktivi, vsebuje približno deset lastnosti. Takšne lastnosti kot templateUrl ali predloga je enostavno razumeti.

Reagirajte

React ne ponuja delitve na predloge in direktive ali logiko predloge. Logika predloge naj bo zapisana v sami predlogi. Če želite videti, kako to izgleda, odprite primer iz GitHub-a. Opazili boste, da je komponenta app React.TodoItem ustvarjena s standardno metodo React.createClass (). Predmet z lastnostmi posredujemo tej funkciji. Takšne lastnosti, kot su komponentaDidUpdate, shouldComponentUpdate, handleKeyDown ali handleSubmit, predstavljajo logiko - kaj se bo zgodilo z našo predlogo. Na koncu komponente običajno določimo lastnost upodabljanja, ki je predloga, ki jo je treba upodobiti v brskalniku. Vse se nahaja na enem mestu, sintakso JSX v predlogi pa je enostavno razumeti, tudi če ne znate pisati v JSX. Jasno je, kaj se bo zgodilo z našo predlogo, kako naj bo upodobljeno in katere informacije bodo lastnosti prikazane zanj.

Zaključek:

Ko pridete do konca razprave, vam je zdaj jasno nekaj točk v obeh okvirih in kaj je bolje za razvoj spletnih aplikacij. Če se torej odločite, da boste izbrali enega od njih, potem je to moje mnenje. Če poskušate razviti osnovno spletno aplikacijo, potem lahko uporabljate oboje. Kljub temu je ReactJS SEO prijazen, v realnem času in združljiv z velikim prometom. Medtem ko AngularJS ponuja nemoten razvoj in testiranje ter zanesljivost.

Prvotno objavljeno pri Angular Minds.