Co znamená „hybridní“ mobilní vývoj dnes
Hybridní (lépe cross-platform) vývoj umožňuje psát jednotnou codebase pro iOS a Android s možností sdílet logiku a část uživatelského rozhraní. Dvě dominantní platformy jsou Flutter (Google, jazyk Dart, vlastní renderovací engine) a React Native (Meta, JavaScript/TypeScript, hostovaný nativní rendering). Obě směřují ke zrychlení vývoje, snížení nákladů a jednotnému designu/UX, ale liší se v architektuře, výkonu a rozšiřitelnosti.
Architektonické rozdíly: rendering, bridge a runtime
- Flutter: vykresluje UI kompletně přes Skia/Impeller (Metal/Vulkan/OpenGL). Renderuje vlastní pixely, nespoléhá se na nativní UI prvky. Poskytuje konzistentní vzhled, vysokou kontrolu nad animacemi a predikovatelné chování napříč operačními systémy.
- React Native (RN): využívá nativní prvky (UIKit/SwiftUI na iOS, Views/Compose na Androidu) a orchestruje je z JavaScriptu/TypeScriptu. Nová architektura (JSI, TurboModules, Fabric) minimalizuje historický „bridge“ overhead a zvyšuje propustnost událostí.
- Runtime: Flutter kompiluje Dart AOT pro release (rychlý start, menší jitter), v debug režimu běží s JIT + hot reload. RN spouští JS na JavaScript engine (Hermes/JavaScriptCore), v produkci je zpravidla Hermes pro nižší spotřebu paměti a rychlejší inicializaci.
Výkon, paměť a start aplikace
- Start aplikace: Flutter má konstantní overhead enginu (větší binární velikost), ale výborný první vykreslený snímek („first frame“). RN závisí na inicializaci JS enginu a načtení bundle; Hermes zlepšuje studený start.
- FPS & animace: Flutter exceluje u náročných animací (Canvas, shader efekty). RN s Fabric a native driver animacemi je konkurenceschopný, avšak komplexní grafické scény jsou snazší na realizaci ve Flutteru.
- Paměť: RN sdílí paměť s JS enginem; je nutná pečlivá práce s objekty a closure. Flutter udržuje widget strom a assety – je důležité sledovat image cache a životní cykly.
Jazyky a paradigmata
- Dart (Flutter): silná typová kontrola, AOT kompilace, null safety, jednotný ekosystém. Reaktivní UI přes Widget strom a immutable konfigurace.
- TypeScript/JavaScript (RN): široká komunita, sdílení kódu s webem, bohatý NPM ekosystém. Vyžaduje disciplinu (ESLint, TS strict) pro spolehlivost kódu.
Správa stavu a architektury
- Flutter: Provider, Riverpod, BLoC/Cubit, GetX, MobX. Doporučovaný přístup je „unidirectional data flow“ (BLoC/Riverpod) a izolace I/O operací v repozitářích.
- RN: Redux Toolkit, Zustand, Recoil, MobX, Jotai. V praxi se používají RTK Query/React Query pro data-fetching, Redux slouží především pro stav napříč obrazovkami.
- Architektura: Clean Architecture s doménovými vrstvami (Entities, Use Cases, Repositories) je přenositelná v obou platformách.
Navigace a routing
- Flutter: Navigator 2.0 (deklarativní), knihovny go_router, auto_route – usnadňují práci s deep linky a guarded routami.
- RN: React Navigation, nativní stack (react-native-screens) pro vyšší výkon; podpora deep linků a universal links.
Přístup k nativním API a vlastní moduly
- Flutter: platform channels (MethodChannel/EventChannel) pro iOS/Android; vývoj pluginů ve Swift/Kotlin. Znovupoužitelné balíčky jsou dostupné v pub.dev.
- RN: TurboModules (C++/JSI) a Fabric pro UI; starší moduly využívají most. Nativní kód se píše ve Swift/Kotlin/ObjC/Java, případně C++ pro lepší výkon.
UI a designové systémy
- Flutter: Material a Cupertino s hlubokou kontrolou stylů; adaptivní komponenty; vlastní render objects pro speciální layouty.
- RN: nativní vzhled „zdarma“, snadné dodržování platformních standardů; pro konzistenci se používají designové knihovny (Paper, NativeBase) a tokens.
Přístupnost (a11y), lokalizace a RTL
- Přístupnost: Flutter využívá Semantics tree; RN pracuje s nativními a11y rolemi. Klíčové je testovat čtečky (VoiceOver/TalkBack) a dotykové cíle ≥48dp.
- Lokalizace: Flutter má nástroje intl + ARB workflow; RN podporuje i18n pomocí (i18next), pluralizaci, správu dat; dbát na podporu RTL a formátování čísel.
Datová vrstva: REST, GraphQL a offline
- REST: Flutter – dio/http + interceptory; RN – axios/fetch + React Query pro cache a retry mechanizmy.
- GraphQL: Flutter i RN používají Apollo/Urql/Artemis; nabízejí normalizovanou cache, optimistic UI a subscriptions.
- Offline: Flutter – Hive, Isar, Drift; RN – WatermelonDB, Realm, MMKV. Konflikty řešit CRDT nebo server-side mergem.
Testování a kvalita
- Flutter: jednotkové/widget/integrace testy (flutter_test, integration_test), záznam z golden tests, flutter_driver pro legacy.
- RN: unit testy (Jest), testy komponent (React Testing Library), e2e testy (Detox/Appium). Snapshot testy pro UI regresi.
- Společné: statická analýza (Dart analyzer / ESLint + TS), pre-commit hooky, SAST/DAST v CI pipeline.
CI/CD, podepisování a distribuce
- CI: GitHub Actions, GitLab CI, Bitrise, Codemagic; cachování build artefaktů (Gradle, CocoaPods, Dart pub/NPM).
- Podepisování: iOS profiles/certificates (Fastlane Match), Android keystore a v2/v3 signatury; správa tajemství v Secure Enclave/Secrets.
- Distribuce: TestFlight, Firebase App Distribution, Play Internal Testing; feature flags a staged rollout.
Bezpečnost a compliance
- Bezpečné ukládání tokenů (Keychain/Keystore, Flutter flutter_secure_storage, RN react-native-keychain).
- Pinning certifikátů, TLS, ochrana proti MITM; kontrola certificate transparency.
- Obfuskace a deduplikace symbolů (Flutter –obfuscate, ProGuard/R8 v RN), minifikace JS bundle, anti-tamper opatření.
- GDPR/SDK audit: minimalizovat třetí strany, privacy manifesty (iOS), Data safety form (Play konzole).
Monitoring, telemetrie a výkon v produkci
- Crash reporty & logy: Firebase Crashlytics/Sentry pro Flutter i RN; symbolikace dSYM/ProGuard mapping.
- Výkon: Flutter DevTools (časy snímků, kompilace shaderů), RN Flipper (síť, layout, výkon).
- Trace: OpenTelemetry/Performance Monitoring, vlastníci „golden paths“ metrik (TTI, FID, cold/warm start).
Modularita, monorepo a sdílení kódu
- Flutter: Melos pro monorepo, modulární balíčky, sdílené design tokens v Dart.
- RN: Yarn Workspaces/Turborepo, sdílené UI knihovny, tsup/esbuild buildy. Sdílení logiky s webem je snadné (isomorfní JS/TS).
Integrace s nativními obrazovkami a postupné nasazení
- Flutter: Add-to-App embed do existujících nativních projektů (hostování Activity/ViewController). Užitečné pro postupnou migraci aplikací.
- RN: lze přidat jako modul a postupně přepisovat obrazovky; Fabric usnadňuje integraci s nativním layoutem.
Tabulka: rychlé srovnání Flutter vs. React Native
| Kategorie | Flutter | React Native |
|---|---|---|
| UI rendering | Vlastní (Skia/Impeller), konzistentní napříč OS | Nativní prvky (Fabric), „domácí“ vzhled a chování |
| Jazyk | Dart (null safety, AOT/JIT) | TypeScript/JavaScript (Hermes/JSC) |
| Start aplikace | Rychlý první snímek, větší binárka | Závisí na JS enginu; Hermes zlepšuje studený start |
| Animace & grafika | Silné, vlastní kreslení a shadery | Dobré s Fabric + native driver; složitější komplexní scény |
| Sdílení s webem | Flutter Web (jiný render strom) | Vysoké (JS/TS knihovny sdílené s webem) |
| Nativní integrace | Platform Channels, pluginy | TurboModules/JSI, bohatý NPM ekosystém |
| Ekosystém | pub.dev, kurátorské balíčky | NPM, obrovský rozsah, variabilní kvalita |
| Učební křivka | Nový jazyk, ale konzistentní framework | Přirozené pro webové vývojáře (React/TS) |
Výběrová kritéria podle projektu
- Brandová konzistence a animace: Flutter vítězí (plná kontrola nad pixely).
- Propojení s webem a sdílení knihoven: RN s TypeScriptem je pragmatická volba.
- Greenfield projekty vs. „add-to-app“: oba přístupy zvládnou, Flutter nabízí velmi robustní Add-to-App tooling.
- Požadavky na přístupnost nativních komponent: RN využívá nativní ovládací prvky; ve Flutteru je potřeba pečlivě ladit Semantics.
Optimalizační checklist (produkce)
- Minimalizujte assety (SVG/VectorDrawable), lazy-load náročné obrazovky.
- Stabilizujte FPS: vyhněte se synchronním náročným výpočtům v hlavním vlákně (Flutter Isolates, RN JSI/Workers).
- Memoizace a selektivní re-render: const widgets ve Flutteru / shouldComponentUpdate a memo v RN.
- Monitorujte shader compilation jank (Flutter – SkSL warmup), v RN používejte animace na nativní straně.
- Zapněte Hermes v RN, AOT release v Flutteru, aktivujte ProGuard/R8 a dead-code elimination.
Organizační praxe: tým, role a procesy
- Design tokens sdílené mezi platformami; generace do Dart/TS.
- API kontrakty (OpenAPI/GraphQL schema) verzované a validované v CI.
- Feature flagging, experimenty (A/B testování), remote config pro řízení rizika rolloutů.
- Release train (týdenní/čtrnáctidenní), jasná „go/no-go“ kritéria (procento bez pádů, studený start, TTI).
Případové vzory (patterny)
- „Core + Shell“: doménová logika jako pure Dart/TS modul, tenká UI vrstva pro Flutter/RN.
- „Ports & Adapters“: platformní služby (storage, senzory) přes rozhraní; snadná mockovatelnost a testovatelnost.
- „Preview Apps“: automatická tvorba preview buildů z pull requestů pro UX recenze.
Časté anti-patterny
- „Všechno v jednom souboru“ – špatná čitelnost, nemožný refaktor; používejte modularizaci.
- Nekontrolované side-effects v komponentách/widgetech – používejte efektové hooky nebo BLoC Streams s životním cyklem.
- Mix UI a I/O logiky – dodržujte clean architekturu (UI ↔ UseCase ↔ Repo ↔ DataSource).
- Spoléhání na neauditorované knihovny – sledujte údržbu, lic
