React Native vs. Flutter: Proč jsme si vybrali React Native pro tvorbu multiplatformních aplikací?

Výběr vhodné technologie pro vývoj softwaru patří mezi zásadní rozhodnutí, která se výrazně promítnou do konečné podoby aplikace, její funkčnosti a úspěchu mezi uživateli. Kritérií pro takové rozhodnutí je mnoho, ale jedním z nich je bezesporu i rozšíření dané technologie mezi IT profesionály (jinými slovy to, kolik lidí ji ovládá). Proč by však právě tento faktor měl být jedním z nejdůležitějších? V tomto článku se s vámi podělíme o náš pohled na dva konkurenční frameworky – React Native a Flutter – a shrneme důvody, proč preferujeme první z nich (aniž bychom ten druhý zatracovali). Pokud se zajímáte o vývoj aplikací, určitě stojí za to se o těchto technologiích něco dozvědět – a kdo ví, třeba právě v React Native budeme tvořit i vaši příští aplikaci!

Co je React Native a jak jsme se k němu dostali?

React Native je je open source framework pro tvorbu softwaru poskytovaný společností Meta Platforms, Inc. Umožňuje vývoj aplikací pro všechny nejvýznamnější operační systémy a platformy, jako je Android, iOS, macOS nebo Windows. Používají ho i takoví giganti jako Facebook, Microsoft a Shopify.

Náš příběh s React Native začal v roce 2016, kdy jsme s jeho pomocí rozjeli náš první start-up Chytrá hospoda. Tento komplexní systém pro gastropodniky byl vyvinut pro Android, iOS, tablety i jako webová aplikace a reagoval na tehdejší zavedení elektronické evidence tržeb pro vybrané služby (v první vlně šlo hlavně o restaurační zařízení). Toto chytré řešení mělo klientům pomoct jednak zvládnout přechod na EET, ale také usnadnit správu poboček, řízení skladů, objednávky nebo organizaci směn zaměstnanců. Chytrá hospoda byla přímým předchůdcem Think Easy, takže se do našeho vztahu k frameworku React Native bezpochyby promítá také určitá nostalgie. Původní projekt se sice nakonec neprosadil, ale synergie, která z této spolupráce vzešla, dala krátce poté vzniknout firmě Think Easy. A framework React Native nás na naší cestě provází dodnes.

React Native vs. Flutter: Hlavní rozdíly

Hlavním rozdílem mezi těmito dvěma frameworky je programovací jazyk. React Native používá Javascript/Typescript, což je všeobecně známý a populární jazyk, který ovládá mnoho vývojářů. Flutter naproti tomu pracuje s méně známým jazykem Dart (vyvíjeným společností Google). Ačkoli je méně rozšířený než Javascript/Typescript, nabízí některé moderní funkce vhodné pro vývoj aplikací, jako je silné typování nebo asynchronní programování. Faktem ovšem zůstává, že pokud vývojáři tento jazyk již neznají, bude pro ně křivka učení v případě Flutteru mnohem strmější než u React Native, kde si od začátku vystačí s Javascriptem/Typescriptem a nemusejí se učit nový jazyk od nuly.

Oba frameworky se výrazně liší také z pohledu architektury. Aplikace vyvíjené v React Native využívají při komunikaci mezi Javascript/Typescript kódem a nativními komponentami zařízení tzv. mosty (angl. bridges), které mohou mírně snižovat výkon (např. u komplexních animací nebo úloh náročných na výpočetní kapacitu). Naproti tomu Flutter svůj kód kompiluje speciální metodou, díky níž nejsou tyto mosty potřeba a aplikace tak může běžet o něco rychleji.

Z pohledu vývojářů hrají důležitou roli rovněž ekosystém a komunita obklopující daný framework. React Native je na trhu o něco déle (byl uveden v roce 2015), takže nabízí rozsáhlejší a vyspělejší ekosystém a podporu komunity. Vzhledem k použití populárního Javascriptu/Typescriptu je k dispozici celá řada knihoven a pluginů třetích stran, ze kterých lze čerpat. Flutter byl na trh uveden o něco později v roce 2018 a navzdory rychlému rozvoji zatím ve vyspělosti ekosystému a množství podpůrných zdrojů zaostává.

Proč v Think Easy preferujeme React Native?

Hlavní výhodou React Native pro nás jakožto vývojáře je jednoznačně možnost multiplatformního a hybridního vývoje, který od nás vyžaduje čím dál více klientů. S tímto frameworkem zvládneme jednoduše vytvořit aplikaci na mobil, web, desktop nebo třeba chytrou televizi. Hotová apka má navíc díky nativnímu vzhledu větší šanci na schválení v obchodech Google Play a App Store. Zejména Apple klade na uživatelský dojem a konzistentní design velký důraz, takže tento bod jistě ocení i klienti.

