Cross-Platform App: wat is het, vergelijking Flutter, React Native en KMP

Wat is een Cross-Platform App?

Cross-Platform App (cross-platform applicatie) — software ontworpen om op meerdere mobiele besturingssystemen te werken vanuit één codebase. In tegenstelling tot native ontwikkeling, waar voor iOS (Swift) en Android (Kotlin) twee afzonderlijke projecten worden uitgevoerd, combineert cross-platform ontwikkeling de bedrijfslogica, gebruikersinterface en gegevenslaag in één project.

Het concept van cross-platform ontwikkeling ontstond in 2009 met PhoneGap (later Apache Cordova), dat een webapplicatie in een native WebView verpakte. Moderne frameworks zijn veel verder gegaan: Flutter compileert naar native ARM-code via Dart, React Native gebruikt een JavaScript-engine met een native brug, en Kotlin Multiplatform compileert gedeelde code naar platformspecifieke binaire bestanden. In 2026 gebruikt meer dan 40% van de nieuwe mobiele applicaties ten minste één cross-platform technologie.

Belangrijke indicatoren van adoptie: 30–50% snellere time-to-market, 30–40% kostenbesparing vergeleken met twee native teams, ondersteuning van een uniforme functieset op beide platforms. Cross-platform apps worden echter nog steeds geconfronteerd met uitdagingen — platformspecifieke UI-kenmerken, toegang tot hardware-API's en prestatiekritische functionaliteit zoals animaties en games.

Flutter: architectuur en prestaties

Flutter — open-source UI-framework van Google in Dart met eigen rendering-engine Skia (Impeller in versie 4.x). In tegenstelling tot frameworks die native platformcomponenten gebruiken, rendert Flutter onafhankelijk elke pixel, wat volledige controle over de interface geeft. Deze aanpak elimineert verschillen tussen platforms, maar vergroot de applicatiegrootte met 5–15 MB.

// Flutter — eenvoudige teller
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('Cross-platform teller')),
      body: Center(
        child: Column(
          children: [
            const Text('U hebt de knop zo vaak ingedrukt:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

De basis van Flutter is de widget-architectuur: alles — van marges en uitlijning tot lay-outbeperkingen — is een widget. Dit declaratieve model, geërfd van React, maakt de UI voorspelbaar. Dankzij AOT-compilatie van Dart starten Flutter-apps in minder dan 2 seconden en behouden ze 60 FPS, zelfs op middenklasse apparaten. Impeller — de nieuwe rendering-engine — elimineerde haperingen bij het compileren van shaders, wat het grootste probleem van Skia was.

React Native: JavaScript-brug en ecosysteem

React Native — cross-platform framework van Meta voor het bouwen van mobiele apps in JavaScript/TypeScript en React. In tegenstelling tot Flutter gebruikt React Native native UI-componenten van het platform (UIView op iOS, View op Android) via een JavaScript-brug. De bedrijfslogica wordt uitgevoerd in de JavaScript-engine (Hermes of JSC) en communiceert asynchroon met native modules.

// React Native — component met platformcode
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: 'Hallo op iOS',
    android: 'Hallo op Android',
    default: 'Hallo',
  });

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

Het grootste voordeel van React Native is het ecosysteem. npm heeft meer dan 2 miljoen pakketten en bibliotheken zoals React Navigation, Expo en Reanimated bieden kant-en-klare oplossingen voor navigatie, gebaren en animaties. Expo — een beheerde workflow — vereenvoudigt het bouwen en publiceren met OTA-updates en meer dan 50 ingebouwde native modules. Instagram, Shopify en Discord met een gezamenlijk publiek van meer dan 500 miljoen maandelijkse gebruikers draaien op React Native.

Kotlin Multiplatform: gedeelde logica met native UI

Kotlin Multiplatform (KMP) — JetBrains-technologie die gedeelde Kotlin-code compileert naar platformspecifieke binaire bestanden. In tegenstelling tot Flutter en React Native biedt KMP geen UI-framework — het doel is het hergebruiken van bedrijfslogica, gegevenslaag, netwerkverzoeken en validatie, terwijl de interface volledig native blijft. Netflix, McDonald's en VMware gebruiken KMP in productie.

// Kotlin Multiplatform — gedeelde repository in 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 — datumnotatie voor platform
expect fun formatDate(timestamp: Long): String

Het kernpatroon van KMP is het expect/actual-mechanisme. In de gedeelde module (commonMain) wordt een expect-functie of -klasse gedeclareerd, en in elke platformspecifieke bronnenset (androidMain, iosMain) wordt een actual-implementatie geleverd. Dit maakt het mogelijk om native API's — SharedPreferences, NSUserDefaults, camera, biometrie — te gebruiken met behoud van een uniforme publieke interface in de gedeelde code. Compose Multiplatform — de UI-laag voor KMP — bereikte stabiliteit voor Android en Desktop in 2025, de versie voor iOS blijft in bètatest.

Vergelijking van cross-platform frameworks

Prestaties verschillen aanzienlijk per scenario. Eigen rendering van Flutter zorgt voor stabiele 60 FPS voor animaties en transities. De brugarchitectuur van React Native voegt 2–5 ms vertraging toe per native aanroep, hoewel de nieuwe JSI-laag (JavaScript Interface) deze achterstand verkleint. KMP heeft nul overhead op gedeelde code, omdat het direct naar platform binaire bestanden compileert. Voor UI-intensieve apps met complexe animaties ligt de keuze tussen Flutter en native ontwikkeling.

Het juiste framework kiezen

De keuze tussen Flutter, React Native en KMP wordt bepaald door de prioriteiten van het project. Als je pixel-perfect UI en volledige controle over animaties nodig hebt — biedt Flutter de meest consistente cross-platform ervaring. Als het team JavaScript/React beheerst en het grootste ecosysteem van externe bibliotheken waardeert — is React Native de pragmatische keuze. Als er al native apps bestaan en bedrijfslogica moet worden gedeeld — maakt KMP het mogelijk om gedeelde code module voor module te implementeren zonder compromissen in de UI.

Voor MVP's en startups bieden Flutter of React Native de kortste weg naar de markt met 80–100% gedeelde code. Voor bedrijfsapplicaties met een bestaande native basis maakt KMP geleidelijke migratie van modules mogelijk. Games en media-apps met aangepaste rendering profiteren van Flutter of een volledig native aanpak. Elk van de frameworks heeft zijn volwassenheid bewezen — Instagram (React Native), Google Pay (Flutter) en Netflix (KMP) draaien op cross-platform technologieën.

Trends: Flutter breidt zich uit naar desktop en web met één codebase. React Native met de nieuwe architectuur (Fabric + TurboModules) elimineert de brug volledig. KMP met Compose Multiplatform streeft naar een uniforme UI-laag met behoud van native prestaties. In 2027 zal de grens tussen cross-platform en native ontwikkeling volledig vervagen — frameworks gaan over op platformspecifieke compilatiepaden.