Düello: React Native ve Cordova
Yayınlanan: 2022-03-11Akıllı telefonların ve mobil uygulamaların bu kadar popüler hale gelmesinin bir sonucu olarak, web geliştiricileri JavaScript kullanarak mobil uygulamalar oluşturmanın yollarını arıyorlar. Bu popülerlik, mobil cihazlarda yerel benzeri uygulamaları çalıştırabilen birçok JavaScript çerçevesinin geliştirilmesiyle sonuçlandı. Şu anda, Cordova ve React Native en popüler seçeneklerdir. Cordova, iOS, Android ve Windows Phone mobil platformlarını destekler. React Native ile ise Android, iOS ve UWP geliştiriciler için hedeflerdir. (UWP, Microsoft'un aynı uygulamanın Windows Phone 10 Mobile, XBox One ve Windows 10'da çalışmasına izin veren platformu olan Evrensel Windows Platformu anlamına gelir.)
Yüzeyden bakıldığında, React Native ve Cordova'nın aynı alanı işgal ettiği görülüyor. Ancak, tüm teknolojilerde olduğu gibi, birinin parladığı ve diğerinin yetersiz kaldığı yönler vardır. Bu nedenle, her bir teknolojinin daha iyi bir resmini elde etmek ve avantajlarını ve tuzaklarını öğrenmek için her birinin ayrıntılarına dalacağız ve bunları farklı disiplinler arasında karşılaştıracağız.
Felsefedeki Farklılıklar
React Native'in "Bir kere öğren, her yerde yaz" sloganının, platformlar arası alışılmış "Bir kere yaz, her yerde koş" mantrasından farklı olduğunu hatırlamak önemlidir. Bu bizi iki şeye götürür: İlk olarak, web projemizden mevcut React kod tabanımızı alıp birkaç tıklamayla mobil uygulamaya dönüştüremeyiz. Bununla birlikte, React ve React Native, bileşen sistemleri olmak üzere birçok temel kavramı paylaşır ve sonuç olarak, React Native anında tanıdık gelir. React, React Native ile pek çok benzerliğe sahip olsa da, stil sayfalarının işlenme biçiminden kullanabileceğimiz bileşenlerin türüne kadar bazı temel farklılıklar vardır.
İkincisi, farklı platformları hedeflerken kendimizi React Native kodunu paylaşamayabiliriz. Bu, kullanıcı arabirimi öğelerinin kendi özel platformlarına yerel olarak davranmasını tercih ettiğimizde olur, bu da kullanıcıya daha iyi bir deneyim ve uygulamaya daha yerel bir his verir. Bunun bariz bir örneği, iOS uygulamalarında çok nadir görülen Android uygulamalarındaki çekmece yan menüsüdür.
Cordova bu felsefeyi paylaşmıyor. Saf bir web uygulaması geliştirmeye başlamak, daha sonra onu bir Cordova uygulaması olarak paketlemek ve hedeflemek istediğimiz tüm (mobil) platformlar için mümkün olduğunca çok kodu yeniden kullanmak nadir değildir.
Geliştirme Özgürlüğü
Cordova, mobil cihazlarda, entegre mobil web tarayıcısı içinde WebView adlı tek sayfalık bir uygulama çalıştırıyor ve ardından bunu yerel bir uygulama olarak sarıyor. Dışarıdan yerel bir uygulama gibi görünse de web kodumuz mobil tarayıcı motorunun içinde çalışıyor. Bizim için bu, belirli bir kütüphaneye veya çerçeveye bağlı olmadığımız anlamına gelir. Vanilla JavaScript, jQuery, Angular veya başka bir şey kullanıyorsak, bu seçeneklerden herhangi biri Cordova ile bir mobil uygulamada toplanabilir. Cordova, teknoloji yığınımıza empoze etmez. Bir index.html dosyamız olduğu sürece, gitmeye hazırız. Basit bir örnek, aşağıdaki kod parçacığı olacaktır:
<html> <head> <title>My Cordova App</title> </head> <body> <div>Tap me</div> <script> // Select our element var element = document.getElementById('tapme'); // Send an alert once it was tapped/clicked element.addEventListener('click', function() { alert('Hello there!'); }); </script> </body> </html> Bu örnek, NPM veya Bower gibi bir paket yöneticisi kullanmak, Babel, CoffeeScript veya TypeScript gibi bir aktarıcı, Webpack veya Rollup gibi bir paketleyici veya tamamen başka bir şey kullanmak gibi istediğimiz hemen hemen her şeyi kullanabileceğimiz anlamına gelir. Sonuç, ihtiyacımız olan tüm JavaScript ve stil sayfalarını yükleyen bir index.html dosyası olduğu sürece önemli değil.
React Native, adından da anlaşılacağı gibi, React üzerine kuruludur. React Native'deki React bölümünün temel özelliklerinden biri olduğunu anlamak önemlidir. JSX, bileşenleri ve veri akışı dahil olmak üzere React'in bildirimsel doğasının hayranı değilseniz, muhtemelen React Native'den memnun olmayacaksınız. React Native, React geliştiricilerine ilk bakışta tanıdık gelse de, hatırlanması gereken bazı farklılıklar vardır. React Native ile HTML veya CSS'ye sahip değiliz. Bunun yerine, bu teknoloji JavaScript tarafına odaklanmıştır. CSS'ye alternatif olarak stiller satır içinde yazılıyor ve Flexbox varsayılan stil modelidir.
En barebone React Native uygulaması bu örneğe benzer:
// Import the React module for JSX conversion import { React } from 'react'; // Import React Native's components import { View, Text, AppRegistry, TouchableOpacity, } from 'react-native'; // Create an App component const App = () => { // Define our press handler const onPress = () => alert('Hello there!'); // Compose the components we are going to render return ( <View> <TouchableOpacity onPress={onPress} /> <Text>Tap me!</Text> </TouchableOpacity> </View> ); }; // Registers the `App` component as our main entry point AppRegistry.registerComponent('App', () => App);React Native'in kendi paketleyicisi vardır. Tüm JavaScript dosyalarını tek bir dev dosyada toplar ve daha sonra Apple'ın JavaScript motoru JavaScriptCore tarafından tüketilir ve yürütülür. JavaScriptCore, iOS ve Android'de kullanılıyor, ChakraCore ise React Native UWP uygulamalarını destekliyor. Varsayılan olarak, React Native JavaScript aktarıcı Babel'i kullanır ve ECMAScript 2015+ (ECMAScript 6) sözdizimini kullanmamıza izin verir. ECMAScript 2015+ sözdizimini kullanmak gerekli olmasa da, tüm resmi örnekler ve üçüncü taraf modüller tarafından benimsendiğinden kesinlikle teşvik edilir. React Native, paketleme ve aktarma süreciyle ilgilendiğinden, uygulama kodumuz ve üçüncü taraf modüllerimiz, araçları kendimiz için yapılandırmaya gerek kalmadan bu özelliklerden yararlanabilir.
Özetlemek gerekirse, React Native, mobil geliştirmeye yönelik React merkezli, düşünceli bir yaklaşımdır, Cordova ise web teknolojilerini WebView kabuğu içinde bir araya getirmemize olanak tanır.
Yerli Görünüm ve His
Kullanıcılar için önemli olan şeylerden biri, bir uygulamanın yerel bir görünümüne ve hissine sahip olmaktır. Cordova uygulamaları genellikle basit web uygulamaları olduğundan, ilk başta garip gelebilecek birkaç şey olabilir. Sorunlar, dokunma alanlarındaki eksik görsel geri bildirimden, yerel uygulamalardaki kadar ipeksi pürüzsüzlük hissi vermeyen kaydırmaya ve dokunma olaylarında 300 milisaniyelik bir gecikmeye kadar değişebilir. Tüm bu sorunların çözümleri olsa da, Cordova uygulamamızın yerel uygulamalara mümkün olduğunca yakın hissetmesini istiyorsak biraz ekstra çaba göstermemiz gerekebileceğini unutmamalıyız. Cordova'da herhangi bir yerel kontrole erişimimiz yok. Yerel bir görünüm ve his elde etmek istiyorsak, iki seçeneğimiz kaldı: Düğmeler ve giriş öğeleri gibi yerel denetimleri HTML ve CSS ile yeniden oluşturun ya da bu yerel denetimlere doğrudan erişen yerel modüller uygulayın. Bunu kendi başımıza veya Ionic veya Onsen UI gibi bir üçüncü taraf kitaplığı kullanarak yapabiliriz. İşletim sistemi güncellemeleri geldikçe bunları güncel tutmanın önemli olduğunu unutmayın. Bazen, bir mobil işletim sisteminin görünümü, iOS 7 tanıtıldığında olduğu gibi, bir facelift alır. Uyarlayamadığı bir uygulamaya sahip olmak, kullanıcıları deneyimin dışına çıkarır. Ayrıca bizi olayların doğal tarafına bağlayan Cordova eklentilerini de dahil etmeye başvurabiliriz. En eksiksiz yerel denetimlerden biri Microsoft'un Ace kitaplığıdır.
React Native ile ise yerel kontrollere ve etkileşime hazır erişime sahibiz. Text , TextInput veya Slider gibi bileşenler, yerel karşılıklarına eşlenir. Bazı bileşenler tüm platformlar için kullanılabilirken, diğer bileşenler yalnızca belirli platformlarda çalışır. Uygulamamızın yerel bir görünüme ve hisse sahip olmasını ne kadar yakın istersek, yalnızca bu belirli platform için kullanılabilen bileşenleri o kadar çok kullanmamız gerekir ve bu nedenle kod tabanımız o kadar farklı olur. Zihin dokunuşu etkileşimleri ve jestleri de React Native'in bir parçasıdır.
Karşılaştırma Performansı
Cordova'nın emrinde yalnızca bir Web Görünümü olduğundan, Web Görünümünün sınırlamalarına bağlıyız. Örneğin, 4.0 sürümünün ardından Android nihayet (çok daha hızlı) Chrome motorunu varsayılan Web Görünümü olarak kullanmaya başladı. iOS ile birlikte, uzun süre varsayılan WebView motorunda çalışan uygulama, Safari mobil tarayıcısındaki aynı uygulamadan önemli ölçüde daha yavaştı. Ayrıca, JavaScript tek iş parçacıklı olduğundan, uygulama kodumuzda çok fazla şey oluyorsa sorunlarla karşılaşabiliriz. Bu sınırlamalar cansız animasyonlara yol açar ve uygulamamız olmasını istediğimiz kadar duyarlı hissetmeyebilir. Burada ve orada kullanabileceğimiz bazı hileler olsa da, sonunda mobil tarayıcının sınırlarına bağlıyız.
React Native, birden çok iş parçacığı kullanır, bu nedenle UI öğelerini kendi iş parçacığında çalıştırır. React bileşenleri yerel görünümlere bağlandığından, JavaScript, React Native'de ağır yükü kaldırmıyor.
Geliştirici İş Akışı
Cordova, yeni proje şablonları oluşturmak, uygulamayı simülatörde başlatmak ve gerçek cihaz için uygulamayı bir üretim modunda oluşturmak için bir komut satırı yardımcı programı sunar. Çoğu zaman, uygulamayı bir masaüstü tarayıcısında geliştiriyoruz ve daha sonra bir mobil uygulama olarak paketleyebiliriz. Cordova'nın sunduğu özgürlükle, geliştirme iş akışını kendimiz halletmemiz gerekiyor. Cihaza canlı yeniden yükleme istiyorsak, bunu kendimiz uygulamamız gerekiyor. Cordova uygulamalarında hata ayıklamak için bir web sitesinde hata ayıklamak için kullanılan ilkelerin aynısını uygularız. Örneğin iOS'ta mobil cihazımızı USB üzerinden bağlar, Safari'yi ve geliştirici araçlarını açardık.
React Native, benzer bir komut satırı arayüzü sunar ve web geliştiricilerinin aşina olduğu bir geliştirme iş akışı sunar. Kutudan canlı yeniden yükleme alıyoruz. Bir React bileşenini değiştirdiğimizde, uygulamamız yaptığımız değişikliklerle yeniden yüklenir. En heyecan verici özelliklerden biri, uygulamanın durumunu değiştirmeden, yaptığımız bileşendeki değişiklikleri kısmen yeniden yükleyen etkin modül değişimidir. Hatta gerçek bir cihaza bağlanabilir ve değişikliklerimizin gerçek bir cihazda beklediğimiz gibi çalışıp çalışmadığını görebiliriz. React Native uygulamalarımız, Masaüstü için Chrome ile uzaktan hata ayıklanabilir. React Native'de hata işleme açıktır; bir hatayla karşılaşırsak, uygulamamız kırmızı bir arka plan görüntüler ve yığın izi gösterilir. Kaynak haritalar sayesinde hatanın tam yerini görebiliriz. Üzerine tıkladığımızda, seçtiğimiz düzenleyici kodun tam konumunda açılır.
Genişletilebilirlik ve Yerel Özelliklere Erişim
JavaScript açısından, NPM'den gelen paketler de dahil olmak üzere herhangi bir JavaScript kitaplığını kullanmakta özgürüz. Ancak, React Native bir tarayıcı ortamı olmadığı için DOM'a dayanan kodu kullanmakta zorlanabiliriz. React Native, CommonJS ve ES2015 modüllerini benimser, böylece bu biçimleri kullanan tüm kitaplıkların entegrasyonu kolaydır.
Hem Cordova hem de React Native, şeylerin yerel tarafına bağlanan eklentiler oluşturma ve kullanma yeteneğine sahiptir. Cordova, kendimizinkini oluşturmak için bize çok fazla kontrol sağlayan, ancak daha yerel ve JavaScript ortak kalıplarının kullanılmasına yol açan düşük seviyeli bir API sağlar.
Objective-C'de varsayımsal olarak bir Cordova iOS eklentisi yazacak olsaydık, bir sonraki kod parçası gibi görünebilir. Eklentimiz sadece giriş parametresini günlüğe kaydedecektir.
#import <Cordova/CDVPlugin.h> // Create a class that inherits from CDVPlugin @interface Log : CDVPlugin - (void)log:(CDVInvokedUrlCommand*)command; @end // The actual implementation of the class we just defined @implementation Log - (void)log:(CDVInvokedUrlCommand*)command { CDVPluginResult* pluginResult = nil; // We are getting all parameters and taking the first one NSString* echo = [command.arguments objectAtIndex:0]; // We are checking for the validity of the parameters if (echo != nil && [echo length] > 0) { // We are just printing the parameter using the native log method NSLog(echo); // Let's create a result for the plugin pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo]; } // Let's send a signal back with the plugin's result [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId]; } @endModülü kullanmak için bu JavaScript kodu parçası yardımcı olacaktır:
window.log = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Log", "log", [str]); }; Eklentiyi kullanmak için log fonksiyonunu çağırmamız yeterli:
window.log('Hello native!');React Native ise farklı bir felsefe izliyor; eklenti yazarken JavaScript türlerini yerel benzerleriyle otomatik olarak eşler, bu da yerel kodu JavaScript ile bağlamayı kolaylaştırır. React Native ile yerel bir modül oluşturmak için gerekli olan bir kod parçasına bir göz atalım:
#import "RCTBridgeModule.h" @interface Log : NSObject <RCTBridgeModule> @end @implementation Log RCT_EXPORT_MODULE(); // This makes this method available NativeModules.Log.log RCT_EXPORT_METHOD(log:(NSString *)message) { NSLog(message); } @end React Native, modülü bizim için RCT_EXPORT_MODULE ve RCT_EXPORT_METHOD çağrılarıyla bağlar. Artık buna NativeModules.Log.log ile şu şekilde erişebiliriz:
import { React } from 'react'; import { View, Text, AppRegistry, NativeModules TouchableOpacity, } from 'react-native'; // Create an App component const App = () => { // Log with our module once we tap the text const onPress = () => NativeModules.Log.log('Hello there'); return ( <View> <TouchableOpacity onPress={onPress} /> <Text>Tap me!</Text> </TouchableOpacity> </View> ); }; // Registers the `App` component as our main entry point AppRegistry.registerComponent('App', () => App);Objective-C kullanarak iOS'ta bir modül oluşturmaya yalnızca yakından bakmış olsak da, Java kullanarak Android için bir modül oluşturmak için aynı ilkeler geçerlidir.
Her platform için proje dosyalarındaki yerel eklentileri bağlamamız gerekiyor. Örneğin iOS ile bu, derlenmiş yerel parçayı uygulamamızla ilişkilendirmemiz ve ilgili başlık dosyalarını eklememiz gerektiği anlamına gelir. Bu, özellikle çok sayıda yerel modül varsa, uzun bir süreç olabilir. Neyse ki, bu, React Native'in kendisinin bir parçası haline gelen rnpm adlı bir komut satırı yardımcı programı kullanılarak önemli ölçüde basitleştirilmiştir.
Sonuç: React Native mi yoksa Cordova mı?
React Native ve Cordova'nın farklı amaçları vardır ve bu nedenle farklı ihtiyaçlara hitap eder. Bu nedenle, tüm disiplinlerde bir teknolojinin diğerinden daha iyi olduğunu söylemek zor.
Cordova'yı kullanarak, mevcut tek sayfalık uygulamanızı farklı platformlar için hızlı bir şekilde mobil uygulamaya dönüştürebilirsiniz, etkileşimler pahasına, kendi platformlarına özgü bir duyguya sahip olmaları gerekmez.
React Native ile uygulamalar daha yerel bir görünüme ve hisse sahiptir, ancak belirli hedef platformlar için kod parçalarını yeniden uygulama pahasına. Zaten React ile uğraştıysanız ve mobil uygulamalar geliştirmekle ilgileniyorsanız, React Native doğal bir uzantı gibi geliyor.