React Native Framework Nedir ve Nasıl Çalışır?

React Native, platformlar arası uygulama geliştirme için en çok tercih edilen çerçevelerden biridir ve Facebook, Instagram, Skype Microsoft, Tesla, Shopify, Walmart ve UberEats gibi birçok endüstri devi tarafından benimsenmiştir. Bu çerçeve, React.js'nin sınırlamalarını ele almak için Facebook ekibi tarafından oluşturuldu.

Facebook tarafından geliştirilen SDK React, web uygulamaları oluşturmak için uygun bir seçenekti. Ancak, Facebook mobil öncelikli bir strateji benimsediğinde, web uygulamalarının mobil platforma dönüştürülmesi gerekiyordu. Bu görev gerçekten zorluydu! İlk başta, Facebook mühendisleri uygulamaları mobil web üzerinde oluşturmak için HTML5 kullandılar, ancak bu strateji başarısız oldu. Daha sonra, WebView'ı mobil yerel bir kapsayıcıya yerleştirdiler. Hareketler ve dokunma olayları, klavye API'si ve görüntü yönetimi kapasiteleri gibi gerekli özniteliklerin olmaması nedeniyle bu yaklaşım da uygulanabilir değildi.

Ardından, kusursuz bir UX sunmak için yerel uygulamalar oluşturma ihtiyacını fark ettiler. Ancak, Android ve iOS için Yerel uygulamalar oluşturma fikri, ayrı ayrı engeller içeriyordu - zorunlu bir kodlama süreci, farklı platformlar için ayrı kod tabanları ve her uygulamanın prototipi Playstore'un önceden onayına ihtiyaç duyduğundan yavaş bir yineleme süreci.

Son olarak, Facebook dahili bir hackathon gerçekleştirdi ve React'in geliştirilmiş bir versiyonu olan React Native oluşturuldu. React Native çerçevesi, mobil uygulama geliştirme için tek durak çözüm olarak 2015 yılında piyasaya sürüldü ve aynı yıl açık kaynak haline getirildi. Çerçeve ve işleyişi hakkında daha fazlasını keşfedelim!

React Native: Genel Bir Bakış

React Native, Android ve iOS işletim sistemleri için yerel olarak oluşturulmuş mobil uygulamalar oluşturmak için kullanılan JavaScript tabanlı bir mobil uygulama geliştirme çerçevesidir. React Native'in benzersiz satış noktası, geliştiricilerin tek bir kod tabanı kullanarak aynı anda her iki platform için uygulamalar oluşturabilmelerinde yatmaktadır. Çerçeve, JS kodunu yerel bileşenlere derleyerek platforma özel modüller ve API'ler kullanır. Bu nedenle, React Native geliştiricileri, yeni bileşenler oluşturmak için yapı taşları olarak Metin, Görünüm ve Görüntüler gibi yerel bileşenleri kullanabilir.

React Native, React'ten nasıl farklıdır?

React Native, kullanıcı arayüzlerini geliştirmek için kullanılan Facebook tarafından geliştirilen JS kitaplığı olan Web için React'e dayanmaktadır. Ancak, React tarayıcıyı hedeflerken, React Native mobil uygulama platformlarını hedefler. Bu nedenle, mobil uygulama geliştiricileri, yerel benzeri bir görünüme ve hisse sahip mobil uygulamalar oluşturmak için bilinen bir JavaScript kitaplığı kullanmanın rahatlığını yaşar.

React Native, web için kullanılan yayılma ilkelinin yerine Metin ilkelini kullanır. Bu Metin, Android uygulamaları için yerel bir TextView ve iOS uygulamaları için yerel bir iOS UIView ile sonuçlanır. Bu nedenle, uygulama geliştirme için JavaScript kullanılmasına rağmen, son uygulama bir mobil uygulamanın kabuğuna gömülü bir web uygulaması değil, gerçek yerel bir mobil uygulamadır.

