Proč hybridní mobilní frameworky
Hybridní mobilní frameworky umožňují vytvářet aplikace pro více platforem (iOS, Android – často také web/desktop) z jednoho společného zdrojového kódu. Jejich cílem je zkrátit time-to-market, snížit náklady na vývoj a údržbu a zároveň zachovat blízký „nativní“ uživatelský zážitek (výkon, plynulost, přístup k nativním API). Nejrozšířenějšími zástupci jsou Flutter (Google, jazyk Dart) a React Native (Meta, JavaScript/TypeScript). Přestože jsou oba považovány za „hybridní“, fungují odlišně na úrovni vykreslování, běhového prostředí a komunikace s nativní vrstvou.
Architektonický model: vrstvy a hranice
- Aplikační vrstva: komponenty UI, stav, logika, networking – psané v jazyce Dart (Flutter) nebo JS/TS (React Native).
- Rámec: widgetový strom a rendering pipeline (Flutter) versus deklarativní komponenty a reconciler (React Native).
- Bridge/kanály: mechanismus pro volání nativních API (Kotlin/Java na Androidu, Swift/Obj-C na iOS) a využití nativních modulů/háčků.
- Nativní host: „shell“ aplikace, která bundluje runtime, assety, knihovny a zajišťuje přístup k systémovým zdrojům.
Flutter: vlastní rendering přes Skia
Flutter používá engine (C++) se zabudovaným grafickým jádrem Skia. Na každé platformě tedy nevytváří nativní UI prvky, ale vykresluje pixely přímo do Canvasu. To přináší:
- Konzistenci UI: vzhled a chování jsou stejné napříč operačními systémy (Material/Cupertino), nezávislé na verzích nativních komponent.
- Výkon: nízká latence, plynulé animace (60–120 FPS) díky vertikální kontrole nad pipeline (layout → paint → composite).
- Velikost: větší binární soubory (engine + Skia), ale dobrou předvídatelnost chování.
Logika běží v Dart VM (vývojový režim s JIT a hot reload) a v produkci jako AOT nativní kód (Dart → strojový kód). Nativní API se volají přes Platform Channels, případně FFI (přímé volání C knihoven).
React Native: nativní komponenty + JavaScript runtime
React Native deklarativně popisuje UI v React komponentách. Reconciler převádí stav na strom nativních host components (UIView/Android View). Běh logiky:
- JS runtime (JSC/Hermes) provádí kód; nativní vrstva vykresluje skutečné nativní prvky.
- Komunikace historicky probíhala přes Bridge (asynchronní, serializace JSON), nově se využívá architektura Fabric + JSI a TurboModules (nižší latence, synchronní volání vybraných cest, menší režie).
- Výsledkem je nativní vzhled a přístup ke všem nativním schopnostem, avšak s menší kontrolou nad přesnou pixelovou identitou napříč operačními systémy.
Model vykreslování: deklarativní UI a správa stromu
- Flutter: vše je Widget. Build metody vytvářejí lehké immutable widgety → Element strom → RenderObject pipeline. Stateful widgety drží lokální stav; InheritedWidget poskytuje kontext. Engine sám skládá scény (layers) a rasterizuje.
- React Native: React reconciler porovnává virtuální strom komponent a aplikuje diff do nativního stromu. S Fabricem probíhá layout přes Yoga (Flexbox) a commity jsou efektivní a dávkované.
Komunikace s nativní vrstvou a plug-in ekosystém
- Flutter: Platform Channels (MethodChannel/EventChannel), případně pigeon pro generování typově bezpečných rozhraní. FFI pro volání C API bez proxy vrstvy.
- React Native: TurboModules/JSI, Native Modules, tvorba vlastních host komponent. Silná komunita knihoven, ovšem důraz na kompatibilitu s novou architekturou.
- Hardware & OS API: senzory, kamera, Bluetooth, notifikace, geolokace, biometrie – v obou ekosystémech jako hotové moduly nebo vlastní bridge.
Výkon: latence, plynulost a náročné scénáře
- Zátěž UI: Flutter exceluje v bohatých animacích a custom grafice (Canvas, shaders). RN vyniká na obrazovkách s nativními prvky (vstupy, seznamy) – s Fabricem a recyclerized seznamy je plynulost srovnatelná.
- Bridge overhead: Flutter má výhodu v tom, že velkou část UI vykreslí bez přepínání kontextu. RN s JSI snižuje režii oproti starému Bridge.
- Studené starty: menší bundle + Hermes zlepšují start RN; Flutter AOT má rychlý start, ale větší balík.
- GPU/CPU: obě platformy těží z optimalizací (lazy listy, batching, memoizace, repaint boundaries, analogie shouldComponentUpdate/PureComponent).
Stav a architektury řízení stavu
- Flutter: Provider, Riverpod, BLoC/Cubit, MobX, Redux, GetX. Důraz na immutability, streams a jasné hranice zodpovědnosti.
- React Native: Redux/Toolkit, Zustand, Recoil, MobX, Jotai, React Query (server-state), Context API. Nutná opatrnost kvůli over-renderingu a granularitě selektorů.
- DDD a modulární monorepo: sdílení doménových balíčků (TS/JS nebo Dart packages), čistá architektura, feature modules.
Navigace a životní cyklus obrazovek
- Flutter: Navigator 1.0 (zásobník) a Navigator 2.0/Router (deklarativní). Bohaté knihovny (go_router, auto_route) s deep-linkingem a guardy.
- React Native: React Navigation (zásobník/taby/šuflíky, deep links), Native Navigation (nativní kontroléry), linking s univerzálními odkazy.
Asynchronní operace, vlákna a izoláty
- Flutter: Isolates pro paralelní práci mimo hlavní UI vlákno; compute() helper; event loop Dartu pro async/await.
- React Native: JS thread + UI thread (+ nativní background threads). Náročné výpočty přes nativní modul/JSI nebo WebWorkers (na webu analogie).
Animace, gesta a grafika
- Flutter: Implicitní a Explicitní animátory, Tween, AnimationController, fyzikální animace, CustomPainter, shadery (Impeller/SkSL).
- React Native: Reanimated/Animated API, Gesture Handler, Skia for RN (2D kreslení), Lottie. Fabric zlepšuje synchronizaci UI a gest.
Přístupnost (a11y) a lokalizace
- Přístupnost: role/traits, čtečky obrazovky (VoiceOver/TalkBack), správa fokusů, kontrasty, dynamická velikost textu.
- Lokalizace: Flutter intl/gen-l10n; RN i18next/FormatJS; pluralizace, RTL, regionální formáty.
Bezpečnost a ochrana tajemství
- Úložiště citlivých dat: Keychain/Keystore (Secure Storage moduly).
- Integrita a obfuskování: u Flutteru split debug info, u RN minifikace/obfuskování JS (Metro), detekce root/jailbreak, anti-tampering.
- Komunikace: TLS pinning, certifikáty, bezpečný IPC mezi moduly.
Testování a kvalita
- Jednotkové testy: Dart test/Mockito versus Jest/Vitest a React Testing Library.
- Widget/komponenty: Flutter widget tests; v RN component testing + snapshoty (s opatrností).
- E2E: Flutter Driver/IntegrationTest + Firebase Test Lab; RN Detox/Appium.
- Výkonnost: trace, profilery (Flutter DevTools, Android Studio, Xcode Instruments), analýza fps/jank.
Dev tooling, hot reload a produktivita
- Flutter: hot reload (JIT), hot restart, bohatý DevTools (inspektor layoutu, paměť, CPU profiler), pub ekosystém.
- React Native: Fast Refresh, React DevTools, Flipper, Metro bundler, TypeScript pro typovou bezpečnost.
CI/CD a vydávání
- Buildy: Gradle/Xcode, signing, flavors/schemes, automatizace (fastlane, codemagic, EAS, Bitrise, GitHub Actions).
- Distribuce: interní testy (TestFlight, Play Internal), rollout, A/B testování, feature flagy (ConfigCat, Firebase Remote Config).
Offline, data a synchronizace
- Úložiště: SQLite/Room/Drift/Hive (Flutter), WatermelonDB/SQLite/Realm (RN).
- Strategie: cache-aside, optimistic UI, řešení konfliktů (CRDT/event sourcing u kolaborativních scénářů).
Více platforem: web a desktop
- Flutter: web (CanvasKit/HTML), Windows/macOS/Linux (embedding). Sdílená logika i UI s drobnými úpravami.
- React Native: RN for Windows/macOS, Expo for Web. Obvykle sdílená logika, UI vyžaduje adaptaci.
Optimalizační checklist
- Minimalizujte opakované re-buildy: selektivní poslech stavu (Selectors/ValueListenable/Provider.select).
- Batching: slučujte změny stavu, debounce, odložená práce mimo frame (Idle/Interactions).
- Seznamy: virtuální scrolling, itemKey, stabilní výška, obrázky s cache/preload.
- Assety: komprese, správné rozměry, lazy load, vektorová grafika (SVG/Path).
- Mosty: minimalizujte cross-boundary volání (bridge/JSI/channels), preferujte větší „batch“ operace.
Limity a kompromisy
- Velikost balíčku (Flutter) versus fragmentace knihoven (RN, kompatibilita s Fabric/novou architekturou).
- Nativní vzhled: RN získává UI z OS, Flutter ho simuluje – výhody a nevýhody dle požadavků na konzistenci versus platformní idiomy.
- Specializované nativní UI: špičkové přehrávače, mapy, kamerové pipeline mohou vyžadovat hlubší nativní integraci.
Jak vybírat mezi Flutter a React Native
- Konzistence UI a custom grafika: Flutter, pokud požadujete pixel-perfect a stejné chování napříč platformami.
- Napojení na stávající web stack a JS ekosystém: React Native, pokud tým preferuje React/TypeScript a sdílení logiky.
- Rychlost prototypování: oba frameworky jsou velmi rychlé; Flutter má často výhodu u složitých animací, RN u aplikací s převahou nativních prvků.
- Recruiting a komunita: JS/TS talent pool je širší; Flutter komunita dynamicky roste a nabízí konsistentní tooling.
Best practices pro udržitelný hybridní vývoj
- Čistá architektura: oddělte UI, doménovou logiku a data; DI; testovatelnou logiku.
- Design systém: jednotné komponenty, theming, tokeny; tmavý režim/kontrast.
- Observabilita: crash reporting, performance tracing, logování s korelací (uživatel/session).
- Feature flags a postupný rollout; měření dopadů (analytics) s ohledem na privacy by design.
- Dokumentace a linting: styleguidy, pre-commit hooky, automatické kontroly v CI.
Závěr
Hybridní frameworky přinášejí vysokou produktivitu a pokrytí více platforem z jednoho zdrojového kódu. Flutter staví na vlastním renderování a garantuje konzistentní, vysoce výkonné uživatelské