Dalším důvodem, proč upřednostňujeme React Native, je složení našeho týmu. Naši vývojáři jsou odborníci na Javascript/Typescript, díky čemuž perfektně ovládají React Native. Vzhledem k univerzálnímu rozšíření tohoto programovacího jazyka je pro nás navíc mnohem snazší kdykoli najít šikovné lidi, kteří to s ním umí. Přechod na React Native i bez předchozích zkušeností nevyžaduje při znalosti Javascriptu/Typescriptu náročné zaškolování, které by zbytečně brzdilo vývoj.

Kdy se rozhodnout pro React Native a kdy pro Flutter?

I když jsme se v úvodu článku otevřeně přiznali k silné preferenci pro React Native, neznamená to, že bychom se k práci ve Flutteru stavěli automaticky odmítavě. Použití Flutteru se nebráníme, umíme v něm pracovat a jsme si vědomi některých jeho předností oproti React Native. Obecně ovšem platí, že první volbou je pro nás React Native, protože s ním máme nejvíce zkušeností a jsme přesvědčeni o jeho celkových kvalitách. Konečný výběr frameworku však musí vycházet z konkrétního případu použití, proto si přibližme některé faktory, které mohou hrát při tomto rozhodování roli.

React Native je jednoznačnou první volbou, pokud máte tým se silným zázemím v Javascriptu/Typescriptu nebo pokud pracujete na projektu, který je na Javascriptu/Typescriptu postavený. V takovém případě je rozhodnutí jasné – vaši vývojáři se mohou okamžitě pustit do práce, aniž by se museli učit nový jazyk.

Stejně tak je React Native vhodný pro projekty kladoucí důraz na nativní vzhled, protože používá nativní komponenty odpovídající standardům uživatelského rozhraní dané platformy. Vývojáři mohou použít různé styly a rozvržení podle toho, zda je aplikace určená pro iOS, nebo Android, a naplnit tak očekávání uživatelů příslušné platformy.

React Native vás může zachránit, jestliže nemáte času nazbyt a potřebujete vývoj dokončit v krátké době – architektura založená na komponentách spolu s rozsáhlým ekosystémem hotových komponent a knihoven znamená potenciálně rychlejší dokončení softwaru.

Přednost Flutteru před React Native můžete dát u některých velmi specifických use casů – například pokud je vaší prioritou mimořádně vysoký výkon a rychlá odezva. Zde však již zacházíme do detailů, kterými se většina uživatelů asi nikdy zabývat nebude. Obecně platí, že rozdíl ve výkonu a rychlosti aplikací vytvořených ve Flutteru a React Native je minimální – až na výjimečné případy, jako je software s bohatým vizuálním obsahem v podobě komplexních animací apod. Flutter totiž na rozdíl od React Native nepotřebuje vytvářet mosty mezi kódem a nativními komponentami, což znamená rychlejší načítání grafického obsahu nebo provádění složitých interakcí při speciálních požadavcích.

A v poslední řadě může být Flutter vhodnější při tvorbě rychlých prototypů (MVP neboli minimální životaschopný produkt). Flutter nabízí funkce okamžitého zobrazování změn (hot reload) a průběžných iterací, což vede k vyšší efektivitě vývojového cyklu.

Příklad vývoje aplikace v React Native

Nyní již víte, v čem spočívají silné stránky React Native a pro jaké případy použití se hodí. Možná si ale ještě neumíte představit, jak vlastně vývoj v tomto frameworku probíhá, jaké kroky zahrnuje a jak při něm vývojáři postupují.

Zaměříme-li se pouze na technickou stránku procesu, začíná vše přípravou vývojového prostředí.  To může obnášet instalaci Node.js, npm (Node Package Manager), React Native CLI a případně dalších nástrojů. Podle toho, zda je aplikace určená pouze pro iOS, nebo pouze pro Android, lze nainstalovat také doplňky Xcode (iOS) a Android Studio (Android).

Poté již přichází na řadu samotný návrh aplikace. Začíná se klasicky tvorbou wireframů a mockupů jednotlivých obrazovek pomocí nástrojů jako Figma, Sketch nebo Adobe XD. Navigace mezi obrazovkami se definuje podle předem připraveného UX designu.

Následuje vlastní vývoj. V této fázi je potřeba nakonfigurovat navigaci v prostředí aplikace podle návrhu, vytvořit komponenty UI a nastavit jejich styl, definovat stavy a případně napojit API a další služby třetích stran.

Po vývoji se přistupuje k testování. To probíhá jak na úrovni jednotlivých komponent, tak na úrovni komunikace mezi těmito komponentami a celých modulů. Pro komplexní závěrečné testování se používají automatizované nástroje jako Detox nebo Appium.

Když je aplikace otestovaná, je potřeba odstranit chyby (debugging). React Native má pro tyto účely nativní nástroj Flipper. Pak už zbývá jen optimalizovat výkon aplikace (optimalizace renderování komponent, zpracování síťových požadavků, …) a odeslat ji ke schválení do obchodu Google Play nebo App Store.

