Co znamená „hybridní“ mobilní vývoj dnes
Hybridní (lépe cross-platform) vývoj umožňuje psát jedinou codebase pro iOS a Android s možností sdílet logiku a část uživatelského rozhraní (UI). Dvě dominantní platformy jsou Flutter (Google, jazyk Dart, vlastní renderovací engine) a React Native (Meta, JavaScript/TypeScript, hostovaný nativní rendering). Obě cílí na zrychlení vývoje, snížení nákladů a jednotný design/UX, avšak liší se v architektuře, výkonu a rozšiřitelnosti.
Architektonické rozdíly: rendering, bridge a runtime
- Flutter: vykresluje uživatelské rozhraní kompletně přes Skia/Impeller (Metal/Vulkan/OpenGL). Renderuje vlastní pixely, nespoléhá 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 ahead-of-time (AOT) pro release (rychlý start aplikace, menší jitter), v debug režimu používá just-in-time (JIT) + hot reload. RN spouští JavaScript na JavaScript enginu (Hermes/JavaScriptCore), v release verzi se obvykle využívá Hermes pro menší spotřebu paměti a rychlejší inicializaci.
Výkon, paměť a start aplikace
- Start aplikace: Flutter má konstantní overhead enginu (výsledná binárka bývá větší), ale exceluje v rychlosti vykreslení prvního snímku („first frame“). RN závisí na inicializaci JavaScriptového enginu a načtení bundle; Hermes výrazně zlepšuje cold start.
- FPS & animace: Flutter exceluje u náročných animací (Canvas, shader efekty). RN s Fabric a native ovladačem animací je konkurenceschopný, avšak komplexní grafické scény jsou snazší realizovat ve Flutteru.
- Paměť: RN sdílí paměť s JavaScriptovým enginem; je nutné pečlivě pracovat s objekty a closure, aby nedocházelo k únikům paměti. Flutter spravuje widget tree a assety – je třeba sledovat image cache a životní cyklus objektů.
Jazyky a paradigmata
- Dart (Flutter): silná typová kontrola, AOT kompilace, null safety, jednotný ekosystém. Reaktivní UI je realizováno přes Widget strom a konfigurace jsou immutable.
- TypeScript/JavaScript (RN): široká komunita, možnost sdílení kódu s webem, bohatý NPM ekosystém. Vyžaduje disciplinu při psaní kódu (ESLint, přísná pravidla TS) pro zajištění spolehlivosti.
State management a architektury
- Flutter: populární knihovny jako Provider, Riverpod, BLoC/Cubit, GetX, MobX. Doporučuje se „unidirectional data flow“ (BLoC/Riverpod) a izolace I/O operací v repozitářích.
- RN: využívá Redux Toolkit, Zustand, Recoil, MobX, Jotai. V praxi se často používají RTK Query nebo 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 prostředích.
Navigace a routing
- Flutter: Navigator 2.0 (deklarativní přístup), knihovny jako go_router či auto_route usnadňují práci s deep linky a zabezpečenými (guarded) routami.
- RN: React Navigation, nativní stack (react-native-screens) pro vysoký výkon; podpora deep linků a universal links.
Přístup k nativním API a vlastní moduly
- Flutter: platform channels (MethodChannel/EventChannel) pro komunikaci s iOS/Android; vývoj pluginů v Swift/Kotlin. K dispozici znovupoužitelné balíčky na pub.dev.
- RN: TurboModules (C++/JSI) a Fabric pro UI; most (bridge) pro legacy moduly. Nativní kód psaný ve Swift/Kotlin/ObjC/Java, případně C++ pro vyšší výkon.
UI a designové systémy
- Flutter: podporuje Material i Cupertino design s rozsáhlou kontrolou nad styly; adaptivní komponenty; možnost vytvářet vlastní render objects pro speciální layouty.
- RN: nativní vzhled „zdarma“, snadné dodržení platformních standardů; pro konzistenci se používají design knihovny (Paper, NativeBase) a design tokens.
Přístupnost (a11y), lokalizace a RTL
- Přístupnost: Flutter disponuje Semantics stromem; RN využívá nativní a11y role. Důležité je testovat asistivní čtečky (VoiceOver/TalkBack) a zajistit touch targety o velikosti alespoň 48 dp.
- Lokalizace: Flutter používá intl a ARB workflow; RN implementuje i18n (i18next), podporuje pluralizaci a formátování dat; je třeba dávat pozor na podporu RTL a formátování čísel.
Data layer: REST, GraphQL a offline
- REST: ve Flutteru se využívá dio/http s interceptory; v RN axios/fetch v kombinaci s React Query pro cache a retry mechanizmy.
- GraphQL: Flutter i RN nabízí Apollo/Urql/Artemis; disponují normalizovanými cache, optimistic UI a subscriptions.
- Offline: Flutter používá Hive, Isar, Drift; RN WatermelonDB, Realm, MMKV. Konflikty dat se řeší pomocí CRDT nebo server-side merge mechanismů.
Testování a kvalita
- Flutter: unit/widget/integration testy (flutter_test, integration_test), golden snapshot testy, flutter_driver jako legacy řešení.
- RN: unit testy (Jest), testování komponent (React Testing Library), end-to-end testy (Detox/Appium). Snapshot testy pro detekci regresí UI.
- Společné: statická analýza kódu (Dart analyzer / ESLint + TS), pre-commit hooky, SAST/DAST v rámci CI pipeline.
CI/CD, podepisování a distribuce
- CI: GitHub Actions, GitLab CI, Bitrise, Codemagic; kešování build artefaktů (Gradle, CocoaPods, Dart pub/NPM).
- Podepisování: iOS profiles/certificates (Fastlane Match), Android keystore a v2/v3 signování; správa tajemství v Secure Enclave/Secrets.
- Distribuce: TestFlight, Firebase App Distribution, Play Internal Testing; feature flags a postupné nasazování (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 útokům; kontrola certificate transparency.
- Obfuskace a deduplikace symbolů (Flutter –obfuscate, ProGuard/R8 v RN), minimalizace velikosti JS bundle, ochrana proti manipulaci s kódem (anti-tamper).
- GDPR a audit SDK: minimalizovat využívání třetích stran, privacy manifesty (iOS), Data Safety Form pro Google Play.
Monitoring, telemetry a výkon v produkci
- Crashes & logy: Firebase Crashlytics a Sentry pro Flutter i RN; symbolikace dSYM/ProGuard mapování.
- Výkon: Flutter DevTools (analýza frame times, kompilace shaderů), RN Flipper (síť, layout, performance).
- Traces: OpenTelemetry/Performance Monitoring, odpovědnost za klíčové metriky („golden paths“) jako TTI, FID, cold/warm start.
Modularita, monorepo a sdílení kódu
- Flutter: Melos pro správu monorepa, modulární balíčky, sdílené design tokens v Dart.
- RN: Yarn Workspaces, Turborepo, sdílené UI knihovny, buildovací nástroje tsup/esbuild. Sdílení logiky s webem je velmi jednoduché díky isomorfnímu JS/TS.
Integrace s nativními obrazovkami a postupné přijímání
- Flutter: Add-to-App možnost embedovat Flutter do stávajících nativních projektů (hostování v Activity/ViewController). Vhodné pro postupnou migraci.
- RN: lze přidat jako modul a postupně přepisovat obrazovky; architektura 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í“ look & feel |
| Jazyk | Dart (null-safe, AOT/JIT) | TypeScript/JS (Hermes/JSC) |
| Start aplikace | Rychlý first frame, větší binárka | Závisí na JS enginu; Hermes zlepšuje cold start |
| Animace & grafika | Silné, custom painting/shadery | Dobré s Fabric + native driver; komplexní scény složitější |
| 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 | pub.dev, kurátorské balíčky | NPM, obrovská šíře, 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í díky plné kontrole nad pixely.
- Propojení s webem a sdílení knihoven: RN s TypeScriptem je pragmatickou volbou.
- Greenfield projekty vs. „add-to-app“: oba frameworky zvládnou obojí; Flutter nabízí velmi robustní tooling pro Add-to-App.
- Požadavky na přístupnost nativních komponent: RN těží z využití nativních ovládacích prvků; ve Flutteru je potřeba pečlivěji ladit Semantics.
Optimalizační checklist (produkce)
- Minimalizujte assety (SVG/VectorDrawable), lazy-loadujte těžké obrazovky.
- Stabilizujte FPS: vyhněte se synchronním těžkým výpočtům v hlavním vlákně (Flutter Isolates, RN JSI/Workers).
- Memoizujte a používejte selektivní re-render: const widgets ve Flutteru, shouldComponentUpdate/memo v RN.
- Monitorujte shader compilation jank (Flutter – SkSL warmup), u RN přesouvejte animace na nativní stranu.
- V RN využívejte Hermes, u Flutteru AOT kompilaci v release buildu, zapínejte ProGuard/R8 a dead-code elimination.
Organizační praxe: tým, role a procesy
- Design tokens sdílené mezi platformami; automatická generace do Dart/TS.
- API kontrakty (OpenAPI/GraphQL schema) verzované a validované v CI.
- Feature flagging, experimenty (A/B testy), remote config pro řízení rizika nasazení.
- Release train (týdenní/čtrnáctidenní), jasná kritéria „go/no-go“ (crash-free %, cold start, TTI).
Případové vzory (patterny)
- „Core + Shell“: doménová logika jako čistý Dart/TS modul, tenká UI vrstva ve Flutteru nebo RN.
- „Ports & Adapters“: platformní služby (úložiště, senzory) přes definovaná rozhraní; umožňuje snadnou mockovatelnost a testování.
- „Preview Apps“: automatická generace preview buildů
