Cross-Platform App: mi ez, Flutter, React Native és KMP összehasonlítása

Mi az a Cross-Platform App?

Cross-Platform App (többplatformos alkalmazás) — olyan szoftver, amelyet több mobil operációs rendszeren való működésre terveztek egyetlen kódbázisból. Ellentétben a natív fejlesztéssel, ahol iOS (Swift) és Android (Kotlin) számára két külön projektet vezetnek, a többplatformos fejlesztés egyesíti az üzleti logikát, a felhasználói felületet és az adatréteget egy projektben.

A többplatformos fejlesztés koncepciója 2009-ben jelent meg a PhoneGap-pel (később Apache Cordova), amely egy webalkalmazást natív WebView-ba csomagolt. A modern keretrendszerek messzire jutottak: a Flutter natív ARM-kódra fordít Dart-on keresztül, a React Native JavaScript-motort használ natív híddal, a Kotlin Multiplatform pedig a közös kódot platformspecifikus bináris fájlokra fordítja. 2026-ra az új mobilalkalmazások több mint 40%-a használ legalább egy többplatformos technológiát.

Fő mutatók az alkalmazásról: 30–50%-kal gyorsabb piacra jutás, 30–40%-os költségcsökkentés két natív csapathoz képest, egységes funkciókészlet támogatása mindkét platformon. A többplatformos alkalmazások azonban még mindig kihívásokkal néznek szembe — platformspecifikus UI-jellemzők, hozzáférés a hardver API-okhoz és teljesítménykritikus funkcionalitás, mint az animációk és játékok.

Flutter: architektúra és teljesítmény

Flutter — a Google nyílt forráskódú UI-keretrendszere Dart nyelven, saját Skia (4.x verzióban Impeller) megjelenítőmotorral. Ellentétben a platform natív komponenseit használó keretrendszerekkel, a Flutter önállóan jeleníti meg minden egyes képpontot, ami teljes ellenőrzést biztosít a felület felett. Ez a megközelítés kiküszöböli a platformok közötti különbségeket, de 5–15 MB-tal megnöveli az alkalmazás méretét.

