Duel: React Native vs. Cordova
Diterbitkan: 2022-03-11Sebagai hasil dari smartphone dan aplikasi seluler menjadi sangat populer, pengembang web telah mencari cara untuk membuat aplikasi seluler menggunakan JavaScript. Popularitas ini menghasilkan pengembangan banyak kerangka kerja JavaScript yang mampu menjalankan aplikasi seperti asli di perangkat seluler. Saat ini, Cordova dan React Native adalah pilihan yang paling populer. Cordova mendukung platform seluler iOS, Android, dan Windows Phone. Dengan React Native, di sisi lain, Android, iOS, dan UWP menjadi target para pengembang. (UWP adalah singkatan dari Universal Windows Platform, platform Microsoft yang memungkinkan aplikasi yang sama berjalan di Windows Phone 10 Mobile, XBox One, dan Windows 10.)
Dari permukaan, terlihat bahwa React Native dan Cordova menempati ruang yang sama. Namun, seperti halnya semua teknologi, ada aspek di mana yang satu bersinar, dan yang lainnya gagal. Jadi, untuk mendapatkan gambaran yang lebih baik dari masing-masing teknologi, dan untuk mempelajari kelebihan dan kekurangannya, kami akan menyelami detail masing-masing dan membandingkannya di berbagai disiplin ilmu.
Perbedaan Filsafat
Penting untuk diingat bahwa tagline React Native, "Belajar sekali, menulis di mana saja" berbeda dari mantra lintas platform yang biasa, "Tulis sekali, jalankan di mana saja." Ini mengarah pada dua hal: Pertama, kita tidak bisa hanya mengambil basis kode React yang ada dari proyek web kita dan mengubahnya menjadi aplikasi seluler hanya dengan beberapa klik. Namun, React dan React Native berbagi banyak konsep kunci dengan salah satu contohnya adalah sistem komponennya, dan sebagai hasilnya, React Native langsung terasa familiar. Meskipun React memiliki banyak kesamaan dengan React Native, ada beberapa perbedaan inti, yang berkisar dari cara menangani stylesheet hingga jenis komponen yang dapat kita gunakan.
Kedua, kami mungkin menemukan diri kami tidak dapat membagikan kode React Native ketika menargetkan platform yang berbeda. Ini terjadi ketika kami lebih suka elemen antarmuka pengguna berperilaku secara native ke platform spesifik mereka, yang pada gilirannya memberikan pengalaman yang lebih baik dan nuansa aplikasi yang lebih asli kepada pengguna. Contoh yang jelas adalah menu sisi laci di aplikasi Android, yang sangat tidak umum di aplikasi iOS.
Cordova tidak memiliki filosofi ini. Bukan hal yang aneh untuk mulai mengembangkan aplikasi web murni, kemudian menggabungkannya sebagai aplikasi Cordova, dan menggunakan kembali kode sebanyak mungkin untuk semua platform (seluler) yang ingin kita targetkan.
Kebebasan Berkembang
Pada perangkat seluler, Cordova menjalankan aplikasi satu halaman di dalam peramban web seluler terintegrasi, yang disebut WebView, dan kemudian membungkusnya sebagai aplikasi asli. Meskipun terlihat seperti aplikasi asli dari luar, kode web kami berjalan di dalam mesin peramban seluler. Bagi kami, itu berarti kami tidak terikat pada pustaka atau kerangka kerja tertentu. Jika kita menggunakan vanilla JavaScript, jQuery, Angular atau apa pun, salah satu dari opsi itu dapat digabungkan ke dalam aplikasi seluler dengan Cordova. Cordova tidak memaksakan tumpukan teknologi kami. Selama kami memiliki file index.html , kami siap melakukannya. Salah satu contoh sederhana adalah cuplikan kode berikut:
<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> Contoh ini berarti kita dapat menggunakan hampir semua hal yang kita inginkan, seperti menggunakan manajer paket seperti NPM atau Bower, menggunakan transpiler seperti Babel, CoffeeScript atau TypeScript, bundler seperti Webpack atau Rollup, atau yang lainnya. Tidak masalah, selama hasilnya adalah file index.html yang memuat semua JavaScript dan stylesheet yang kita butuhkan.
React Native, seperti namanya, dibangun di atas React. Sangat penting untuk memahami bagian React di React Native adalah salah satu fitur intinya. Jika Anda bukan penggemar sifat deklaratif React, termasuk JSX, komponenisasinya, dan aliran data, kemungkinan Anda mungkin tidak akan senang dengan React Native. Sementara React Native langsung terasa familiar bagi developer React, pada pandangan pertama, ada beberapa perbedaan yang perlu diingat. Dengan React Native kami tidak memiliki HTML atau CSS. Sebaliknya, teknologi ini difokuskan pada sisi JavaScript. Sebagai alternatif untuk CSS, gaya sedang ditulis sebaris, dan Flexbox adalah model penataan gaya default.
Aplikasi React Native yang paling sederhana akan terlihat mirip dengan contoh ini:
// 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 memiliki packager sendiri. Ini menggabungkan semua file JavaScript menjadi satu file raksasa, yang kemudian dikonsumsi dan dieksekusi oleh JavaScriptCore, mesin JavaScript Apple. JavaScriptCore digunakan di iOS dan Android, sementara ChakraCore mendukung aplikasi React Native UWP. Secara default, React Native menggunakan transpiler JavaScript Babel, memungkinkan kita untuk menggunakan sintaks ECMAScript 2015+ (ECMAScript 6). Meskipun tidak perlu menggunakan sintaks ECMAScript 2015+, itu pasti dianjurkan, karena semua contoh resmi dan modul pihak ketiga merangkulnya. Karena React Native menangani proses pengemasan dan transpiling, kode aplikasi dan modul pihak ketiga kami dapat memanfaatkan fitur ini tanpa perlu mengonfigurasi alat untuk kami sendiri.
Singkatnya, React Native adalah pendekatan berpendirian React-centric untuk pengembangan seluler, sementara Cordova memungkinkan kita untuk menggabungkan teknologi web di dalam shell WebView.
Tampilan dan Nuansa Asli
Satu hal yang penting bagi pengguna adalah memiliki tampilan dan nuansa asli dari sebuah aplikasi. Karena aplikasi Cordova biasanya merupakan aplikasi web sederhana, ada beberapa hal yang mungkin terasa aneh pada awalnya. Masalah dapat berkisar dari umpan balik visual yang hilang pada area ketuk, hingga pengguliran yang tidak terasa semulus sutra seperti pada aplikasi asli, hingga ada penundaan 300 milidetik pada peristiwa ketukan. Meskipun ada solusi untuk semua masalah ini, kita harus ingat bahwa kita mungkin perlu melakukan upaya ekstra jika kita ingin aplikasi Cordova kita terasa sedekat mungkin dengan aplikasi asli. Di Cordova, kami tidak memiliki akses ke kontrol asli apa pun. Jika kita ingin memiliki tampilan dan nuansa asli, kita memiliki dua opsi: Membuat ulang kontrol asli, seperti tombol dan elemen input, dengan HTML dan CSS, atau mengimplementasikan modul asli yang langsung mengakses kontrol asli tersebut. Kita bisa melakukannya sendiri atau dengan menggunakan perpustakaan pihak ketiga seperti Ionic atau Onsen UI. Perhatikan, penting untuk selalu memperbaruinya dengan pembaruan OS saat mereka datang. Terkadang, tampilan sistem operasi seluler mengalami facelift, seperti yang terjadi saat iOS 7 diperkenalkan. Memiliki aplikasi yang tidak dapat beradaptasi akan membuat pengguna keluar dari pengalaman. Kami juga dapat menggunakan plugin Cordova yang menghubungkan kami ke sisi asli. Salah satu kontrol asli yang paling lengkap adalah perpustakaan Ace Microsoft.
Dengan React Native, di sisi lain, kami memiliki akses ke kontrol dan interaksi asli di luar kotak. Komponen seperti Text , TextInput atau Slider memetakan ke rekan aslinya. Sementara beberapa komponen tersedia untuk semua platform, komponen lain hanya berfungsi pada platform tertentu. Semakin dekat kita ingin aplikasi kita memiliki tampilan dan nuansa asli, semakin kita perlu menggunakan komponen yang hanya tersedia untuk platform khusus ini dan semakin banyak basis kode kita menyimpang. Interaksi dan gestur sentuhan pikiran juga merupakan bagian dari React Native.
Membandingkan Kinerja
Dengan Cordova yang hanya memiliki WebView, kami terikat pada batasan WebView. Misalnya, mengikuti versi 4.0, Android akhirnya mulai menggunakan mesin Chrome (yang jauh lebih cepat) sebagai WebView default. Sementara dengan iOS, lama aplikasi yang berjalan di dalam mesin WebView default secara signifikan lebih lambat daripada aplikasi yang sama di browser seluler Safari. Selain itu, karena JavaScript adalah utas tunggal, kami mungkin mengalami masalah jika ada terlalu banyak hal yang terjadi dalam kode aplikasi kami. Keterbatasan ini menyebabkan animasi lamban, dan aplikasi kita mungkin tidak terasa responsif seperti yang kita inginkan. Meskipun mungkin ada beberapa trik yang dapat kami terapkan di sana-sini, pada akhirnya, kami terikat oleh batasan browser seluler.
React Native menggunakan beberapa utas, oleh karena itu merender elemen UI berjalan di utas mereka sendiri. Karena komponen React tertaut ke tampilan asli, JavaScript tidak melakukan pekerjaan berat di React Native.
Alur Kerja Pengembang
Cordova menawarkan utilitas baris perintah untuk membuat templat proyek baru, memulai aplikasi di simulator dan membangun aplikasi untuk perangkat aktual dalam mode produksi. Sebagian besar waktu, kami mengembangkan aplikasi di browser desktop dan nantinya dapat menggabungkannya sebagai aplikasi seluler. Dengan kebebasan yang ditawarkan Cordova, kami harus menangani sendiri alur kerja pengembangan. Jika kita ingin memuat ulang secara langsung di perangkat, kita perlu mengimplementasikannya sendiri. Untuk men-debug aplikasi Cordova, kami menerapkan prinsip yang sama yang digunakan untuk men-debug situs web. Di iOS, misalnya, kami akan menghubungkan perangkat seluler kami melalui USB, membuka Safari dan alat pengembangnya.
React Native menawarkan antarmuka baris perintah yang serupa dan menawarkan alur kerja pengembangan yang akrab bagi pengembang web. Kami mendapatkan reload langsung di luar kotak. Setelah kita mengubah komponen React, aplikasi kita memuat ulang dengan perubahan yang kita buat. Salah satu fitur yang paling menarik adalah penggantian modul panas, yang memuat ulang sebagian perubahan pada komponen yang kami buat, tanpa mengubah status aplikasi. Kami bahkan dapat terhubung ke perangkat yang sebenarnya dan melihat apakah perubahan kami berfungsi seperti yang kami harapkan pada perangkat nyata. Aplikasi React Native kami dapat di-debug dari jarak jauh dengan Chrome untuk Desktop. Penanganan kesalahan terlihat jelas di React Native; jika kita mengalami kesalahan, aplikasi kita menampilkan latar belakang merah, dan jejak tumpukan ditampilkan. Berkat peta sumber, kami dapat melihat lokasi persis kesalahan tersebut. Ketika kami mengkliknya, editor pilihan kami terbuka di lokasi kode yang tepat.
Ekstensibilitas dan Akses ke Fitur Asli
Dari sisi JavaScript, kami bebas menggunakan pustaka JavaScript apa pun, termasuk paket dari NPM. Namun, karena React Native bukanlah lingkungan browser, kami mungkin kesulitan menggunakan kode yang bergantung pada DOM. React Native mencakup modul CommonJS dan ES2015, jadi semua library yang menggunakan format ini mudah diintegrasikan.
Baik Cordova dan React Native memiliki kemampuan untuk membuat dan menggunakan plugin yang terhubung ke sisi native. Cordova menyediakan API tingkat rendah untuk membuat milik kita sendiri, yang memberi kita banyak kontrol, tetapi mengarah pada penggunaan lebih banyak boilerplate asli dan JavaScript.
Jika kami secara hipotetis menulis plugin Cordova iOS di Objective-C, itu mungkin terlihat seperti cuplikan kode berikutnya. Plugin kami hanya akan mencatat parameter input.
#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]; } @endUntuk menggunakan modul, potongan kode JavaScript ini akan membantu:
window.log = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Log", "log", [str]); }; Untuk menggunakan plugin, kita hanya perlu memanggil fungsi log :
window.log('Hello native!');React Native, di sisi lain, mengikuti filosofi yang berbeda; itu secara otomatis memetakan jenis JavaScript ke rekan aslinya saat menulis plugin, yang membuatnya lebih mudah untuk menghubungkan kode asli dengan JavaScript. Mari kita lihat sepotong kode yang diperlukan untuk membuat modul asli dengan React Native:
#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 mengikat modul untuk kita dengan panggilan RCT_EXPORT_MODULE dan RCT_EXPORT_METHOD . Kami sekarang dapat mengaksesnya dengan NativeModules.Log.log sebagai berikut:
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);Meskipun kami hanya mencermati pembuatan modul di iOS menggunakan Objective-C, prinsip yang sama berlaku untuk membuat modul untuk Android menggunakan Java.
Kita perlu menautkan plugin asli dalam file proyek untuk setiap platform. Dengan iOS, misalnya, ini berarti kita harus menautkan bagian asli yang dikompilasi dengan aplikasi kita dan menambahkan file header yang sesuai. Ini bisa menjadi proses yang panjang, terutama jika ada banyak modul asli. Untungnya, ini disederhanakan secara signifikan dengan menggunakan utilitas baris perintah yang disebut rnpm yang telah menjadi bagian dari React Native itu sendiri.
Kesimpulan: Bereaksi Asli atau Cordova?
React Native dan Cordova memiliki tujuan yang berbeda sehingga memenuhi kebutuhan yang berbeda. Oleh karena itu, sulit untuk mengatakan bahwa satu teknologi lebih baik daripada yang lain di semua disiplin ilmu.
Dengan menggunakan Cordova, Anda dapat dengan cepat mengubah aplikasi satu halaman yang ada menjadi aplikasi seluler untuk platform yang berbeda, dengan biaya interaksi yang belum tentu memiliki perasaan asli untuk platform spesifik mereka.
Dengan React Native, aplikasi memiliki tampilan dan nuansa yang lebih asli tetapi dengan biaya mengimplementasikan kembali potongan kode untuk platform target tertentu. Jika Anda sudah mencoba React dan tertarik untuk mengembangkan aplikasi seluler, React Native terasa seperti ekstensi alami.