React Native Nedir?
Güncelleme: 02/2020
Son yıllarda adında sıkça söz ettiren ve gittikçe popülerleşen bir framework olan React Native’in Windows ortamlarına nasıl kurulacağını bu yazımızda anlatmıştık. Şimdi React Native nedir, ne değildir, avantajları & dezavantajları, alternatifleri nelerdir detaylıca inceleyeceğiz.
Yazımız uzun, çaylar, kahveler hazır ise gelin hikayenin en başından başlayalım ☕
Nedir?
React Native için kısaca Facebook tarafından üretilen, cross-platform mobil uygulama geliştirme olanağı sağlayan bir framework diyebiliriz.
“Cross-platform mobil uygulama geliştirme framework’ü” ne demek derseniz; “Ben tek bir dil ile mobil uygulama geliştireyim; ama hem Android, hem iOS, hem Windows … vs ortamlarında çalışsın. Kalkıp da Android için Java, iOS için Swift öğrenmekle uğraşmayayım!” dediğiniz de sizin imdadınıza koşan diller, framework’lerdir.
React Native’de bunlardan biri. Kendine özgü bir mobil uygulama uzantısı yok, uygulamayı geliştiriyorsunuz ve Android için .apk, iOS için .ipa uzantılarını alıyorsunuz. Android ortamına uygulama geliştirirken karşılaşacağınız hatalar Java hataları, iOS ortamına uygulama geliştirirken karşılaşacağınız hatalar Objective-C hataları. Ama kodlarken kullanacağınız dil React.
Kısa, öz ve açık bir giriş oldu ise asıl konumuza geçebiliriz.
Kendine has bir dil formatı (JSX) olan React Native bizlere tek bir dil üzerinden kodlama yapabilme ve geliştirilen uygulamanın bir çok platformda çalışma olanağını sunuyor dedik. Geliştiricilere bu desteği sağlayan React Native, cihaz ile arayüz arasında bir köprü görevi görerek geliştirilen mobil uygulamaların sorunsuzca çalışmasını sağlıyor. Siz geliştirme ortamında bir bileşen tanımlıyorsunuz (örneğin; <Text>) ve React Native ilgili ortamda o bileşenin karşılığı ne ise (Android’de TextView, iOS’da UIView) sizin yerinize oluşturuyor. Bunun için de yazılan React (yani Javascript) kodlarını native dile (Java, Objective-C .. vs) çevirirken “babel” adı verilen bir yapı devreye giriyor.
Nasıl çalıştığı, mimarisi vs. gibi konular çok uzun ve çok derin olduğu için hiç girmeyeceğim, meraklısı için buraya kaynakları bırakayım.
Ne zaman, nasıl yaratılmıştır?
Temelleri 2013 Yaz’ında Facebook’un kendi içerisinde düzenlediği bir hackathon ile atılıyor ve ekip 2 yıl boyunca geliştirdikleri prototipleri ve versiyonları düzenleyerek ilk sürümlerini geliştiriyor. İlk duyurusu Ocak 2015 yılında düzenlenen ReactJS konferansında gerçekleştirilen bu framework, üzerinden çok geçmeden 2 ay sonra ki Mart F8 etkinliğinde GitHub üzerinden açılışı yapıyor.
GitHub sürecine bakarsak açılışının ilk yılında 1002 contributor 124 yeni sürümle 45 branch’te 7,971 kere commitlemiş. Türkçe’si; 1002 geliştirici 45 versiyonda ki 124 yeni sürüm ile 7,971 kere yeni geliştirmeler gerçekleştirmiş. Bu verilerin açıklaması yazılım dünyasına merhaba demiş bir framework için oldukça iyi bir sonuç demek ve arkasında ki Facebook desteği ile açık kaynaklı bir framework oluşu sayesinde geliştiricilerin kısa zamanda sevgisini kazanmasına sebep olmuş. Ayrıca performans testlerinde Java ve Objective-C dillerinden de geri kalmadığını göstermiş bu framework. Sonuçta biz geliştiriciler için en önemli noktalardan biri performans ve verimdir.
Yazılım sektöründe çılgın atan React Native framework’ümüzün Android ve iOS geliştirmelerini nasıl etkilediğini inceleyecek olursak açılışından bu yana özellikle Android platformuna yönelik dilleri ciddi miktarda etkilediğini gözlemleyebiliriz. Geliştirme desteği iOS’a kıyasla her daim daha rahat ve daha güvenliksiz olan ve geliştirme araçları her daim bir bela olan Android platformu, geliştirilen bu framework sayesinde rahat bir nefes almış gibi gözüküyor desek yalan olmayacaktır. Nedeni ise bariz; React Native’in Android Studio gibi bir ortama kıyasla sadece bir text editor ve bir emülatör ile daha hızlı ve daha esnek bir geliştirme imkanı sunması. Hal böyleyken geliştiriciler kahve kupalarını kapıp Android’e yönelik ortamlardan React Native ortamlarına kaçarak yeni projelerine merhaba demişler gibi.
Ne işe yarar? Nerede kullanılır?
React Native bir front-end (ön-yüz) framework’üdür. Bilmeyenler için front-end; bir uygulamanın ara yüzünde ki tasarımsal ve operasyonel işlemlerin bütününü ifade eder. Haliyle de bir front-end framework’ü bu gereksinimleri karşılayan, sağlayan bir yapıdır diyebiliriz. Back-end (arka-yüz) ise bir uygulamanın arka planında ki gereksinimleri sağlayan (makine öğrenmesi işlemleri, veri desteği, restful API servisi vs..) işlemler topluluğudur. Back-end tarafında dillere odaklanılmaz, sunulan servis hizmetleri göz önünde bulundurulur. Python, nodeJS, .NET gibi diller ile back-end servisleri oluşturabilirsiniz, fakat bu diller back-end için yaratılmamıştır. Oysa React Native front-end’e yönelik bir framework’dür.
Peki React Native tek başına mobil bir uygulama için yeterli mi? Uygulamaya bağlı. Ama açıkçası pek sayılmaz. Güncel bir mobil uygulama sağlam bir back-end, en azından iyi bir servis desteği istemekte ve haliyle bu noktada geliştireceğiniz uygulamanın front ve back end dillerinin ve platformlarının uyumlu bir şekilde çalışmasını sağlamak önemli bir husus. Ne mutlu ki React Native arkasında ki topluluk desteği ile bir çok back-end servislerini destekleyebiliyor. MongoDB, SQLite, firebase, MySQL, GraphQL, realm, Flask, NodeJS ve bunlar gibi bir çok seçenek ile mobil uygulamalarımıza iyi bir back-end desteği verebiliyoruz.
Verilen örnekler içerisinden realm özellikle mobil uygulamalar için tercih edilen bir veritabanı yönetim sistemi uygulaması. Dilerseniz .NET ile WEB API yazıp da uygulamanıza hizmet sunabilirsiniz. Bu kadar imkan ve çeşit içerisinde tercih yaparken en çok dikkat etmemiz gereken şey geliştireceğimiz uygulama da hangi back-end hizmetin daha efektif hizmet vereceği. Yanlış bir tercih uygulamamızın sorunlu çalışmasına neden olabilecektir. Bu da önemli bir nokta.
Hangi firmalar kullanmakta?
Yaratıcısı olan Facebook kendi uygulamasının belirli bir kısmının, sahibi olduğu Instagram’ın ise büyük bir kısmının React Native ile geliştirdiğini paylaşmıştı. Bunun ile birlikte Tesla, Skype, Pinterest, Bloomberg, Wallmart, UberEATS, Discord ve bunlar gibi bir çok uygulama React Native’i tercih ettiğini dile getirmekte. İyi hoş fakat akıllarda bir soru;
Bu uygulamalar %100 React Native mi? Değil ise neden değil?
Bu noktada konudan bağımsız, fakat daha iyi anlaşılması için uygulama geliştirme ile ilgili ufak bir parantez açmak doğru olacaktır;
Geliştirilen bir uygulama baştan sona tek bir framework’de, dilde, daha doğrusu tek bir yapıda olmak zorunda değildir. Performans arttırımları ve daha efektif bir kullanım göz önünde bulundurulduğunda birden fazla framework ile geliştirmek daha kaliteli bir çözüm olabilir. Baştan sona React Native ile yazılmış bir uygulama belirli noktalarda eksik kalmış olabilir ya da Java kullanılarak yazılan bir uygulama çok hantal, ağır çalışıyor olabilir. Bu noktada bu yapıları ortak kullanarak bir uygulama çıkartmak akıllıca bir yöntemdir. Tek bir framework ile ilerlemek zorunda değilsiniz, geliştiriciler için hangi seçenek, hangi dil, hangi platform daha verimli ve başarılıysa o tercih edilmeli. Haliyle firmalar tek bir seçenek üzerinden yürümek yerine hangi dil daha efektif ve verimli ise onu tercih edebiliyor.
Sonuçta yazılım dünyasının dillerinde milliyetçilik yoktur.. 😄
Bahsettiğim bu yöntem derin bir konu fakat şimdilik bu kadar bilmemiz bizim için yeterli.
Örnek;
Peki neye benzer bu React Native’in arayüzü? Nedir bunun dili?
React, Javascript ve XML dil yapılarını harmanladığı JSX adında bir format kullanır demiştik. JSX Tıpkı XML’de ki gibi tagler kullarak component’lerin yaratıldığı, Javascript’de ki temel işlemlerin yapılabildiği React’a özel bir dil formatıdır. Öğrenimi ise oldukça kolay. Temel işlemleri öğrenip kendiniz bir iki örnek çalıştıktan sonra rahatça mantığını kavrayabilirsiniz.
Mesela ufak bir React Native örneğine bakacak olursak;
Framework’ümüz JSX formatını kullanıyor demiştik ve örnek kodlarımızdaki “<SafeAreaView>” (ya da <View>), “<Text>” taglerinin hepsi bu dil formatında React Native’in kendine has bileşenleri (components), ki yukarıda bunların ‘react-native’den çağırıldığını (import … from ‘react-native’) görebiliriz. İstersek, (daha doğrusu ihtiyaç duyarsak) biz de kendi componentlerimizi yaratabilir ve gerek duyduğumuz noktalarda çağırıp kullanabiliriz.
Ek olarak react-native’den import edilen “Platform” modülüne bakacak olursak da uygulamanın derlendiği cihaza direkt erişim sağlayarak hangi cihaz olduğunu saptayabilmemize olanak sağlayan bir yapı. “Platform.OS” değeri “android” ve “ios” olarak ilgili cihazlarda bize çıktı veriyor.
Bu ve bunun gibi bir çok NativeModules yapısına sahibiz. Yeri geldiğinde kendi modülümüzü de yazabiliriz.
Örnek kodlarımızın iOS ve Android cihazlarda çıktısı ise şu şekilde;
Yazdığımız kodları biraz inceleyelim.
Kod örneğinde gördüğümüz App nesnesi bir functional component. Yani aslında bir sabit. React’ta buna ek olarak kullanabileceğimiz class yapısı da mevcut. Class; JS’in ES6 güncellemesiyle gelen bir özellik ve “state” / “props” adında değişken yapıları mevcut. Nedir bunlar diyenler için çok kısa bahsetmek gerekirse;
Class’ların iç yapılarında kullanılacak olan değişkenler “state” olarak tanımlanır. Yani “User” adında bir class oluşturdunuz, sadece o class içinde güncellenecek bir “username” değişkeni olsun derseniz bunu bir state olarak tanımlarsanız.
Eğer User class’ı başka bir component’ın (ya da class’ın) içinde çağırılacak ve içine değer gönderilecekse de bu değerler “props” olarak tanımlanır.
Çok kısa bir kod örneği;
Başlangıç sayfamız herhangi bir konumdan User component’ini çağırıyor ve “year” props’una 2020 sayısını gönderiyor olsun. Sayfamız sadece User component’ini render etsin. User ise;
Varsayılan olarak “Medium” değerine sahip username state’ini barındırıyor ve ekrana state ve props değerlerini basıyor. Çıktımız da tahmin edeceğiniz gibi:
Class ve funtional (stateless) component farkımız, class’larda ki state / props farkımız az çok kafanızda şekillenmiştir.
Class yapısının kendine has belirli fonksiyonları var. Örneğin kod örneğinde gördüğümüz, ekran çıktılarının oluşturulduğu “render()” metodumuz mevcut. Bu metot React’ın “lifecycle” yapısının bir parçası ve kullanıcının göreceği bileşenler bu metot sayesinde ekrana basılmakta. state’lerimiz ve propslarımız güncellendikçe render metodu tekrar çalıştırılır, kullanıcının göreceği yapılar güncellenmiş olur. React Native’in bu ve buna benzer kendine has metotları bulunuyor ve bunlar sayesinde uygulamamız çalışmadan evvel (constructor()) ve çalıştıktan sonra (componentDidMount()) neler yapılmasını istediğimizi yönetibiliyoruz. Aynı şekilde uygulama sayfamız güncellendiğinde performansı etkilememek için kontrol metotlarımız (shouldComponentUpdate()) da var.
Bu noktada ufak bir parantez açalım.
Functional component yapısına stateless denmesinin sebebi class yapısındaki gibi değişken (güncellenebilir, adından da geldiği gibi “değiştirilebilir” bir nesne) tanımlanamıyor olması. Yani User nesnemizde ki gibi “this.state…” diyerek herhangi bir nesne tanımlayamıyoruz. Daha doğrusu tanımlayamıyorduk, ta ki Hooks yapısı gelene kadar.
Hooks yapısı kısaca functional component’larda tıpkı class’lardaki gibi state oluşturup bunları güncellememize olanak sağlayan bir yapı. 2018'de React’ın 16.8 sürümüyle aramıza katıldı ve şu an ki haliyle güncellemeler alarak class’lara muadil bir yapı haline geldi diyebiliriz. Hooks’da yukarıda bahsettiğim, class’lara has lifecycle metotlarını kullanamıyorsunuz. Onlar yerine “useEffect” benzeri bir yapı söz konusu. Hooks’larla ilgili de kod örneği paylaşmak isterim fakat çok fazla kafanızı karıştırmak istemiyorum. Makale “React Native’e Giriş”’e dönmesin.
Peki neden class varken “functional component + hooks” kullanayım derseniz fonksiyonel yapıların bilgisayar derlemesinde class’lara kıyasla çok daha rahat olduğunu, class’ların okunabilirliğinin daha zor olduğunu ve boyut olarak bile daha fazla olduğunu bilmeniz şimdilik yeterli.
Ve tabi bahsettiğimiz componentlere stiller ekleyebiliyoruz. Bunun için çağırdığımız component’in “style” özelliğine dilediğimiz tasarımları özelliklerini eklememiz yeterli. Örnek kodda bunları aşağı satırlarda sabit tanımlayarak yaptık. Web’e aşina olanlar bu style yöntemleri CSS’e oldukça benzediğini farkedecektir. Haricen bir dosya üzerinden de tanımlayıp bu işlemi gerçekleştirmek başka bir seçenek.
Bahsettiğim şeyler ve paylaştığım örneği sadece React Native’ın kod yapısından biraz bahsetmek içindi. Bu yapıların nasıl kullanıldığına veya detaylı örneklere girmeyeceğim çünkü bu konular derya deniz ve yazımız sadece React Native’i tanıtmak amaçlı, öğretmek değil. Haliyle o konulara girersek çıkamayız ama bu, başka bir yazımızın konusu olsun 💻
Avantajları? & Dezavantajları?
Bol bol bahsettik React Native’den fakat yok mudur bu arkadaşımızın dezavantajları, zorlukları? Elbette;
Temel Avantajlar
- Tek bir dil, çoklu ortam: Sayesinde tek bir platform üzerinden hem Android hem de iOS platformuna uygulama çıkartabiliyoruz. Dilersek tasarımlarını birbirlerinden bağımsız bir şekilde oluşturabilir, düzenleyebiliriz. Bu açısı büyük bir artı.
- Uygulama geliştirme hızı: Güçlü bir bilgisayarınız mevcut ise yazımızda da bahsettiğimiz üzere sadece bir text editor ve emülatör ile hızlıca geliştirme ortamına girebiliyorsunuz. Saatler süren debuglar, testler ve upgrade’ler bu framework sayesinde saniyelere düşebiliyor. Örneğin Genymotion emülatörü ile text editörden yaptığınız değişiklikleri kaydettiğiniz anda uygulamanız yenileniyor ve geliştirmeleri takip edebiliyorsunuz. Haliyle bu durum size rahat bir geliştirme ortamı sunuyor. Tabi ki sağlam ve doğru bir kurulum ile.
- Topluluk desteği: Facebook React Native’i yayınladıktan sonra geliştiriciler tarafından çok sevildi. Yeni bir framework olmasından ötürü hataları ve eksik yanları çok vardı ve bunlar zamanla geliştiriciler sayesinde giderildi, geliştirildi. Hala daha yeni paketler, yeni sürümler yayınlanmakta ve Facebook bu isteklere her yeni güncellemeyle cevap veriyor. (Örneğin geliştiricilerin state management için ürettiği Redux, Flux ve MobX gibi paketlere karşılık güncel sürümü ile birlikte gelen Hooks yapısı) Geliştirmek istediğiniz bir uygulamada size ne gerekli ise (animasyonlar için, http request kütüphaneleri için -örneğin axios-, ses, kamera, galeri işlemleri için geliştirilmiş sayısız paketler) topluluk tarafından oluşturulmuş kütüphanelerde bunları bulabilirsiniz. Topluluk neler yapmış, neler geliştirilmiş buradan bakabilirsiniz.
Temel Dezavantajlar
- Hala geliştirilmekte olan bir süreç: Ben bu makaleyi yazarken Python’ın 28 yaşında, C#’ın 18 yaşında, PHP’nin 24 yaşında ve babaların babası C’nin 47 yaşında olduğu bir dünyada React Native’imiz henüz 4 yaşında. Diğer yapılar ile kıyaslandığında daha çok yeni bir framework ve haliyle her gün yeni eklentiler, yeni arayüzler eklenmekte. Hala eksik yanları mevcut ve bu durum belirli noktalarda kendisini yetersiz bırakabiliyor. (Ki çoklu dil programlama konumuzdan bu yüzden bahsetmiştik) Öyle ki şu an ki güncel stable sürümü henüz 0.59 versiyonu. Hala 1.0 versiyonunun yayınlanmasına vakit var.
- Paket uyumsuzlukları: Geliştiriciler kendi ihtiyaçlarına yönelik paketler geliştirip bunları paylaşıyor demiştik. Aynı zamanda Facebook da belli aralıklarla React Native’in yeni sürümlerini yayınlıyor. Bazı zamanlarda geliştiriciler eski bir sürüme yönelik paketler yayınlıyor ve bunları siz yeni sürümde kullanamayabiliyorsunuz. Bu bir problem olamaktan ziyade geliştirilmeye yönelik, yeni bir framework için beklenilen bir durum. Ama bazı zamanlarda paket uyumsuzlukları insanı çileden çıkartmıyor değil..
- Geliştirme ortamı sorunu: Eğer elinizde bir MacOS yoksa ya da mevcut sisteminiz sanal bir MacOS kurmaya (hackintosh) yeterli değil ise maalesef iOS ortamına deploy alamıyorsunuz. Windows mimarileri MacOS sistemini desteklemediğinden iOS’a yönelik mobil uygulama uzantıları (IPA) Windows’ta alınamıyor. Fakat MacOS ortamında Android deploy (APK ) edebiliyorsunuz. Bu durum Windows kullanıcıları için maalesef üzücü bir nokta.
Alternatifleri neler?
Google’a “Cross-platform mobil uygulama yazacağım, getir bana menüyü!” diye haykırdığınızda elbette size sunduğu tek seçenek React Native değil. Bu framework gibi bir çok seçenek mevcut ve gidişata bakılırsa gittikçe de artacak. İyisini kötüsünü kıyaslamadan bakalım elimizde başka neler varmış?
- Flutter: 2017 yılında Google tarafından duyurulan ve Dart dili ile yazılan bir framework. Henüz çok yeni bir framework ama React Native gibi umut vaadedici.
- Ionic: 2013 yılında alpha, 2015 yılında ilk stable sürümü yayınlandı. AngularJS, Cordova ve HTML5 gibi bileşenleri birlikte kullanan ve cross-platform yapısından ziyade hybrid uygulamalar geliştirmeye yönelik bir dildir.
- Vue Native: React Native yapısının üzerine kurulan farklı bir framework diyebiliriz. Aynı bileşenleri ve aynı yapıları farklı bir arayüz ve dil (Vue) ile yönetme imkanı sunuyor.
- Xamarin: .NET çatısı altında hybrid olarak mobil uygulama geliştirme imkanı sunan bir yapıdır.
Sonuç
React Native yeni bir framework ve daha öğreneceği, geliştirileceği bir çok yanı var. Fakat günümüzdeki hali bile diğer seçeneklere kıyasla çok daha başarılı diyebiliriz ve pazardaki yeri azımsanacak bir düzeyde de değil. Geliştirme ve öğrenme olanağının rahat olması dikkat çekici bir seçenek.
Elbette tercih diğer alternatiflere göz atmakla, avantajı & dezavantajı kıyaslanarak yapılmalı.
Şahsen kendimce tecrübe edindiğim kadar sizlere React Native’in ne olduğunu anlatmaya çalıştım, umarım yeni başlayanlar veya başlayacaklar için yararlı, keyifli bir yazı olmuştur.
Esen kalın!
“A user interface is like a joke. If you have to explain it, it’s not that good.”
