Palyginimas tarp „AngularJS VS React“ 2018 m

Šiame straipsnyje mes lyginame 2 populiariausias technologijas, skirtas priekiniam vartotojui kurti: kampinis ir reaguoti. Mes palyginsime juos iš projekto architekto ir kūrėjų, taip pat įmonių perspektyvos.

Palyginti kampinį ir reaguoti yra labai populiari tema šiais laikais. Reakcija ir kampas yra labai pažangios, plačiai naudojamos „JavaScript“ technologijos, kurias naudojame kurdami reaguojančias žiniatinklio programas ir interaktyvias vieno puslapio programas. „JavaScript“ įrankių, skirtų sparčiam vieno puslapio taikomųjų programų (SPA) kūrimui, skaičius nuolat auga, todėl pasirinkti sudėtingesnį pagrindą žiniatinklio kūrėjams yra sudėtingesnė.

Pagrindiniai skirtumai tarp „AngularJS“ („Framework“) ir „React“ (biblioteka) yra komponavimas, duomenų įrišimas, atlikimas, priklausomybės skiriamoji geba, nurodymai ir šablonai. Pažvelkime į išsamiai kiekvieną iš šių aspektų.

KampinisJS

2 ir naujesnių kampinių versijų buvo mažiau nei reaguojančios, tačiau, jei įskaičiuosite į jos pirmtakės „AngularJS“ istoriją, vaizdas išlygins. Ją prižiūri „Google“ ir jis naudojamas „Analytics“, „AdWords“ ir „Google Fiber“. Kadangi „AdWords“ yra vienas iš pagrindinių „Google“ projektų, akivaizdu, kad jie dėl to padarė didelę statymą ir greičiausiai niekur nedings.

Reaguokite

„React“ kuria ir prižiūri „Facebook“, taip pat naudojama jų produktuose, tokiuose kaip „Instagram“ ir „WhatsApp“. Tai buvo maždaug ketverius su puse metų, taigi jis nėra visiškai naujas. Tai taip pat vienas iš populiariausių „GitHub“ projektų, kurio rašymo metu buvo apie 92 000 žvaigždžių. Man skamba gerai.

Komponentizacija

KampinisJS

„AngularJS“ struktūra yra labai sudėtinga ir fiksuota, nes ji pagrįsta „Model-View-Controller“ architektūra, būdinga vieno puslapio programoms. Objekto $ apimtis „AngularJS“ yra atsakinga už modelio dalį, kurią inicijuoja valdiklis, o po to paverčia į HTML, kad vartotojui būtų sukurtas vaizdas. „AngularJS“ teikia daug standartinių paslaugų, gamyklų, valdiklių, direktyvų ir kitų komponentų.

Mes suskaidome kodą į keletą failų „AngularJS“. Pvz., Kurdami pakartotinai naudojamą komponentą su savo direktyva, valdikliu ir šablonu, kiekvieną kodo fragmentą turime aprašyti atskirame faile. Aprašę mūsų direktyvą, mes pridedame nuorodą į mūsų direktyvos šabloną, kad sujungtume šias dalis. „AngularJS“ direktyvos parodo jūsų programos šablono logiką. Šablonas yra HTML išplėstas „AngularJS“ direktyvomis, paprastai parašytas kaip žymės ar atributai. Mes taip pat pridedame valdiklius, kad pateiktume mūsų modeliams reikiamą apimtį ar kontekstą. Valdikliai taip pat rašomi atskiruose failuose. Tokiu būdu moduliuodami savo taikymą, galime pakartotinai panaudoti savo šabloną ar komponentą kitoje svetainės dalyje, ir tai labai padeda „AngularJS“ plėtros įmonei, nes taupo daug laiko ir pagreitina kūrimo procesą.

Reaguokite

Nėra „teisingos“ „React“ sukurtų programų struktūros. Tai yra didelė „JavaScript“ biblioteka, kuri mums padeda atnaujinti vartotojo rodinį. Tačiau „React“ vis dar neleidžia mums kurti programų savarankiškai. Bibliotekoje trūksta modelio ir valdiklio sluoksnių. Norėdami užpildyti spragą, „Facebook“ pristatė „Flux“, kuri šiais laikais turi daugybę variantų, kad galėtų kontroliuoti programų darbo eigą.

