
React Native je open-source softvérový rámec vyvíjaný spoločnosťou Facebook. Slúži pre tvorbu cross-platform aplikácií. Za jeho popularitou stojí hlavne základná knižnica React, ktorá je v súčasnosti jednou z najpoužívanejších technológií pre tvorbu webových stránok. React Native využíva pre tvorbu používateľských rozhraní rovnaký princíp založený na komponentoch a jednosmernom toku údajov ([one-way data flow](https://reactjs.org/docs/thinking-in-react.html)). Vďaka popularite samotného Reactu sa v posledných rokoch z mnohých webových developerov stali aj programátori mobilných aplikácií, ktorí dokážu doručiť produkty (nielen) vysokej kvality v (nie stále) rozumnom čase aj na mobilné platformy.

Ak ste webový programátor a používate React, tak Vám vedomosti z React Native môžu vo Vašej kariére jedine pomôcť. Trh je ale veľký a Vy si dnes môžete zvoliť z mnohých cross-platformových riešení. Medzi najznámejšiu konkurenciu React Native by som zaradil [Ionic](https://ionicframework.com/), [NativeScript](https://nativescript.org/) alebo [Flutter](https://flutter.dev/). Osobne mám pracovné skúsenosti jedine s React Native a preto sa v tomto blogovom príspevku nebudem snažiť porovnávať tieto technológie. V nasledujúcich riadkoch popíšem 5 dôvodov, pre ktoré by som si ja sám zvolil učenie sa rámca React Native aj v roku 2021.

## 1. Skutočné cross-platform riešenie

Hlavným selling-pointom v posledných rokoch pre React Native bola skutočnosť, že jedným zdrojovým kódom je možné tvoriť aplikácie pre Android aj iOS. Najmä v poslednom kalendárnom roku sa však toho udialo skutočne mnoho (a nemám na mysli iba pandémiu koronavírusu).

Okrem mobilných platforiem je v súčasnosti možné aplikácie napísané pomocou React Native použiť aj na tvorbu webových stránok ([react-native-web](https://github.com/necolas/react-native-web)), Windows ([react-native-windows](https://microsoft.github.io/react-native-windows/)) alebo macOS ([react-native-macos](https://github.com/microsoft/react-native-macos)) aplikácií. Svoje peniaze totiž začal okrem Facebook-u do React Native investovať aj ďalší obrovský hráč – Microsoft, ktorý sa podieľa na vývoji React Native pre platformy Windows a macOS.

<ContributionImage
  contributionText={
    <>
      Cross-platform riešenie pre takmer všetky dôležité platformy (Linux <strong>zatiaľ</strong>{' '}
      chýba).
    </>
  }
  image={{ src: '/images/blog/rn-for-2021/cross-platform.jpg', width: 3028, height: 1638 }}
  alt="Platformy, pre ktoré je možné tvoriť aplikácie použítím softvérového rámca React Native"
/>

Hovoríte si, samozrejme, ale pre aplikácie na Windows, macOS aj Linux už dávno môžem použiť Electron? Možno Vás bude zaujímať nasledujúci [článok od samotnej spoločnosti Microsoft](https://www.windowscentral.com/xbox-app-pc-gets-speed-boost-ditching-electron-react-native-uwp), ktorá zaznamenala enormný performance boost pri porovnávaní Electronu a React Native Windows pre potreby ich Xbox Game Pass aplikácie, konkrétne:

> While the Electron framework is widely adopted for app development, React Native provides a leaner, native experience on Windows. The upshot is decreased memory usage, cut by over 50 percent on our PCs, with significant performance enhancements as a result. The app installation size has also shrunk, from nearly 300MB down to 60MB.

Zoznam zariadení, na ktorých je React Native možné využívať pre tvorbu aplikácií sa pomaly rozširuje a na väčšine z nich už teraz výkonnostne presahuje iné cross-platform riešenia.

**Z tohto hľadiska si myslím, že React Native bude zaujímavou možnosťou pre tvorbu aplikácií aj v roku 2021.**

## 2. Podpora veľkých hráčov na trhu

Od roku 2015, v ktorom bol React Native vytvorený ubehlo veľa času. Množstvo populárnych aplikácií dnes vo svojom kóde už React Native využívajú. Niektoré z veľkých spoločností sa rozhodli projekt podporiť aj inak ako publikačne. Napríklad už spomínaný Microsoft pravidelne komunikuje s vývojármi z Facebook-u. Microsoft sa v súčasnosti spolupodieľa na vývoji React Native. Dôkazom je okrem React Native Windows aj množstvo Pull Requestov v hlavnom projekte na GitHube práve od developer z Microsoftu.

<ContributionImage
  contributionText={
    <>
      Obrázok z oficiálnej stránky dokumentácie{' '}
      <Link href="https://reactnative.dev">React Native</Link>.
    </>
  }
  containerProps={{ maxWidth: 400, my: 6 }}
  image={{ src: '/images/blog/rn-for-2021/whouse.png', width: 994, height: 1268 }}
  alt="Zoznam mobilných aplikácií napísaných prostredníctvom softvérového rámca React Native"
/>

Okrem **Facebooku** (Instagram, Facebook Ads Manager) alebo **Microsoftu** (napr. Skype) používajú React Native pre svoje nielen mobilné aplikácie aj napríklad **[Tesla](https://apps.apple.com/us/app/tesla/id582007913)**, **[Discord](https://apps.apple.com/us/app/discord-talk-chat-hang-out/id985746746)** (v súčasnosti však len pre iOS verziu aplikácie), **[Uber](https://www.ubereats.com/)**, **Shopify**, **Pinterest**, **Coinbase**, **Wix** a mnoho ďalších (širší zoznam je možné dohľadať na stránke [oficiálnej dokumentácie](https://reactnative.dev/showcase)).

Všetky spomínané názvy spoločností znamenajú, že React Native používajú a podporujú veľkí hráči na trhu. Je pravda, že niektoré spoločnosti ako napríklad Airbnb ([známa kauza, ktorá rozpútala mnoho diskusií](https://softwareengineeringdaily.com/2018/09/24/show-summary-react-native-at-airbnb/)) sa rozhodli React Native nahradiť za iné riešenie. To však iba potvrdzuje, že React Native nie je silver-bullet pre všetky problémy a to je svojim spôsobom fajn.

Podpora množstva veľkých spoločností znamená istú úroveň stability, ktorú React Native jeho používateľom prináša. Aj keby sa náhodou stalo, že sa Facebook rozhodne React Native mávnutím čarovného prútika zavrhnúť, tak spoločnosti, ktorých biznis záleží aj od tohto softvérového rámca poskytujú istotu, že projekt z roka na rok nezanikne. Na rozdiel napríklad od Google-u, ktorý má [neslávnu minulosť so zahadzovaním fungujúcich projektov](https://killedbygoogle.com/) je v tomto smere voči ich používateľom Facebook zodpovednejší.

**Z tohto hľadiska si myslím, že React Native bude zaujímavou možnosťou pre tvorbu aplikácií aj v roku 2021.**

## 3. Prebiehajúce prerábanie architektúry

Pre mňa osobne asi najzaujímavejším dôvodom, pre ktorý sa teším na React Native aj v roku 2021 je v súčasnosti prebiehajúca rekonštrukcia architektúry softvérového rámca. Tí z vás, ktorí React Native sledujú už nejaký ten piatok určite vedia o čom budem v tejto sekcii písať.

V roku 2018 oznámil team developerov stojacich za React Nativom nové plány ohľadom ďalšieho smerovania projektu, ktorého súčasťou boli veľké zmeny v architektúre celého projektu. Jedna z prvých oficiálnych prednášok prebehla na konferencii React Conf 2018. Ak ste to ešte nevideli, záznam si môžete pozrieť [na tomto odkaze](https://www.youtube.com/watch?v=UcqRXTriUVI).

<ContributionImage
  contributionText={
    <>
      Pôvodná architektúra React Native zapozičaná z{' '}
      <a href="https://formidable.com/blog/2019/react-codegen-part-1/">
        blogového príspevku od Lorenza Sciandra
      </a>
      .
    </>
  }
  image={{ src: '/images/blog/rn-for-2021/old-arch-diagram.png', width: 1600, height: 1067 }}
  alt="Pôvodná architektúra softvérového rámca React Native"
/>

Celý proces je možné rozdeliť do 4 separátnych krokov:

1. **CodeGen** - V podstate sa jedná o akési "lepidlo" alebo vrstvu, ktorá bude zaručovať správne fungovanie celej architektúry. CodeGen sa bude starať o plynulý a bezpečný chod interných procesov, či už počas kompilácie alebo za behu programu, bez nutnosti nadbytočného runtime ošetrovania. CodeGen zaručí, že jednotlivé časti systému si budú môcť medzi sebou "dôverovať". Pre viac informácií si môžete pozrieť túto [diskusiu](https://github.com/react-native-community/discussions-and-proposals/issues/92).
2. **JSI** (JavaScript Interface) – V súčasnej dobe sa pre komunikáciu medzi JavaScriptom a Native kódom (Objective C, Java) využíva tzv. Bridge. JavaScript sa vykonáva v odlišnom vlákne ako Native kód. Komunikácia medzi dvoma vláknami prebieha asynchrónne za pomoci [queue](<https://everythingcomputerscience.com/discrete_mathematics/Stacks_and_Queues.html#:~:text=Stack%20is%20a%20container%20of,%2Dout%20(FIFO)%20principle.>). Správy sa cez bridge prenášajú vo formáte JSON. Keďže komunikácia prebieha asynchrónne, tak nie je možné zaručiť, že zmeny z JavaScriptu sa odzrkadlia na obrazovke Vášho smartfónu (native – UI thread) okamžite. Navyše, ak je Bridge preťažený komunikáciou, tak zmeny môžu trvať dostatočne dlho na to, aby to ľudské oko interpretovalo ako oneskorenie (napr. animácia bude vyzerať sekavo alebo akcia po stlačený tlačidla bude oneskorená). **JSI umožňuje komunikovať s native-om (ObjC/Java) priamo – bez nutnosti používať Bridge**. Ďalšie informácie si môžete [prečítať napríklad tu](https://formidable.com/blog/2019/jsi-jsc-part-2/).
3. **TurboModules** - Na rozdiel od súčasného systému (NativeModules) budú TurboModules umožňovať tzv. lazy inicializáciu. Aplikácia nebude musieť pri spustení načítať všetky natívne moduly súčasne. Tým sa markantne zníži čas potrebný na inicializáciu (prvé spustenie) aplikácie. Pomocou **JSI** potom bude možné z JavaScriptu komunikovať s TurboModulmi synchrónnym spôsobom.
4. **Fabric** - Jedná sa o úplne novú UI vrstvu pre React Native. Vo svojej podstat, by mal Fabric poskytovať výrazne zrýchlenie vykresľovania a zmien v UI na obrazovku. Viac informácií o TurboModules a Fabric si môžete prečítať v [tomto príspevku](https://formidable.com/blog/2019/fabric-turbomodules-part-3/).

<ContributionImage
  contributionText={
    <>
      Nová architektúra React Native zapozičaná z{' '}
      <a href="https://formidable.com/blog/2019/fabric-turbomodules-part-3/">
        blogového príspevku od Lorenza Sciandra
      </a>
      .
    </>
  }
  image={{ src: '/images/blog/rn-for-2021/new-arch-diagram.png', width: 1667, height: 927 }}
  alt="Nová architektúra softvérového rámca React Native"
/>

Pre dokončenie prác na novej architektúre nebol stanovený žiadny konkrétny termín. Aj keď zatiaľ neexistuje ani žiadna dokumentácia, tak veľa kódu ohľadom novej architektúry sa už nachádza v [hlavnej vetve projektu React Native na GitHube](https://github.com/facebook/react-native).

<Alert status="info">
  Niektoré z populárnych externých knižníc (napr.{' '}
  <a href="https://docs.swmansion.com/react-native-reanimated/docs">react-native-reanimated v2</a>)
  už novú architektúru úspešne využívajú pre prekonávanie pôvodných obmedzení Reactu Native.
</Alert>

**Rearchitektúra prinesie riešenia pre väčšinu súčasne existujúcich (nielen performance) obmedzení React Native. Z toho dôvodu si myslím, že React Native v roku 2021 bude naďalej zaujímavý.**

## 4. Využiteľnosť, komunita a pracovné príležitosti

Keď sa plánujem učiť nejakú novú technológiu, tak existuje zopár kritérií, podľa ktorých sa rozhodujem. Nebudem sa predsa učiť niečo, čo mi v mojej kariére/hobby nijak nepomôže. React Native má z tohto pohľadu silnú pozíciu. Pomocou jedného – takmer totožného zdrojového kódu je možné publikovať aplikácie na množstvo platforiem súčasne.

Navyše JavaScript je v súčasnosti takmer v každom prieskume označený za jeden z TOP programovacích jazykov, čo sa týka obľúbenosti. Dôvodov jeho popularity je určite viacero. Jeho vysoká popularita so sebou prináša množstvo voľných pracovných pozícií. Toto platí rovnako pre React aj React Native. V súčasnosti sú to náramne obľúbené softvérové rámce a preto si myslím, že ich vedomosť Vám môže vo Vašej kariére jedine pomôcť.

Jedným z typou ľudí, ktorým môže znalosť React Native výrazne dopomôcť sú určite Freelanceri alebo programátori na voľnej nohe, ktorým som aj ja sám. Ovládaním jedného cross-platform softvérového rámca je prográmator na voľnej nohe schopný obsiahnuť množstvo platforiem. V tomto smere mi React Native poskytuje najmä nasledujúce výhody:

1. Písanie jedného zdrojového kódu pre rôzne platformy značne zníži delivery time produktu, na ktorom pre svojho klienta pracujem.
2. Spravovať a modifikovať jeden zdrojový kód je v prípade potreby časovo menej náročné.
3. V jednom softvérovom rámci sa zdokonalím skôr, ako pri používaní troch rôznych rámcov súčasne (príklad projektu pre web, iOS a Android).
4. Čas ušetrený používaním Reactu Native vkladám naspäť do samoštúdia a experimentovania s novými technológiami, spôsobmi a zákutiami programovania.

Ďalšou silnou stránkou Reactu Native je veľká komunita. Ak pri programovaní natrafíte na nejaký problém, tak je obrovská šanca, že rovnaký problém už riešil aj niekto iný. StackOverflow aj GitHub sa tak môžu stať Vašim zlatým pomocníkom na ušetrenie času pri riešení Vašich problémov. Veľká komunita so sebou prináša aj množstvo online študijných materiálov, návodov alebo kurzov, ktoré Vám taktiež môžu na začiatku pomôcť odraziť sa. V neposlednom rade by som chcel vyzdvihnúť samotnú [dokumentáciu](https://reactnative.dev/docs/getting-started) softvérového rámca React Native. V poslednom roku si dokumentácia prešla výraznými zmenami jej obsahu. Používatelia majú v nej teraz k dispozícií množstvo príkladov, best-practices guides a obrázkov, ktoré mne osobne v mojich začiatkoch trochu chýbali.

**Z tohto hľadiska si myslím, že React Native bude zaujímavou možnosťou pre tvorbu aplikácií aj v roku 2021.**

## 5. Výborná developer experience

React Native bude v roku 2021 poskytovať lepšiu používateľskú skúsenosť ako kedykoľvek predtým. Príkladmi sú nový komponent [LogBox](https://reactnative.dev/blog/2020/07/06/version-0.63), možnosť debugovať aplikáciu pomocou nástroja [Flipper](https://fbflipper.com/docs/features/react-native/) a najmä skvelo fungujúci [Fast-Refresh](https://reactnative.dev/docs/fast-refresh), pomocou ktorého sa zmeny v kóde zobrazia na displeji Vášho testovacieho smarftónu alebo emulátora/simulátora už v priebehu pár milisekúnd.

### Over-the-air updates

Oproti natívnym aplikáciám so sebou React Native nesie aj ďalšiu obrovskú výhodu. Architektúra umožňuje vykonávať OTA (_Over-The-Air_) updates aplikácií. OTA znamená, že zdrojový kód aplikácie (JavaScript bundle) môže byť aktualizovaný na zariadeniach bez nutnosti vytvárať novú verziu v Google alebo iOS obchode. Problém s OTA však môžu mať React Native aplikácie, ktoré obsahujú množstvo natívneho zdrojového kódu. Zmeny natívneho kódu musia byť vždy doručené prostredníctvom update-u v príslušnom obchode.

<Alert status="info">
  Viac informácií ohľadom Over The Air updates pri aplikáciách napísaných pomocou React Native si
  môžete prečítať{' '}
  <a href="https://www.reactnativeschool.com/strengths-and-limitations-of-over-the-air-updates">
    napríklad tu
  </a>
  .
</Alert>

### Expo

Ak chcete zažiť maximálnu možnú DX, tak Vám vrelo odporúčam používať pre Vaše aplikácie softvérový rámec [Expo](https://expo.io). Expo je založený práve na React Native. Primárnym rozdielom medzi aplikáciami napísanými prostredníctvom Expa a React Native je, že pri Expe nie je možné písať vlastný natívny zdrojový kód.

V čom ponúka Expo lepšiu DX ako React Native? Prvým dôvodom je, že na vývoj aplikácie nepotrebujete Xcode ani Android Studio. Vašu aplikáciu zostavujete prostredníctvom CLI príkazov a spúštate (debug) v aplikácii Expo Go. Pre vývoj iOS aplikácií tak nepotrebujete vlastniť macOS zariadenie. S expom sa tak bude jednoduchšie pracovať všetkým programátorom, ktorí prichádzajú zo sveta webového vývoja.

Expo taktiež nie je najlepším riešením pre každý problém a mnoho funkcionalít sa v súčasnosti nedá pomocou Expa docieliť. Avšak výhody a nevýhody Expa by sa dali rozpísať v samostatnom blogu.

**Na základe týchto skutočností si myslím, že React Native bude zaujímavou možnosťou pre tvorbu aplikácií aj v roku 2021.**

## Čo dalej?

React Native so sebou nesie množstvo výhod, ale aj nevýhod. Určite to nie je silver-bullet riešenie pre všetky existujúce problémy a všetky aplikácie. V roku 2021 sa podľa mňa budú cross-platform riešenia pre tvorbu aplikácií naďalej tešiť popularite medzi jednotlivcami, veľkými spoločnosťami, ale aj používateľmi. Performance gap medzi natívnymi aplikáciami a React Native aplikáciami sa bude aj vďaka novej architektúre naďalej míľovými krokmi zmenšovať. Či už si zvolíte React Native, Flutter alebo iné riešenie, tak Vám prajem veľa šťastia a príjemných chvíľ strávených pri programovaní.

---

_Na záver tohto blogového príspevku by som sa Vám chcel poďakovať za Váš čas strávený pri jeho čítaní. Ak by ste mali nejaké otázky alebo by ste chceli na túto tému somnou diskutovať, tak trochu nižšie sa nachádza sekcia diskusie. Teším sa na Vaše postrehy a otázky!_


Pýtate sa prečo bude React Native vhodnou možnosťou pre tvorbu (nielen) mobilných aplikácií aj v roku 2021?

5 dôvodov, pre ktoré sa oplatí učiť React Native aj v roku 2021

Začínate s Reactom a narazili ste rovnako ako ja pred pár rokmi na Next.js – technológiu, ktorú odporúča množstvo internetových zdrojov a Vy neviete ako ďalej? Potom je tento článok určený práve pre Vás.

Blog