AngularJS vs ReactJS

Ahoj lidi, dodržoval jsem svůj slib a tady jsem se svým druhým příspěvkem na porovnání toho, jak to funguje s AngularJS a ReactJS.

Zřeknutí se odpovědnosti: Všechny tyto body jsou konglomerací mých myšlenek a zkušeností. Mohou se lišit od člověka k člověku. Jen sdílím svůj názor na výběr jednoho z nich.

Framework vs Library

Zde porovnáváme plnohodnotný rámec (Angular) s pouhou knihovnou (React). Toto je úplně první věc, kterou musí každý frontendový vývojář pochopit. Úhlový přijde jako celek „uvážený balíček“, musím říct, zatímco ten druhý je pouhá knihovna JS. Nyní, i když je snazší naučit se prostředí od začátku, je většinou zmatek začít s knihovnou, aby se chovala jako rámec. Opravdu jsem byl zmaten zavedením této nové knihovny, když jsem proudil v hranatých vlnách, a to byl úplně první rozdíl, který jsem mezi nimi pozoroval. Už samotná myšlenka seskupení několika třetích stran nebo možná oficiálních knihoven, které by byly srovnatelné s již existujícím standardním rámcem Angular, mě udržovala loajální vůči Ng než tato nová malá knihovna. Takže práce s rámcem a knihovnou má své vlastní klady a zápory. I když rámec poskytuje dobře definovanou cestu k tomu, aby se věci vyvíjely, pomocí knihoven, k dosažení stejného úkolu musíte záviset na několika dalších knihovnách.

Křivka učení

To je jeden z hlavních tahounů, díky kterému vývojáři volí, s čím by měli jít. Po práci s Angular 1 a 2 a Reactem je učení AngularJS rozhodně tvrdší než ReactJS. Důvodem je, že ReactJS je skutečně JS, zatímco pro učení Angular, zejména Angular 2, se musíte naučit TypeScript, RxJS, který jsem fanouškem. Také jsem byl velmi rigidní, že jsem si na začátku nevybral TS nebo RxJS, ale když jsem je použil, viděl jsem jejich výhody a zjistil, že to stálo za úsilí. Přestože volba mezi es6 nebo TS je běžným zdrojem záměny pro začátečníky ng 2. Navrhuji, abyste šli podle doporučení komunity 2 a přizpůsobili TypeScript. Pokud znáte jakýkoli jazyk oops, je to kousek koláče, abyste se ho naučili. Když už mluvíme o React, trvalo mi to jen den, než jsem se to naučil! Protože to bylo jen JS, upravil jsem to docela rychle. Na začátku se zdálo, že JSX je trochu divný, ale když se toho zmocníte, nic to není. Na druhou stranu mi trvalo měsíc, než jsem se naučil Angular 2 se všemi věcmi RxJS a TS a naučil jsem se úplně nový aspekt Angular 2, protože možná víte, že Angular 1 a 2 se velmi liší, pokud jde o sémantiku a architekturu.

Rychlost

Když byl Angular 1 představen před lety, jako jediný hráč na trhu, vzal mezi devs obrovskou popularitu a bylo to opravdu něco velmi fascinujícího, co společnost Google představila. Úplně to změnilo způsob, jakým jsme psali ty ošklivé vypadající webové stránky špaget JQuery. Struktura kódu a složky byla nyní organizovanější a čistější. Trvalo to hodně času, ale po představení ReactJS a jeho rychlém výkonu se začaly objevovat otázky týkající se výkonu AngularJS. Ano, mluvím o notoricky známém opakování. Pokud jde o manipulaci s tisíci řad DOM, je moudré jít na React než Angular 1, ale hej, co Angular 2? Oni (Angular creators) tvrdí, že Angular 2 je 5x rychlejší než Angular 1, protože nyní je vlákno UI uvolněno z výpočtu JS. Úhel 2 využívá pracovníky webu k uvolnění podprocesu uživatelského rozhraní pro účely vykreslování. Všechny těžké úkoly JS se odehrají v pozadí. Přesto jsem zjistil, že v tomto případě objevuji slavnou „virtuální DOM“ ReactJS, která v tomto případě vezme veškeré vápno. To je důvod, proč je React tak populární. Jak všichni víme, operace DOM jsou ve webové aplikaci docela drahé a pokud jde o manipulaci s tisíci záznamů nebo prvků, React využívá své pravomoci, jako je virtuální DOM a inteligentní algoritmus diff. Nechci se dostat do podrobností, ale konečný výsledek je vynikající. Webové aplikace využívající reakci jsou rychlé a méně soudné.

Lešení a balení

