Verglach tëscht AngularJS VS Reakt am Joer 2018

An dësem Artikel, Mir vergläichen 2 populärsten Technologien fir d'Front End Entwécklung: Angular a React. Mir ginn se aus dem Projektarchitekt an aus der Perspektiv vum Entwéckler wéi och der Gesellschaftsperspektiv.

Angular vergläichen a reagéieren ass hautdesdaags ganz populär. React an Angular si béid héich fortgeschratt, wäit adoptéiert JavaScript Technologien déi mir benotze fir reaktiounsfäeger Webapps an interaktiven eenzeg Säiten Uwendungen ze kreéieren. D'Zuel vu JavaScript Tools fir eng schnell eenzeg Säiten Uwendung (SPAs) Entwécklung wiisst konstant, Also de richtege Kader fir Webentwéckler ze wielen ass méi usprochsvoll.

D'Haapt Differenzen tëscht AngularJS (Framework) a React (d'Bibliothéik) sinn Komponentiséierung, Datebindung, Performance, Ofhängegkeet Opléisung, Direktiven a Templerung. Kucke mir all vun dësen Aspekter am Detail kucken.

AngularJS

Angular Versioun 2 a méi ass ongeféier manner wéi React, awer wann Dir d'Geschicht vu sengem Virgänger, AngularJS zielt, d'Bild evens aus. Et gëtt vu Google gehalen a benotzt an Analytics, Adwords a Google Fiber. Zënter datt AdWords ee vun de Schlësselprojete vu Google ass, ass et kloer datt se e grousse Wette gemaach hunn an et ass onwahrscheinlech séier ze verschwannen.

Reaktéieren

React ass vu Facebook entwéckelt a gepflegt an och an hire Produkter wéi Instagram a WhatsApp benotzt. Et ass elo ongeféier véier an en halleft Joer ronderëm, et ass net exakt nei. Et ass och ee vun de populäersten Projeten op GitHub, mat ongeféier 92.000 Stäre beim Schreiwen. Kléngt gutt fir mech.

Komponentéierung

AngularJS

AngularJS huet eng ganz komplex a fix Struktur well se baséiert op der Model-View-Controller Architektur typesch fir eenzel Säit Uwendungen. En Objekt $ Ëmfang an AngularJS ass verantwortlech fir de Model Deel, deen initialiséiert gëtt vum Controller an dann an HTML transforméiert fir de View fir de Benotzer ze kreéieren. AngularJS bitt vill Standard Servicer, Fabriken, Controller, Direktiven an aner Komponenten.

Mir briechen de Code a verschidde Dateien am AngularJS. Zum Beispill, wa mir e reusabele Komponent mat eiser eegener Direktiv, Controller a Template erstellen, musse mir all Chunk vu Code an enger separater Datei beschreiwen. Wann mir eis Direktiv beschreiwen, addéiere mer e Link op eis Schabloun an der Direktiv fir dës Deeler ze koppelen. AngularJS Direktiven representéieren d'Schablounlogik fir Är Uwendung. D'Schabloun ass HTML verlängert mat AngularJS Direktiven, allgemeng als Tags oder Attributer geschriwwe. Mir addéiere Controller och fir eis Modeller mat néideg $ Ëmfang oder Kontext ze liwweren. Controller ginn och a verschiddenen Dateien geschriwwen. Wa mir eis Uwendung op esou eng Manéier modulariséieren, kënne mir eis Template oder Komponent an engem aneren Deel vun der Websäit nei benotzen an dat ass ganz hëllefräich fir d'AngularJS Development Company well et vill Zäit spuert an den Entwécklungsprozess méi séier mécht.

Reaktéieren

Et gëtt keng "richteg" Struktur fir Uwendungen mat React gebaut Et ass eng grouss JavaScript Bibliothéik déi eis hëlleft de View fir de Benotzer ze aktualiséieren. Awer d'Reactioun léisst eis ëmmer nach net all Uwendungen erstellen. D'Bibliothéik fehlt d'Modell a Kontrollschichten. Fir de Spalt anzefëllen huet Facebook Flux agefouert, déi haut vill Varianten huet fir d'Applikatioun Workflow ze kontrolléieren.

React bitt e ganz einfachen an effiziente Wee fir Komponentbam ze bauen. Et huet e funktionnele Programméierungsstil wou Komponentdefinitioune deklarativ sinn. Är App aus React Komponente komponéieren ass wéi e JavaScript Programm aus Funktiounen ze komponéieren.

