Jak jsem zápasil s Reactem

cs v kategorii code • 3 min. čtení
Mind the age! Most likely, its content is outdated. Especially if it’s technical.

Před rokem jsem potřeboval napsat pro svoji aplikaci klientskou stranu jako SPA. Hodně se mluvilo (a stále mluví) o Reactu, tak jsem ho použil. Po roce, na rozdíl od Ruby, ho stále používám a jsem spokojen. Ale proběhlo několik velkých předělávek. Není vše tak růžové, jak se zdá.

React je totiž pouze V ze zkratky MVC. I když se zdá, že dělá víc, opravdu se jedná jen o view. A tuhle část zvládá naprosto perfektně! Jenže je potřeba taky M a C. Což je problém, protože jsme ve světe JavaScriptu a teď si vyberte mezi Fluxem, Refluxem, Reduxem, … prostě nějakým -uxem.

Podle vybraného uxu se vám při šťastném výběru zodpoví pár dalších otázek, jako například props vs. state či one store vs. many stores. Spíš očekávám, že to je něco, na co stejně narazíte. Sám jsem se držel Fluxu, neb je také od Facebooku. Ze zkušeností s JS světem jsem se raději držel toho, aby byla co největší šance kompatibility a zdrojů na internetu. Což znamená, že zmíněné otázky nejsou vyřešeny.

Krása Reactu či Fluxu spočívá zejména ve volnosti. Ono je to vlastně velice jednoduchý koncept a můžete ho použít kdekoliv. Buď jen koncept nebo celou knihovnu. Například Angular je skutečně plnohodnotný framework a můžete React využívat jen pro šablony. Tak lze teoreticky spojit výhody z obou světů. Prakticky nemám ozkoušené.

Nastupovat do vlaku Angular vs. Angular 2 se mi nechtělo, takže jsem stále zůstal u Reactu s Fluxem a snažil se otázky sám vyřešit. Vyzkoušel jsem mít spoustu malých storů a vše předávat statem. Vyzkoušel jsem mít jeden store a vše předávat propsy. Každý způsob má něco do sebe, ale popravdě čím větší aplikace byla, tím mi největší smysl dávalo najít se někde uprostřed.

Což tak nějak přirozeně sedí i s použitím React Routeru. Vždy jedna stránka má hlavní komponentu, které se předávají data ze storu statem a všem svým podkomponentám se dál data dostávají přes propsy. Funguje krásně, ale je hodně těžké najít tu správnou střední cestu. Každopádně pokud použití není přirozené, našel jsem chybu v architektuře komponent.

Abych však cestu neměl tak jednoduchou, prošel jsem si ještě jedním refaktorem – naverbováním Immutable.js, další knihovna od Facebooku. Bez ní totiž React postrádá jakýchkoliv výhod. To myslím vážně, jakýkoliv. Pomalé odezvy jsou nemyslitelné a zabijí jakoukoliv jinou výhodu. Reactí systém přerenderování pouze v případě potřeby funguje totiž pouze s Immutable.js a napsanými funkcemi shouldComponentUpdate. Bez toho nešlo aplikaci používat.

Což ale lehce komplikuje psaní kódu už tak komplikovanější prostředí. Například className či encType mne neskutečně irituje a těžce se debuguje, kde je chyba. Například chyba při renderování se v některých případech nenareportuje a když ano, traceback není úplně jasný.

Takovou čtvrtou velkou otázkou je, jak vlastně poskládat store? Co dovolit číst z venku, jak si udělat přehledné poslouchání na eventy a další. Opět jsem zkusil mít zveřejněné vše a nic. Jestli mít spíš kód ve storu či dispatcheru. Opět mi vyšla nejlépe střední cesta, od každého trochu dle potřeb.

Ale hej, React je fajn. Prototyp jsem měl hotov za den, pak už jsem jen zápasil s tím, jakým stylem napsat, aby bylo připravené pro mé potřeby. Navíc spoustu věcí jsem dostal zadarmo, například routing (react-router), klávesové zkratky (react-hotkeys) či Bootstrapcké komponenty (i když ty se vyžívají v neustálém předělávání a za čas strávený upgrady jsem mohl mít svoji vymazlenou stabilní verzi).

Závěrem: v práci jsem si vyzkoušel i Angular a díval se detailněji na Redux. Pokud bych psal další SPA, znovu bych sáhl po Reactu s Fluxem, Immutable.js a Routerem a šel cestou střední cesty, co se hlavních otázek týče. Nakonec je to jednoduché na použití a přehledný flow aplikace. Každopádně to neznamená React použít. Weby renderované na serveru mají stále své kouzlo. Vlastně je to, řekl bych, pro většinu webových aplikací ta lepší varianta.








Může se vám také líbit

en Makefile with Python, November 6, 2017
en Fast JSON Schema for Python, October 1, 2018
en Deployment of Python Apps, August 15, 2018
cs Jasně, umím Git…, August 6, 2014
cs Checklist na zabezpečení webových aplikací, March 1, 2016

Další články z kategorie code.
Nenechte si ujít nové články díky Atom/RSS kanálu.



Poslední příspěvky

cs Mami, tati, přejde to, December 9, 2023 in family
cs Co vše bychom měli dělat s dětmi?, November 24, 2023 in family
cs O trávicí trubici, November 7, 2023 in family
cs Na šestinedělí se nevyspíš, October 28, 2023 in family
cs Copak to bude?, October 20, 2023 in family