Porovnání mezi AngularJS VS React v roce 2018

V tomto článku porovnáváme 2 nejoblíbenější technologie pro vývoj frontendu: Angular and React. Budeme je srovnávat z pohledu projektového architekta, z pohledu vývojářů i společností.

Porovnání Angular a reagovat je dnes velmi populární téma. React a Angular jsou vysoce pokročilé, široce přijímané technologie JavaScript, které používáme k vytváření responzivních webových aplikací a interaktivních jednostránkových aplikací. Počet nástrojů JavaScript pro rychlý vývoj jednostránkových aplikací (SPA) neustále roste, takže výběr správného rámce pro vývojáře webu je náročnější.

Hlavní rozdíly mezi AngularJS (Framework) a React (knihovna) jsou komponenty, vazba dat, výkon, řešení závislostí, direktivy a templating. Podívejme se na každý z těchto aspektů podrobně.

AngularJS

Úhlová verze 2 a vyšší se pohybovala kolem méně než React, ale pokud počítáte v historii svého předchůdce AngularJS, obraz se vynoří. Je spravován společností Google a používá se v Analytics, Adwords a Google Fiber. Protože je AdWords jedním z klíčových projektů na Googlu, je jasné, že na něj udělali velkou sázku a je nepravděpodobné, že v dohledné době zmizí.

Reagovat

React je vyvíjen a udržován společností Facebook a také používán v jejich produktech, jako je Instagram a WhatsApp. Už to bylo zhruba čtyři a půl roku, takže to není úplně nové. Je to také jeden z nejoblíbenějších projektů na GitHubu, který měl v době psaní asi 92 000 hvězd. To zní dobře.

Komponentizace

AngularJS

AngularJS má velmi komplexní a pevnou strukturu, protože je založen na architektuře Model-View-Controller typické pro jednostránkové aplikace. Rozsah $ $ v AngularJS je zodpovědný za část Model, která je inicializována řadičem a poté transformována do HTML, aby se vytvořil pohled pro uživatele. AngularJS poskytuje mnoho standardních služeb, továren, kontrolérů, směrnic a dalších komponent.

Rozdělíme kód do několika souborů v AngularJS. Například, když vytváříme opakovaně použitelnou komponentu s naší vlastní direktivou, řadičem a šablonou, musíme popsat každý kus kódu v samostatném souboru. Jakmile popíšeme naši směrnici, přidáme odkaz na naši šablonu ve směrnici, abychom tyto části spojili. Direktivy AngularJS představují logiku šablony pro vaši aplikaci. Šablona je HTML rozšířená o AngularJS direktivy, obecně psané jako značky nebo atributy. Přidáváme také řadiče, abychom našim modelům poskytli potřebný rozsah $ nebo kontext. Řadiče jsou zapsány také v samostatných souborech. Když modularizujeme naši aplikaci takovým způsobem, můžeme znovu použít naši šablonu nebo komponentu v jiné části webu, což je pro AngularJS Development Company velmi užitečné, protože to ušetří spoustu času a urychlí proces vývoje.

Reagovat

Neexistuje žádná „správná“ struktura pro aplikace vytvořené pomocí React Je to velká knihovna JavaScript, která nám pomáhá aktualizovat zobrazení pro uživatele. React však stále neumožňuje vytvářet aplikace samostatně. V knihovně chybí vrstvy modelu a řadiče. Aby se vyplnila mezera, Facebook představil Flux, který má v dnešní době řadu variant, pro řízení pracovního postupu aplikace.

React poskytuje velmi jednoduchý a efektivní způsob vytváření stromů komponent. Může se pochlubit funkčním stylem programování, kde jsou definice komponent deklarativní. Skládání aplikace z komponent React je jako skládat program JavaScript z funkcí.

Vazba dat

Ve vzorech MVC je vazba nejdůležitějším tématem pro předávání jakýchkoli dat v jednosměrném nebo obousměrném toku. Vazba dat je procesy synchronizace dat, které fungují mezi komponentami modelu a pohledu.

AngularJS

Vazba dat v Angular apps je automatická synchronizace dat mezi komponentami modelu a pohledu. Způsob, jakým Angular implementuje vázání dat, vám umožní s modelem zacházet jako s jedním zdrojem pravdy ve vaší aplikaci. Pohled je projekcí modelu za všech okolností. Když se model změní, pohled odráží změnu a naopak.
 Jde pouze o připojení dat z modelu k zobrazení nebo naopak synchronizovaným způsobem, takže kdykoli dojde k jakékoli změně modelu nebo pohledu, jiná by měla tuto změnu zobrazit a to je synchronizované.

Reagovat

Nejlepší funkcí v reakci je Virtual-Dom. React injektuje data do vykreslených pohledů v konstrukčním čase, ať už při vytvoření kořenového pohledu nebo prostřednictvím vnořeného pohledu.React používá jednosměrné vázání dat, což znamená, že jsme schopni směrovat tok dat pouze v jednom směru. Uvnitř třídy jsou data, která jsou předána, přístupná prostřednictvím vlastnosti props aktuálního kontextu.

Výkon

AngularJS

Když mluvíme o Angularově výkonu, musíme vzít v úvahu dvě věci. Jak jsme již zmínili, Angular 1.x a vyšší se spoléhá na obousměrnou vazbu dat. Tento koncept je založen na „špinavé kontrole“, což je mechanismus, díky kterému může náš vývoj aplikací AngularJS zaostávat.

