React Native New Architecture ve Fabric Renderer: Performansta Yeni Bir Dönem
React Native topluluğu yıllardır "The Bridge" (Köprü) yapısının getirdiği darboğazları tartışıyordu. JavaScript ve Native katmanlar arasındaki asenkron, JSON tabanlı iletişim artık yerini JavaScript Interface (JSI) üzerine kurulu, senkron ve doğrudan erişilebilir bir yapıya bırakıyor. Bu değişim, sadece bir güncelleme değil, framework'ün temel iskeletinin yeniden yazılmasıdır.
Yeni Mimarinin Dört Atlısı
Yeni mimariyi anlamak için şu dört temel bileşeni bilmek gerekir:
- JSI (JavaScript Interface): JS katmanının Native objelere doğrudan referans tutmasını sağlar. JSON serileştirme yükünü ortadan kaldırır.
- Fabric: React Native'in yeni nesil render motorudur. UI güncellemelerini senkronize yapabilir ve önceliklendirebilir.
- TurboModules: Native modüllerin "lazy-loading" ile sadece ihtiyaç duyulduğunda yüklenmesini sağlar, uygulama açılış hızını artırır.
- Codegen: JS ve Native tarafı arasında tip güvenliği (type-safety) sağlayan bir kod üretim aracıdır.
Fabric Renderer ile Gelen Yenilikler
Fabric, React'in Concurrent Features yeteneklerini mobil dünyaya taşıyor. Eski mimaride tüm UI güncellemeleri asenkrondu, bu da bazen "ekran boşluklarına" veya senkronizasyon hatalarına neden oluyordu. Fabric ile birlikte:
- Kullanıcı etkileşimleri yüksek öncelikli olarak işlenir.
- Karmaşık liste render işlemleri çok daha akıcı hale gelir.
- Native platformun tüm avantajları doğrudan kullanılır.
Yeni Mimariyi Aktifleştirme
Projenizde yeni mimariyi test etmek için aşağıdaki adımları izleyebilirsiniz. Ancak dikkat; tüm üçüncü parti kütüphaneleriniz henüz bu mimariyi desteklemiyor olabilir.
Android için: gradle.properties dosyasında değişikliği yapın:
newArchEnabled=true
iOS için: Pod dosyasını güncelleyip kurulumu yapın:
bundle exec pod install --new-arch-enabled=1
Teknik Karşılaştırma: Bridge vs JSI
| Özellik | Eski Mimari (Bridge) | Yeni Mimari (JSI) |
|---|---|---|
| İletişim | Asenkron / JSON Serileştirme | Senkron / Doğrudan Bellek Erişimi |
| Render | Tek kanallı (Single-threaded) | Çok kanallı (Multi-threaded) |
| Modül Yükleme | Eager (Uygulama açılışında) | Lazy (İhtiyaç anında) |
Sonuç
React Native New Architecture, özellikle karmaşık animasyonlar ve büyük veri setleri içeren uygulamalar için performans limitlerini yukarı çekiyor. Eğer yeni bir projeye başlıyorsanız, mimariyi en baştan destekleyecek kütüphaneleri seçmek ve resmi dokümantasyonu takip etmek kritik önem taşıyor.