React Native Nedir? Kullanmaya Değer Mi?
React Native, native kullanıcı arayüzü (UI) bileşenlerini kullanarak çok platformlu Android ve iOS uygulamalarının geliştirilmesine imkan tanıyan bir mobil uygulama geliştirme framework’üdür (yazılım çerçevesi). JavaScriptCore çalışma zamanı ve Babel transformatörlerine dayanmaktadır. Bu kurulumlar ile React Native; ok işlevleri, asekron/beklemede gibi yeni JavaScript (ES6+) özelliklerini destekler.
Mobil uygulama geliştirmeye yönelik bu çerçeve 2013 yazında Facebook Hacathon Projesi’nde başlamıştır. İlk tanıtımı Ocak 2015’te Reactjs Konferansı’nda gerçekleştirilmiş ve Mart 2015’te Facebook, React Native’i GitHub’da açık ve kullanılabilir hale getirmiştir.
O zamandan bu yana, native uygulamalar ile başarılı kullanıcı arayüzleri oluşturabilmesi nedeniyle çoğu geliştirici ve kurum tarafından benimsenmiştir. Aşağıdaki grafikte React Native’in yükseliş trendini gözlemleyebilirsiniz. Yayınlanmasının üzerinden yalnızca 1.5 yıl geçmesinin ardından Android ve iOS development’ın önüne geçmiştir.
Bu nedenle, bugün kullandığımız çoğu uygulamanın (Myntra, UberEats, Facebook ve Instagram vb.) Java / Kotlin veya Objective-C / Swift yerine çoğunlukla JavaScript kullanılarak oluşturulan bir çalışma mantığına sahip olmasına şaşırmamak gerekir.
React Native’den bahsederken “native app’ın (uygulama)” ne anlama geldiğine dair bazı kafa karışıklıkları yaşamış olabilirsiniz.
Native Mobile App Nedir?
Bir işletim sistemine, yani Android ve iOS’a, yönelik oluşturulan uygulamalar Native Mobil App olarak nitelendirilir. iOS’ta native app oluşturmak için Objective-C / Swift geliştirme dili, Android’de ise Java / Kotlin kullanırız.
Native React'e gelirsek, son kullanıcı arayüzü bir WebView'da sadece bir web bileşeni oluşturmaz. Kullanıcı arayüzü, gerçek native görünümler ile Swift ya da Java kullanılarak oluşturulan uygulamalardan farksız olarak temel yapı taşları kullanılarak oluşturulur.
React JS Nedir?
React Native’in detaylarına inmeden önce React JS’nin ne olduğuna bir göz atmakta fayda var:
React Native, React JS'ye benziyor, ancak, önemli yapı taşı olarak web bileşeni yerine native bileşenleri kullanıyor. Bir React Native uygulamasının temel yapısını kavramak için JSX (JavaScript XML), bileşenler, durum ve destekler gibi temel React fikirlerinin bir bölümünü görmeniz gerekir.
Fakat React Native ile uygulama geliştirmek istiyorsanız React JS öğrenmek zorunda değilsiniz. React Native bilgisi de yeterli olacaktır.
React Native Nedir?
Yazının başında bu soruyu kısmen yanıtlamıştık. Fakat mimarisinin teknik yönlerinden hiç bahsetmedik. Bu bölümde, React Native’in nasıl çalıştığına odaklanacağız.
Aşağıdaki gibi temel bir React Native uygulamasına göz atarak başlayalım.
|
1 |
import React from 'react'; |
Neden Standart Bir JavaScript Söz Dizimine Benzememektedir?
Yalnızca eski JS standartlarına hakim bir web geliştiricisiyseniz, muhtemelen yukarıdaki kod parçasını JavaScript’e benzetemeyeceksiniz. ES2015 (diğer adıyla ES6); hali hazırda resmi standardın bir parçası olan JavaScript için büyük bir gelişmedir. ES6, eski tarayıcılar tarafından desteklenmemektedir, bu yüzden Babel benzeri transpiler’ları (kaynaktan kaynağa derleyiciler) kullanmak gerekmektedir.
Babel transpiler’ı sayesinde React Native, JavaScript ES2015’in çoğu özelliğini desteklemektedir, yani bu teknolojiyi farklı cihazlar ile uyum prolemi yaşamadan kullanabilirsiniz. Aşağıdaki kod parçasında verili olan bazı ES2015 özellikleri import, from ve class’tır. ES2015’e uyum sağlayamıyorsanız, “resource” bölümünde yer alan kaynaklardaki basit kodları kullanarak devam edebilirsiniz.
|
1 |
<View> |
JSX, XML'in JavaScript içine yerleştirilmesini sağlayan bir gramerdir. Kodunuzu biçimlendirme dilinin içine yazmanıza imkan sağlar. Web geliştirmede kullandığımız HTML gibi görünür, fakat <div> veya <span> kullanmak yerine, React Native bileşenlerinden faydalanacaksınız. Burada <Text> yalnızca bazı içerikleri gösteren, View ise <div> veya <span> 'a benzeyen yerleşik bileşenlerdir.
React Native Bileşenlerine Dair
React Native’de metin satırları birer bileşen gibi davranırlar. Ekranda gördüğünüz her şey bir tür bileşendir. Gerekli olan temel şey bazı JSX’leri görselleştiren bir render işlevidir.
Bu tarz bileşenlerin her biri, React Native uygulamamızı Android veya iOS uygulamalarımız ile sentezlediğimizde native yapı taşları ile eşleşir. Örneğin; <Text> Android’te <TextView/>, iOS’ta UILabel ile eşleşir.
React Native Kullanmaya Değer Mi?
React Native’nin de diğer teknolojiler gibi avantajlı ve dezavantajlı yönleri vardır. React Native’nin sizin projeniz için uygun olup olmadığına emin değilseniz, aşağıdaki bilgilere göz atın.
React Native’in Olumlu Yönleri
1. Zaman Kazandırır
React Native’nin en önemli özelliği size zaman kazandırmasıdır. Uygulama, iyileştirme sürecinin ortasında yeniden yüklendiği için geliştiricinin her değişiklikte yeniden derleme yapmakla uğraşmasının önüne geçer. Bir Android tasarımcısı bunun nasıl bir işkence olduğunu iyi bilir.
2. Kolaylaştırır
React Native ile iOS ve Android için harmanlanabilen tek bir kod tabanı oluşturulabilir. Bu da mühendisin kodlama için daha az enerji harcamasını sağlar.
3. Kullanıcı Deneyimi
Bu çerçeve ile tasarlanan bir mobil uygulama; yüksek kalibreli olmayı, sorunsuz çalışmayı ve modern bir kullanıcı deneyimini garanti eder.
4. Tek Ekosistem
Bunların yanı sıra; oldukça yetenekli bir JavaScript mühendisi, farklı işletim sistemlerinin ekosistemleri ve dil özellikleri arasında kaybolmadan React Native kullanarak çok yönlü bir uygulama geliştirebilir.
5. Kullanıcı Arayüzü
Ortaya çıkan kullanıcı arayüzü oldukça duyarlıdır ve yerel koşullarla senkronize olmayan JavaScript bağlantılarına uyum sağlar.
6. Hız
Geliştirilen uygulama, hibrit model kullanılarak oluşturulanlara kıyasla daha hızlı yüklenir ve daha rahat bir kollanım sağlar.
React Native’in Olumsuz Yönleri
1. Hata Ayıklama
React Native tarafından oluşturulmuş bir uygulamada karışık bir hata ayıklama prosedürü vardır. React Native’in kodları üretirken ve onları nasıl kullanacağına karar verirken sergilediği tutuma bakmanız gerekecektir.
2. Yapılandırma
React Native uygulamasının yerel kitaplığı çok fazla yapılandırma gerektirebilir. Örnek vermek gerekirse bir Google Maps krokisi; bir Android Native uygulamada çok kısa sürede oluşturulabilirken, uzun ve zahmetli bir işe dönüşür.
React Native’in Rakipleri
Ionic ve Cordova, benzer amaçlarla kullanılan yazılım çerçevelerindendir. Sözümona hibrit uygulamalar oluştururlar. Bahsedilen uygulamalar standart web yenilikleri ile oluşturulur ve WebView gibi native temel bileşenler tarafından kaplanırlar. React Native ise native geliştirme için gerçek bir kaplama olmasıyla onlardan ayrılır.
Yukarıda bahsettiğimiz gibi React Native, native yapı taşları kullanır ve işletim sistemine yönelik bir kaplama değildir. Aslına bakarsanız, Java Script’te oluşturulan kodlar, native kodlar (temel yapı taşları) ile sentezlenmiştir. Böylece, WebView bileşeninin içine yerleştirilmiş bir web uygulaması yerine JavaScript thread’ları tarafından kontrol edilen tümüyle native bileşenler kullanan bir uygulama elde ederiz.
Cordova veya Ionic tarafından oluşturulan grafik arayüz; verimliliği ve kaliteyi ve aynı zamanda müşteri deneyimini yok sayan bir WebView tarafından gösterilir. Bu teknoloji ile geliştirilen uygulamalar, native UX ücreti içermezler.
Sonuç
Bu makalede React Native’nin ara yüzler oluşturmaya yönelik bir JavaScript kütüphanesi olan React’a benzediğini gördük. Sonuç olarak, bileşen düzenlemesi için JavaScript, JSX ve hatta CSS benzeri stylesheet sözdizimleri gibi web teknolojilerini kullanmanız gerekir. Bazı karmaşıklıklarına rağmen React Native yazılım çerçevesi, karşılaşılan tüm testleri ve engelleri üstesinden gelmesi kolay bir hale getirmesi nedeniyle birçok geliştirici için ilk seçenek olarak ön plana çıkmaktadır.