Hybridní mobilní vývoj: srovnání platforem Flutter a React Native

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

Hybridní (lépe cross-platform) vývoj umožňuje napsat jedinou kódovou základnu pro iOS i Android s možností sdílet logiku i čá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ě cílí na zrychlení vývoje, snížení nákladů a jednotný design/UX, ale 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á 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 využívá JIT + hot reload. RN spouští JS na JavaScript engine (Hermes/JavaScriptCore), v release je Hermes preferován 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í soubor), ale vynikající „first frame“. RN závisí na inicializaci JS enginu a načtení bundle; Hermes zlepšuje cold start.
FPS a animace: Flutter exceluje u náročných animací (Canvas, shader efekty). RN s Fabric a native driver animacemi je konkurenceschopný, avšak složité grafické scény jsou jednodušší ve Flutteru.
Paměť: RN sdílí paměť s JS enginem; vyžaduje pečlivou správu objektů a closure. Flutter udržuje widget tree a assety – je třeba sledovat image cache a životní cykly.

Jazyky a paradigmata

Dart (Flutter): silná typová kontrola, AOT kompilace, null safety, jednotný ekosystém. Reaktivní UI realizované přes Widget strom a immutable konfigurace.
TypeScript/JavaScript (RN): široká komunita, sdílení kódu s webem, bohatý ekosystém NPM. Vyžaduje disciplínu (ESLint, TS strict) pro spolehlivost.

State management a architektury

Flutter: Provider, Riverpod, BLoC/Cubit, GetX, MobX. Doporučuje se „unidirectional data flow“ (BLoC/Riverpod) a izolace I/O v repozitářích.
RN: Redux Toolkit, Zustand, Recoil, MobX, Jotai. V praxi: RTK Query/React Query pro data-fetching, Redux jen pro cross-screen stav.
Architektura: Clean Architecture s doménovými vrstvami (Entities, Use Cases, Repositories) je přenosná v obou světech.

Navigace a routing

Flutter: Navigator 2.0 (deklarativní), knihovny go_router, auto_route – snadná práce s deep linky, chráněné routy.
RN: React Navigation, nativní stack (react-native-screens) pro 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 na pub.dev.
RN: TurboModules (C++/JSI) a Fabric pro UI; most pro legacy moduly. Nativní kód v Swift/Kotlin/ObjC/Java, případně C++ pro výkon.

UI a design systémy

Flutter: Material a Cupertino s hlubokou kontrolou stylů; adaptivní komponenty; vlastní render objects pro speciální layouty.
RN: nativní look & feel „zdarma“, snadné dodržení platformních zvyklostí; pro konzistenci se používají designové knihovny (Paper, NativeBase) a tokens.

Přístupnost (a11y), lokalizace a RTL

Přístupnost: Flutter má Semantics tree; RN využívá nativní a11y role. Klíčové je testovat čtečky (VoiceOver/TalkBack) a touch targety s velikostí ≥48dp.
Lokalizace: Flutter využívá intl + ARB workflow; RN i18n (i18next), pluralizace, formáty datumů; pozor na podporu RTL a formát číslic.

Datová vrstva: REST, GraphQL a offline

REST: Flutter – dio/http + interceptory; RN – axios/fetch + React Query pro cache a retry.
GraphQL: Flutter/RN – Apollo/Urql/Artemis; normalizovaná cache, optimistic UI, subscriptions.
Offline: Flutter – Hive, Isar, Drift; RN – WatermelonDB, Realm, MMKV. Konflikty řešit CRDT nebo server-side merge.

Testování a kvalita

Flutter: unit/widget/integration testy (flutter_test, integration_test), záznam z golden tests, flutter_driver jako legacy nástroj.
RN: unit testy (Jest), komponentové testování (React Testing Library), e2e testy (Detox/Appium). Snapshot testy pro regresi UI.
Společné: statická analýza (Dart analyzer / ESLint + TS), pre-commit hooky, SAST/DAST v CI.

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 sign; 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), minify JS bundle, anti-tamper ochrany.
GDPR/SDK audit: minimalizovat třetí strany, privacy manifesty (iOS), Data safety form (Play).

Monitoring, telemetrie a výkon v produkci

Crashes & logy: Firebase Crashlytics/Sentry pro Flutter i RN; symbolikace dSYM/ProGuard mapping.
Výkon: Flutter DevTools (frame times, shader compilation), RN Flipper (network, layout, performance).
Traces: OpenTelemetry/Performance Monitoring, vlastník „golden paths“ metrik (TTI, FID, cold/warm start).

Modularita, monorepo a sdílení kódu

Flutter: Melos pro monorepo, modulární balíčky, společné 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é přijímání

Flutter: Add-to-App embed do stávajících nativních projektů (Activity/ViewController host). Užitečné pro postupnou migraci.
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í“ look & feel
Jazyk	Dart (null-safe, AOT/JIT)	TypeScript/JS (Hermes/JSC)
Start aplikace	Rychlý first frame, větší binární soubor	Závisí na JS enginu; Hermes zlepšuje cold start
Animace & grafika	Silné, vlastní malování/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

Konsistence značky a animace: Flutter vítězí (plná kontrola nad pixely).
Propojení s webem a sdílení knihoven: RN s TS je pragmatická volba.
Greenfield vs. „add-to-app“: oba zvládnou, Flutter má velmi robustní Add-to-App tooling.
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.

Optimalizační checklist (produkce)

Minimalizujte assety (SVG/VectorDrawable), lazy-load těžké 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 / shouldComponentUpdate/memo.
Monitorujte shader compilation jank (Flutter – SkSL warmup), v RN animace na nativní straně.
Hermes na RN, AOT release na Flutteru, zapnutí 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), remote config pro řízení rizika rolloutů.
Release train (týdenní/čtrnáctidenní), jasná „go/no-go“ kritéria (crash-free %, cold 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 (úložiště, senzory) skrz rozhraní; snadná mockovatelnost a testování.
„Preview Apps“: automatická tvorba preview buildů z pull requestů pro UX review.

Časté anti-patterny

„Everything in one file“ – špatná čitelnost, nemožný refaktor; modularizujte.
Nekontrolované side efekty v komponentách/widgetech – používejte efektové hooky/Bloc Streams s životním cyklem.
Míchání UI a I/O – respektujte clean architekturu (UI ↔ UseCase ↔ Repo ↔ DataSource).
Spoléhání na magické knihovny bez auditu – sledujte údržbu, licenční podmínky a velikost.

Dlouhodobá udržitelnost a roadmapa

Flutter: Impeller renderer (nižší shader jank), desktopové/embedded cíle; stabilní null-safety a rychlý tooling.
RN: konsolidace nové architektury (Fabric/Turbo), Hermes jako výchozí engine, těsnější vazba na nativní UI a výkon.