React Native Uygulamalarında Mimarilerin Karşılaştırılması: MVC, MVVM ve Temiz Mimari Yaklaşımları

Mobil uygulama geliştirme dünyasında, React Native esnekliği ve platformlar arası kod paylaşımı yeteneğiyle kısa sürede popülerlik kazandı. Ancak bir React Native projesine başlarken veya mevcut bir projeyi büyütürken karşılaşılan en kritik kararlardan biri, uygulamanın mimarisini doğru bir şekilde belirlemektir. İyi bir mimari, kodunuzun okunabilirliğini, bakımını, test edilebilirliğini ve en önemlisi ölçeklenebilirliğini doğrudan etkiler. Benim geliştirme tecrübelerimde, genellikle ilk başta göz ardı edilen bu yapısal kararların, ilerleyen süreçlerde büyük maliyetlere ve çıkmazlara yol açtığını defalarca gözlemledim.

Bu yazıda, React Native uygulamalarınız için en yaygın ve etkili mimari yaklaşımlarını, yani MVC (Model-View-Controller), MVVM (Model-View-ViewModel) ve Temiz Mimari (Clean Architecture) prensiplerini derinlemesine inceleyeceğim. Her bir modelin temelini, React Native özelindeki uygulamalarını, avantajlarını, dezavantajlarını ve hangi senaryolarda daha uygun olduklarını ele alacağım. Amacım, projenizin ihtiyaçlarına en uygun mimariyi seçme konusunda size sağlam bir yol haritası sunmak.

Neden Mimari Seçimi React Native İçin Bu Kadar Önemli?

React Native, JavaScript ve React ekosisteminin getirdiği esneklikle bilinir. Bu esneklik, hızlı başlangıçlar için harika olsa da, büyük ve karmaşık uygulamalarda kontrolsüz bir kod tabanına yol açabilir. Projeniz büyüdükçe, farklı geliştiricilerin aynı kod üzerinde çalışması, yeni özelliklerin eklenmesi veya mevcut hataların ayıklanması, iyi bir mimari olmadan adeta bir kabusa dönüşebilir. Karmaşık state yönetimi, API entegrasyonları, yerel modül etkileşimleri gibi konular, sağlam bir mimari gerektirir.

İyi Bir Mimari Neler Sunar?

• Modülerlik: Uygulamanın farklı bölümlerini bağımsız modüller halinde düzenler, bu da kodun anlaşılmasını ve yönetilmesini kolaylaştırır. React Native Uygulamalarında Modüler Mimari yazımda da bu konuya değinmiştim.
• Test Edilebilirlik: Her bileşenin veya katmanın bağımsız olarak test edilebilir olmasını sağlar, bu da hata oranını azaltır.
• Bakım Kolaylığı: Kodun belirli bir yapıya sahip olması, hataların daha hızlı bulunmasına ve yeni özelliklerin daha güvenli eklenmesine olanak tanır.
• Ölçeklenebilirlik: Uygulamanın büyümesi ve karmaşıklaşması durumunda yeni özelliklerin veya ekiplerin kolayca entegre edilmesini sağlar.
• Geliştirici Verimliliği: Belirli kurallar ve yapılar sayesinde ekiplerin daha uyumlu ve hızlı çalışmasına yardımcı olur.

1. MVC (Model-View-Controller) Mimari Deseni React Native'da

MVC, yazılım tasarımında en köklü ve yaygın olarak bilinen mimari desenlerden biridir. Uygulamayı üç ana bileşene ayırır:

