Krahasimi midis AngularJS VS React në 2018

Në këtë artikull, ne po krahasojmë 2 teknologji më të njohura për zhvillimin e pjesës së përparme: këndore dhe reaktive. Ne do t'i krahasojmë ato nga arkitekti i projektit dhe nga perspektiva e zhvilluesve, si dhe nga perspektiva e kompanive.

Krahasimi Angular dhe reagimi është temë shumë e njohur në ditët e sotme. React dhe Angular janë të dy teknologji shumë të përparuara, të miratuara gjerësisht JavaScript që ne përdorim për të krijuar aplikacione të përgjegjshme në internet dhe aplikacione ndërvepruese me një faqe të vetme. Numri i mjeteve JavaScript për zhvillimin e shpejtë të aplikimit me një faqe (SPA) po rritet vazhdimisht, kështu që zgjedhja e kornizës së duhur për zhvilluesit e uebit është më sfiduese.

Dallimet kryesore midis AngularJS (Framework) dhe React (biblioteka) janë komponentizimi, detyrimi i të dhënave, performanca, zgjidhja e varësisë, direktivat dhe modelimi. Le të shohim në hollësi secilin nga këto aspekte.

AngularJS

Versioni këndor 2 e më lart ka qenë rreth më pak se React, por nëse llogariteni në historinë e paraardhësit të tij, AngularJS, fotografia madje bëhet më e madhe. Ajo mirëmbahet nga Google dhe përdoret në Analytics, Adwords dhe Google Fiber. Meqenëse AdWords është një nga projektet kryesore në Google, është e qartë se ata kanë bërë një bast të madh për të dhe nuk ka gjasa të zhduket në çdo kohë së shpejti.

reagoj

React është zhvilluar dhe mirëmbajtur nga Facebook dhe gjithashtu përdoret në produktet e tyre si Instagram dhe WhatsApp. Ka afro katër vjet e gjysmë, kështu që nuk është saktësisht e re. Shtë gjithashtu një nga projektet më të njohura në GitHub, me rreth 92,000 yje në kohën e shkrimit. Tingëllon mirë për mua.

Componentization

AngularJS

AngularJS ka një strukturë shumë komplekse dhe fikse sepse bazohet në arkitekturën Model-View-Controller tipike për aplikacionet me një faqe. Një objekt i $ $ në AngularJS është përgjegjës për pjesën Model, i cili inicializohet nga Kontrolluesi dhe pastaj shndërrohet në HTML për të krijuar Pamjen për përdoruesin. AngularJS ofron shumë shërbime standarde, fabrika, kontrollues, direktiva dhe përbërës të tjerë.

Ne e thyejmë kodin në disa skedarë në AngularJS. Për shembull, kur krijojmë një komponent të ripërdorshëm me direktivën tonë, kontrolluesin dhe modelin tonë, duhet të përshkruajmë secilën pjesë të kodit në një skedar të veçantë. Pasi të përshkruajmë direktivën tonë, atëherë shtojmë një lidhje në modelin tonë në direktivë për t'i çiftuar këto pjesë. Direktivat AngularJS paraqesin logjikën e modelit për aplikimin tuaj. Modeli është HTML i shtrirë me direktivat AngularJS, të shkruara përgjithësisht si etiketa ose atribute. Ne gjithashtu shtojmë kontrollorë për të siguruar modelet tona hapësirë ​​ose kontekst të nevojshëm $. Kontrollorët shkruhen edhe në skedarë të veçantë. Kur modulojmë aplikacionin tonë në një mënyrë të tillë, mund të ripërdorim modelin ose përbërësin tonë në një pjesë të ndryshme të faqes në internet dhe kjo është shumë e dobishme për kompaninë e zhvillimit AngularJS sepse kursen shumë kohë dhe shpejton procesin e zhvillimit.

reagoj

Nuk ka asnjë strukturë “të saktë” për aplikacionet e ndërtuara me React isshtë një bibliotekë e madhe JavaScript që na ndihmon të azhurnojmë Pamjen për përdoruesin. Por React ende nuk na lejon të krijojmë aplikime më vete. Bibliotekës i mungojnë shtresat model dhe kontrollues. Për të plotësuar hendekun, Facebook prezantoi Flux, i cili ka shumë variante në ditët e sotme, për të kontrolluar rrjedhën e punës së aplikacionit.

