Cross-Platform App: co to jest, porównanie Flutter, React Native i KMP

Co to jest Cross-Platform App?

Cross-Platform App (aplikacja wieloplatformowa) — oprogramowanie zaprojektowane do działania na wielu mobilnych systemach operacyjnych z jednej bazy kodu. W przeciwieństwie do rozwoju natywnego, gdzie dla iOS (Swift) i Android (Kotlin) prowadzone są dwa oddzielne projekty, rozwój wieloplatformowy łączy logikę biznesową, interfejs użytkownika i warstwę danych w jednym projekcie.

Koncepcja rozwoju wieloplatformowego pojawiła się w 2009 roku z PhoneGap (później Apache Cordova), który pakował aplikację webową w natywny WebView. Nowoczesne frameworki poszły znacznie dalej: Flutter kompiluje się do natywnego kodu ARM przez Dart, React Native używa silnika JavaScript z natywnym mostem, a Kotlin Multiplatform kompiluje wspólny kod do plików binarnych specyficznych dla platformy. Do 2026 roku ponad 40% nowych aplikacji mobilnych używa co najmniej jednej technologii wieloplatformowej.

Kluczowe wskaźniki wdrożenia: wprowadzenie na rynek o 30–50% szybsze, redukcja kosztów o 30–40% w porównaniu z dwoma zespołami natywnymi, obsługa jednolitego zestawu funkcji na obu platformach. Jednak aplikacje wieloplatformowe wciąż stają przed wyzwaniami — platformowe różnice UI, dostęp do sprzętowych API i krytyczna dla wydajności funkcjonalność, taka jak animacje i gry.

Flutter: architektura i wydajność

Flutter — otwarty framework UI Google w języku Dart z własnym silnikiem renderowania Skia (Impeller w wersji 4.x). W przeciwieństwie do frameworków używających natywnych komponentów platformy, Flutter samodzielnie renderuje każdy piksel, co daje pełną kontrolę nad interfejsem. Takie podejście eliminuje różnice między platformami, ale zwiększa rozmiar aplikacji o 5–15 MB.

// Flutter — prosty licznik
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('Licznik wieloplatformowy')),
      body: Center(
        child: Column(
          children: [
            const Text('Nacisnąłeś przycisk tyle razy:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

U podstaw Flutter leży architektura widgetów: wszystko — od odstępów i wyrównania po ograniczenia układu — jest widgetem. Ten deklaratywny model, odziedziczony po React, czyni UI przewidywalnym. Dzięki AOT-kompilacji Dart aplikacje Flutter uruchamiają się w mniej niż 2 sekundy i utrzymują 60 FPS nawet na urządzeniach średniej klasy. Impeller — nowy silnik renderowania — wyeliminował zacinanie przy kompilacji shaderów, co było głównym problemem Skia.

React Native: most JavaScript i ekosystem

React Native — wieloplatformowy framework Meta do tworzenia aplikacji mobilnych w JavaScript/TypeScript i React. W przeciwieństwie do Flutter, React Native używa natywnych komponentów UI platformy (UIView na iOS, View na Android) przez most JavaScript. Logika biznesowa jest wykonywana w silniku JavaScript (Hermes lub JSC), asynchronicznie współdziałając z modułami natywnymi.

// React Native — komponent z kodem platformowym
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: 'Witaj na iOS',
    android: 'Witaj na Androidzie',
    default: 'Witaj',
  });

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

Największą zaletą React Native jest ekosystem. npm ma ponad 2 miliony pakietów, a biblioteki React Navigation, Expo i Reanimated dostarczają gotowe rozwiązania do nawigacji, gestów i animacji. Expo — zarządzany przepływ pracy — upraszcza budowanie i publikację z aktualizacjami OTA i ponad 50 wbudowanymi modułami natywnymi. Na React Native działają Instagram, Shopify i Discord z łączną publicznością ponad 500 mln użytkowników miesięcznie.

Kotlin Multiplatform: wspólna logika z natywnym UI

Kotlin Multiplatform (KMP) — technologia JetBrains, która kompiluje wspólny kod Kotlin do plików binarnych specyficznych dla platformy. W przeciwieństwie do Flutter i React Native, KMP nie dostarcza frameworka UI — jego zadaniem jest współdzielenie logiki biznesowej, warstwy danych, zapytań sieciowych i walidacji, pozostawiając interfejs w pełni natywnym. Netflix, McDonald's i VMware używają KMP w produkcji.

// Kotlin Multiplatform — wspólne repozytorium w 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 — formatowanie daty dla platformy
expect fun formatDate(timestamp: Long): String

Kluczowym wzorcem KMP jest mechanizm expect/actual. W module wspólnym (commonMain) deklarowana jest funkcja lub klasa expect, a w każdym zestawie źródeł platformowych (androidMain, iosMain) dostarczana jest implementacja actual. Pozwala to na używanie platformowych API — SharedPreferences, NSUserDefaults, aparatu, biometrii — przy zachowaniu jednolitego publicznego interfejsu we wspólnym kodzie. Compose Multiplatform — warstwa UI dla KMP — osiągnęła stabilność dla Android i Desktop w 2025 roku, wersja dla iOS pozostaje w fazie beta.

Porównanie frameworków wieloplatformowych

Wydajność znacznie różni się w zależności od scenariusza. Własne renderowanie Flutter zapewnia stabilne 60 FPS dla animacji i przejść. Architektura mostowa React Native dodaje 2–5 ms opóźnienia przy każdym wywołaniu natywnym, choć nowa warstwa JSI (JavaScript Interface) zmniejsza tę różnicę. KMP ma zerowy narzut na współdzielony kod, ponieważ kompiluje się bezpośrednio do platformowych plików binarnych. Dla aplikacji z intensywnym UI i złożonymi animacjami wybór należy między Flutter a rozwojem natywnym.

Jak wybrać odpowiedni framework

Wybór między Flutter, React Native i KMP zależy od priorytetów projektu. Jeśli potrzebujesz pixel-perfect UI i pełnej kontroli animacji — Flutter zapewnia najbardziej spójne doświadczenie wieloplatformowe. Jeśli zespół zna JavaScript/React i ceni największy ekosystem bibliotek zewnętrznych — React Native jest pragmatycznym wyborem. Jeśli istnieją już aplikacje natywne i wymagane jest współdzielenie logiki biznesowej — KMP pozwala wdrażać wspólny kod moduł po module bez kompromisów w UI.

Dla MVP i startupów Flutter lub React Native dają najkrótszą drogę na rynek z 80–100% wspólnego kodu. Dla aplikacji korporacyjnych z istniejącą bazą natywną KMP pozwala stopniowo migrować moduły. Gry i aplikacje multimedialne z niestandardowym renderowaniem zyskują na Flutter lub w pełni natywnym podejściu. Każdy z frameworków udowodnił swoją dojrzałość — Instagram (React Native), Google Pay (Flutter) i Netflix (KMP) działają na technologiach wieloplatformowych.

Trendy: Flutter rozszerza się na desktop i web z jednolitą bazą kodu. React Native z nową architekturą (Fabric + TurboModules) całkowicie eliminuje most. KMP z Compose Multiplatform dąży do jednolitej warstwy UI przy zachowaniu natywnej wydajności. Do 2027 roku granica między rozwojem wieloplatformowym a natywnym zostanie ostatecznie zatarta — frameworki przechodzą na platformowe ścieżki kompilacji.