Temiz Mimaride React Native

React Native'de temiz mimari, genelde yanlış anlaşılmaktadır. Uygulamalarımızı daha iyi yönetmek ve bakımını yapmak için gerekli bir kavramdır.

Temiz Mimarideki Sorunlar

React Native'de temiz mimari, ứngulamalarımızın büyümesi ile birlikte ortaya çıkan sorunları çözmemize yardımcı olur. Örneğin, bir ekranın 80 satırdan 400 satıra çıkması ve bu satırların yarısının useEffect zincirleri olması gibi.

• Async talepler. Bir kullanıcı bir talebi başlatır, bir bildirim alır ve farklı bir ekran açılır. Orijinal promise çözülür ancak setter artık anlamını kaybetmiştir.

• Yerel modüller. Bir ekran NativeModules.Audio.start()'i doğrudan çağırır. iOS 17 ses oturumu semantiğini değiştirir ve üç ekran bozulur.

• Auth yarışları. Bir token yenileme talebi üç diğer talebin uçuşunda ateşlenir. İki tane yeniden dener, biri kullanıcıyı oturumdan çıkarır, biri eski tokeni sızdırır.

• Sürüklenme. Aynı "mesaj gönderme" mantığı iki ekranda yaşamaktadır. Bir tanesi doğrulama kuralı eklenir, diğeri eklenmez.

Üç Katman, Bir Kural

• Sunum. Ekranlar, bileşenler, hook'lar. Renderlama ve koordinasyon.

• Alan. Kullanım örnekleri. Saf mantık. react, fetch, NativeModules yok.

• Veri. API istemcileri, depolama, yerel köprüler. Dış dünyayı bilir.

Bir kural: UI, doğrudan veriye değil, alana konuşur.

Kullanım Örnekleri Sınırı

Kod değişikliği küçüktür:

// Önce: handler nasıl çalışacağını karar verir
const handleSend = async () => {
  const res = await api.post('/messages', input)
  setMessages(prev => [...prev, res.data])
}

// Sonra: handler görevi devreder
const handleSend = async () => {
  await sendMessage.execute(input)
}

Kullanım örneği gerçekten mantığın yaşadığı yerdir:

class SendMessage {
  constructor(private repo: MessageRepository) {}
  async execute(input: SendMessageInput) {
    // doğrulama, iş kuralları, koordinasyon
    return this.repo.send(input)
  }
}

Bu tören değil. Nokta SendMessage'in, bir mesajın nasıl gönderileceği konusunda外arıdan öğrenilen tek yer olmasıdır. İki ekran çağıranlar birbirlerinden uzaklaşamazlar, çünkü sadece biri vardır.

Depo diğer yarısıdır:

interface MessageRepository {
  send(input: SendMessageInput): Promise<Message>
}

Kullanım örneği arayüze bağlıdır. Uygulama veri katmanında yaşar. UI ningunaisini ithal etmez. Kullanım örneğini ithal eder, execute'i çağırır ve düşünmeyi bırakır.

React Native'de Kısa Yolların Bedeli

Bu, "temiz mimari" konularının genellikle sessiz olduğu kısımdır. Web uygulamaları UI ve API'ye sahiptir. React Native, UI, API, navigasyon yaşam döngüsü, yerel modüller, arka plan/ön plan geçişleri ve işletim sistemi düzeyindeki kesintilere sahiptir. Katmanların karıştırılmasının maliyeti her biriyle birlikte artar.

Async taleplerin ekranı aşması. Bir talep ekran A'da başlar ve ekran C'de çözülür. Çözüme ulaşan componente özel setter'lar, navigasyon référenceleri veya artık mevcut olmayan context đạtılırsa, yalnızca hızlı hareket eden biri tarafından yeniden üretilen bir hata alırsınız. Bir kullanım örneği size iptal, idempotency veya "bu çağırıcı hala dinliyor mu?" korumalarını eklemek için tek bir yer verir. Ekran bilmesi gerekmez.

Yerel modüller handler'lara ait değildir. NativeModules.Audio.start() bir buton handler'a bağlanır ve UI'yi platform davranışına bağlar. Platform davranışı, en çok iOS ve Android arasında, işletim sistemi sürümleri arasında, simülatör ve cihaz arasında farklılık gösterecek parçadır. Modülü bir depoya sarın, bir kullanım örneği (StartRecording) açığa çıkarın ve UI platformdan bağımsız olsun. Platforma özgü mantık tek bir evi vardır ve ne zaman bakacağınızı bilirsiniz.

Testler Sahte Olmayı Bırakır

En büyük pratik kazanç, yeniden kullanım değil, testlerin artık çerçeveyi taklit etmesine gerek kalmamasıdır.

it('repo aracılığıyla bir mesaj gönderir', async () => {
  const repo = new FakeMessageRepo()
  const useCase = new SendMessage(repo)
  await useCase.execute({ body: 'merhaba' })
  expect(repo.sent).toHaveLength(1)
})

Hiçbir render ağacı. Hiçbir react-test-renderer. Hiçbir sahte NativeModules. Hiçbir Detox. Kullanım örneği saf Node'da çalışır ve çıkışını milisaniyeler içinde alır.

Mimarinin çoğu değeri, neyin temiz olduğu değil, neyin test edilebilir haline geldiğidir.

Tuzağı

Bunun yanlış giden birkaç yolu vardır:

• İsteğe bağlı mimari mimari değildir. "Şu anda API'yi doğrudan çağıracağım" böyle yaparak aynı şeyi üç yerde kötü bir şekilde yapmakla sonuçlanır. Ya sınır uygulanır ya da uygulanmaz.

• İki ekranlı bir uygulamaya üç katman uygulamak israftır. Uygulamanız bir giriş ve bir liste ise, kullanım örneği katmanına ihtiyacınız yoktur. Karmaşıklık buna layık olduğunda, genellikle üçüncü gerçek özellikten sonra ve ikinci mühendisten sonra uygulayın.

• Klasörler sınır değildir. domain/ dizinine sahip olabilir ve masih screen'den fetch'i çağırabilirsiniz. Dizin yapısı belgedir. ESLint kuralları ve kod incelemesi uygulamadır.

Diğer maliyet, önceden sürtünmedir. Yeni bir özellik şimdi üç katmana dokunur. Ancak bu, daha iyi test edilebilirlik, daha az hata ve daha iyi bakım sağlar.