Napsali jste kupu webů a webových aplikací v Reactu, nosíte v hlavě nápad na úžasnou mobilní aplikaci a občas si vzpomenete, že existuje něco jako React Native. Možná vám rozhodování urychlím. Vysvětlím základní rozdíly a inovace, které React Native přináší, a ukážu, v čem je jeho krása, jednoduchost i složitost.

Sám jsem se s React Native setkal teprve před několika měsíci, když jsem začal pracovat na novém projektu v Creative Docku. Po týdnech, kdy se u mě střídalo zoufalství a euforie z pochopení každé malé části této knihovny, jsem se rozhodl podělit o pár zásadních informací, které bych si na začátku sám přál slyšet. Vědět, proč React Native není jen další v řadě a s čím do světa mobilního vývoje přichází, je první krok k tomu, abyste si udělali představu o celém systému. A chtěli se s ním učit.

Oproti vývoji mobilních aplikací „webovou“ cestou přináší jednu zásadní změnu. Pokud jste se již setkali s nástroji, jako jsou Ionic, Phonegap, Sencha a podobnými službami, pravděpodobně k React Native přistoupíte s podobnou představou o tom, jak bude vývoj i výsledek vypadat. Nemohli byste být dál od pravdy. V případě React Native se nejedná o žádný wrapper, ve kterém by se zobrazovala vaše webová aplikace, HTML kód, hybridní aplikace ani nic podobného. Výsledným produktem bude plnohodnotná nativní aplikace, složená z nativních komponent dané platformy, pro kterou aplikaci publikujete.

Jako programátoři nebo i kodéři máte ovšem dostatečné znalosti pro to, abyste s vývojem začali. Zejména způsob stylování aplikace vám bude povědomý a celkem snadno se zorientujete. Zejména, pokud jste se již setkali se styly uvnitř JS. Celý React Native je od začátku navrhován tak, aby vývojářům usnadnil přechod z Reactu. To vystihuje i samotný claim „Learn Once, Write Anywhere“.

První, čeho si při psaní aplikace hned všimnete – ve chvíli, kdy úspěšně inicializujete vzorovou aplikaci, – budou nové komponenty, ze kterých je aplikace složená. Půjde zejména o „View“ a „Text“. Jako drtivá většina zapálených vývojářů, kteří otevřeli dokumentaci, jen aby došli k „react-native init“, a dále zatím nečetli, se pokusíte udělat v index.js nějakou úpravu, abyste díky fungujícímu hot reloadu ukojili touhu vidět změnu v opravdové nativní aplikaci, která běží v simulátoru.

Zejména se znalostí kódování vás napadnou desítky html tagů a některý z nich zkusíte přidat. První chyba lávky, a nemusí být v Tróji. Jak jsem již zmínil, kód komponent v React Native vypadá identicky s tím, na který jste byli zvyklí ve webovém vývoji. Jenže technicky nelze použít žádný html tag – prostě proto, že to není web. Je třeba si uvědomit, že každá komponenta, která v konečné fázi renderuje cokoliv do UI, je jedna z existujících nativních komponent dané platformy, nikoliv hezky nastylované html.

Tyto nativní komponenty samozřejmě nejsou na obou platformách (iOS, Android) totožné a už vůbec ne psané ve stejném jazyce. Proto React Native přichází s určitou dávkou abstrakce, aby kód, který píšete, mohl být z co největší části sdílený mezi platformami.

Při sebevětší snaze ovšem jednou dojdete do momentu, kdy bude třeba napsat část kódu specifického pro jednu platformu. V jednodušším případě se budou jen mírně lišit props komponenty, jindy bude potřeba použít zcela jinou nativní komponentu. Pro větší rozdíly, kdy se vám mezi platformami rozchází například design celého screenu, můžete využít rozlišování specifických souborů pro danou platformu úpravou názvu souboru „*.ios.js“, či „*.android.js“. V jednodušších případech pouhé inline podmínky. Tak můžete odlišovat nejen soubory s kódem, ale třeba i obrázky. Nejen pro různé platformy, ale třeba i rozlišení.

Co dělá React Native tak zajímavým oproti jiným nástrojům, které vám dříve umožňovaly tvořit mobilní aplikace za pomoci webových technologií? Zejména jeho architektura, která stále dovoluje využít pro business logiku JavaScript, a přesto vytvářet aplikaci složenou z nativních komponent.

Velkou změnou je, že celé UI je spuštěno v hlavním vláknu, které má každá aplikace, ale JavaScript engine využívá vlákno jiné. Díky tomu je aplikace v React Native o poznání rychlejší. Odezva rozhraní aplikace se nijak nezhoršuje ani při složitějších výpočtech v JS. Díky nativním komponentám máte oproti běžnému DOMu k dispozici širší možnosti, jak s aplikací interagovat. Můžete například využívat více nativních gest, která by vám běžná webová stránka, byť na mobilním zařízení, nenabízela a na která jsou uživatelé nativních aplikací zvyklí.

Doufám, že se najde alespoň jediný člověk, který právě teď otevírá terminál a chce zkusit, jak React Native funguje. Pokud vás zaujme víc, třeba se potkáme na nějakém dalším zajímavém projektu u nás v Creative Docku. Právě teď hledáme developery, kteří se s námi pustí do fintechové revoluce. Přidejte se!

Autor článku: Adam Javůrek, Creative Dock