Článek je založen na základních zkušenostech Reactu a Angularu 2, ve kterých jsem napsal jednoduchou CRUD aplikaci s reportingem a autorizací. U obou aplikací byl použit stejný backend (Spring REST, JPA repository).
K napsání tohoto příspěvku mě donutila skutečnost, že jsem se v poslední době zaměřil na frontendové technologie a chtěl si vyzkoušet několik cest, které mohou vést k úspěšnému cíli.
V současné době je velmi populární tvorba tzv. „single page“ webových aplikací, které jsou vykonávány javascriptem na straně klienta.
Doba pokročila a kromě tzv. single page aplikací se také objevilo něco, čemu se říká isomorfní aplikace. Tomuto tématu se věnovat nechci, nicméně je to další evoluční krok, který v podstatě říká, že část javascriptové aplikace běží na serveru. Lépe to vystihuje následující článek: What is an isomorphic application?
Ale zpět k single page aplikacím. Proč jsou vlastně tak populární a co mi to přináší z pohledu vývoje?
Tak zejména je to fakt, že webovou část nevnímám jako prezentační vrstvu tvořenou pomocí html, ale fakt, že daná webová stránka je aplikací. Tedy umí pracovat s událostmi a její jednotlivé části jsou měněny bez nutnosti znovunačítat celý kontext či se ptát serveru na změnu. Celá stránka je kontext, ve kterém pracuji a ve kterém provádím i například routování (přechod na jiné stránky, které jsou v podstatě jen změny v blocích).
Nespornou výhodou je to, že vše je zpracováváno na straně klienta, tím pádem striktně rozděluji aplikaci na backend a frontend. Backend již nemusí nést tolik informací o prezentační vrstvě a soustředí se pouze na svou část.
Na rozdíl od toho je frontend schopný fungovat bez backendu a navíc je velice jednoduché postavit webovou aplikaci bez něj. Představte si situaci, kdy díky obřímu JSON souboru pošlete do aplikace celý její model a jste schopni ji ukázat zákazníkovi, aniž byste museli napsat čárku v backend systému.
Další nespornou výhodou je to, že většina frameworků, které se pro single page aplikace používají, jsou komponentově orientované. Tedy umožňují vytvářet znovupoužitelné komponenty a na konci toho v podstatě jen skládáte aplikaci z Vašich komponent. S tím také souvisí fakt, že máte pod správou i to, jak se dané komponenty generují a jak například pracují v rámci DOMu.
U serverových aplikací, jako je Apache Wicket, JSF či ASP. NET, máte jen malou kontrolu nad tím, jaké Vaše výsledné komponenty nakonec generují klientský kód. Navíc, pokud budete tímto způsobem tvořit inteligentnější webovou aplikaci, která má reagovat na klientské události a měnit různé komponenty, tak se dostanete do fáze, že se Vám stejně část logiky převede na klienta, ovšem často bez štábní kultury. Nakonec se v aplikaci objeví obří javascriptové skripty, kterým rozumí pouze autor.
Proč React?
Tuhle otázku jsem si pokládal vždy, když jsem zaslechl něco o tom, proč je Angular špatný a proč je React tou pravou volbou. Pojďme si to rozebrat….
V první řadě je třeba říct, že existuje několik frameworků, které se pro single page aplikace používají. Pokud vyřadíme všechny, které hrají spíše druhé housle, zůstávají dva kandidáti.
1. Angular 2 (Google)
2. React (Facebook)
Angular 2
Angular 2 se už v mnohém poučil od svého předchůdce a také se dost inspiroval samotným Reactem. Nemám zkušenosti s Angularem 1, ale údajně přináší lepší způsob tvorby komponent a také možnosti, jak tyto komponenty využívat. Současně s tím ovšem stále nese jeden velký problém a tím je závislost na DOMu. Angular 2 používá tzv. zones, což v podstatě říká, že když změníte model, tak zones projde celý strom a propaguje danou změnu. Tím ovšem nekončí. Pokud provede změnu, spustí iteraci znovu a zkontroluje znovu ostatní objekty, které by zase mohly reagovat na předešlou změnu. Iterace končí ve chvíli, kdy se žádná další změna nekoná.
Na první pohled se to může zdát jako dobrá volba, nicméně faktem je, že u velkých aplikací dochází k performance problémům.
Další nespornou nevýhodou je také fakt, že Angular 2 ještě stále nevyšel a nese sebou spoustu nedodělků. Jeden příklad za všechny. Dost často narazíte na to, že pokud ve své komponentě máte chybu, tak se jí těžko dozvíte z error message. Angular Vám oznámí obecnou chybu a tím skončí. V budoucnu na tom jistě zapracují, ale v současné době je to skutečně problém.
Dalším negativem je také to, že Angular vytváří Google. Google je velice známý tím, že rád a často zabíjí své produkty a nedělá mu problém přestat podporovat něco, v čem nevidí budoucnost. Stačí se podívat na Angular 1, na kterém pracuje v současné době 0 vývojářů.
Abych nehledal pouze chyby, dá se zde nalézt i spoustu výhod. Tou největší výhodou, oproti Reactu je, že s Angularem 2 dostáváte téměř kompletní stack, který řeší view, eventy, model, http calls, apod. Tedy aplikaci strukturalizujete jako template => component => service => model. Tento pattern je podobný backend systémům a pro hodně lidí bude Angular 2 možná i stravitelnější.
Existuje informace, že Angular 2 plánuje integraci JSX z Reactu. O tom, co je JSX se dozvíte níže. Nyní se pojďme podívat na React.
React
Poté, co jsem si vyzkoušel Angular 2 a napsal v něm svou cílovou aplikaci, rozhodl jsem se, že tu samou přepíši Reactem a udělám si porovnání.
V první řadě je nutné říct, že učící křivka je u Reactu velice podobná jako u Angularu. Jednou z nevýhod je, že React nemá tak hezkou a uživatelsky přístupnou dokumentaci jako Angular 2. Osobně jsem měl z učení Angularu 2 lepší pocit, protože jsem vždy přesně věděl, kam se podívat.
Ale pojďme popořadě. React má oproti Angularu 2 jednu ohromnou výhodu, která ho staví do role vítěze (alespoň pro mě). A to je fakt, že není závislý na DOMu. Tedy komponenty, které zde tvoříte, nemají s DOMem nic společného a React používá svůj vlastní. Samozřejmě do té doby, než začnete své komponenty svazovat věcmi jako je selector z jQuery apod. Poté se samozřejmě dostáváte do závislosti na DOMu. React komponenta se k DOMu připojuje ve fázi componentDidMount(), nicméně vy spíše využíváte onen virtuální DOM.
Proč je výhodnější virtuální DOM?
Tak za prvé je to proto, že díky tomu můžete aplikaci renderovat na serveru, protože nejste spojeni s web browserem. A také je to fakt, že v Reactu můžete s klidem psát i mobilní aplikace, kde budete využívat komponenty mobilního SDK. K tomuto účelu slouží React Native.
Další výhodou je to, že virtuální DOM Reactu je mnohonásobně výkonnější než je tomu v případě web browseru. Odpadá tedy nutnost, kterou má Angular 2 a to je zones, tedy nutnost procházet strom komponent a provádět změny. React to dělá inteligentněji. U větších aplikací to začne být skutečně znát.
React JSX
React pro zápis view používá JSX. Jedná se o extenzi javascript syntaxe, která umožňuje zápis ala html(xml), který je pro lidský mozek čitelnější než zápis pomocí funkcí. Ano, i když to může vypadat divně, tak JSX není xml ale funkce. Vize viz: JSX in Depth.
Věřte mi, že i když na první pohled se může zdát, že se jedná o míchání logiky a view, tak tomu tak není. Důvodem je, že pro správný návrh aplikace v Reactu stejně budete co nejvíce atomizovat jednotlivé komponenty a tím pádem logiky budou obsahovat jen minimálně.
Redux
Samotný React řeší pouze tvorbu a skládání komponent. Neřeší věci jako je AJAXové volání či service vrstvu. Každa React komponenta obsahuje dva vstupy. Jednak je to props, což je model, který definuje rodič a pouze on je vlastníkem, tedy props je immutable (neměnitelný) a state. State je model, který je viditelný a měnitelný pouze v dané komponentě.
Z tohoto pohledu vznikne problém ve chvíli, kdy chcete, aby jedna komponenta reagovala na jinou, která ovšem není rodičem. K tomuto účelu slouží Redux.
Co je Redux?
Zjednodušeně se dá říct, že Redux je storage engine, který udržuje stav, který je měnitelný pomocí tzv. Reducers. Reducers jsou jednoduché funkce, které přijímají současný stav a akci. Návratovou hodnotou je opět stav, který se propíše do daného store storage.
Redux udržuje pattern „one way binding“. Tedy vy máte pod kontrolou změnu modelu. Více viz: Redux.
Osobně doporučuji Redux využít. Samozřejmě až po tom, co člověk ovládne samotný React.
Redux není přímou součástí Reactu. Proto můžete Redux využít i například s Angularem 2.
Závěr
Pokud jste na rozcestí a přemýšlíte o tom, kterou cestou se dát, nezapomeňte na React. Psaní komponent v Reactu je zábava a současně Vás takénenutí využívat předem definovaný stack. React za Vás neurčí jak přes http volat API, ani Vám nepředepisuje, jak má vypadat model či služby. Dělá pouze to, že umožňuje tvořit komponenty, spojovat komponenty a reagovat na události. Věřte, že to dělá zatraceně dobře.
A perlička na závěr. Kolik znáte angular aplikací? Myslím veřejných. V případě Reactu je odpověď jednoduchá: Facebook a Instagram 🙂
Autor: Aleš Dostál
Zpět
