Cross-Platform App: co to je, srovnání Flutter, React Native a KMP

Co je Cross-Platform App?

Cross-Platform App (multiplatformní aplikace) — software navržený pro provoz na více mobilních operačních systémech z jedné kódové základny. Na rozdíl od nativního vývoje, kde jsou pro iOS (Swift) a Android (Kotlin) vedeny dva samostatné projekty, multiplatformní vývoj spojuje obchodní logiku, uživatelské rozhraní a datovou vrstvu do jednoho projektu.

Koncepce multiplatformního vývoje se objevila v roce 2009 s PhoneGap (později Apache Cordova), který zabalil webovou aplikaci do nativního WebView. Moderní frameworky se dostaly daleko: Flutter kompiluje do nativního ARM kódu přes Dart, React Native používá JavaScriptové jádro s nativním mostem a Kotlin Multiplatform kompiluje sdílený kód do binárních souborů specifických pro platformu. Do roku 2026 více než 40 % nových mobilních aplikací používá alespoň jednu multiplatformní technologii.

Klíčové ukazatele zavedení: uvedení na trh o 30–50 % rychlejší, snížení nákladů o 30–40 % oproti dvěma nativním týmům, podpora jednotné sady funkcí na obou platformách. Nicméně multiplatformní aplikace stále čelí výzvám — platformově specifické prvky UI, přístup k hardwarovým API a funkce kritické pro výkon, jako jsou animace a hry.

Flutter: architektura a výkon

Flutter — open-source UI framework Google v jazyce Dart s vlastním vykreslovacím jádrem Skia (Impeller ve verzi 4.x). Na rozdíl od frameworků používajících nativní komponenty platformy, Flutter nezávisle vykresluje každý pixel, což poskytuje plnou kontrolu nad rozhraním. Tento přístup odstraňuje rozdíly mezi platformami, ale zvyšuje velikost aplikace o 5–15 MB.

// Flutter — jednoduchý čítač
import 'package:flutter/material.dart';

void main() { runApp(const CounterApp()); }

class CounterApp extends StatelessWidget {
  const CounterApp({super.key});

  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterScreen());
  }
}