Když svážíme hodnoty v HTML s naším modelem, AngularJS vytvoří pro každou vazbu sledování, které sleduje změny v DOM. Jakmile se pohled aktualizuje, AngularJS porovná novou hodnotu s počáteční hodnotou a spustí smyčku $ digest. Smyčka $ digest pak zkontroluje nejen hodnoty, které se skutečně změnily, ale také všechny ostatní hodnoty, které jsou sledovány prostřednictvím pozorovatelů. To je důvod, proč se výkon výrazně sníží, pokud má vaše aplikace příliš mnoho sledujících.

Dalším nedostatkem rámce AngularJS je způsob práce s DOM. Na rozdíl od React, AngularJS aplikuje změny ve skutečné DOM v prohlížeči. Když se skutečný DOM aktualizuje, musí prohlížeč změnit mnoho interních hodnot, aby reprezentoval novou DOM. To má také negativní dopad na výkon aplikace.
 Špatný výkon je hlavním důvodem, proč příznivci Angular 2 přepracovali, jak Angular mění stav programu. Úhlová 2 a nejnovější verze Angular 4 framework také obsahují vykreslování na straně serveru a jednosměrná vazba dat podobně jako React. Úhlové 2 a 4 přesto nabízejí obousměrné datové vázání jako možnost.

Reagovat

React představil koncept virtuální DOM, což je jedna z největších výhod React ve srovnání s AngularJS. Jak funguje virtuální DOM? Po načtení našeho dokumentu HTML vytvoří React z objektů JavaScriptu lehký strom DOM a uloží jej na server. Když uživatel zadá nová data do pole v prohlížeči, React vytvoří novou virtuální DOM a poté ji porovná s dříve uloženou DOM. Knihovna takto vyhledá nesrovnalosti mezi dvěma objektovými modely a znovu vytvoří virtuální DOM, ale s novým změněným HTML. Celá tato práce se provádí na serveru, což snižuje zatížení prohlížeče.

Nyní místo odeslání zcela nového HTML do prohlížeče, React odešle HTML pouze pro změněný prvek. Tento přístup je mnohem efektivnější než to, co nabízí AngularJS.

Řešení závislostí

AngularJS

Dependency Injection je softwarový návrhový vzorec, ve kterém jsou komponentám dány jejich závislosti namísto toho, aby je uvnitř komponenty zakódovaly. To uvolňuje komponentu od lokalizace závislosti a umožňuje konfigurovatelnost závislostí. To pomáhá při opětovném použití, údržbě a testování součástí.
 AngularJS automaticky vyhledá vhodné objekty, které jsou injektovány jako parametry $ routeParams, $ filter, store a $ range. Existují dvě funkce, které umožňují injekci závislosti v rámci AngularJS: $ inject a $ poskytuje.

Reagovat

Rozdíl mezi React a AngularJS, pokud jde o vstřikování závislosti, spočívá v tom, že React nenabízí žádný koncept vestavěné nádoby pro vstřikování závislosti. To však neznamená, že musíme v našem projektu React vymyslet metodu, jak aplikovat závislosti. V aplikaci React můžete automaticky aplikovat závislosti pomocí několika nástrojů. Mezi takové nástroje patří moduly Browserify, RequireJS, ECMAScript 6, které můžeme použít přes Babel, ReactJS-di atd. Jedinou výzvou je vybrat nástroj, který chcete použít.

Směrnice a šablony

AngularJS

Směrnice v AngularJS jsou způsob, jak organizovat náš kód kolem DOM. Pokud pracujete s AngularJS, přistupujeme k DOM pouze prostřednictvím směrnic. AngularJS má mnoho standardních direktiv, jako je ng-bind nebo ng-app, ale někdy vytváříme vlastní direktivy v AngularJS pro vkládání dat do šablon. Šablona musí mít prvek s naší směrnicí napsaný jako atribut. Je to tak jednoduché. Ale směrnice AngularJS, pokud jsou plně definovány, jsou sofistikované. Objekt s nastavením, který se vrátíme ve směrnici, obsahuje asi deset vlastností. Takové vlastnosti jako templateUrl nebo template jsou snadno srozumitelné.

Reagovat

React nenabízí rozdělení na šablony a směrnice nebo logiku šablon. Logika šablony by měla být zapsána do samotné šablony. Chcete-li vidět, jak to vypadá, otevřete příklad z GitHubu. Všimněte si, že aplikace komponenty React je vytvořena .odoItem je vytvořen standardní metodou React.createClass (). Tuto funkci předáváme objekt s vlastnostmi. Logické jsou vlastnosti jako komponentDidUpdate, shouldComponentUpdate, handleKeyDown nebo handleSubmit - co se stane s naší šablonou. Na konci komponenty obvykle definujeme vlastnost render, což je šablona, ​​která se má vykreslit v prohlížeči. Vše je umístěno na jednom místě a syntaxi JSX v šabloně lze snadno pochopit, i když nevíte, jak psát v JSX. Je jasné, co se stane s naší šablonou, jak by se měla vykreslit a jaké informace pro ni budou prezentovány vlastnosti.

Závěr:

Když se dostáváte na konec diskuse, nyní vám je jasné několik bodů ohledně obou rámců a to je lepší pro vývoj webových aplikací. Pokud se tedy rozhodnete některou z nich vybrat, pak je zde můj názor. Pokud se pokoušíte vytvořit základní webovou aplikaci, můžete použít obě. Přesto je ReactJS SEO přátelský, v reálném čase a kompatibilní se silným provozem. Zatímco AngularJS nabízí plynulý vývoj a testování spolu se spolehlivostí.

Původně publikováno v Angular Minds.