Multiplatformní vývoj mobilních aplikací (Flutter, React Native): srovnání platforem

Co dnes znamená „hybridní“ mobilní vývoj

Hybridní (přesněji multiplatformní) vývoj umožňuje psát jedinou kódovou základnu pro iOS a Android a sdílet logiku i část uživatelského rozhraní. Dvě dominantní platformy jsou Flutter (Google, jazyk Dart, vlastní vykreslovací engine) a React Native (Meta, JavaScript/TypeScript, vykreslování pomocí nativních prvků). Obě platformy cílí na zrychlení vývoje, snížení nákladů a jednotný design a uživatelský zážitek, ale liší se architekturou, výkonem a rozšiřitelností.

Architektonické rozdíly: vykreslování, bridge a runtime

• Flutter: vykresluje uživatelské rozhraní kompletně pomocí Skia/Impeller (Metal/Vulkan/OpenGL). Vykresluje vlastní pixely a nespoléhá na nativní prvky UI. Poskytuje konzistentní vzhled, vysokou míru kontroly nad animacemi a předvídatelné chování napříč operačními systémy.
• React Native (RN): využívá nativní prvky (UIKit/SwiftUI v iOS, Views/Compose v Androidu) a řídí je z JavaScriptu/TypeScriptu. Nová architektura (JSI, TurboModules, Fabric) minimalizuje režii historického „bridge“ a zvyšuje propustnost událostí.
• Runtime: Flutter kompiluje Dart pomocí AOT pro vydanou verzi aplikace (rychlé spuštění, menší kolísání snímkové frekvence), v režimu ladění používá JIT + hot reload. RN spouští JS na JavaScriptovém enginu (Hermes/JavaScriptCore); ve vydané verzi se obvykle používá Hermes, který snižuje spotřebu paměti a zrychluje inicializaci.

Výkon, paměť a spuštění aplikace

• Spuštění: Flutter má konstantní režii enginu (větší binární soubor), ale velmi rychle vykreslí první snímek. RN závisí na inicializaci JS enginu a načtení balíčku; Hermes zlepšuje studený start.
• FPS a animace: Flutter vyniká u náročných animací (Canvas, efekty shaderů). RN s Fabric a animacemi využívajícími nativní ovladač je konkurenceschopný, ale složité grafické scény se snáze realizují ve Flutteru.
• Paměť: RN sdílí paměť s JS enginem; je nutné pečlivě pracovat s objekty a uzávěry. Flutter uchovává strom widgetů a prostředky – sledujte image cache a životní cykly.

Jazyky a paradigmata

• Dart (Flutter): silná typová kontrola, AOT, null safety, jednotný ekosystém. Reaktivní UI prostřednictvím stromu Widget a neměnných (immutable) konfigurací.
• TypeScript/JavaScript (RN): rozsáhlá komunita, sdílení kódu s webem, bohatý ekosystém NPM. Pro spolehlivost vyžaduje důslednost (ESLint, přísné nastavení TypeScriptu).

Správa stavu a architektury

• Flutter: Provider, Riverpod, BLoC/Cubit, GetX, MobX. Doporučuje se „jednosměrný tok dat“ (BLoC/Riverpod) a oddělení I/O do repozitářů.
• RN: Redux Toolkit, Zustand, Recoil, MobX, Jotai. V praxi se pro načítání dat používají RTK Query/React Query a Redux pouze pro stav sdílený napříč obrazovkami.
• Architektura: Clean Architecture s doménovými vrstvami (Entities, Use Cases, Repositories) je přenositelná do obou prostředí.

Navigace a routování

• Flutter: Navigator 2.0 (deklarativní), knihovny go_router, auto_route – snadná práce s deep linky a chráněnými routami.
• RN: React Navigation, nativní zásobník (react-native-screens) pro vyšší výkon; podpora deep linků a univerzálních odkazů.

Přístup k nativním API a vlastní moduly

• Flutter: platform channels (MethodChannel/EventChannel) pro iOS/Android; vývoj pluginů ve Swiftu/Kotlinu. Opakovaně použitelné balíčky na pub.dev.
• RN: TurboModules (C++/JSI) a Fabric pro UI; most pro starší moduly. Nativní kód ve Swiftu/Kotlinu/ObjC/Java, případně C++ pro vyšší výkon.

