Cross-Platform App: nedir, Flutter, React Native ve KMP karşılaştırması

Cross-Platform App Nedir?

Cross-Platform App (çapraz platform uygulaması), tek bir kod tabanından birden fazla mobil işletim sisteminde çalışmak üzere geliştirilmiş bir yazılımdır. iOS (Swift) ve Android (Kotlin) için iki ayrı projenin sürdürüldüğü native geliştirmenin aksine, çapraz platform geliştirme, iş mantığını, kullanıcı arayüzünü ve veri katmanını tek bir projede birleştirir.

Çapraz platform geliştirme kavramı, 2009 yılında bir web uygulamasını native WebView içine paketleyen PhoneGap (daha sonra Apache Cordova) ile ortaya çıktı. Modern frameworkler çok yol kat etti: Flutter, Dart aracılığıyla native ARM koduna derlenir, React Native native köprüye sahip bir JavaScript motoru kullanır ve Kotlin Multiplatform, paylaşılan kodu platforma özgü ikili dosyalara derler. 2026'ya kadar yeni mobil uygulamaların %40'ından fazlası en az bir çapraz platform teknolojisi kullanıyor.

Benimsenmenin temel metrikleri: pazara %30–50 daha hızlı çıkış, iki native ekibe kıyasla %30–40 maliyet azaltımı, her iki platformda birleşik özellik seti desteği. Ancak, çapraz platform uygulamaları hâlâ platforma özgü UI nüansları, donanım API'lerine erişim ve animasyonlar ve oyunlar gibi performans açısından kritik işlevler gibi zorluklarla karşı karşıyadır.

Flutter: Mimari ve Performans