Vzpomínám si na ty dny bojů s požadavkami na správu modulů a závislostí a hlavní boj přichází, když potřebujete sbalit věci pro své produkční prostředí. Úhlová 2 však poskytuje krásné úhlové cli jako lešení, které generuje varnou desku, ze které můžete začít. Nesnažil jsem se hodně koukat pod kapotou toho strašidelného lešení. S Reactem máte tento skvělý nástroj zvaný webpack, velmi přehledný a snadno použitelný s funkcemi, jako je kódování kódu a komprese produkčního prostředí atd., Což velmi usnadňuje snadnou dodávku aplikací.

Vykreslování na straně serveru

U Angular 1 se vždy stěžovalo, že uživatelé potřebují obrovský čas, aby viděli počáteční zobrazení načtení stránky. I když existují způsoby, jak to zmírnit použitím zavaděčů zaváděcích aplikací, ale nevyřeší skutečný problém. S Angular 2 máme tento nástroj s názvem Angular Universal, který podporuje vykreslování na straně serveru. To znamená, že při načítání aplikace server vykreslí počáteční zobrazení stránky a poté, když klientské aplikace pomalu načítají svůj hlavní soubor js, Angular nakopne a zpracovává interakce UI. Totéž platí pro React using Redux, můžete určit počáteční stav aplikace, který vám pomůže vykreslit počáteční zobrazení stránky.

Přístup založený na komponentách

Jak se web postupem času vyvíjel, byla zavedena tato pěkná architektura založená na komponentách. Všechno na vaší webové stránce je součást, která může mít další dílčí součásti atd. Díky tomu je pro vývojáře velmi jasné, že před jejich sestavením rozumí jejich aplikacím. Teď to považuji za velmi čisté, na rozdíl od dřívějšího nepořádku. Angular 1 nepodporuje architekturu založenou na komponentách, zatímco Angular 2 ano, a tak reaguje.

Bytes Matters

Nyní umožňuje řezat se do pronásledování a diskutovat o dalším důležitém aspektu pro rozhodování rozhraní frontend pro vaše aplikace, Dimenzování.

Úhel 2: 766 k (s RxJS)
Úhlová 1: 143k
React + Redux: 139k

Hej, to je spousta čísel. Na první pohled to dělá Angular 2 špatným uchazečem o naši volbu. Ale lemme vám řekne, toto jsou čísla, která jsem získal z internetu, a pragmatická čísla se liší. Prakticky má aplikace pro reakci reduxu 1,2 MB! No tak! A to proto, že nejenže reaguje + redux vyžaduje sestavení krásné aplikace, ale vyžaduje knihovny jako Material-UI nebo Angular Material, které si vybírají velké poplatky. To znamená, že se mi podaří zmírnit tento problém skrze kousky webpacků, o kterých brzy píšu příspěvek. Prozatím však můžeme omezit naši diskusi na vytváření aplikací bez knihoven materiálů a můžete vidět rozdíl. Nejsem si tím úplně jistý, ale já vím v ng-conf 2016, tvrdili, že velikost Angular 2 byla asi 150 kb. Nakonec bych rád řekl, že se těmito čísly nezacházejte, existuje řada dalších knihoven, na které se musíte spolehnout, pokud jde o vaše konkrétní požadavky, takže se může lišit.

Budova pro mobily

Jak skvělé by pro vás bylo, kdyby to, co jste se naučili vytvářet webové aplikace, bylo možné použít k vytváření mobilních aplikací současně. Ano, oba tyto rámce vám pomohou vytvářet mobilní aplikace, ale různými způsoby. Pro Úhly 1 a 2 jsou k dispozici iontové 1 a 2. Dvě verze Angular a Ionic se ještě nestabilizovaly, zatímco React Native na druhé si získal velkou popularitu a mnoho populárních aplikací podle mého vědomí se posunulo na React Native. K dispozici je také hláška o NativeScript pro Angular lidi. Hlavní rozdíl mezi Ionic a React Native spočívá v tom, že se Ionic používá k vytváření hybridních webových aplikací pomocí architektury AngularJS a Cordova, zatímco React Native vám dává zcela nativní zážitek.

P.S.

Oba tyto rámce fungovaly dobře a způsobily revoluci ve způsobu, jakým jsme dříve vyvíjeli webové aplikace. Úhel 1 je zde již poměrně dlouhou dobu a od spuštění ReactJS došlo k velkému rozruchu. Důvodem je, že se zdá, že se React přizpůsobuje novým webovým standardům dříve než Angular. Úhel 2 přišel, ale je pozdě, v době psaní tohoto příspěvku je stále v RC (Release Candidate). Užil jsem si práci s ReactJS více než AngularJS. Pojďme tedy ukončit tuto diskusi. Pokud jde o mě, závěr, že ReactJS je silnějším uchazečem o výběr rozhraní frontend, nebude špatný. I když rozhodně učení není nijak škodlivé. Vždy se můžete učit a vyjít s kombinací dobrých funkcí z obou rámců a mít to nejlepší z obou světů.

Děkuju! Komentáře jsou velmi vítány.