Uživatelské rozhraní a designové systémy

• Flutter: Material a Cupertino s podrobnou kontrolou stylů; adaptivní komponenty; vlastní render objects pro zvláštní rozvržení.
• RN: nativní vzhled a chování „zdarma“, snadné dodržení zvyklostí jednotlivých platforem; pro konzistenci se používají designové knihovny (Paper, NativeBase) a tokeny.

Přístupnost (a11y), lokalizace a RTL

• Přístupnost: Flutter má strom Semantics; RN využívá nativní role pro přístupnost. Důležité je testovat čtečky obrazovky (VoiceOver/TalkBack) a dotykové cíle o velikosti alespoň 48 dp.
• Lokalizace: Flutter – pracovní postup intl + ARB; RN – i18n (i18next), množné číslo, formátování dat; pozor na RTL a formátování číslic.

Datová vrstva: REST, GraphQL a offline režim

• REST: Flutter – dio/http + interceptory; RN – axios/fetch + React Query pro ukládání do mezipaměti a opakování požadavků.
• GraphQL: Flutter/RN – Apollo/Urql/Artemis; normalizované mezipaměti, optimistic UI, odběry.
• Offline režim: Flutter – Hive, Isar, Drift; RN – WatermelonDB, Realm, MMKV. Konflikty řešte pomocí CRDT nebo slučováním na straně serveru.

Testování a kvalita

• Flutter: unit, widget a integrační testy (flutter_test, integration_test), snímky v rámci golden tests, zastaralý nástroj flutter_driver.
• RN: jednotkové testy (Jest), testy komponent (React Testing Library), e2e testy (Detox/Appium). Snapshot testy pro odhalování regresí v UI.
• Společné: statická analýza (Dart analyzer / ESLint + TS), hooky pre-commit, SAST/DAST v CI.

CI/CD, podepisování a distribuce

• CI: GitHub Actions, GitLab CI, Bitrise, Codemagic; ukládání artefaktů sestavení do mezipaměti (Gradle, CocoaPods, Dart pub/NPM).
• Podepisování: iOS profiles/certificates (Fastlane Match), Android keystore a podepisování v2/v3; správa tajných údajů pomocí Secure Enclave/Secrets.
• Distribuce: TestFlight, Firebase App Distribution, interní testování v Play; feature flags a postupné nasazování.

Bezpečnost a compliance

• Bezpečné ukládání tokenů (Keychain/Keystore, Flutter flutter_secure_storage, RN react-native-keychain).
• Připnutí certifikátů, TLS, ochrana proti MITM; kontrola certificate transparency.
• Obfuskace/odstranění duplicitních symbolů (Flutter –obfuscate, ProGuard/R8 v RN), minimalizace (minify) balíčku JS, ochrana proti neoprávněným zásahům.
• Audit GDPR/SDK: minimalizujte zapojení třetích stran, používejte privacy manifesty (iOS), Data safety form (Play).

Monitoring, telemetrie a výkon v produkci

• Pády a protokoly: Firebase Crashlytics/Sentry pro Flutter i RN; symbolikace pomocí dSYM/ProGuard mapping.
• Výkon: Flutter DevTools (doby vykreslení snímků, kompilace shaderů), RN Flipper (síť, rozvržení, výkon).
• Trasování: OpenTelemetry/Performance Monitoring, odpovědnost za metriky „klíčových cest“ (TTI, FID, studený/teplý start).

Modularita, monorepo a sdílení kódu

• Flutter: Melos pro monorepo, modulární balíčky, společné designové tokeny v Dartu.
• RN: Yarn Workspaces/Turborepo, sdílené knihovny UI, sestavení pomocí tsup/esbuild. Sdílení logiky s webem je snadné (izomorfní JS/TS).

Integrace s nativními obrazovkami a postupné zavádění

• Flutter: vložení pomocí Add-to-App do stávajících nativních projektů (hostitelská Activity/ViewController). Užitečné pro postupnou migraci.
• RN: lze jej přidat jako modul a postupně přepisovat obrazovky; Fabric usnadňuje integraci s nativním rozvržením.

