React Native, platformlar arası destek, OTA güncellemeleri, canlı yeniden yükleme, maliyet verimliliği vb. gibi çok sayıda avantajla birlikte gelir, ancak tepki yerel uygulamalarını ölçeklendirmedeki en büyük darboğaz, daha fazla modül eklediğinizde, uygulama veri yoğun hale geldiğinde veya birden fazla olduğunda performans olmuştur. köprü üzerinden geçişler zorunludur.

Peki mevcut mimari nasıl çalışıyor?

React Native mimarisi üç iş parçacığına bağlıdır: a) UI iş parçacığı: Bu, android ve iOS görünümlerini işlemek için kullanılan ana uygulama iş parçacığıdır. b) Gölge iş parçacığı: Ana platformda oluşturmadan önce öğelerin düzenini ( Yoga kullanarak) hesaplayan bir tür arka plan iş parçacığıdır. c) JS iş parçacığı: Tepki yerel uygulamanızdaki tüm mantığın işlenmesinden sorumlu olan birlikte verilen JS .

Bu iş parçacıkları arasındaki etkileşim doğrudan değildir ve bir iş parçacığının diğer iş parçacığı ile her etkileşime girmesi gerektiğinde, köprünün üzerinden geçmek için verilerin JSON'a seri hale getirilmesi ve seri durumundan çıkarılması gibi ağır bir görevden geçmesi gerekir. Bu, verilerin gereksiz kopyalanmasına neden olur ve işlemler zaman uyumsuz olduğundan ve kesin yazım olmadığından bu köprü kolayca kalabalıklaşabilir.

Mevcut mimarinin bazı sınırlamaları:
1. Javascript ve yerel taraf birbirinden haberdar değildir ve eşzamansız JSON mesajlarına dayanır.
2. Tüm modüller, etkileşim süresini artıran başlangıçta yüklenir.
3. İşlemlere öncelik verilmemesi: Önemli kullanıcı etkileşimlerine diğer işlemlere göre öncelik verilemez.
4. Köprü serileştirme
5. UI öğelerine doğrudan JS iş parçacığından erişilemez.

JSI ile tanışın

JSI, javascript ve yerel bölümün nasıl etkileşime girdiği konusunda büyük bir değişiklik getiriyor. JS ve C++ arasında bir arabirim yardımıyla iki dünya arasında doğrudan iletişim sağlar. JS, JavaScript Arayüzünü kullanarak, ana bilgisayar nesnelerine referans verebilir ve üzerlerindeki yöntemleri çağırabilir. Ana bilgisayar nesnesinin yardımıyla artık yerel nesneleri javascript bağlamında kullanabiliriz. En büyük darboğaz olan köprü parçalara ayrılmıştır:

Kumaş

UI yöneticisinin yeniden mimarisi olan Facebook tarafından oluşturulan yeni işleme sistemi. Bu oluşturucu, C++'da uygulanmaktadır ve çekirdek, platformlar arasında paylaşılmaktadır. Önceki uygulamada mizanpaj oluşturma, JSON'un seri hale getirilmesi ve köprü bloke edildiğinde büyük sorunlara yol açan köprüden atlamalar gibi birçok adımı içeriyordu, örneğin: Sonsuz bir listede gezinirken çerçeve düşüyor. Yeni uygulama, UI yöneticisinin Gölge Ağacı'nı doğrudan C++'ta oluşturmasına olanak tanır; bu, alemler arasında atlama sayısını azaltarak deneyimi büyük ölçüde geliştirir. React'ten (JavaScript) oluşturucuya (C++) genellikle JavaScript iş parçacığında yürütülen işlemler senkronize ve iş parçacığı güvenlidir. Javascript değerleri doğrudan JSI'dan seçilebildiğinden, verilerin daha az seri hale getirilmesini de içerir. Bu doğrudan kontrol aynı zamanda eylemlerin önceliklendirilmesine de yardımcı olur, oluşturucu artık belirli kullanıcı etkileşimlerini zamanında ele aldıklarından emin olmak için öncelik sırasına koyabilir. Bu, listelerde, gezinmede ve hareket işlemede performansı büyük ölçüde artıracaktır.

