background design element dropbackground design element dropbackground design element drop

Angular x React, kterou technologii zvolit pro web aplikaci?


Vít Uličný
Aktualizováno:29.09.2020· 6 min. čtení
Počet zobrazení:10691
Facebook iconTwitter iconLinkedIn icon
Obsah článku
Facebook iconTwitter iconLinkedIn icon

Angular a React patří mezi nejpoužívanější nástroje využívané k vývoji SPA (jednostránková web aplikace). Oba jsou postavené na technologii JavaScriptu a oba neustále pracují na nových funkcích, díky kterým by mohli získat nad druhým navrch. Které řešení je ovšem vhodnější pro tvorbu jednostránkové aplikace? Na to se pokusí odpovědět následující odstavce.

ANGULAR VS REACT, KTEROU TECHNOLOGII ZVOLIT PRO WEB APLIKACI?

Kritéria technologií pro jednostránkové web aplikace

Výběr technologie by měl být přímo závislý na konkrétním zadání od zákazníka. Může se však stát, že kritéria splňuje více nástrojů současně.

To-Do List web aplikace

Představme si konkrétní příklad. Třeba tvorbu aplikace pro správu úkolů (To Do list). Uživatelé budou moci přidávat úkoly, mazat je, seskupovat do seznamů a označovat jako hotové. Popsané funkcionalitě, v tomto případě, vyhovuje použití Angular i React, ke které variantě se tedy přiklonit?

Základní rozhodnutí může samozřejmě spočívat na preferencích daného vývojáře.

Pojďme se ovšem na problematiku podívat objektivněji o a srovnat obě technologie na základě několika kritérií s ohledem na povahu single-page aplikací:

Web aplikace s Angular a React: pro a proti

Rychlost webu nebo aplikace

Uživatelský zážitek úzce souvisí s front-endem aplikace, konkrétně s rychlostí aktualizace HTML a tím i načítáním stránky.

Rychlost webu nebo aplikace má přímý a výrazný vliv na konverze eshopu, webu nebo aplikace. 

Vyšší rychlosti znamenají vyšší konverze, to znamená vyšší obraty a tím i vyšší zisky.
Zdroj:Cloud fare

Vyšší rychlosti znamenají vyšší konverze, to znamená vyšší obraty a tím i vyšší zisky.

Rychlost ovlivňuje i náklady na marketing.

Rychlost Angular vs. React

Angular a React k tomuto úkolu přistupují dvěma zcela odlišnými způsoby.

Nutno podoknout, že konkrétní reálné aplikace jsou pak ovlivněny specifickými požadavky a řešením, které mohou výsledné aplikace velmi zpomalit.

Přehledné porovnání rychlosti JS frameworků, včetně Angularu a Reactu, si pak můžete sami otestovat: https://stefankrause.net/js-frameworks-benchmark8/table.html

Angular

https://angular.io

Angular provádí změny prostřednictvím DOM přímo v prohlížeči.

To přináší nevýhodu pro slabší zařízení, kde může dojít ke zpomalení aplikace v důsledku vyšších nároků na CPU.

Určité zhoršení rychlosti může přijít také s přílišnou provázaností jednotlivých částí aplikace, kdy je využíváno zbytečně velké množství paměti.

AngularJS je ve své původní podobě (verze 1.x) tedy vhodný zejména pro jednostránkové web aplikace, které nepotřebují tak často aktualizovat svůj obsah. 

Nyní je již vydaná verze 8, která neustále Angular posouvá a řeší mnoho neduhů předešlých verzí.

React

V případě knihovny React jsou tyto faktory vyřešeny efektivním přístupem k aktualizaci DOM, který tolik nezatěžuje zařízení.

React.js se pak využívá zejména pro aplikace s častou aktualizací.

Jak to funguje v praxi můžeme všichni pozorovat na sociální síti Facebook, který za vývojem Reactu stojí.

Velikost projektu

Volba technologie by měla být závislá také na rozsahu funkcionality aplikace.

Obecně platí, že čím víc funkcí jednostránková webová aplikace má, tím větší je její velikost.

Pokud vám tedy jde o co nejlepší poměr velikost / výkon, měl by být volbou framework Angular.

Již v základu nabízí vše potřebné pro vytvoření plně funkční Single Page Aplikace - SPA.

Tento klad je však současně také záporem, a to zejména v případě budoucího doplnění nějakých funkcí.

Vývojáři se tak mohou setkat s technickou limitací frameworku, a to mnohem dříve než v případě React.

Ten ovšem, na druhou stranu, nenabízí takové množství knihoven a je proto náročnější na počáteční vývoj.

SEO pro JavaScript frameworky React a Angular

Optimalizace pro vyhledávače zásadně ovlivňuje popularitu a návštěvnost aplikace.

Aplikace by měly být na internetu dobře dohledatelné a umístěné na vysokých příčkách ve výsledcích vyhledávačů.

Pro lepší výsledky SEO je vhodnější vykreslovat obsah na straně serveru (SSR - Server Side Rendering) a React má tak zde navrch.

Angular a SEO

V případě Angular by byla nezbytná implementace další knihovny (Angular Universal), která by pomohla s nastavením jednostránkové webové aplikace tak, aby mohla být poskytována její HTML verze se kterou již umí GoogleBot pracovat.

Existují i další řešení, jak docílit kvalitního SEO v Angularu, která jsou popsaná v článku SEO Guide to Angular: Everything You Need to Know. Nejvíce zajímavou cestou pro budoucnost je tzv. Hybridní renderování - Hybrid Rendering (Server-Side Rendering with Hydration)

Tato řešení jsou však opět složitější na vývoj, a to nejen z hlediska času, ale i dovedností.

SEO a React - framework Next.js

Nastavení SSR v Reactu ale také není bezpracné.

Ulehčit nasazení SSR pro SEO nám může framework Next.js, který je na to optimalizován.

Shrnutí - React vs Angular

Na závěr je ještě vhodné uvést stručné shrnutí poznatků z jednotlivých kategorií. Knihovna React je vhodnější pokud:

  • plánujete v budoucnu výrazně rozšiřovat funkčnost své aplikace,

  • potřebujete neustálé obnovování obsahu,

  • máte dostatek prostředků a času pro investování do počátečního vývoje.

Framework Angular je pak dobrou volbou pro jednostránkové web aplikace které:

  •  je třeba vyvinout v časovém presu,

  • nepotřebují časté obnovování obsahu,

  • nebudou dále výrazně rozšiřovány o nové funkce.

 


Potřebujete poradit?