React ofron një mënyrë shumë të thjeshtë dhe efikase për të ndërtuar pemë përbërëse. Krenohet me një stil funksional të programimit ku përkufizimet e përbërësve janë deklarative. Përbërja e aplikacionit tuaj nga komponentët React është si kompozimi i një programi JavaScript nga funksionet.

Lidhja e të dhënave

Në Modelet MVC detyrimi është tema më e rëndësishme për të kaluar çdo të dhënë në rrjedhë uni-drejtuese ose dy drejtuese.Data Lidhja është proceset e sinkronizimit të të dhënave që funksionojnë midis modelit dhe komponentëve të shikimit.

AngularJS

Lidhja e të dhënave në aplikacionet Angular është sinkronizimi automatik i të dhënave midis modelit dhe komponentëve të pamjes. Mënyra se si Angular zbaton lidhjen e të dhënave ju lejon të trajtoni modelin si burimin e vetëm të së vërtetës në aplikacionin tuaj. Pamja është një projeksion i modelit në çdo kohë. Kur modeli ndryshon, pamja pasqyron ndryshimin dhe anasjelltas.
 Shtë thjesht bashkëngjitje e të dhënave nga Model në View ose anasjelltas në një mënyrë sinkronizuese në mënyrë që sa herë që të ndodhë ndonjë ndryshim në ndonjë prej modelit ose pamjes, të tjerët duhet të tregojnë ndryshimin dhe kjo është sinkronizimi.

reagoj

Karakteristika më e mirë në reagim është Virtual-Dom. React injekton të dhënat në pamjet e saj të dhëna në kohën e konstruksionit, qoftë kur krijon pamjen rrënjësore ose përmes një pamje të mbërthyer. Reaktimi përdor detyrimin e njëanshëm të të dhënave, domethënë ne jemi në gjendje të drejtojmë rrjedhën e të dhënave vetëm në një drejtim. Brenda klasës, të dhënat që kalohen arrihen përmes pronës props të kontekstit aktual.

Performance

AngularJS

Ka dy gjëra për t'u marrë parasysh kur flasim për performancën e Angular. Siç e përmendëm më parë, Angular 1.x dhe më i lartë mbështetet në lidhjen e të dhënave të dyanshme. Ky koncept bazohet në "kontrollin e ndyrë", një mekanizëm që mund ta bëjë lagështinë e zhvillimit tonë të aplikacionit AngularJS.

Kur lidhim vlerat në HTML me modelin tonë, AngularJS krijon një vrojtues për çdo detyrues për të ndjekur ndryshimet në DOM. Pasi të azhurnohet Shikimi, AngularJS krahason vlerën e re me vlerën fillestare dhe ekzekuton lakin e tretjes $. Kyçja e tretjes $ kontrollon më pas jo vetëm vlerat që kanë ndryshuar në të vërtetë, por edhe të gjitha vlerat e të tjerëve që gjurmohen përmes vëzhguesve. Kjo është arsyeja pse performanca do të ulet shumë nëse aplikacioni juaj ka shumë vrojtues.

Një tjetër mangësi e kornizës AngularJS është mënyra se si funksionon me DOM. Për dallim nga React, AngularJS aplikon ndryshime në DOM-in e vërtetë në shfletues. Kur DOM-i i vërtetë azhurnohet, shfletuesi duhet të ndryshojë shumë vlera të brendshme për të përfaqësuar një DOM të ri. Kjo gjithashtu ka një ndikim negativ në performancën e aplikacionit.
 Performanca e dobët është arsyeja kryesore pse mbështetësit e Angular 2 ri-punuan sesi Angular ndryshon gjendjen e programit. Angular 2 dhe versionet më të fundit të kornizës Angular 4 përmbajnë gjithashtu interpretime nga ana e serverit dhe të dhëna njëkahore të detyrueshme në mënyrë të ngjashme me React. Megjithatë, Angular 2 dhe 4 ofrojnë të dhëna të dyanshme detyruese si një opsion.

reagoj

React prezantoi konceptin e DOM-it virtual, i cili është një nga avantazhet më të mëdha të React në krahasim me AngularJS. Si funksionon DOM-i virtual? Kur dokumenti ynë HTML është i ngarkuar, React krijon një pemë DOM të lehtë nga objektet JavaScript dhe e ruan atë në server. Kur përdoruesi, fut të dhëna të reja në fushën në shfletuesin, React krijon një DOM të ri virtual dhe pastaj e krahason me DOM-in e ruajtur më parë. Biblioteka gjen mospërputhje midis dy modeleve të objekteve në një mënyrë të tillë dhe rindërton DOM-in virtual edhe një herë, por me HTML të ri të ndryshuar. E gjithë kjo punë bëhet në server, gjë që zvogëlon ngarkesën në shfletues.