React Native uygulamaları, tıpkı React uygulamaları gibi JavaScript ve XML benzeri işaretlemenin bir kombinasyonu olan JSX kullanılarak oluşturulur. Aradaki fark, React Native'in yerel işleme API'lerini çağırmak için kaputun altında bir "köprü" kullanmasıdır. Burada, iOS uygulamalarında UI bileşenlerini oluşturmak için Objective-C/Swift API'leri kullanılırken, Android uygulamalarında Java/Kotlin API'leri kullanılır. Basitçe söylemek gerekirse, köprü, JS kodunu platforma özel bileşenlere çevirir. Sonuç olarak, uygulama web görünümleri yerine gerçek mobil UI bileşenleri oluşturur; bir mobil uygulamanın görünümünü ve hissini vermek. Ayrıca, React Native, platform API'leri için JS arayüzlerini sunar; bu, uygulamaların bir kullanıcının mevcut konumu, kamerası vb. gibi akıllı telefon cihazı özelliklerine erişmesini sağlar.

React Native Apps nasıl çalışır?

Bir React Native uygulaması, yerel kod, JavaScript kodu ve köprü olmak üzere üç farklı bölüme ayrılmıştır. Köprü, JS kodunu yerel platformlarda yürütmek için yorumlar ve Yerel öğeler ile JS kodu arasında eşzamansız iletişim sağlar.

Bir React Native uygulamasının işleyişiyle ilgili önemli konular

Ana (Yerel) iş parçacığı: Yerel iş parçacığı olarak da adlandırılan ana iş parçacığı, iOS ve Android uygulamalarında UI oluşturma için kullanılır. UI öğelerini görüntüleme görevini yönetir ve kullanıcıların hareketlerini işler.

JavaScript dizisi: JS dizisi, temel olarak uygulamanın iş mantığıyla ilgilenir ve UI işlevlerinin yanı sıra yapıyı da tanımlar. JS iş parçacığının işlevleri arasında JS kodunun ayrı bir JS motorunda yürütülmesi, API çağrıları yapılması, dokunma olaylarının işlenmesi vb. yer alır.

Gölge iş parçacığı (Gölge Ağacı): Bu iş parçacığı, gölge düğümleri oluşturur ve düzen güncellemelerini doğru verilere ve UI olaylarını doğru şekilde serileştirilmiş yüke dönüştürmek için algoritmalar kullanan bir matematiksel motor görevi görür.

Yerel modül iş parçacığı: Bir uygulama, platform API'sine erişim gerektirdiğinde, işlem yerel modül iş parçacığında gerçekleşir.

Customs Native Module iş parçacığı: Bu tür iş parçacıkları, özel modüller kullanıldığında bir uygulamanın performansını hızlandırmak için kullanılır. Örneğin, React Native, bu görevin JS dizisinden boşaltılması için ayrı bir yerel dizi kullanarak animasyonları işler.

Yukarıda bahsedilen iş parçacıklarının dışında, bir React Native uygulamasının çalışmasına yardımcı olan en önemli iş parçacıkları Native iş parçacığı ve JS iş parçacığıdır. İlginçtir ki, bu iki iş parçacığı arasında doğrudan bir iletişim yoktur ve bu nedenle birbirlerini engellemezler.

Bir React Native Uygulamasının İşleyişi: Önemli Adımlar

Bir React Native uygulamasının nasıl çalıştığını görün!

Aşama 1

Bir uygulama başlatıldığında, Yerel iş parçacığı uygulamayı yükler ve JS kodunu yürütmek için JavaScript iş parçacığını oluşturur. Yerel iş parçacığı dokunma, basma vb. gibi UI olaylarını duyar ve bu olayları React Native köprüsü aracılığıyla JS iş parçacığına iletir.

Adım 2

JavaScript yüklenir ve JS iş parçacığı, ekranda nelerin oluşturulması gerektiğine ilişkin bilgileri gölge iş parçacığına gönderir. Gölge iş parçacığı daha sonra algoritmaları kullanarak düzenleri hesaplar ve görünüm konumlarının nasıl hesaplanması gerektiğine karar verir. Gölge iş parçacığı daha sonra görünümü oluşturmak için düzen parametrelerini ana iş parçacığına iletir. )

Aşama 3