Donnéeën Bindung

A MVC Mustere ass d'Verbindung dat wichtegst Thema fir all Donnéeën an d'Uni-Direktioun oder d'Bi-Direktionalfloss ze passen. Data Bindung ass d'Datesynchroniséierungsprozesser déi funktionnéieren tëscht dem Model a Kuckt Komponenten.

AngularJS

Datebindend an Angular Apps ass déi automatesch Synchroniséierung vun Daten tëscht dem Model a View Komponenten. De Wee wéi Angular Datenverbindung implementéiert léisst Iech de Modell als eenzeg Quell vun der Wourecht an Ärer Applikatioun behandelen. D'Vue ass eng Projektioun vum Model zu allen Zäiten. Wann de Model ännert, reflektéiert d'Vue d'Verännerung a vice versa.
 Et ass einfach Befestegung vun Daten vu Model zu View oder vice-versa op enger synchroniséierter Manéier, sou datt wann iergendeng Ännerung zu engem Model oder Vue geschitt, aner soll d'Ännerung weisen an dëst ass synchron.

Reaktéieren

Déi bescht Feature fir ze reagéieren ass Virtual-Dom. Reagéiert injectéiert Donnéeën a seng ofgezeechent Gesiichter op der Konstrukt Zäit, sief datt wann de Rootview erstallt gëtt oder iwwer eng genéiert Vue.React benotzt en-Wee-Datebindung, dat heescht datt mir de Stroum vun Daten nëmmen an eng Richtung direkten. Bannent der Klass ginn d'Donnéeën déi weidergeleet ginn iwwer den Requisiten Eegeschafte vum aktuelle Kontext.

Leeschtung

AngularJS

Et ginn zwou Saachen fir ze berécksiichtegen wa mir iwwer d'Affer vum Angular schwätzen. Wéi mir virdru scho gesot hunn, hänkt Angular 1.x a méi héich op Zwee-Manéier Datebindung. Dëst Konzept baséiert op "dreckeg Iwwerpréiwung", e Mechanismus deen eis AngularJS Applikatioun Entwécklung laggy maachen kann.

Wa mir Wäerter an HTML mat eisem Modell bindelen, erstellt AngularJS e Watcher fir all Bindung fir Ännerungen an der DOM ze verfolgen. Wann de View aktualiséiert ass, vergläicht AngularJS den neie Wäert mat dem initialen Wäert a leeft den $ Verdauungsloop. De $ Verdauungssleck préift dann net nëmmen Wäerter déi tatsächlech geännert hunn, awer och all aner Wäerter, déi iwwerwaacht ginn. Dëst ass firwat d'Performance vill erof geet wann Är Applikatioun ze vill Iwwerwaachter huet.

Eng aner Mängel vum AngularJS Kader ass de Wee wéi et mat der DOM funktionnéiert. Am Géigesaz zum React, benotzt AngularJS Ännerungen an der realer DOM am Browser. Wann déi richteg DOM aktualiséiert gëtt, muss de Browser vill intern Wäerter änneren fir eng nei DOM ze representéieren. Dëst huet och en negativen Impakt op d'Applikatioun Performance.
 Schlecht Leeschtung ass den Haaptgrond firwat Angular 2 Supporter nei geschafft hunn wéi Angular de Programmstaat ännert. Angular 2 an déi lescht Angular 4 Framework Versiounen hunn och Server-Side Rendering an een-Manéier Datenverbindung ähnlech wéi React. Still, Angular 2 a 4 bidden zwee-Wee Datenverbindung als Optioun.

Reaktéieren

React huet d'Konzept vun der virtueller DOM agefouert, dat ass ee vun de gréisste Virdeeler vum React am Verglach mam AngularJS. Wéi funktionéiert déi virtuell DOM? Wann eisen HTML Dokument gelueden ass, erstellt React e liichte DOM Bam aus JavaScript Objete a späichert et op dem Server. Wann de Benotzer nei Daten am Feld am Browser agitt, erstellt React eng nei virtuell DOM a vergläicht se mat der virdru gespäichter DOM. D'Bibliothéik fënnt Ënnerscheeder tëscht zwee Objektmodeller op esou eng Manéier an opbaut déi virtuell DOM nach eng Kéier, awer mat neien geännerten HTML. All dës Aarbecht gëtt um Server gemaach, wat d'Belaaschtung am Browser reduzéiert.

