React Native Turbo Native Module ve JSI nedir?
React Native 2021 yilindan beri Fabric adi verilen yeni bir alt yapiya hazirlaniyor eski yapiya paralel olarak ve bu yeni alt yapi ile daha once sorun olusturan detaylarin iyilesmesi bekleniyor.
Bu sorunlardan bir tanesi React Native Bridge adi verilen JS motoru ile native kodlar arasindaki mesajlasma yapisidir, her ne kadar su anki hali isi gorse de 3.parti kutuphane gelistiricileri icin zorluklara neden olabiliyor.
NOT: Bu yazi serisini YouTube video serisi olarak da hazirladim eger gorsel ogrenim daha hosunuza gidiyorsa oraya bakabilirsiniz:
Bunun baslica nedenleri sunlardir:
- JSON bazlidir, yani JS moturu ile native kodlar arasindaki iletisim sirasinda her zaman JSON string donusturumu gerceklesmektedir haliyle performansi dusuren bir durumdur bu
- Sadece asenkron mesajlasmayi destekliyor yani anlik deger bekledigimiz durumlar icin kullanisli degildir ve bir view gorunur hale gelirken cok az bir sure de olsa beyaz gorunmesi gibi sorunlara neden oluyor bu durum
React Native gelistirici ekibi bu soruna cozum icin JSI yapisini gelistirdi, ve JSI yapisini kullanarak da 3.parti kutuphaneleri gelistirebilecegimiz Turbo Native Module yapisini ortaya cikardilar.
Daha fazla ilerlemeden hizlica bu blog yazisinda deginecegim anahtar kelimleri listeleyerek hizlica aciklayayim
- React Native Bridge: Su anda var olan asenkron ve JSON string bazli mesajlasma yapisidir.
- JSI: React Native Bridge yapisini iyilestirmek icin gelistirilen senkron ve asenkron cagirmayi destekleyen ve donusturum yapilmayan mesajlasma yapisidir.
- Codegen: JS Moturu ile native kodlar arasinda gelistirmemiz gereken ara kodlari yaratmaya yardimci Javascript bazli yazilimciktir.
- Turbo Native Module: JSI uzerine insa edilmis ve JS Moturundan Objective-C ve Java/Kotlin kodlarini cagirmamizi saglayan kutuphane yapisidir.
- C++ Turbo Native Module: JSI uzerinde insa edilmis ve JS moturundan her iki isletim sisteminde de ayni C++ kodlarini cagirmamizi saglayan yapidir.
JSI Nedir?
JSI nedir cevaplamadan once var olan yapi olan React Native Bridge yapisini detaylandirmak faydali olacaktir.
Bu yapi semadan da gorulecegi uzere JS moturu ile native kodlar arasindaki iletisim icin kullaniliyor. Sadece asenkron mesajlasmayi destekliyor ve JSON string bazlidir yani her islem sirasinda donusturum yapilmaktadir.
- JSI bu zorluklara cozum olarak gelistirildi,
- JSI basitce JS motoru icinden native kodlari cagirmak icin kurgulanmis bir ara katmandir.
- JSI araciligi ile C++, Objective-C ve Java kodlarini cagirabiliyoruz,
- JSI cagrilari sirasinda JSON string cevirme islemi gerceklesmiyor ve bu da performans artisi sagliyor!
Codegen Nedir?
Codegen, JSI ara katmanina uygun sekilde native tarafa ait “.h” ve “.mm”, “java”, “.kt” kodlarini yaratan yardimci yazilimciktir.
Normalde elle yazabilecegimiz native tarafa ait kaynak kodlarini bizim icin otomatiklestirmek icin kullaniliyor, yani sihirli bir durum yok.
Her yeni RN surumunde daha iyi ve daha basit hale getirilmektedir ve amac React Native Fabric yapisi tam anlamiyla hazir oldugu zaman tek bir komut ile butun ara katman kaynak kodlarini yaratmaktir.
Meta (aka Facebook) bu noktada bence cok akillica hareket ediyor ve hazirlamasi biraz karmasik da olsa calisan bir yapiyi biz gelistiricilere erkenden sunup, adim adim iyilestirerek en kullanisli haline getirmeye calisiyor bu sayede erkenden geri bildirim topluyor, ayni zamanda gelistiricilerin yenilikleri hizlica kullanmasini sagliyor. Angular 2.x ilk zamanlarini hatirlayanlar ne demek istedigimi bilirler :)
Turbo Native Modules nedir?
Turbo Native Module (TNM), JSI alt yapisi uzerine insa edilmis proje disinda yer alan modulleri projeye dahil etmeyi kolaylastiran bir alt yapidir
TNM ile native metodlara direkt yani ekstra veri donusturum islemleri olmadan ve gerektiginde senkron erisebiliyoruz.
2 tipi vardir
- Objective-C ve Java cagirmamizi saglayan “Turbo Native Module” yapisi
- C++ kodlarini cagirmamizi saglayan “C++ Turbo Native Module” yapisi
“Turbo Native Module”
“Turbo Native Module” yapisi daha cok sistemsel metodlari cagirmak icin kullanilmaktadir.
- Ornek: Cihaz WiFi sinyal gucunu sorgulamak
iOS tarafinda Objective-C kodlarini cagiririyoruz, Android tarafinda Java kodlarini cagiriyoruz.
Her iki isletim sistemi icin farkli kodlar yazmamiz gerektigi icin kodlari paylastiramioruz. Yazdigimiz lojigi her iki taraf icin de yazmamiz gerekiyor.
Bu yapisi sema uzerinde gorerek daha iyi anlayabiliriz:
Yukaridaki iOS tarafina ait semadan gorulecegi uzere, JS moturu JSI uzerinden “Turbo Native Module” kodlarini cagiriyor (senkron veya asenkron) ve bu noktadan sonra iOS sistem API’leri cagriliyor bu sayede iOS isletim sistemi Obejctive-C kodlarini cagirmis oluyoruz.
Yukaridaki Android tarafina ait semadan gorulecegi uzere, JS moturu JSI uzerinden “Turbo Native Module” kodlarini cagiriyor (senkron veya asenkron) ve bu noktadan sonra iOS tarafindan farkli olarak TNM kodlarimiz Dalvik sanal makinasi uzerinde kosan kodlari cagiriyor ve dolayli olarak da Android isletim sistemi kodlari cagrilmis oluyor.
C++ Turbo Native Module
“C++ Turbo Native Module” yapisi karmasik ve islemci gucu isteyen kodlari cagirmak icin kullanilir, ayrica hem Android hem de iOS tarafinda ayni C++ kodu cagrildigi icin ortak kod yazmamizi kolaylastirir.
- Ornek: Kripto algoritmalari
Not: Burada islemci gucu gerektiren algoritmalar ile kastimiz karisik ve sabit performans gerektiren lojikler icin bu yapiyi kullanmaliyiz, JS motorlari son zamanlarda cok performansli hale geldiler, belki karisik olan kodunuz aslinda cok performansli calisiyor olabilir ve gereksiz yere C++ tarafina tasiyarak kodunuzu karmasiklastirmis olabilirsiniz.
Bu yapinin bir onceki TNM yapisina gore en buyuk farki, hem iOS hem de Android tarafinda ayni C++ kodu calistiriliyor bu sayede lojigimizi bir kez yaziyoruz ve her iki sistemde de kullanabiliyoruz.
Temelde TNM ve C++ TNM ayni yapi uzerine insa edildikleri icin birbirlerine cok benziyorlar gelistirme sirasinda, tek farklari en sonda elde edilmek istenen sonuctur, TNM daha cok sistem cagrilari yapmak icin kullanilirken C++ TNM ise karmasik lojikleri calistirmak icin kullanilir.
Asagidaki semalar ile C++ TNM yapisini daha iyi kavrayabiliriz:
Yukaridaki semada goreceginiz gibi C++ TNM, iOS tarafinda JS motoru C++ kodu cagirmaktadir ve isletim sistemi API’leri ile ilgilenmemektedir.
Yukaridaki semada goreceginiz gibi C++ TNM, Android tarafinda JS motoru C++ kodu cagirmaktadir ve isletim sistemi API’leri ile ilgilenmemektedir.
Iki semaya tekrar bakarsaniz ayni C++ kodunun cagrildigini fark edeceksiniz.
Sonraki yazilarimda bu iki yapi icin nasil gelistirme yapiyoruz detaylarina girecegiz. Gorusmek uzere!