// Flutter — egyszerű számláló
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('Többplatformos számláló')),
      body: Center(
        child: Column(
          children: [
            const Text('Ennyiszer nyomta meg a gombot:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

A Flutter alapja a widget-architektúra: minden — a térközöktől és igazítástól kezdve az elrendezési korlátokig — egy widget. Ez a deklaratív modell, amelyet a React-től örökölt, kiszámíthatóvá teszi a UI-t. A Dart AOT-fordításának köszönhetően a Flutter-alkalmazások kevesebb mint 2 másodperc alatt indulnak el, és még középkategóriás eszközökön is 60 FPS-t tartanak. Az Impeller — az új megjelenítőmotor — kiküszöbölte a shader-fordításnál jelentkező akadozást, ami a Skia fő problémája volt.

React Native: JavaScript-híd és ökoszisztéma

React Native — a Meta többplatformos keretrendszere mobilalkalmazások készítéséhez JavaScript/TypeScript és React segítségével. Ellentétben a Flutter-rel, a React Native a platform natív UI-komponenseit használja (UIView iOS-en, View Androidon) egy JavaScript-hídon keresztül. Az üzleti logika a JavaScript-motorban (Hermes vagy JSC) fut, aszinkron módon kommunikálva a natív modulokkal.

// React Native — komponens platformkóddal
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: 'Üdvözlet iOS-en',
    android: 'Üdvözlet Androidon',
    default: 'Üdvözlet',
  });

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

A React Native legnagyobb előnye az ökoszisztéma. Az npm több mint 2 millió csomagot számlál, a React Navigation, Expo és Reanimated könyvtárak pedig kész megoldásokat kínálnak navigációhoz, gesztusokhoz és animációkhoz. Az Expo — egy felügyelt munkafolyamat — leegyszerűsíti az építést és közzétételt OTA-frissítésekkel és több mint 50 beépített natív modullal. Az Instagram, a Shopify és a Discord, összesen több mint 500 millió havi felhasználóval, React Native-on fut.

Kotlin Multiplatform: közös logika natív UI-val

Kotlin Multiplatform (KMP) — a JetBrains technológiája, amely a közös Kotlin-kódot platformspecifikus bináris fájlokra fordítja. Ellentétben a Flutter-rel és a React Native-val, a KMP nem biztosít UI-keretrendszert — feladata az üzleti logika, adatréteg, hálózati kérések és érvényesítés újrafelhasználása, miközben a felületet teljesen natívan hagyja. A Netflix, a McDonald's és a VMware KMP-t használ élesben.

// Kotlin Multiplatform — közös repository commonMain-ben
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 — dátum formázása platformhoz
expect fun formatDate(timestamp: Long): String

A KMP kulcsmintája az expect/actual mechanizmus. A közös modulban (commonMain) deklarálásra kerül egy expect-függvény vagy -osztály, és minden egyes platformforráskészletben (androidMain, iosMain) biztosításra kerül az actual-megvalósítás. Ez lehetővé teszi a natív API-ok — SharedPreferences, NSUserDefaults, kamera, biometria — használatát az egységes publikus interfész megtartása mellett a közös kódban. A Compose Multiplatform — a KMP UI-rétege — 2025-ben elérte a stabilitást Android és Desktop esetén, az iOS-verzió béta tesztelés alatt marad.

Többplatformos keretrendszerek összehasonlítása

Teljesítmény jelentősen eltér a forgatókönyvtől függően. A Flutter saját megjelenítője stabil 60 FPS-t biztosít az animációkhoz és átmenetekhez. A React Native híd-architektúrája 2–5 ms késleltetést ad hozzá minden natív híváshoz, bár az új JSI (JavaScript Interface) réteg csökkenti ezt a lemaradást. A KMP nulla többletterheléssel rendelkezik a megosztott kódon, mivel közvetlenül a platform bináris fájljaiba fordít. Az UI-intenzív, összetett animációjú alkalmazások esetén a választás a Flutter és a natív fejlesztés között van.

Hogyan válasszuk ki a megfelelő keretrendszert

A választás Flutter, React Native és KMP között a projekt prioritásai határozzák meg. Ha pixel-perfect UI-ra és teljes animáció-vezérlésre van szükség — a Flutter nyújtja a legkonzisztensebb többplatformos élményt. Ha a csapat ismeri a JavaScript/React-et és értékeli a legnagyobb harmadik fél könyvtárökoszisztémát — a React Native a pragmatikus választás. Ha már léteznek natív alkalmazások, és meg kell osztani az üzleti logikát — a KMP lehetővé teszi a közös kód modulonkénti bevezetését a UI kompromisszumok nélkül.

MVP-k és startupok számára a Flutter vagy a React Native adja a legrövidebb utat a piachoz 80–100% közös kóddal. Vállalati alkalmazásokhoz meglévő natív bázissal a KMP lehetővé teszi a modulok fokozatos migrálását. Játékok és médiaalkalmazások egyedi megjelenítéssel a Flutter-ből vagy a teljesen natív megközelítésből profitálnak. Minden egyes keretrendszer bizonyította érettségét — az Instagram (React Native), a Google Pay (Flutter) és a Netflix (KMP) többplatformos technológiákon fut.

Trendek: A Flutter egységes kódbázissal terjeszkedik asztali és webes platformokra. A React Native az új architektúrával (Fabric + TurboModules) teljesen megszünteti a hidat. A KMP a Compose Multiplatform segítségével egységes UI-rétegre törekszik a natív teljesítmény megtartása mellett. 2027-re a többplatformos és natív fejlesztés közötti határ teljesen elmosódik — a keretrendszerek platformfordítási útvonalakra állnak át.