Elo, anstatt e komplett neien HTML an de Browser ze schécken, schéckt React den HTML nëmmen fir dat verännert Element. Dës Approche ass vill méi effizient wéi dat wat AngularJS bitt.

Ofhängegkeete léisen

AngularJS

Dependency Injection ass e Software Design Muster, an deem Komponenten hir Ofhängegkeeten kréien anstatt se innerhalb der Komponent ze hardcodéieren. Dëst entléisst e Bestanddeel vun der Lokalisatioun vun der Ofhängegkeet a mécht Ofhängegkeeten konfiguréierbar. Dëst hëlleft fir Komponentë weiderverwendbar ze maachen, ze halen an ze testen.
 AngularJS fënnt automatesch passend Objekter, déi als $ routeParams, $ filter, store, an $ scope Parameteren injizéiert ginn. Et ginn zwou Funktiounen, déi Ofhängegkeet-Injektioun am AngularJS-Kader méiglech maachen: $ injektéieren an $ bidden.

Reaktéieren

Den Ënnerscheed tëscht React an AngularJS mat Bezuch op Ofhängegkeet-Injektioun ass datt React kee Konzept vun engem gebaute Container fir Ofhängegkeet-Injektioun bitt. Awer dëst bedeit net datt mir eng Method mussen denken fir Ofhängegkeeten an eisem React Projet ze injizéieren. Dir kënnt verschidden Instrumenter benotze fir Ofhängegkeeten automatesch an enger React Applikatioun ze sprëtzen. Esou Instrumenter enthalen Browserify, RequireJS, ECMAScript 6 Moduler déi mir kënne benotze via Babel, ReactJS-di, a sou weider. Déi eenzeg Erausfuerderung ass en Instrument ze wielen deen ze benotzen.

Direktiven a Schablounen

AngularJS

Direktiven am AngularJS sinn e Wee fir eise Code ronderëm d'DOM ze organiséieren. Wa mir mat AngularJS schaffen, benotze mir d'DOM nëmmen duerch Direktiven. AngularJS huet vill Standard Direktiven, wéi ng-bind oder ng-app, awer heiansdo maache mir eis eege Richtlinnen an AngularJS fir Daten an Templates anzeginn. D'Schabloun muss en Element hunn mat eiser Direktiv als Attributer geschriwwe ginn. Et ass sou einfach wéi dat. Awer AngularJS Direktiven, wa voll definéiert, si raffinéiert. Den Objet mat Astellungen, op déi mir an der Direktiv zréckkommen, enthält ongeféier zéng Eegeschaften. Esou Properties wéi TemplateUrl oder Template sinn einfach ze verstoen.

Reaktéieren

React bitt keng Divisioun a Templates an Direktiven oder Templogik. D'Schablounlogik soll an der Schabloun selwer geschriwwe ginn. Fir ze kucken wéi dëst ausgesäit, öffnet e Beispill vum GitHub. Dir mierkt datt React seng Komponent App.TodoItem gëtt mat enger Standard React.createClass () Method erstallt. Mir passen en Objet mat Eegeschafte fir dës Funktioun. Esou Eegeschafte wéi componentDidUpdate, shouldComponentUpdate, handleKeyDown oder handleSubmit stellen d'Logik duer - wat geschitt mat eisem Template. Um Enn vun der Komponent definéiere mir normalerweis d'Render-Eegeschafte, wat eng Schabloun ass fir am Browser ze ginn. Alles ass op enger Plaz lokaliséiert, an d'JSX Syntax an der Schabloun ass einfach ze verstoen och wann Dir net wësst wéi Dir an JSX schreift. Et ass kloer wat mat eisem Template geschitt wäert, wéi et sollt ausgestallt ginn a wéi eng Informatioun gëtt vun Eegeschafte presentéiert.

Fazit:

Wéi Dir um Enn vun der Diskussioun kommt, sinn elo e puer Punkte kloer fir Iech souwuel de Kaderen an wat besser ass fir d'Entwécklung vu Webapplikatiounen. Dofir, wann Dir decidéiert eent vun hinnen ze wielen, dann ass meng Meenung. Wann Dir probéiert eng Basis Web App ze entwéckelen, da kënne béid benotzt ginn. Trotzdem ass ReactJS SEO frëndlech, Echtzäit a kompatibel mat schwéierem Traffic. Wou AngularJS eng glat Entwécklung an Tester zesumme mat Zouverlässegkeet ubitt.

Ursprénglech bei Angular Minds verëffentlecht.