Tabulka: rychlé srovnání Flutteru a React Native

Kritéria výběru podle projektu

• Konzistence značky a animace: vítězí Flutter (plná kontrola nad vykreslováním pixelů).
• Propojení s webem a sdílení knihoven: RN s TS je pragmatická volba.
• Nový projekt vs. „add-to-app“: obojí je možné; Flutter nabízí velmi robustní nástroje Add-to-App.
• Požadavky na přístupnost nativních komponent: RN těží z nativních ovládacích prvků; ve Flutteru je třeba pečlivě ladit Semantics.

Kontrolní seznam optimalizace (produkce)

• Minimalizujte prostředky (SVG/VectorDrawable), těžké obrazovky načítejte až podle potřeby.
• Udržujte stabilní FPS: vyhněte se náročným synchronním výpočtům v hlavním vlákně (Flutter Isolates, RN JSI/Workers).
• Memoizace a selektivní opětovné vykreslování: const widgets / shouldComponentUpdate/memo.
• Sledujte zadrhávání při kompilaci shaderů (Flutter – SkSL warmup); v RN spouštějte animace na nativní straně.
• Používejte Hermes v RN, AOT ve vydané verzi Flutteru, zapněte ProGuard/R8 a dead-code elimination.

Organizační praxe: tým, role a procesy

• Designové tokeny sdílené mezi platformami; generování pro Dart/TS.
• Kontrakty API (OpenAPI/GraphQL schema) verzované a ověřované v CI.
• Správa příznaků funkcí, experimenty (A/B), remote config pro řízení rizik při postupném nasazování.
• Plán vydávání (týdenní/čtrnáctidenní), jasně stanovené metriky pro rozhodnutí o nasazení (procento aplikací bez pádů, studený start, TTI).

Typické vzory (patterny)

• „Core + Shell“: doménová logika jako modul pure Dart/TS, tenká vrstva UI pro Flutter/RN.
• „Ports & Adapters“: platformní služby (úložiště, senzory) prostřednictvím rozhraní; snadné vytváření mocků a testování.
• „Preview Apps“: automatické vytváření preview buildů z pull requestů pro kontrolu UX.

Časté anti-patterny

• „Everything in one file“ – špatná čitelnost a nemožnost refaktoringu; rozdělte kód do modulů.
• Neřízené vedlejší efekty v komponentách/widgetech – používejte efektové hooky/Bloc Streams s řízením životního cyklu.
• Míchání UI a I/O – dodržujte clean arch (UI ↔ UseCase ↔ Repo ↔ DataSource).
• Spoléhání na magické knihovny bez auditu – sledujte jejich údržbu, licenční podmínky a velikost.

Dlouhodobá udržitelnost a plán dalšího vývoje

• Flutter: renderer Impeller (méně zadrhávání při kompilaci shaderů), cílení na desktop a vestavěná zařízení; stabilní null safety a rychlé nástroje.
• RN: sjednocování nové architektury (Fabric/Turbo), Hermes jako výchozí engine, těsnější vazba na nativní UI a výkon.

Závěrečné doporučení

Pro projekty, které vyžadují výraznou vizuální identitu, plynulé animace a konzistenci, je Flutter volbou číslo jedna. Pokud vaše organizace těží ze sdílení kódu s webem, TypeScriptu a nativního vzhledu, zvolte React Native s novou architekturou a Hermem. V obou případech investujte do testování, monitoringu a automatizace – právě tyto postupy rozhodují o tom, zda vám „hybridní“ přístup skutečně sníží celkové náklady na vlastnictví (TCO) a urychlí dodávání hodnoty.

Rychlý rozhodovací strom

• Potřebuji sdílet knihovny s webem (TS/JS)? → RN.
• Potřebuji animace přesné na úrovni snímků a plnou kontrolu nad pixely? → Flutter.
• Mám stávající nativní aplikaci a chci přidat několik obrazovek? → Flutter Add-to-App nebo modul RN – vyberte podle dovedností týmu.
• Požaduji co nejnižší latenci UI na starším hardwaru? → Otestujte obě řešení v produkční konfiguraci (Hermes vs. AOT) a vyberte empiricky.