Cross-Platform App: vad är det, jämförelse av Flutter, React Native och KMP

Vad är Cross-Platform App?

Cross-Platform App (plattformsoberoende applikation) — programvara utformad för att fungera på flera mobila operativsystem från en enda kodbas. Till skillnad från inbyggd utveckling där två separata projekt drivs för iOS (Swift) och Android (Kotlin), kombinerar plattformsoberoende utveckling affärslogik, användargränssnitt och datalager i ett projekt.

Konceptet med plattformsoberoende utveckling uppstod 2009 med PhoneGap (senare Apache Cordova), som paketerade en webbapplikation i en inbyggd WebView. Moderna ramverk har kommit långt: Flutter kompilerar till inbyggd ARM-kod genom Dart, React Native använder en JavaScript-motor med en inbyggd brygga, och Kotlin Multiplatform kompilerar delad kod till plattformsspecifika binärfiler. Till 2026 använder över 40% av nya mobila applikationer minst en plattformsoberoende teknik.

Viktiga indikatorer för införande: 30–50% snabbare tid till marknad, 30–40% kostnadsminskning jämfört med två inbyggda team, stöd för en enhetlig funktionsuppsättning på båda plattformarna. Plattformsoberoende appar står dock fortfarande inför utmaningar — plattformsspecifika UI-egenskaper, tillgång till hårdvaru-API:er och prestandakritisk funktionalitet som animationer och spel.

Flutter: arkitektur och prestanda

Flutter — Googles öppen källkod UI-ramverk i språket Dart med egen renderingsmotor Skia (Impeller i version 4.x). Till skillnad från ramverk som använder plattformens inbyggda komponenter, renderar Flutter oberoende varje pixel, vilket ger full kontroll över gränssnittet. Detta tillvägagångssätt eliminerar skillnader mellan plattformar men ökar applikationsstorleken med 5–15 MB.

// Flutter — enkel räknare
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('Plattformsoberoende räknare')),
      body: Center(
        child: Column(
          children: [
            const Text('Du har tryckt på knappen så många gånger:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Grunden i Flutter är widget-arkitekturen: allt — från avstånd och justering till layoutbegränsningar — är en widget. Denna deklarativa modell, ärvd från React, gör UI förutsägbart. Tack vare AOT-kompilering av Dart startar Flutter-appar på mindre än 2 sekunder och bibehåller 60 FPS även på medelklassenheter. Impeller — den nya renderingsmotorn — eliminerade hackningar vid shader-kompilering, vilket var Skias största problem.

React Native: JavaScript-brygga och ekosystem

React Native — Metas plattformsoberoende ramverk för att skapa mobila appar i JavaScript/TypeScript och React. Till skillnad från Flutter använder React Native plattformens inbyggda UI-komponenter (UIView på iOS, View på Android) via en JavaScript-brygga. Affärslogiken körs i JavaScript-motorn (Hermes eller JSC) och interagerar asynkront med inbyggda moduler.

// React Native — komponent med plattformskod
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: 'Hej på iOS',
    android: 'Hej på Android',
    default: 'Hej',
  });

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

Den största fördelen med React Native är ekosystemet. npm har över 2 miljoner paket och bibliotek som React Navigation, Expo och Reanimated tillhandahåller färdiga lösningar för navigering, gester och animationer. Expo — ett hanterat arbetsflöde — förenklar byggande och publicering med OTA-uppdateringar och över 50 inbyggda inbyggda moduler. Instagram, Shopify och Discord med en samlad publik på över 500 miljoner månatliga användare kör på React Native.

Kotlin Multiplatform: delad logik med inbyggt UI

Kotlin Multiplatform (KMP) — JetBrains teknik som kompilerar delad Kotlin-kod till plattformsspecifika binärfiler. Till skillnad från Flutter och React Native tillhandahåller KMP inget UI-ramverk — dess uppgift är att återanvända affärslogik, datalager, nätverksförfrågningar och validering, medan gränssnittet förblir helt inbyggt. Netflix, McDonald's och VMware använder KMP i produktion.

// Kotlin Multiplatform — delad databas i 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 — datumformatering för plattform
expect fun formatDate(timestamp: Long): String

KMP:s nyckelmönster är expect/actual-mekanismen. I den delade modulen (commonMain) deklareras en expect-funktion eller klass, och i varje plattformskällkodsuppsättning (androidMain, iosMain) tillhandahålls en actual-implementering. Detta möjliggör användning av inbyggda API:er — SharedPreferences, NSUserDefaults, kamera, biometri — samtidigt som ett enhetligt publikt gränssnitt behålls i den delade koden. Compose Multiplatform — UI-lagret för KMP — nådde stabilitet för Android och Desktop 2025, versionen för iOS är fortfarande i betatestning.

Jämförelse av plattformsoberoende ramverk

Prestanda varierar avsevärt beroende på scenario. Flutters egen rendering ger stabila 60 FPS för animationer och övergångar. React Native:s bryggarkitektur lägger till 2–5 ms fördröjning vid varje inbyggt anrop, även om det nya JSI-lagret (JavaScript Interface) minskar detta gap. KMP har noll overhead på delad kod eftersom den kompilerar direkt till plattformsbinärfiler. För UI-intensiva appar med komplexa animationer ligger valet mellan Flutter och inbyggd utveckling.

Hur man väljer rätt ramverk

Valet mellan Flutter, React Native och KMP bestäms av projektets prioriteringar. Om du behöver pixel-perfect UI och full kontroll över animationer — ger Flutter den mest konsekventa plattformsoberoende upplevelsen. Om teamet kan JavaScript/React och värdesätter det största ekosystemet av tredjepartsbibliotek — är React Native det pragmatiska valet. Om det redan finns inbyggda appar och affärslogik måste delas — gör KMP det möjligt att implementera delad kod modul för modul utan kompromisser i UI.

För MVP och startups ger Flutter eller React Native den kortaste vägen till marknaden med 80–100% delad kod. För företagsapplikationer med en befintlig inbyggd bas möjliggör KMP gradvis migrering av moduler. Spel och mediaappar med anpassad rendering drar nytta av Flutter eller ett helt inbyggt tillvägagångssätt. Vart och ett av ramverken har bevisat sin mognad — Instagram (React Native), Google Pay (Flutter) och Netflix (KMP) kör på plattformsoberoende teknik.

Trender: Flutter expanderar till skrivbord och webb med en enhetlig kodbas. React Native med ny arkitektur (Fabric + TurboModules) eliminerar helt bryggan. KMP med Compose Multiplatform strävar efter ett enhetligt UI-lager samtidigt som inbyggd prestanda bibehålls. Till 2027 kommer gränsen mellan plattformsoberoende och inbyggd utveckling att vara helt suddig — ramverk övergår till plattformskompileringsvägar.