Cross-Platform App: apa itu, perbandingan Flutter, React Native dan KMP

Apa itu Cross-Platform App?

Cross-Platform App (aplikasi lintas platform) — perangkat lunak yang dirancang untuk berjalan di beberapa sistem operasi mobile dari satu basis kode. Berbeda dengan pengembangan native di mana dua proyek terpisah dilakukan untuk iOS (Swift) dan Android (Kotlin), pengembangan lintas platform menggabungkan logika bisnis, antarmuka pengguna dan lapisan data dalam satu proyek.

Konsep pengembangan lintas platform muncul pada tahun 2009 dengan PhoneGap (kemudian Apache Cordova), yang membungkus aplikasi web dalam WebView native. Framework modern telah melangkah jauh: Flutter mengompilasi ke kode ARM native melalui Dart, React Native menggunakan mesin JavaScript dengan jembatan native, dan Kotlin Multiplatform mengompilasi kode bersama ke file biner spesifik platform. Pada tahun 2026, lebih dari 40% aplikasi mobile baru menggunakan setidaknya satu teknologi lintas platform.

Indikator utama penerapan: peluncuran pasar 30–50% lebih cepat, pengurangan biaya 30–40% dibandingkan dengan dua tim native, dukungan untuk serangkaian fitur terpadu di kedua platform. Namun, aplikasi lintas platform masih menghadapi tantangan — fitur UI spesifik platform, akses ke API perangkat keras dan fungsionalitas kritis performa seperti animasi dan game.

Flutter: arsitektur dan performa

Flutter — framework UI open-source Google dalam bahasa Dart dengan mesin rendering sendiri Skia (Impeller di versi 4.x). Berbeda dengan framework yang menggunakan komponen native platform, Flutter merender setiap piksel secara independen, memberikan kontrol penuh atas antarmuka. Pendekatan ini menghilangkan perbedaan antar platform, tetapi meningkatkan ukuran aplikasi sebesar 5–15 MB.

// Flutter — penghitung sederhana
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('Penghitung lintas platform')),
      body: Center(
        child: Column(
          children: [
            const Text('Anda telah menekan tombol sebanyak ini:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Inti dari Flutter adalah arsitektur widget: semuanya — dari spasi dan perataan hingga batasan tata letak — adalah widget. Model deklaratif ini, yang diwarisi dari React, membuat UI dapat diprediksi. Berkat kompilasi AOT Dart, aplikasi Flutter mulai dalam waktu kurang dari 2 detik dan mempertahankan 60 FPS bahkan pada perangkat kelas menengah. Impeller — mesin rendering baru — menghilangkan kegagapan saat kompilasi shader, yang merupakan masalah utama Skia.

React Native: jembatan JavaScript dan ekosistem

React Native — framework lintas platform Meta untuk membuat aplikasi mobile dalam JavaScript/TypeScript dan React. Berbeda dengan Flutter, React Native menggunakan komponen UI native platform (UIView di iOS, View di Android) melalui jembatan JavaScript. Logika bisnis dieksekusi di mesin JavaScript (Hermes atau JSC), berinteraksi secara asinkron dengan modul native.

// React Native — komponen dengan kode platform
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: 'Halo di iOS',
    android: 'Halo di Android',
    default: 'Halo',
  });

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

Keuntungan terbesar React Native adalah ekosistemnya. npm memiliki lebih dari 2 juta paket, dan pustaka React Navigation, Expo dan Reanimated menyediakan solusi siap pakai untuk navigasi, gerakan dan animasi. Expo — alur kerja terkelola — menyederhanakan pembuatan dan publikasi dengan pembaruan OTA dan lebih dari 50 modul native bawaan. Instagram, Shopify dan Discord dengan total audiens lebih dari 500 juta pengguna bulanan berjalan di React Native.

Kotlin Multiplatform: logika bersama dengan UI native

Kotlin Multiplatform (KMP) — teknologi JetBrains yang mengompilasi kode Kotlin bersama ke file biner spesifik platform. Berbeda dengan Flutter dan React Native, KMP tidak menyediakan framework UI — tugasnya adalah menggunakan kembali logika bisnis, lapisan data, permintaan jaringan dan validasi, menjaga antarmuka sepenuhnya native. Netflix, McDonald's dan VMware menggunakan KMP dalam produksi.

// Kotlin Multiplatform — repositori bersama di 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 — pemformatan tanggal untuk platform
expect fun formatDate(timestamp: Long): String

Pola kunci KMP adalah mekanisme expect/actual. Di modul bersama (commonMain) dideklarasikan fungsi atau kelas expect, dan di setiap set sumber platform (androidMain, iosMain) disediakan implementasi actual. Ini memungkinkan penggunaan API native — SharedPreferences, NSUserDefaults, kamera, biometrik — sambil mempertahankan antarmuka publik terpadu dalam kode bersama. Compose Multiplatform — lapisan UI untuk KMP — mencapai stabilitas untuk Android dan Desktop pada tahun 2025, versi iOS tetap dalam pengujian beta.

Perbandingan framework lintas platform

Performa berbeda secara signifikan tergantung skenario. Rendering sendiri Flutter memberikan 60 FPS stabil untuk animasi dan transisi. Arsitektur jembatan React Native menambahkan keterlambatan 2–5 ms pada setiap panggilan native, meskipun lapisan JSI (JavaScript Interface) baru mengurangi kesenjangan ini. KMP memiliki overhead nol pada kode bersama, karena mengompilasi langsung ke file biner platform. Untuk aplikasi dengan UI intensif dan animasi kompleks, pilihan ada di antara Flutter dan pengembangan native.

Cara memilih framework yang tepat

Pilihan antara Flutter, React Native dan KMP ditentukan oleh prioritas proyek. Jika Anda membutuhkan UI pixel-perfect dan kontrol penuh atas animasi — Flutter memberikan pengalaman lintas platform paling konsisten. Jika tim menguasai JavaScript/React dan menghargai ekosistem terbesar dari pustaka pihak ketiga — React Native adalah pilihan pragmatis. Jika aplikasi native sudah ada dan logika bisnis perlu dibagikan — KMP memungkinkan penerapan kode bersama modul demi modul tanpa kompromi pada UI.

Untuk MVP dan startup Flutter atau React Native memberikan jalur terpendek ke pasar dengan 80–100% kode bersama. Untuk aplikasi perusahaan dengan basis native yang ada, KMP memungkinkan migrasi modul secara bertahap. Game dan aplikasi media dengan rendering kustom mendapatkan keuntungan dari Flutter atau pendekatan sepenuhnya native. Masing-masing framework telah membuktikan kedewasaannya — Instagram (React Native), Google Pay (Flutter) dan Netflix (KMP) berjalan pada teknologi lintas platform.

Tren: Flutter berkembang ke desktop dan web dengan basis kode terpadu. React Native dengan arsitektur baru (Fabric + TurboModules) sepenuhnya menghilangkan jembatan. KMP dengan Compose Multiplatform bertujuan untuk lapisan UI terpadu sambil mempertahankan performa native. Pada tahun 2027, batas antara pengembangan lintas platform dan native akan sepenuhnya kabur — framework beralih ke jalur kompilasi platform.