Ana iş parçacığı, UI olaylarını toplar ve bunları gölge iş parçacığına gönderir. Olaylar, serileştirilmiş yüklere dönüştürülür ve JS iş parçacığına gönderilir.

4. Adım

JavaScript iş parçacığı artık yükleri işler ve ardından kullanıcı arabirimini günceller veya yerel yöntemleri çağırır.

Adım #2, adım #3 ve adım #4 JavaScript'in olay döngüsü her tekrarlandığında sürekli olarak tekrarlanır.

JS iş parçacığındaki her olay döngüsü tamamlandıktan sonra yerel taraf, yerel görünümlerde toplu güncellemeler alır; bunlar daha sonra Yerel iş parçacığında yürütülür. Uygulama performansını sürdürmek için, toplu güncellemelerin bir sonraki çerçevenin oluşturulması için son tarihten önce JS iş parçacığı tarafından Yerel iş parçacığına gönderilmesi gerektiğini unutmayın. JS olay döngüsündeki karmaşık işleme nedeniyle yavaş bir JS iş parçacığı, kullanıcı arabirimini engeller. Yavaş bir JS iş parçacığının performansı etkilemediği tek istisna, yerel görünümlerin tamamen Yerel iş parçacığında gerçekleştiği senaryolardır.

React Native Bridge, threadler arasında sorunsuz etkileşimi nasıl sağlar?

React Native Bridge, bir iş parçacığının diğerini engellememesi için iş parçacıkları arasında eşzamansız iletişime izin verir. Ayrıca, mesajlar toplu haldedir - mesajlar, optimize edilmiş bir şekilde iş parçacıkları arasında aktarılır. Ayrıca, köprü mesajları serileştirir, böylece iki iş parçacığı aynı verileri paylaşamaz veya aynı verileri kullanarak çalışamaz.

React Native Uygulama geliştirme ortamı nasıl kurulur?

Expo'nun yardımıyla bir React Native uygulaması oluşturmak için ortamı nasıl kuracağınız aşağıda açıklanmıştır.

• Node.js'yi yükleyin, Expo'nun komut satırı aracını edinin ve ardından npm install Expo-cli –global komutunu girin. Expo cli aracı yüklendikten sonra expo init todo-app yazın.
• Şimdi bir ekran görüntülenecek ve boş bir uygulama için “boş” seçeneğini seçmeniz gerekiyor. Expo'nun iş akışı özelliklerini de ekleyin. Ardından uygulamanızın adını girin, enter tuşuna basın ve kurulum işlemine devam edin.
• Uygulamayı başlatmak için oluşturulan yeni projeye npm start komutuyla gidin ve uygulamayı durdurmak için Cntrl + C tuşlarına basmanız gerekir. Geliştiricilerin sunucusu çalışacak ve web tarayıcısında Expo yöneticisi ekranına sahip yeni bir sekme açılacaktır.

Uygulama, bir Android öykünücüsünde çalıştırılarak veya Expo uygulamasını cep telefonunuza yükleyerek ve QR kodunu tarayarak uygulamayı cihazda çalıştırarak önizlenebilir. Daha sonra Atom, Sublime, Visual Studio Code vb. gibi bir metin düzenleyici yüklemeniz gerekir. Artık bir React Native uygulaması oluşturmak için gerekli tüm araçlara sahipsiniz.

Nihai Karar

React Native, iOS işletim sistemlerinin yanı sıra Android'i de hedefleyen bir mobil uygulama oluşturmanız gerekip gerekmediğini belirlemek için karlı bir seçenektir. React Native ile platformlar arası geliştirme, geliştirmenizi hızlandırır ve geliştirme maliyetlerini azaltır. Bu nedenle, bu çerçeve, uygulama fikrini doğrulamak için hızlı bir uygulama prototipi oluşturmak isteyen girişimciler için en iyisidir.

React Native uygulama geliştirme konusunda teknik yardıma ve uzman rehberliğine mi ihtiyacınız var? ABD ve Hindistan'da son derece deneyimli bir React Native geliştirme şirketi olan Biz4Solutions ile iletişime geçin ve dünya genelindeki müşterilere birinci sınıf hizmetler sunar.