React Native vs Flutter 2024: Kapsamlı Karşılaştırma Rehberi

Cross-platform mobil geliştirmede iki dev rakip: React Native ve Flutter. Her ikisi de milyonlarca geliştiricinin tercihi ama temelden farklı yaklaşımlar sunuyorlar. Bu rehberde, her iki framework'ü derinlemesine karşılaştırarak projen için doğru seçimi yapmanı sağlayacağız.

💡 Hızlı Not: Bu karşılaştırma 2024 güncel verileriyle hazırlandı. Her iki framework de hızla gelişiyor — 6 ay sonra bazı bilgiler değişmiş olabilir.

İçindekiler

1. Mimari Karşılaştırma
2. Performance Benchmarks
3. UI Rendering Yaklaşımları
4. Geliştirici Deneyimi (DX)
5. Ekosistem ve Kütüphaneler
6. Öğrenme Eğrisi
7. İş Piyasası ve Kariyer
8. Şirket Case Study'leri
9. Ne Zaman Hangisi?
10. Geleceğe Bakış

Mimari Karşılaştırma {#mimari}

React Native Mimarisi (New Architecture)

1JavaScript Thread → JSI → Fabric Renderer → Native Views
2                    ↕
3              Turbo Modules → Native APIs

Flutter Mimarisi

1Dart Code → Dart Runtime → Impeller/Skia → GPU → Screen
2                ↕
3         Platform Channels → Native APIs

Performance Benchmarks {#performance}

⚠️ Bu değerler ortalamadır ve uygulamanın karmaşıklığına göre değişir.

UI Rendering Yaklaşımları {#rendering}

React Native: Platform'un native UI bileşenlerini kullanır. <View> → UIView, <Text> → UILabel. Bu, platforma özgü görünüm sağlar ama iOS ve Android arasında pixel-perfect tutarlılık zordur.

Flutter: Kendi pixel'lerini çizer (Skia/Impeller engine). Tüm platformlarda birebir aynı görünüm. Material Design ve Cupertino widget'ları ile platform-adaptive UI mümkün.

1// Flutter - Platform-adaptive widget
2Widget build(BuildContext context) {
3  if (Platform.isIOS) {
4    return CupertinoNavigationBar(middle: Text('Başlık'));
5  }
6  return AppBar(title: Text('Başlık'));
7}

Geliştirici Deneyimi (DX) {#developer-experience}

Ekosistem ve Kütüphaneler {#ekosistem}

React Native avantajları:

• npm ekosistemi (2M+ paket)
• Web geliştiricileri geçiş kolaylığı
• Expo ile hızlı başlangıç

Flutter avantajları:

• pub.dev (40K+ paket)
• Widget kataloğu zengin
• Firebase entegrasyonu mükemmel
• Web, desktop, embedded desteği

Öğrenme Eğrisi {#ogrenme}

İş Piyasası ve Kariyer {#is-piyasasi}

Her iki framework de güçlü iş piyasasına sahip. React Native daha uzun süredir var (2015) ve daha geniş bir topluluğu var. Flutter hızla büyüyor (2018) ve özellikle startup'larda popüler.

Şirket Case Study'leri {#case-studies}

React Native kullananlar: Meta, Instagram, Shopify, Discord, Coinbase, Bloomberg

Flutter kullananlar: Google, BMW, Alibaba, eBay, Toyota, Nubank, Grab

Ne Zaman Hangisi? {#karar}

React Native tercih et:

• Ekibin JavaScript/TypeScript biliyor
• Web + mobil kod paylaşımı önemli
• Mevcut React web projesi var
• Native UI görünümü istiyorsun

Flutter tercih et:

• Pixel-perfect tasarım kontrolü lazım
• iOS + Android + Web + Desktop hedefi
• Startup — hızlı MVP
• Custom UI yoğun uygulama

Kod Örnekleri: Aynı Ekran, İki Framework {#kod-ornekleri}

Aynı kullanıcı listesi ekranını hem React Native hem Flutter ile yazalım — farkı somut olarak gör:

React Native ile Kullanıcı Listesi

1// React Native - UserListScreen.tsx
2import React, { useState, useEffect } from 'react';
3import { View, Text, FlatList, StyleSheet, ActivityIndicator, Image, TouchableOpacity } from 'react-native';
4 
5interface User {
6  id: string;
7  name: string;
8  email: string;
9  avatar: string;
10  role: 'admin' | 'user' | 'moderator';
11}
12 
13const UserListScreen: React.FC = () => {
14  const [users, setUsers] = useState([]);
15  const [loading, setLoading] = useState(true);
16  const [refreshing, setRefreshing] = useState(false);
17 
18  const fetchUsers = async () => {
19    try {
20      const response = await fetch('https://api.example.com/users');
21      const data: User[] = await response.json();
22      setUsers(data);
23    } catch (error) {
24      console.error('Fetch error:', error);
25    } finally {
26      setLoading(false);
27      setRefreshing(false);
28    }
29  };
30 
31  useEffect(() => { fetchUsers(); }, []);
32 
33  const renderItem = ({ item }: { item: User }) => (
34    
35      
36      
37        {item.name}
38        {item.email}
39        
40          {item.role}
41        
42      
43    
44  );
45 
46  if (loading) return ;
47 
48  return (
49    
50      data={users}
51      keyExtractor={(item) => item.id}
52      renderItem={renderItem}
53      onRefresh={() => { setRefreshing(true); fetchUsers(); }}
54      refreshing={refreshing}
55    />
56  );
57};
58 
59const styles = StyleSheet.create({
60  card: { flexDirection: 'row', padding: 16, borderBottomWidth: 1, borderColor: '#e5e7eb' },
61  avatar: { width: 48, height: 48, borderRadius: 24 },
62  info: { marginLeft: 12, flex: 1 },
63  name: { fontSize: 16, fontWeight: '600' },
64  email: { fontSize: 14, color: '#6b7280' },
65  badge: { alignSelf: 'flex-start', paddingHorizontal: 8, paddingVertical: 2, borderRadius: 12, marginTop: 4 },
66  badgeText: { color: 'white', fontSize: 12, fontWeight: '500' },
67});

Flutter ile Aynı Ekran

1// Flutter - user_list_screen.dart
2import 'dart:convert';
3import 'package:flutter/material.dart';
4import 'package:http/http.dart' as http;
5 
6class User {
7  final String id, name, email, avatar, role;
8  User({required this.id, required this.name, required this.email, required this.avatar, required this.role});
9 
10  factory User.fromJson(Map json) => User(
11    id: json['id'], name: json['name'], email: json['email'],
12    avatar: json['avatar'], role: json['role'],
13  );
14}
15 
16class UserListScreen extends StatefulWidget {
17  const UserListScreen({super.key});
18  @override State createState() => _UserListScreenState();
19}
20 
21class _UserListScreenState extends State {
22  List users = [];
23  bool loading = true;
24 
25  @override
26  void initState() {
27    super.initState();
28    fetchUsers();
29  }
30 
31  Future fetchUsers() async {
32    try {
33      final response = await http.get(Uri.parse('https://api.example.com/users'));
34      final List data = jsonDecode(response.body);
35      setState(() {
36        users = data.map((json) => User.fromJson(json)).toList();
37        loading = false;
38      });
39    } catch (e) {
40      setState(() => loading = false);
41    }
42  }
43 
44  @override
45  Widget build(BuildContext context) {
46    if (loading) return const Center(child: CircularProgressIndicator());
47 
48    return RefreshIndicator(
49      onRefresh: fetchUsers,
50      child: ListView.builder(
51        itemCount: users.length,
52        itemBuilder: (context, index) {
53          final user = users[index];
54          return ListTile(
55            leading: CircleAvatar(backgroundImage: NetworkImage(user.avatar)),
56            title: Text(user.name, style: const TextStyle(fontWeight: FontWeight.w600)),
57            subtitle: Column(
58              crossAxisAlignment: CrossAxisAlignment.start,
59              children: [
60                Text(user.email, style: TextStyle(color: Colors.grey[600])),
61                const SizedBox(height: 4),
62                Container(
63                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
64                  decoration: BoxDecoration(
65                    color: user.role == 'admin' ? Colors.red : Colors.blue,
66                    borderRadius: BorderRadius.circular(12),
67                  ),
68                  child: Text(user.role, style: const TextStyle(color: Colors.white, fontSize: 12)),
69                ),
70              ],
71            ),
72          );
73        },
74      ),
75    );
76  }
77}

Kod Karşılaştırma Tablosu

Migration Stratejileri {#migration}

Mevcut bir native uygulamadan cross-platform'a geçiş düşünüyorsan, dikkat edilmesi gereken adımlar:

Native'den React Native'e Geçiş

1. Brownfield yaklaşımı — React Native modüllerini mevcut native app'e ekle
2. Ekran ekran geçiş — en basit ekranlardan başla (Settings, About, Profile)
3. Navigation bridge — native navigation stack ile React Native ekranları entegre et
4. Native Modules — React Native'den erişilemeyen özellikler için native bridge yaz

Native'den Flutter'a Geçiş

1. Add-to-app — Flutter modülünü mevcut iOS/Android projesine ekle
2. FlutterEngine warming — engine'i önceden başlat, geçiş süresini kısalt
3. Platform Channel — mevcut native kodu Flutter'dan çağır
4. Kademeli geçiş — yeni özellikler Flutter'da, eski özellikler native'de kalsın

Geçiş Süresi Tahmini

⚠️ Bu süreler tam yeniden yazım içindir. Brownfield yaklaşımla kademeli geçiş daha uzun sürer ama risk çok daha düşüktür.

Gerçek Dünya Case Study'leri {#case-studies-detail}

Shopify — React Native Başarı Hikayesi

Shopify, 2020'de mobil geliştirmesini React Native'e taşıdı. Sonuçlar:

• Geliştirme hızı %2x arttı: — aynı ekip iOS ve Android'e deploy ediyor
• Kod paylaşımı %95: — platform-specific kod sadece %5
• Crash rate %50 düştü: — unified codebase, daha az hata
• Ancak performans-kritik bölümler (ödeme, kamera) hala native

BMW — Flutter ile Dijital Dönüşüm

BMW, My BMW uygulamasını Flutter ile yeniden yazdı:

• 50+ ekran: tek codebase'de
• 3 platform: — iOS, Android, ve araç içi infotainment
• Geliştirme süresi %40 kısaldı
• Custom rendering sayesinde marka tutarlılığı pixel-perfect

Nubank — Flutter ile 100M+ Kullanıcı

Brezilya'nın en büyük dijital bankası Nubank:

• 150M+ indirme: Flutter uygulamasıyla
• 700+ Flutter geliştiricisi: tek codebase'de çalışıyor
• Performans-kritik finans uygulamasında Flutter'ın yeterliliğini kanıtladı
• Custom design system ile tutarlı UX

Discord — React Native'den Native'e Dönüş

Dikkat çekici bir ters örnek — Discord, iOS uygulamasını React Native'den native Swift'e geri taşıdı:

• Startup süresi %2x iyileşti
• Memory kullanımı %50 düştü
• Karmaşık real-time özelliklerde native performans farkı belirgin

Bu, her projenin farklı olduğunu ve cross-platform'un her zaman doğru cevap olmadığını gösterir.

Detaylı Ekosistem Karşılaştırması {#ekosistem-detay}

Performans Optimizasyon Teknikleri {#perf-optimization}

React Native Performans İpuçları

1. Hermes engine — JavaScript yerine optimized bytecode, startup %50 hızlanır
2. FlatList optimizasyonu — getItemLayout, windowSize, maxToRenderPerBatch ayarları
3. useMemo/useCallback — gereksiz re-render'ları önle
4. Native driver — animasyonları JS thread'den native thread'e taşı
5. New Architecture — JSI ile doğrudan native çağrı, bridge overhead sıfır

Flutter Performans İpuçları

1. const constructor — widget rebuild'i minimize et
2. RepaintBoundary — gereksiz paint işlemlerini izole et
3. ListView.builder — lazy rendering ile büyük listelerde bellek tasarrufu
4. Impeller engine — Skia yerine Impeller ile shader compilation jank yok
5. Isolate — ağır hesaplamaları ayrı thread'de çalıştır

Geleceğe Bakış {#gelecek}

Her iki framework de aktif geliştirme altında. React Native'in New Architecture (JSI, Fabric, Turbo Modules) performans farkını kapatıyor. Flutter'ın Impeller engine'i ve multi-platform desteği genişliyor.

2024 ve Sonrası Trendler

React Native'in en büyük avantajı React ekosistemine erişim — RSC ve server-driven UI gelecekte mobilde de etkili olabilir. Flutter ise multi-platform vizyonuyla masaüstü ve embedded sistemlere yayılmaya devam ediyor.