Flutter, Dart diliyle Google'ın açık kaynak UI framework'üdür ve kendi Skia render motoruna (sürüm 4.x'te Impeller) sahiptir. Native platform bileşenlerini kullanan frameworklerin aksine, Flutter her pikseli kendisi render eder ve arayüz üzerinde tam kontrol sağlar. Bu yaklaşım platformlar arası farklılıkları ortadan kaldırır ancak uygulama boyutunu 5–15 MB artırır.

// Flutter — basit sayaç
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('Çapraz platform sayaç')),
      body: Center(
        child: Column(
          children: [
            const Text('Butona bu kadar kez bastınız:'),
            Text('$_count',
              style: const TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { setState(() { _count++; }); },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter'ın merkezinde widget mimarisi vardır: padding ve hizalamadan düzen kısıtlamalarına kadar her şey bir widget'tır. React'ten miras alınan bu bildirimsel model, UI'yi öngörülebilir kılar. Dart'ın AOT derlemesi sayesinde Flutter uygulamaları 2 saniyeden kısa sürede başlar ve orta segment cihazlarda bile 60 FPS'yi korur. Yeni render motoru Impeller, Skia'nın ana sorunu olan shader derlemesi sırasındaki takılmaları ortadan kaldırdı.

React Native: JavaScript Köprüsü ve Ekosistem

React Native, JavaScript/TypeScript ve React ile mobil uygulamalar oluşturmak için Meta'nın çapraz platform framework'üdür. Flutter'ın aksine, React Native, bir JavaScript köprüsü aracılığıyla platformun native UI bileşenlerini (iOS'ta UIView, Android'de View) kullanır. İş mantığı, native modüllerle asenkron olarak etkileşime giren bir JavaScript motorunda (Hermes veya JSC) çalışır.

// React Native — platform kodlu bileşen
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: 'iOS'tan merhaba',
    android: 'Android'den merhaba',
    default: 'Merhaba',
  });

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

React Native'in en büyük avantajı ekosistemidir. npm, 2 milyondan fazla pakete ev sahipliği yapar ve React Navigation, Expo ve Reanimated gibi kütüphaneler, gezinme, jest ve animasyonlar için hazır çözümler sunar. Yönetilen bir iş akışı olan Expo, OTA güncellemeleri ve 50'den fazla yerleşik native modülle derleme ve yayınlamayı basitleştirir. Instagram, Shopify ve Discord, aylık toplam 500 milyondan fazla aktif kullanıcıyla React Native üzerinde çalışır.

Kotlin Multiplatform: Native UI ile Paylaşımlı Mantık

Kotlin Multiplatform (KMP), paylaşılan Kotlin kodunu platforma özgü ikili dosyalara derleyen bir JetBrains teknolojisidir. Flutter ve React Native'den farklı olarak KMP, bir UI framework'ü sağlamaz — amacı, arayüzü tamamen native tutarken iş mantığını, veri katmanını, ağ isteklerini ve doğrulamayı yeniden kullanmaktır. Netflix, McDonald's ve VMware, üretimde KMP kullanmaktadır.

// Kotlin Multiplatform — commonMain'de paylaşılan depo
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 — platform için tarih biçimlendirme
expect fun formatDate(timestamp: Long): String

KMP'nin temel kalıbı expect/actual mekanizmasıdır. Paylaşılan modülde (commonMain) bir expect işlevi veya sınıfı bildirilir ve her platforma özgü kaynak kümesinde (androidMain, iosMain) gerçek uygulama sağlanır. Bu, paylaşılan kodda birleşik bir genel arayüzü korurken platform API'lerini — SharedPreferences, NSUserDefaults, kamera, biyometri — kullanmayı sağlar. KMP için UI katmanı olan Compose Multiplatform, 2025'te Android ve Desktop için kararlılığa ulaştı, iOS sürümü hâlâ beta testindedir.

Çapraz Platform Framework Karşılaştırması

Performans senaryoya göre önemli ölçüde değişir. Flutter'ın kendi render'ı, animasyonlar ve geçişler için istikrarlı 60 FPS sağlar. React Native'in köprü mimarisi, her native çağrı için 2–5 ms gecikme ekler, ancak yeni JSI (JavaScript Interface) katmanı bu farkı azaltır. KMP, doğrudan platform ikili dosyalarına derlendiğinden paylaşılan kod için ek yükü yoktur. Karmaşık animasyonlara sahip UI yoğun uygulamalar için seçim Flutter ve native geliştirme arasındadır.

Doğru Framework Nasıl Seçilir

Flutter, React Native ve KMP arasındaki seçim proje önceliklerine bağlıdır. Piksel mükemmel UI ve tam animasyon kontrolü gerekiyorsa — Flutter en tutarlı çapraz platform deneyimini sunar. Ekip JavaScript/React biliyorsa ve en büyük üçüncü taraf kütüphane ekosistemine değer veriyorsa — React Native pragmatik seçimdir. Native uygulamalar zaten mevcutsa ve iş mantığını paylaşmanız gerekiyorsa — KMP, UI'dan ödün vermeden modül modül paylaşılan kod eklemeye olanak tanır.

MVP'ler ve startup'lar için Flutter veya React Native, %80–100 paylaşılan kodla pazara en kısa yolu sunar. Mevcut native tabanlı kurumsal uygulamalar için KMP, kademeli modül geçişine olanak tanır. Özel render'lı oyunlar ve medya uygulamaları, Flutter veya tamamen native yaklaşımdan faydalanır. Her framework olgunluğunu kanıtlamıştır — Instagram (React Native), Google Pay (Flutter) ve Netflix (KMP) çapraz platform teknolojileriyle çalışır.

Trendler: Flutter, birleşik kod tabanıyla masaüstü ve web'e genişliyor. Yeni mimarisiyle (Fabric + TurboModules) React Native, köprüyü tamamen ortadan kaldırıyor. Compose Multiplatform ile KMP, native performansı korurken birleşik UI katmanını hedefliyor. 2027'ye kadar çapraz platform ve native geliştirme arasındaki sınır tamamen bulanıklaşacak — frameworkler platform derleme yollarına geçiyor.