„React“ yra labai paprastas ir efektyvus būdas komponuoti medžius. Tai gali pasigirti funkciniu programavimo stiliumi, kai komponentų apibrėžimai yra deklaratyvūs. Programos kūrimas iš „React“ komponentų yra tarsi „JavaScript“ programos sudarymas iš funkcijų.

Duomenų įpareigojimas

MVC modeliuose įrišimas yra svarbiausia tema perduodant bet kokius duomenis viena kryptimi ar dviem kryptimis. Duomenų įrišimas yra duomenų sinchronizacijos procesai, kurie veikia tarp modelio ir rodinio komponentų.

KampinisJS

Duomenų įrišimas kampinėse programose yra automatinis duomenų sinchronizavimas tarp modelio ir rodinio komponentų. Tai, kaip kampas įgyvendina duomenų įrišimą, leidžia jūsų programoje modelį laikyti vienu tiesos šaltiniu. Vaizdas visada yra modelio projekcija. Kai modelis pasikeičia, vaizdas atspindi pasikeitimą ir atvirkščiai.
 Tai yra tiesiog duomenų pridėjimas nuo modelio prie peržiūros arba atvirkščiai sinchronizavimu, kad, pasikeitus bet kuriam modeliui ar rodiniui, kitas turėtų parodyti pakeitimą ir tai yra sinchronizavimas.

Reaguokite

Geriausia reagavimo funkcija yra „Virtual-Dom“. „React“ įveda duomenis į pateiktus rodinius konstravimo metu, nesvarbu, kai sukuriamas šakninis vaizdas, arba per įterptąjį vaizdą. „Reeact“ naudoja duomenų vienpusį rišimą, ty duomenų srautus galime nukreipti tik viena kryptimi. Kurso metu praleisti duomenys pasiekiami per dabartinio konteksto rekvizitus.

Spektaklis

KampinisJS

Kalbant apie „Angular“ atlikimą, reikia atsižvelgti į du dalykus. Kaip jau minėjome anksčiau, 1.x ir aukštesnės kampai priklauso nuo abipusio duomenų surišimo. Ši koncepcija pagrįsta „nešvariu tikrinimu“, mechanizmu, kuris mūsų „AngularJS“ programų kūrimą gali pavėluoti.

Kai mes susiejame reikšmes HTML formatu su savo modeliu, „AngularJS“ sukuria kiekvieno įrišimo stebėtoją, kad galėtų sekti DOM pokyčius. Kai „View“ atnaujinimas atnaujinamas, „AngularJS“ palygina naują vertę su pradine verte ir paleidžia „$ digest“ kilpą. Tada „$ digest“ kilpa patikrina ne tik iš tikrųjų pasikeitusias reikšmes, bet ir visas kitas vertybes, kurios stebimos stebėtojų. Štai kodėl našumas labai sumažės, jei jūsų programoje yra per daug stebėtojų.

Kitas „AngularJS“ sistemos trūkumas yra tai, kaip ji veikia su DOM. Skirtingai nuo „React“, „AngularJS“ naršyklėje taiko tikrojo DOM pakeitimus. Kai tikrasis DOM atnaujinamas, naršyklė turi pakeisti daug vidinių reikšmių, kad būtų parodytas naujas DOM. Tai taip pat neigiamai veikia programos našumą.
 Prastas našumas yra pagrindinė priežastis, kodėl „Angular 2“ rėmėjai pakeitė, kaip „Angular“ keičia programos būseną. „Angular 2“ ir naujausios „Angular 4“ pagrindinės versijos taip pat pasižymi serverio perteikimu ir vienpusiais duomenimis, privalomais panašiai kaip „React“. Vis dėlto 2 ir 4 kampai kaip pasirinktis siūlo dvipusį duomenų įrišimą.

Reaguokite

„React“ pristatė virtualiojo DOM koncepciją, kuri yra vienas didžiausių „React“ pranašumų, palyginti su „AngularJS“. Kaip veikia virtualus DOM? Kai mūsų HTML dokumentas įkeliamas, „React“ sukuria lengvą DOM medį iš „JavaScript“ objektų ir išsaugo jį serveryje. Kai vartotojas įveda naujus duomenis į naršyklės lauką, „React“ sukuria naują virtualų DOM ir palygina jį su anksčiau išsaugotu DOM. Biblioteka tokiu būdu nustato dviejų objektų modelių skirtumus ir vėl sukuria virtualų DOM, tačiau naudodama naują pakeistą HTML. Visas šis darbas atliekamas serveryje, todėl sumažėja naršyklės apkrova.