class CounterScreen extends StatefulWidget {
  /* ... */
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Multiplatformní čítač')),
      body: Center(
        child: Column(
          children: [
            const Text('Tolikrát jste stiskli tlačítko:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Základem Flutter je widgetová architektura: vše — od mezer a zarovnání po omezení rozvržení — je widget. Tento deklarativní model, zděděný z Reactu, činí UI předvídatelným. Díky AOT kompilaci Dartu se Flutter aplikace spouštějí za méně než 2 sekundy a udržují 60 FPS i na zařízeních střední třídy. Impeller — nové vykreslovací jádro — odstranilo zadrhávání při kompilaci shaderů, což byl hlavní problém Skia.

React Native: JavaScript most a ekosystém

React Native — multiplatformní framework Meta pro vytváření mobilních aplikací v JavaScript/TypeScript a React. Na rozdíl od Flutteru, React Native používá nativní UI komponenty platformy (UIView na iOS, View na Android) přes JavaScript most. Obchodní logika se provádí v JavaScriptovém jádře (Hermes nebo JSC) a asynchronně komunikuje s nativními moduly.

// React Native — komponenta s kódem platformy
import React, { useState } from 'react';
import {
  View, Text, TouchableOpacity, Platform
} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  const greeting = Platform.select({
    ios: 'Ahoj na iOS',
    android: 'Ahoj na Androidu',
    default: 'Ahoj',
  });

  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{count}</Text>
      <TouchableOpacity
        onPress={() => setCount(c => c + 1)}>
        <Text>+1</Text>
      </TouchableOpacity>
    </View>
  );
};

Největší výhodou React Native je ekosystém. npm má více než 2 miliony balíčků a knihovny React Navigation, Expo a Reanimated poskytují hotová řešení pro navigaci, gesta a animace. Expo — spravovaný pracovní postup — zjednodušuje sestavení a publikování s OTA aktualizacemi a více než 50 vestavěnými nativními moduly. Instagram, Shopify a Discord s celkovým publikem více než 500 milionů měsíčních uživatelů běží na React Native.

Kotlin Multiplatform: sdílená logika s nativním UI

Kotlin Multiplatform (KMP) — technologie JetBrains, která kompiluje sdílený Kotlin kód do binárních souborů specifických pro platformu. Na rozdíl od Flutteru a React Native, KMP neposkytuje UI framework — jeho úkolem je znovu používat obchodní logiku, datovou vrstvu, síťové požadavky a validaci, přičemž rozhraní zůstává plně nativní. Netflix, McDonald's a VMware používají KMP v produkci.

// Kotlin Multiplatform — sdílené úložiště v commonMain
class UserRepository(
    private val api: KtorClient,
    private val db: Database
) {
    suspend fun getUsers(): Result<List<User>> {
        return try {
            val users = api.fetch<List<UserDto>>("/users")
            db.save(users.map { it.toDomain() })
            Result.success(db.getAll())
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
}

// expect/actual — formátování data pro platformu
expect fun formatDate(timestamp: Long): String

Klíčovým vzorem KMP je mechanismus expect/actual. Ve sdíleném modulu (commonMain) je deklarována expect funkce nebo třída a v každé sadě zdrojů platformy (androidMain, iosMain) je poskytnuta actual implementace. To umožňuje používat nativní API — SharedPreferences, NSUserDefaults, kameru, biometrii — při zachování jednotného veřejného rozhraní ve sdíleném kódu. Compose Multiplatform — UI vrstva pro KMP — dosáhla stability pro Android a Desktop v roce 2025, verze pro iOS zůstává v beta testování.

Srovnání multiplatformních frameworků

Výkon se výrazně liší v závislosti na scénáři. Vlastní vykreslování Flutteru poskytuje stabilních 60 FPS pro animace a přechody. Mostová architektura React Native přidává 2–5 ms zpoždění při každém nativním volání, i když nová vrstva JSI (JavaScript Interface) toto zpoždění snižuje. KMP má nulovou režii na sdíleném kódu, protože kompiluje přímo do binárních souborů platformy. Pro UI náročné aplikace se složitými animacemi je volba mezi Flutterem a nativním vývojem.

Jak vybrat vhodný framework

Výběr mezi Flutter, React Native a KMP je určen prioritami projektu. Pokud potřebujete pixel-perfect UI a plnou kontrolu animací — Flutter poskytuje nejkonzistentnější multiplatformní zážitek. Pokud tým ovládá JavaScript/React a cení si největšího ekosystému knihoven třetích stran — React Native je pragmatickou volbou. Pokud již existují nativní aplikace a je třeba sdílet obchodní logiku — KMP umožňuje zavádět sdílený kód modul po modulu bez kompromisů v UI.

Pro MVP a startupy poskytují Flutter nebo React Native nejkratší cestu na trh s 80–100 % sdíleného kódu. Pro podnikové aplikace se stávající nativní základnou umožňuje KMP postupnou migraci modulů. Hry a mediální aplikace s vlastním vykreslováním těží z Flutteru nebo plně nativního přístupu. Každý z frameworků prokázal svou zralost — Instagram (React Native), Google Pay (Flutter) a Netflix (KMP) běží na multiplatformních technologiích.

Trendy: Flutter se rozšiřuje na desktop a web s jednotnou kódovou základnou. React Native s novou architekturou (Fabric + TurboModules) zcela odstraňuje most. KMP s Compose Multiplatform usiluje o jednotnou UI vrstvu při zachování nativního výkonu. Do roku 2027 bude hranice mezi multiplatformním a nativním vývojem zcela rozmazána — frameworky přecházejí na platformové cesty kompilace.