Vývoj single-page aplikace: Angular JS vs. React

Angular a React patří mezi nejpoužívanější nástroje využívané k tvorbě SPA (jednostránkových webových aplikací). Oba jsou postavené na technologii JavaScript a 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 vývoj single-page aplikace? Odpověď naleznete v následujících odstavcích.

Angular JS vs. React a vývoj single-page aplikací

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ě. Představte si konkrétní příklad. Třeba vývoj webové aplikace pro správu úkolů (To Do list), kde uživatelé budou moci přidávat úkoly, mazat je, seskupovat do seznamů a označovat jako hotové.

Popsané funkcionalitě, vyhovuje použití technologie 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 a srovnat obě technologie na základě několika kritérií s ohledem na povahu single-page aplikací:

•  výkon,
• vhodnost pro projekty různých velikostí,
• JS optimalizace pro vyhledávače v SPA (SEO).

Rychlost webu nebo aplikace s Angular.js a knihovnou React

Uživatelský zážitek úzce souvisí s front-endem aplikace, konkrétně s rychlostí aktualizace HTML a s 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. Rychlost ovlivňuje i náklady na marketing a je proto jedním z nejzásadnějších kritérií úspěšné aplikace.

Angular a React k zajištění dostatečné rychlosti načítání přistupují dvěma zcela odlišnými způsoby. Nutno podoknout, že konkrétní digitální produkty jsou pak ovlivněny specifickými požadavky a řešením, které mohou výsledné aplikace velmi zpomalit. Ne všechny papírové údaje tedy vždy odpovídají realitě.

Přesto je však dobré i tyto parametry vnímat. Přehledné porovnání rychlosti JS frameworků, včetně Angularu a Reactu, si 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í single-page 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 single-page 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 proto využívá zejména pro aplikace s častou aktualizací. Jak to funguje v praxi můžete vypozorovat 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.js. 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 totiž mohou setkat s technickou limitací frameworku, a to mnohem dříve než v případě technologie React. Ta 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 s 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), čímž disponuje React a má tak v této oblasti jasně navrch.

Framework Angular a SEO

V případě Angularu 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. Nejzajímavější 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.

Pokud vás vývoj single-page aplikace s technologií React zaujal, tak nás neváhejte kontaktovat. Rádi s vámi probereme vaše nápady a připravíme pro vás řešení na míru, ať už co se týče designu nebo architektury.