• Model: Uygulama verilerini ve iş mantığını yönetir. Veritabanı işlemleri, API çağrıları, veri doğrulama gibi görevlerden sorumludur. View ve Controller'dan bağımsızdır.
• View: Kullanıcı arayüzünü (UI) temsil eder. Kullanıcıya verileri gösterir ve kullanıcının etkileşimlerini (tıklamalar, girişler) Controller'a iletir. Model hakkında bilgi sahibi değildir.
• Controller: Model ve View arasındaki köprüdür. Kullanıcıdan gelen girdileri (View üzerinden) alır, iş mantığını (Model'i kullanarak) gerçekleştirir ve View'i günceller.

React Native'da MVC Uygulaması

React Native bağlamında MVC'yi doğrudan uygulamak biraz zorlayıcı olabilir, çünkü React'in kendisi zaten View katmanını ve bir miktar Controller işlevselliğini (bileşen mantığı) bir araya getirir. Ancak, mantıksal olarak ayrıştırmak mümkündür:

• Model: Redux store, Context API veya başka bir state yönetim kütüphanesi (ya da basit JavaScript sınıfları) verileri ve API servislerini yönetebilir. (Bkz: React Native Uygulamalarında Verimli State Yönetimi)
• View: React Native bileşenleri (JSX ile oluşturulan UI) View katmanını oluşturur.
• Controller: Bileşen içindeki olay yöneticileri (event handlers), Redux action'ları dispatch eden fonksiyonlar veya özel hook'lar gibi alanlar Controller işlevini üstlenebilir.

MVC'nin Avantajları

• Basitlik: Küçük uygulamalar için anlaşılması ve uygulanması kolaydır.
• Geniş Bilgi Birikimi: Köklü bir desen olduğu için birçok geliştirici tarafından bilinir.

MVC'nin Dezavantajları

• Sıkı Bağlantı (Tight Coupling): Özellikle View ve Controller arasında sıkı bir bağlantı olabilir, bu da birini değiştirdiğinizde diğerini de etkileme riskini doğurur.
• Test Edilebilirlik Zorlukları: View ve Controller'ın iç içe geçtiği durumlarda test yazmak daha zor olabilir.
• Model'in Aşırı Yüklenmesi (Fat Models): İş mantığının tamamının Model'de toplanması, Model'i hantal hale getirebilir.

2. MVVM (Model-View-ViewModel) Mimari Deseni React Native'da

MVVM, özellikle UI'ya dayalı uygulamalar için geliştirilmiş ve popüler hale gelmiş bir desendir. Microsoft tarafından WPF ve Silverlight ile tanıtılmış, ardından mobil geliştirmede (Android, iOS ve React Native) geniş kabul görmüştür. Üç ana bileşene sahiptir:

• Model: MVC'deki gibi uygulama verilerini ve iş mantığını içerir. Veritabanı ve API etkileşimlerinden sorumludur.
• View: Kullanıcı arayüzünü temsil eder. Genellikle ViewModel'a veri bağlama (data binding) yoluyla bağlanır. Kullanıcının etkileşimlerini doğrudan ViewModel'a iletir. React Native'da JSX ile yazdığımız tüm bileşenler View'dir.
• ViewModel: View'in soyut bir temsilidir. View'deki verileri ve komutları (actions) tutar. Model'den verileri alır, View için hazırlar ve View'deki kullanıcı etkileşimlerini Model'e iletir. View'den tamamen bağımsızdır ve View'i referans almaz. Bu ayrım, View ve ViewModel'in bağımsız olarak test edilmesini kolaylaştırır.

React Native'da MVVM Uygulaması

React Native'da MVVM, özellikle Hook'ların yaygınlaşmasıyla birlikte daha da kolaylaşmıştır:

• Model: API servisleri, veri depoları (local storage, veritabanı), iş mantığı.
• View: React Native bileşenleri (fonksiyonel veya sınıf tabanlı).
• ViewModel: Özel Hook'lar (Custom Hooks) bu rolü mükemmel bir şekilde üstlenir. Örneğin, bir ekranın state'ini ve ilgili tüm mantığını (veri çekme, validasyon, form gönderme) tek bir custom hook içinde kapsayabilirsiniz. Bu hook, View'e sadece gerekli veriyi ve geri çağırım fonksiyonlarını sağlar.

// ViewModel (useLoginForm.js)
import { useState } from 'react';
import * as authService from '../services/authService'; // Model

const useLoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleLogin = async () => {
    setLoading(true);
    setError(null);
    try {
      await authService.login(email, password);
      // Başarılı giriş sonrası yönlendirme vs.
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return {
    email, setEmail,
    password, setPassword,
    loading,
    error,
    handleLogin
  };
};

export default useLoginForm;

// View (LoginForm.js)
import React from 'react';
import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native';
import useLoginForm from './useLoginForm'; // ViewModel

const LoginForm = () => {
  const { email, setEmail, password, setPassword, loading, error, handleLogin } = useLoginForm();

  return (
    <View>
      <TextInput placeholder="E-posta" value={email} onChangeText={setEmail} />
      <TextInput placeholder="Şifre" value={password} onChangeText={setPassword} secureTextEntry />
      {error && <Text style={{ color: 'red' }}>{error}</Text>}
      <Button title="Giriş Yap" onPress={handleLogin} disabled={loading} />
      {loading && <ActivityIndicator />}
    </View>
  );
};

export default LoginForm;

MVVM'nin Avantajları

• View ve ViewModel Ayrımı: View'i ViewModel'dan ayırarak, UI mantığı ve iş mantığı arasındaki bağımlılığı azaltır. Bu, test edilebilirliği artırır.
• Test Edilebilirlik: ViewModel tamamen UI'dan bağımsız olduğu için kolayca test edilebilir.
• Daha Az Boilerplate: Özellikle custom hook'lar ile boilerplate kod miktarını azaltabilir.

MVVM'nin Dezavantajları

• Öğrenme Eğrisi: Yeni başlayanlar için data binding ve ViewModel kavramlarını anlamak biraz zaman alabilir.
• Aşırı Basit Durumlar İçin Gereksiz: Çok basit uygulamalar için biraz fazla karmaşık olabilir.

3. Temiz Mimari (Clean Architecture) React Native'da

Bob Amca (Robert C. Martin) tarafından popüler hale getirilen Temiz Mimari, uygulamaların bağımsızlık prensibi üzerine kurulmuştur. Bu prensip, uygulamanın dış katmanlarının iç katmanlara bağımlı olması gerektiğini, ancak iç katmanların dış katmanlardan haberdar olmaması gerektiğini vurgular. Bu, veritabanı, UI veya harici framework'ler gibi dışsal değişikliklerden uygulamanın çekirdek iş mantığının etkilenmemesini sağlar. Node.js'te Temiz Mimari (Clean Architecture) yazımda da bu prensiplerin önemini detaylandırmıştım.

Temel Katmanlar

1. Entities (Varlıklar): Uygulamanın en iç çekirdeğidir. İşletme kurallarını ve veri yapılarını (örneğin, User, Product nesneleri) içerir. Herhangi bir dış bağımlılığı yoktur.
2. Use Cases / Interactors (Kullanım Durumları / Etkileşimciler): Uygulamaya özgü iş kurallarını barındırır. Kullanıcı tarafından gerçekleştirilen her bir işlemi (örn. 'ürün oluştur', 'kullanıcı girişi') temsil eder. Entities ile etkileşime girer.
3. Interface Adapters (Arayüz Bağdaştırıcıları): İç katmanları dış dünyaya bağlar. UI (Presenter/Controller), Veritabanı (Gateway/Repository) veya API (Servisler) gibi dışsal bileşenlerin iç katmanlarla iletişim kurmasını sağlar. Veri modellerini iç katmanlara uygun hale getirir.
4. Frameworks & Drivers (Çerçeveler ve Sürücüler): En dış katmandır. Veritabanı, web framework'leri (React Native), UI kütüphaneleri gibi tüm araçları ve detayları içerir. İç katmanlar bu katmandan haberdar olmaz.

React Native'da Temiz Mimari Uygulaması

React Native'da Temiz Mimari uygulamak, uygulamanızı katmanlara ayırmak anlamına gelir:

• Entities: Saf JavaScript/TypeScript sınıfları veya tipleridir (User, Product gibi).
• Use Cases: Fonksiyonel veya sınıf tabanlı, belirli iş akışlarını yürüten modüllerdir. Örneğin, loginUser.js veya createProduct.js. Bunlar, herhangi bir UI veya veritabanı implementasyonundan bağımsızdır.
• Interface Adapters:
  • Presenter/ViewModel: UI için verileri hazırlar ve Use Case'leri tetikler. MVVM'deki ViewModel'a benzer.
  • Repository Implementations: Use Cases tarafından çağrılan soyut repository arayüzlerini (örn. UserRepository) somut olarak implemente eder (örn. FirebaseUserRepository veya AxiosUserRepository).
• Frameworks & Drivers: React Native UI bileşenleri, navigation kütüphaneleri, state yönetim kütüphaneleri, Axios gibi HTTP client'ları, veritabanı sürücüleri.

Bu yaklaşım, uygulamanızın çekirdek iş mantığını (Entities ve Use Cases) dış dünyaya (UI, veritabanı, harici servisler) karşı izole eder. Bu sayede, UI'yi değiştirmek veya farklı bir veritabanı kullanmak istediğinizde, çekirdek mantığınızı değiştirmek zorunda kalmazsınız.

Temiz Mimari'nin Avantajları

• Bağımsızlık: Uygulamanın UI, veritabanı, framework gibi dışsal detaylardan bağımsız olmasını sağlar. Bu, gelecekteki değişikliklere karşı yüksek direnç sağlar.
• Test Edilebilirlik: Her katman ayrı ayrı, özellikle de iş mantığı katmanları, dış bağımlılıklar olmadan test edilebilir.
• Bakım Kolaylığı: İş mantığı, UI'dan ve veri katmanından ayrı tutulduğu için daha anlaşılır ve bakımı kolaydır.
• Ölçeklenebilirlik: Büyük ve uzun ömürlü projeler için mükemmel bir seçimdir.

Temiz Mimari'nin Dezavantajları

• Karmaşıklık: Özellikle küçük veya orta ölçekli projeler için yüksek bir öğrenme eğrisi ve başlangıçta daha fazla boilerplate kod gerektirebilir.
• Geliştirme Süresi: Başlangıçtaki kurulum ve katmanlar arası iletişim mekanizmalarını oluşturmak daha fazla zaman alabilir.

Hangi Mimariyi Seçmelisiniz?

Doğru mimariyi seçmek, projenizin büyüklüğüne, takımınızın tecrübesine ve projenin uzun vadeli hedeflerine bağlıdır. Tek bir "en iyi" mimari yoktur, her biri belirli senaryolar için daha uygun olabilir:

• Küçük ve Hızlı Projeler (MVP'ler): MVC veya daha basit, hafif bir MVVM yaklaşımı (custom hook'lar ile) yeterli olabilir. Hızlıca ürün çıkarmak önemli olduğunda, karmaşık bir mimariye girmek gereksiz olabilir.
• Orta ve Büyük Ölçekli Projeler: MVVM, özellikle state yönetimi kütüphaneleriyle (Redux, MobX, Recoil, Zustand gibi) birleştiğinde, iyi bir ayrıştırma ve test edilebilirlik sunar. Bu, birçok React Native projesi için iyi bir denge noktasıdır.
• Çok Büyük, Uzun Ömürlü ve Kritik Uygulamalar: Temiz Mimari, yüksek bağımsızlık, test edilebilirlik ve sürdürülebilirlik gerektiren projeler için idealdir. Bankacılık, sağlık veya kurumsal uygulamalar gibi sistemlerde gelecekteki değişikliklere karşı direnç çok önemlidir. Başlangıçtaki maliyeti yüksek olsa da, uzun vadede kendini amorti eder.

Unutmayın, Tasarım Desenleri gibi mimari yaklaşımlar da birer araç setidir. Önemli olan, bu araçları ne zaman ve nasıl kullanacağınızı bilmektir.

Sonuç

React Native uygulamalarınızda mimari seçimi, projenizin başarısı üzerinde kritik bir etkiye sahiptir. MVC, MVVM ve Temiz Mimari, farklı ihtiyaçlara ve karmaşıklık seviyelerine hitap eden güçlü yaklaşımlardır. Kendi deneyimlerime göre, uygulamanın büyüklüğünü ve karmaşıklığını doğru analiz etmek, takımın bilgi birikimini göz önünde bulundurmak ve gelecekteki bakım/ölçeklenebilirlik ihtiyaçlarını tahmin etmek, doğru kararı vermenizde size yardımcı olacaktır.

Başlangıçta daha basit bir yaklaşımla başlayıp, projeniz büyüdükçe ve ihtiyaçlar değiştikçe mimarinizi refaktör etmek de geçerli bir stratejidir. Ancak temel prensiplere (katmanlar arası sorumluluk ayrımı, bağımlılıkların yönetimi) her zaman dikkat etmek, kod kalitenizi yüksek tutacaktır.

Eğer aklınıza takılan sorular olursa veya bu konular hakkında daha fazla bilgi almak isterseniz, bana ismailyagci371@gmail.com adresinden veya sosyal medya kanallarımdan (İsmail YAĞCI) ulaşabilirsiniz. Sağlıklı ve başarılı kodlamalar dilerim!

Orijinal yazı: https://ismailyagci.com/articles/react-native-uygulamalarinda-mimarilerin-karsilastirilmasi-mvc-mvvm-ve-temiz-mimari-yaklasimlari