Tani, në vend që të dërgoni HTML plotësisht të ri në shfletues, React dërgon HTML vetëm për elementin e ndryshuar. Kjo qasje është shumë më efikase sesa ajo që ofron AngularJS.

Zgjedhja e varësive

AngularJS

Injeksioni i varësisë është një model i projektimit të softuerit në të cilin komponentëve u jepet varësia e tyre në vend që t'i kodojnë ato brenda përbërësit. Kjo heq një komponent nga gjetja e varësisë dhe i bën varësitë të konfigurueshme. Kjo ndihmon në bërjen e komponentëve të ripërdorshëm, të mirëmbajtshëm dhe të provueshëm.
 AngularJS gjen automatikisht objekte të përshtatshme që injektohen si parametrat $ routeParams, $ filter, dyqan dhe $ fushëveprimi. Ekzistojnë dy funksione që e bëjnë të mundur injeksionin e varësisë në kornizën AngularJS: $ injektojnë dhe $ sigurojnë.

reagoj

Dallimi midis React dhe AngularJS në lidhje me injeksionin e varësisë është se React nuk ofron ndonjë koncept të një enë të integruar për injeksion varësie. Por kjo nuk do të thotë që ne duhet të mendojmë për një metodë për të injektuar varësi në projektin tonë React. Ju mund të përdorni disa instrumente për të injektuar varësi automatikisht në një aplikim React. Instrumente të tilla përfshijnë module Browserify, RequireJS, ECMAScript 6 të cilat mund t’i përdorim përmes Babel, ReactJS-di, etj. Sfida e vetme është të zgjidhni një mjet për t'u përdorur.

Direktivat dhe Modelet

AngularJS

Direktivat në AngularJS janë një mënyrë për të organizuar kodin tonë rreth DOM. Nëse punojmë me AngularJS, ne i qasemi DOM-it vetëm përmes direktivave. AngularJS ka shumë direktiva standarde, të tilla si ng-bind ose ng-app, por nganjëherë ne bëjmë direktivat tona në AngularJS për të futur të dhëna në shabllone. Modeli duhet të ketë një element me direktivën tonë të shkruar si atribut. Shtë po aq e thjeshtë sa ajo. Por direktivat e AngularJS, nëse përcaktohen plotësisht, janë të sofistikuara. Objekti me cilësime, të cilat i kthejmë në direktivë, përmban rreth dhjetë veti. Prona të tilla si shablloni ose shablloni janë të lehta për tu kuptuar.

reagoj

React nuk ofron ndarje në shabllone dhe direktiva ose logjikë modeli. Logjika e shabllonit duhet të shkruhet në modelin e vetë. Për të parë si duket kjo, hapni një shembull nga GitHub. Do të vini re që aplikacioni i komponentit React.TodoItem është krijuar me një metodë standarde React.createClass (). Ne i kalojmë një objekt me veti këtij funksioni. Karakteristikat e tilla si komponentiDidUpdate, duhet ComponentUpdate, handleKeyDown ose handleSubmit paraqesin logjikën - çfarë do të ndodhë me shabllonin tonë. Në fund të komponentit, ne zakonisht përcaktojmë pronën e dhënë, e cila është një shabllon që duhet të jepet në shfletuesin. Gjithçka është e vendosur në një vend, dhe sintaksa JSX në shabllon është e lehtë për tu kuptuar edhe nëse nuk dini si të shkruani në JSX. Shtë e qartë se çfarë do të ndodhë me modelin tonë, si duhet të jepet dhe cilat informacione do të paraqiten për të sipas pronave.

Përfundim:

Ndërsa arrini në fund të diskutimit, tani disa pika janë të qarta për ju në të dyja kornizat dhe cila është më e mira për zhvillimin e aplikacionit në internet. Prandaj, nëse vendosni të zgjidhni njërën prej tyre, atëherë këtu është mendimi im. Nëse po përpiqeni të krijoni një aplikacion bazë në internet, të dy mund të përdoren. Megjithatë, ReactJS është SEO miqësor, në kohë reale dhe i përputhshëm me trafikun e rëndë. Ndërsa, AngularJS ofron zhvillim dhe testim të qetë së bashku me besueshmërinë.

Botuar fillimisht në Angular Minds.