Co jsme v React Native vyvinuli

Zajímá vás, jak konkrétně může vypadat aplikace vyvinutá v React Native? Pro inspiraci uvádíme dvě vlastní případové studie: Exitovky a Sousedská výpomoc.

Mobilní aplikaci Exitovky jsme zpracovali pro společnost Interfolio s.r.o. Je k dispozici pro iOS i Android a slouží k hraní populárních únikovek, které jsou rozšířeny o edukativní a kulturní přesah pro děti a dospělé. Jednou z hlavních funkcí je podpora multiplayer módu, což pro nás při vývoji znamenalo výzvu v podobě synchronizace různých typů zařízení tak, aby hráči (maximální počet je šest) procházeli hrou společně a zobrazovala se jim vždy aktuální obrazovka. Aplikace Exitovky je určená i pro venkovní únikové hry, takže jsme si museli poradit s nastavením GPS lokátorů na přesnost v řádu metrů. Výzvou pro nás bylo rovněž zajištění aktualizace kroků ve hře bez integrace websocketů zajišťujících komunikaci mezi aplikací a serverem v reálném čase.

Další z našich mnoha produktů vyvinutých v React Native je Sousedská výpomoc – hybridní webová a mobilní aplikace sloužící jako burza pro nabídky a vzájemnou výměnu nebo prodej přímo mezi lidmi bez prostředníků. Uživatelé v ní mohou nabízet a poptávat nejrůznější služby, od domácích oprav přes úklid až po půjčování zahradnických potřeb. Největším oříškem pro nás bylo najít technologie, které by nám umožnily vyvinout mobilní a webovou aplikaci pomocí jednoho kódu. Právě v této situaci jsme ocenili pokročilé funkce hybridního vývoje, které React Native nabízí – pro webovou verzi jsme použili technologii React Native for Web, abychom optimalizovali chování aplikace na webu. 

Výhled do budoucna: Na kterou technologii vsadit?

Pokud zvažujete, zda je pro váš projekt vhodnější React Native, nebo Flutter, určitě přemýšlíte i o budoucnosti a perspektivnosti zvoleného řešení. Předpovídat přesný vývoj ve světě IT technologií může být na jedné straně ošidné, ale na straně druhé se lze jednoduše podívat na současné trendy a pokusit se z nich vyvodit určité závěry. My v Think Easy se domníváme, že bezpečnou volbou do budoucna je React Native, a vedou nás k tomu následující důvody:

1. Komplexní ekosystém a komunita. React Native má za sebou od svého uvedení na trh v roce 2015 již téměř desetiletou existenci, během které se okolo něj rozvíjel pestrý ekosystém v podobě knihoven a nástrojů třetích stran. Úspěch tohoto frameworku vychází z popularity jeho programovacího jazyka (Javascript/Typescript), který přispívá k neustálému rozšiřování komunity vývojářů. Zatím nic nenasvědčuje tomu, že by Javascript/Typescript měl v nejbližší době přijít o svůj status dominantního jazyka pro vývoj aplikací. Díky univerzálním možnostem použití a globálnímu rozšíření si své postavení velmi pravděpodobně udrží i do budoucna. Javascript/Typescript navíc usnadňuje integraci React Native do stávajících aplikací, takže se jedná o praktickou volbu pro spoustu firem, které chtějí svá současná řešení dále rozšiřovat.
2. Podpora velkých korporací. Za vývojem React Native stojí Facebook, který jej používá v některých vlastních aplikacích. To samo o sobě je jistou zárukou dalšího vývoje a průběžného zdokonalování tohoto frameworku. Kromě toho se na React Native spoléhají i další giganti jako Instagram, Airbnb nebo Microsoft, tedy lídři ve svých odvětvích. I to je určitá známka toho, že sázka na tento framework bude velice pravděpodobně bezpečná.
3. Zpětná kompatibilita a podpora při migraci. Vývojáři React Native usilují o zpětnou kompatibilitu při údržbě a upgradování existujících projektů, aniž by bylo potřeba zásadním způsobem cokoli „překopávat“. To znamená, že řešení, které v React Native vytvoříte dnes, budete moct bez výrazných zásahů do kódu udržovat a rozšiřovat i v nadcházejících letech.

Chcete se pustit do vývoje v React Native? Obraťte se na profesionály!

Inspiroval vás náš článek k použití frameworku React Native při vývoji vaší příští aplikace? Došli jste k závěru, že tato technologie bude spolehlivým základem vašeho softwaru i do budoucna? Pak stačí vyplnit náš kontaktní formulář, domluvit si nezávaznou schůzku s naším projektovým manažerem a prodiskutovat konkrétní požadavky vašeho projektu. Těšíme se na vás i na vaši aplikaci!