Turbo Modüller

Önceki uygulamada, yerel modüllere referansımız yoktu, bu nedenle her modül başlangıçta yüklendi, bu da TTI'yi (Etkileşim Süresi) artırıyor, ancak turbo modüllerle modülleri gerektiği gibi ve gerektiği zaman tembel olarak yükleyebiliyoruz, bu da yardımcı olacak başlatma süresini iyileştirmede. Örneğin: Bir bağlantıdan belge yazdırmak için bir modülünüz varsa, artık bu modülü önceki mimaride yapılan uygulamanın başlangıcında değil, yazdırma ekranına geldiğimizde yükleyebiliriz. Modülü C++ ile yazma yeteneği, platformlar arasında yinelenen uygulamayı azalttığı için avantaj sağlar.

kodlayıcı

Bunların hepsini birbirine yapıştırmak ve her iki alanı da uyumlu hale getirmek için React Native ekibi, JS ve Native taraf arasındaki uyumluluğu otomatikleştirmek için bir tip denetleyici oluşturdu. Bu aracın adı Codegen'dir. Modüler bir yaklaşım kullanır; bu, statik olarak yazılmış herhangi bir Javascript dilinin, o sistem için ayrıştırıcı kullanılarak desteklenebileceği anlamına gelir. Bu oluşturucu, yazılan JavaScript'i gerçeğin kaynağı olarak kullanarak, alemler arasında güvenle mesaj göndermek için Fabric ve TurboModules tarafından ihtiyaç duyulan arayüz dosyalarını tanımlayabilir. Codegen ayrıca derleme zamanı türü güvenliği sağlar; bu, her iki ortamın da komutları herhangi bir çalışma zamanı kontrolü olmadan yürütebileceği anlamına gelir, bu da gönderilecek daha küçük kod boyutu ve daha hızlı yürütme anlamına gelir.
Artık C++ kodumuz olduğundan ve C++ güçlü bir şekilde yazıldığından, JS kodumuzu yazmaya zorluyoruz çünkü türleri tanımlamamız gerekiyor ve kodun herhangi bir yerine yazamıyoruz . Temelde sizin için bir arabirim oluşturur ve artık bunlar C++'ta üretildiğinden ve gönderildiklerinden, gönderilen verilere temelde güvenebiliriz ve verileri doğrulamak için ileri geri gitmemize gerek kalmaz. Bu aynı zamanda, tür kontrollerini kullanarak, geliştirme aşamasında ölümcül çökmelere veya kötü kullanıcı deneyimine neden olabilecek sorunları kolayca tanımlayabileceğimiz anlamına gelir.

JSI'nin bazı önemli avantajları

1. Javascript kodu, herhangi bir Yerel Kullanıcı Arabirimi öğesine bir referans tutabilir ve üzerindeki yöntemleri çağırabilir (Web'deki DOM manipülasyonuna benzer)
2. Performansı büyük ölçüde artırabilen yerel koda hızlı ve doğrudan bağlamalar, örneğin MMKV , Asyncstorage'dan ~30 kat daha hızlı olan JSI kullanır.
3. JavaScript Core dışındaki motorlar kullanılabilir.
4. Yerel Modüller gerektiğinde yüklenebilir.
5. JS ve Yerel kodu uyumlu hale getirmek için statik tip kontrolü.

React native JSI şu anda deneysel kullanıma sunma aşamasındadır ve daha fazla proje bu değişikliği benimsedikçe, yeni mimarinin sınırlamaları ve etkisi hakkında daha fazla şey öğreneceğiz, ancak kesin olan bir şey, yerel ve platformlar arası uygulama geliştirmenin geleceğidir. heyecan verici görünüyor.