React Native Nedir ?

React Native bilindiği üzere, Facebook tarafından geliştirilen açık kaynaklı bir framework. Bu framework, JavaScript ve React tabanlı ve mobil uygulama geliştirme sürecini hızlandırmayı amaçlıyor. React Native sayesinde, aynı kod tabanını kullanarak hem IOS hem de Android platformları için nispeten hızlı bir şekilde uygulama geliştirebiliyoruz. React Native ile yazdığımız kodlar, platforma özgü native bileşenlere otomatik olarak dönüştürülüyor, böylece uygulamanız her iki platformda da doğal bir deneyim sunabiliyor. Peki React Native bu işlemleri tam olarak nasıl yapabiliyor ?

Nasıl Çalışıyor ?

React Native, JavaScript kodunun platforma özgü bileşenlere dönüştürülmesi ve iki taraf arasında etkili iletişim sağlamak için bir dizi süreç kullanıyor.

Hmm Peki React JS ?

Web için olan React framework, gerçek DOM’un JavaScript temsili olan Virtual DOM kullanıyor.

Bir kullanıcı bir React uygulamasıyla etkileşime girdiğinde React, Virtual DOM’u güncelliyor. React daha sonra Virtual DOM’u gerçek DOM ile karşılaştırıp kullanıcı arayüzüne yansıtılan gerçek DOM’da gerekli değişiklikleri yapıyor.

Virtual DOM bir JavaScript objesi olduğundan uygulama içindeki değişiklikler hızlı bir şekilde Web uygulamasına yansıyor. Virtual DOM’daki bir alan değiştiğinde React sadece değiştirilen öğeyi güncelliyor ve kullanıcı arayüzünün tamamı yeniden oluşturulmuyor.

Ama Android ve IOS İşletim Sistemleri JavaScript Anlayamaz ki… Yoksa ?

React Native’in ardındaki fikir, iki ayrı parça olan JavaScript kodu ve Native kodu (Android için Java/Kotlin ve iOS için Objective-C/Swift) birleştirmek ve bunların birlikte çalışmasını sağlamaktır. Yerel kod doğrudan cihazda yürütülecek olsa da, JavaScript’in çalıştırılması için bir sanal makineye ihtiyacımız olacaktır. Yani o güzel ve temiz kodlarımızın çalışması için bir Virtual DOM şart.

IOS cihazlarda, JavaScript kodumuzu derleyip çalıştıracak, C++ ile yazılmış JavaScriptCore adında yerleşik bir JavaScript motoru bulunuyor. Android cihazlarda yerleşik bir JS motoru bulunmadığından JavaScriptCore, React Native ile birlikte geliyor.

Peki geldik milyon dolarlık sorumuza…

Öncelikle şu ana kadar bahsetmiş olduğum kısımlar için React Native bir bundling işlemi yapmakta. Yani bir React Native uygulamasını bir portta ayağı kaldırmak veya bir Android/IOS paketi almak istediğimizde React Native bizim yazmış olduğumuz JavaScript kodlarını Metro Bundler kullanarak paketliyor. Bu paketi bir .js uzantılı dosya olarak düşünebiliriz.

Bu işlemlerle eş zamanlı olarak paketini aldığımız veya uygulamayı çalıştırdığımız platformun native kodları Java and C++ binary dosyası olarak compile ediliyor. Sonuç olarak bundle edilmiş dosyamız ile binary dosyamız birleşip ilgili platformda çalışabilecek tek bir dosya haline geliyor.

Örneğin basit bir React Native uygulaması içerisinde .apk dosyası elde etmek için uygulamanın android dizininde ./gradlew assembleRelease kodunu çalıştırdığımızda JavaScript kodlarımız ile native Java kodlarımız bir .apk dosyasında toplanıyor.

React Native’in 0.68 sürümünden önce Native kodları JavaScript VM ile iletişime geçmek için asenkron bir şekilde iki tarafın da anlayabileceği tek format olan JSON formatını kullanıyordu. Örneğin kullanıcı uygulama içerisinde bir aksiyon aldığında Native tarafı bu bilgiyi JSON formatına çevirip JVM’ye iletiyordu. JVM bu bilgiyi kendi anlayabileceği biçime dönüştürdükten sonra bizim yazdığımız kodlardaki karşılığına göre bir işlem yapıp tekrardan JSON formatına çevirdikten sonra Native tarafına geri gönderiyordu. İşlemler bu şekilde Bridge katmanında sürekli gidip geliyordu. Bu işlemlerin tamamı asenkron olduğundan performans anlamında bazı uç durumlar dışında bir sorun görünmüyordu.

JSI — JavaScript Interface

Eski mimarideki en önemli parça olan Bridge içerisindeki bu asenkron işlem yükünü azaltmak adına React Native kendi dökümantasyonu içerisinde yeni mimarinin en önemli parçası olan JSI’ı tanıttı.

JSI, resmi React Native dökümantasyonunda, “C++ uygulaması olan JavaScript motoru” tanımlanmaktadır. JSI’ın pratikte yaptığı şey, Bridge ve JSON mesajlarına ihtiyaç duymadan, JavaScript ile C++ çekirdeği arasındaki arayüzü kullanarak, JavaScript ile yerel katmanlar arasında doğrudan iletişim sağlamaktır.

JSI, bize metodlarımızı tamamen C++ ile yazıp aynı zaman JavaScript runtime içerisinde çalıştırmamızı sağlıyor. Böylelikte eski mimaride olduğu gibi artık verileri JSON formatına çevirip asenkron bir şekilde Bridge üzerinden göndermemiz gerekmiyor.

Fabric, React Native için C++’taki işleme mantığının daha büyük bir bölümünü birleştirme ve yerel platformlarla daha iyi birlikte çalışabilirlik sağlama ilkesiyle oluşturulmuş yeni bir işleme sistemidir. Çok öncelikli, senkron olayların etkinleştirilmesi gibi ek avantajlar sağlayabiliyor. Fabric, JSI’yi kullanarak, Bridge mesaj aracısına güvenmek zorunda kalmadan, JavaScript ile yerel katmanlar arasındaki doğrudan iletişim kurmamızı sağlıyor. Bu şekilde belirli işlemlerin performansını veya önceliğini arttırmak ve platformlar arasında daha iyi tutarlılık sağlamak mümkün oluyor.

Turbo Modules, native modülleri JavaScript tarafına iletmek için kullanılan type-safe bir sistemdir. Önceki React Native mimarisinde native modülleri kullanmak için mecburen Bridge ile haberleşmek zorunda kalıyorduk. JSI ile birlikte buradaki bağımlılık kaldırılmış oluyor.

Eğer bu yeni mimari hakkında daha fazla bilgi edinmek istiyorsanız mutlaka resmi React Native dökümantasyonunu inceleyin.

Sonuç

React Native de diğer güncel framework’ler gibi sürekli kendini yenileyen, sabit durmayan ve sorunlarına çözüm arayan bir framework’tür. Her ne kadar mobil ve web dünyasının kodları ayrı da olsa geliştiricilerin tercihleri teknolojilerin evrimine yön veriyor. Topluluğun bilgeliği kavramı, farklı düşünen insanları ve farklı yapıya sahip olan yazılım dillerini ortak bir noktada buluşturmayı başarıyor.

Umarım keyifli ve yararlı bir yazı olmuştur.

Sağlıcakla!