Dabar, užuot siuntęs visiškai naują HTML į naršyklę, „React“ siunčia tik pakeisto elemento HTML. Šis požiūris yra daug efektyvesnis nei tai, ką siūlo „AngularJS“.

Priklausomybių sprendimas

KampinisJS

Priklausomybės įpurškimas yra programinės įrangos projektavimo schema, kurioje komponentams suteikiama jų priklausomybė užuot juos užkoduojant komponente. Tai atleidžia komponentą nuo priklausomybės nustatymo ir daro priklausomybę konfigūruojamą. Tai padeda komponentus naudoti pakartotinai, prižiūrėti ir išbandyti.
 „AngularJS“ automatiškai randa tinkamus objektus, kurie įšvirkščiami kaip $ routeParams, $ filtras, parduotuvė ir $ apimties parametrai. Yra dvi funkcijos, leidžiančios priklausomybės įvedimą „AngularJS“ sistemoje: $ inject ir $ suteikti.

Reaguokite

Skirtumas tarp „React“ ir „AngularJS“ priklausomybės injekcijų yra tas, kad „React“ nesiūlo jokios įmontuoto konteinerio priklausomybės injekcijai koncepcijos. Bet tai nereiškia, kad turime galvoti apie priklausomybių nustatymo metodą mūsų „React“ projekte. Galite naudoti kelis instrumentus, kad automatiškai įvestumėte priklausomybes „React“ programoje. Tokie instrumentai yra „Browserify“, „RequireJS“, „ECMAScript 6“ moduliai, kuriuos galime naudoti per „Babel“, „ReactJS-di“ ir pan. Vienintelis iššūkis yra pasirinkti įrankį, kurį naudoti.

Direktyvos ir šablonai

KampinisJS

„AngularJS“ direktyvos yra būdas sutvarkyti mūsų kodą aplink DOM. Jei dirbame su „AngularJS“, DOM pasiekiame tik per direktyvas. „AngularJS“ turi daug standartinių direktyvų, tokių kaip „ng-bind“ arba „ng-app“, tačiau kartais mes sudarome savo „AngularJS“ direktyvas, kad įterptume duomenis į šablonus. Šablone turi būti elementas su mūsų direktyva, parašyta kaip atributas. Tai taip paprasta. Bet jei „AngularJS“ direktyvos yra išsamiai apibrėžtos, jos yra sudėtingesnės. Objektą su nustatymais, kuriuos mes grąžiname į direktyvą, sudaro apie dešimt savybių. Tokias savybes kaip „templateUrl“ ar „šablonas“ lengva suprasti.

Reaguokite

„React“ nesiūlo skirstymo į šablonus ir direktyvas ar šablonų logikos. Šablono logika turėtų būti parašyta pačiame šablone. Norėdami pamatyti, kaip tai atrodo, atidarykite „GitHub“ pavyzdį. Pastebėsite, kad „React“ komponentinė programa.TodoItem yra sukurta naudojant standartinį „React.createClass ()“ metodą. Mes perduodame objektą su savybėmis šiai funkcijai. Tokios savybės kaip komponentasDidUpdate, turėtųComponentUpdate, handleKeyDown ar handleSubmit atspindi logiką - kas bus su mūsų šablonu. Komponento pabaigoje mes paprastai apibrėžiame pateikimo ypatybę, kuri yra šablonas, kurį reikia pateikti naršyklėje. Viskas yra vienoje vietoje, o šablono JSX sintaksę lengva suprasti, net jei jūs nežinote, kaip rašyti JSX. Aišku, kas nutiks su mūsų šablonu, kaip jis turėtų būti pateiktas ir kokią informaciją apie jį pateiks nuosavybės.

Išvada:

Kai jūs einate į diskusijos pabaigą, dabar keli dalykai yra aiškūs abiejose sistemose ir tai yra geriau žiniatinklio programų plėtrai. Taigi, jei jūs nusprendėte pasirinkti vieną iš jų, tada, mano nuomone, yra ši nuomonė.Jei bandote sukurti pagrindinę žiniatinklio programą, tada galite naudoti abi. Vis dėlto „ReactJS“ yra SEO draugiška, realiuoju laiku ir suderinama su intensyviu srautu. Tuo tarpu „AngularJS“ siūlo sklandų tobulinimą ir testavimą bei patikimumą.

Iš pradžių publikuota „Angular Minds“.