- React Native 0.76 sürümü npm’de yayınlandı. Bu sürüm yeni mimariyi varsayılan olarak içeriyor ve en güncel React özelliklerini tam olarak destekliyor.
- Yeni mimari; Suspense, Transitions, otomatik batching,
useLayoutEffect gibi özellikleri destekliyor ve yeni bir native modül ile bileşen sistemi sunarak tip güvenli kod yazımını mümkün kılıyor.
- 2018’den bu yana React Native’in temelden yeniden yazılmasının sonucu olan bu yapı, çoğu uygulamanın yeni mimariye kademeli olarak geçebilmesi için tasarlandı.
- React Native 0.76, çoğu uygulama tarafından önceki sürümlerle benzer düzeyde çabayla benimsenebilir ve popüler kütüphaneler yeni mimariyi zaten destekliyor.
Yeni mimari nedir?
- Yeni mimari, React Native’in ana sistemlerinin tamamen yeniden yazılmış hali; buna bileşen render etme, JavaScript ile native soyutlamalar arasındaki iletişim ve thread’ler arası iş zamanlaması da dahil.
- Önceki mimari native platformla asenkron bir bridge üzerinden iletişim kuruyordu; yeni mimari ise hem senkron hem de asenkron güncellemeleri destekleyecek şekilde tasarlandı.
- Yeni mimari dört ana parçadan oluşuyor: native modül sistemi, yeni renderer, event loop ve bridge’in kaldırılması.
Yeni native modüller
- C++ ile yazıldı ve şu yeni yetenekleri sunuyor:
- Native runtime ile senkron iletişim kurulabiliyor
- JavaScript ile native kod arasında tip güvenliği sağlanıyor
- Platformlar arasında kod paylaşımı mümkün oluyor
- Varsayılan olarak lazy module loading sağlanıyor
- JavaScript/TypeScript API’leri üzerinden C++ native implementasyonunun tüm yeteneklerinden yararlanılabiliyor
- Codegen ile güçlü tip sözleşmeleri tanımlanabiliyor
- Modüller yalnızca gerektiğinde belleğe yüklendiği için uygulama açılış süresi kısalıyor
Yeni renderer
- C++ ile yeniden yazıldı ve şu avantajları sunuyor:
- Farklı thread’lerde, farklı önceliklerle güncelleme render edilebiliyor
- Farklı bir thread’de senkron olarak layout okunabiliyor
- Tüm platformlarda paylaşılan C++ kodu kullanılıyor
- Artık view hiyerarşisi değiştirilemez bir ağaç yapısında saklanıyor
- Thread-safe güncelleme işleme mümkün oluyor
- Kullanıcı arayüzünün farklı sürümlerini temsil eden birden fazla devam eden ağaç işlenebiliyor
- Düşük öncelikli güncellemeler durdurulup kullanıcı girdisi gibi acil işler render edildikten sonra bu güncellemelere devam edilebiliyor
Event loop
- Yeni mimari, React DOM ile React Native arasındaki farkı azaltmak için daha net bir event loop işleme modeli uyguluyor.
- JavaScript thread’inde işleri işleyen iyi tanımlanmış bir event loop işleme modeli sunuluyor
- Event loop, güncellemeleri ve olayları öngörülebilir şekilde sıralıyor; böylece düşük öncelikli güncellemeler acil kullanıcı olayları tarafından kesilebiliyor.
- Web standartlarıyla daha iyi uyum sağlıyor
- Gelecekte daha fazla tarayıcı özelliğinin temeli olacak
Bridge’in kaldırılması
- Yeni mimari, bridge’i kaldırarak JavaScript ile native kod arasında doğrudan ve verimli iletişimi mümkün kılıyor.
- Bridge’in kaldırılmasıyla açılış süresi iyileşiyor, tanımsız davranış kaynaklı çökme sayısı azalıyor ve hata raporlama ile debug süreci kolaylaşıyor.
Yeni özellikler
- Transitions
- React 18’in yeni kavramlarından biri olan Transitions, acil güncellemeler ile acil olmayan güncellemeleri ayırıyor.
- Acil güncellemeler anında tepki gerektirirken, Transitions güncellemeleri UI’yi bir görünümden diğerine geçiriyor.
- Automatic batching, daha fazla durum güncellemesini birlikte gruplayarak ara durum render’larını önlüyor ve React Native’in daha hızlı, daha akıcı çalışmasını sağlıyor.
- Yeni mimari,
useLayoutEffect üzerinden layout bilgisinin senkron olarak okunmasını ve UI’nin aynı frame içinde güncellenmesini destekliyor.
- Yeni mimari, React 18 ile gelen Suspense’i tam olarak destekleyerek yükleme durumlarını yönetiyor ve kullanıcı girdilerine yüksek öncelik veriyor.
Yükseltme yöntemi
- 0.76’ya yükseltme sırasında çoğu uygulama, birlikte çalışabilirlik katmanı sayesinde diğer sürümlerle benzer çabayla geçiş yapabilir
- Ancak New Architecture ve concurrent özelliklerden tam olarak yararlanmak için özel native modüllerin ve bileşenlerin migrate edilmesi gerekiyor
- Uygulama geliştiricileri için
- Kütüphanelerin, özel native bileşenlerin ve özel native modüllerin New Architecture’ı tam destekleyecek şekilde yükseltilmesi gerekiyor
- Popüler React Native kütüphanelerinin büyük kısmı New Architecture desteği için birlikte çalıştı
- Kütüphane yöneticileri için, kütüphanelerini yeni native modül ve bileşen API’lerine migrate etmeleri öneriliyor
GN⁺ özeti
- New Architecture’a geçiş, React Native geliştirme açısından önemli bir dönüm noktası olmaya aday görünüyor. Hem senkron hem asenkron güncellemelerin mümkün hale gelmesi, bridge darboğazının ortadan kalkması ve layout’un farklı thread’lerden okunabilmesi gibi gelişmelerin performans ve kullanıcı deneyimi tarafında ciddi iyileşmeler getirmesi bekleniyor
- Özellikle React 18’in Concurrent özelliklerinin tam desteklenmesi de dikkat çekici. Suspense, Transition gibi özelliklerle daha yüksek tepkisellik sunan ve daha doğal hissettiren bir UX oluşturmak mümkün olacak
- Bununla birlikte mevcut uygulama ve kütüphanelerin New Architecture’ı tam desteklemek için migration çalışması yapması gerekecek gibi görünüyor. Süreç kademeli ilerleyecek olsa da migration tamamlandığında yeni mimarinin avantajlarından tam olarak yararlanılabilecek
- Bu mimari halihazırda Meta’nın Facebook ve Instagram uygulamalarında kullanılıyor; ayrıca Expensify, Kraken ve BlueSky gibi başarılı örnekler bulunuyor
- Genel olarak New Architecture’ın React Native’in geleceği için büyük bir ilerleme olduğu düşünülüyor. Topluluğun iş birliğiyle başarılı şekilde yerleşmesi umuluyor
6 yorum
React Native'i ilk duyduğum zamanın bile çok eskide kaldığını hissediyorum. Facebook'ta başlamış olmasına rağmen hâlâ 1. sürüme gelmemiş olması ise daha da şaşırtıcı..
RN'i hiç kullanmadığım için merak ediyorum; hissiyat olarak Android'e daha iyi optimize edilmiş gibi geliyor ama gerçekte performansın iOS'ta daha iyi olması şaşırtıcı.
Bizdeki crash'lerin neredeyse tamamı Android'de ortaya çıkıyor gibi görünüyor.
Android'de gerçekten korkunç... korkunç denecek seviyede..
Hermes'e motoru geçireli çok olmamış gibi geliyor ama yine her şeyi baştan kurmuşlar galiba
Hacker News görüşleri
4 yıldır React Native uygulamaları ve backend API'leri geliştiriyorum; Expo'ya geçiş birçok sorunu çözdü ama hâlâ hatalar var. iOS, Android'den daha kararlı ve performansı da daha iyi. React Native öğrenmesi kolay ve büyük bir JS ekosistemine sahip olduğu için tavsiye edilebilir, ancak şu anda Flutter kullanıyorum
React Native hakkında çeşitli görüşler var; bazıları Expo'dan memnun değil ve Kotlin Multiplatform'u öneriyor. Hacker News tartışmalarının giderek anlamsızlaştığını düşünenler de var
Bir Flutter geliştiricisi olarak Swift UI ve Compose'un mobil geliştirme için daha uygun olduğunu düşünüyorum; yeni bir uygulamaya başlasam Flutter ya da React Native kullanmazdım
React Native iOS'ta fena değil ama Android'de yavaş. Hermes ilgi çekici ama hâlâ çok sayıda polyfill gerekiyor. Bir gün web'in React Native'in yerini almasını bekliyorum
Bluesky, Expo/RN kullanılarak geliştiriliyor ve yeni mimariye dair ilk testlerde Android performansının arttığı görüldü
Expo ile birlikte React Native kullanırken olumlu bir deneyim yaşadım; tek geliştirici olarak RN bana birçok şeyi mümkün kılıyor. Yeni mimariyi bekliyorum
Flutter'ın render hızı React Native'den 5 kat daha hızlı ve web'de React kullanırken de hız daha yüksek
Capacitor'ın NextJS web uygulamasını taşımakta işe yaradığına dair bir tweet gördüm
React Native bu yıl epey iyileşti; react-strict-dom hazır olduğunda büyük bir değişim yaratacak