ReactJS sudah tidak asing lagi di telinga kita beberapa tahun ini. Kepopulerannya semakin terdengar ketika React Native mulai diperkenalkan sebagai solusi pengembangan rekayasa perangkat lunak pada perangkat mobile.

React Logo

Apa sih perbedaan ReactJS dan React Native? Sebagai seorang developer, ketika ada pertanyaan seperti itu mungkin jawaban pertama yang terlintas di pikiran Anda adalah perbedaan platform antara keduanya. Namun menurut saya tidak sesimpel itu jawabannya, karena ReactJS juga dapat digunakan dalam pengembangan-pengembangan multiple platform dengan bantuan framework Cordova. Oleh sebab itu saya coba mengulas beberapa perbedaan mendasar antara keduanya.

Library dan Framework

Perbedaan yang mendasar pertama ReactJS adalah sebuah library Javascript yang diperuntukkan untuk membuat user interface sedangkan React Native merupakan framework yang diciptakan dari library ReactJS yang digunakan untuk mengembangkan perangkat lunak berbasis IOS dan Android. Sebagai library, ReactJS merupakan kumpulan fungsi-fungsi untuk membuat react component dan merendernya menjadi sebuah DOM. Di lain pihak, React Native sebagai framework, yang menurut saya sudah sangat komplit memuat beberapa library yang dibutuhkan dalam proses pengembangan perangkat lunak.

Setup Project dan Bundling

Karena ReactJS merupakan sebuah library Javascript maka sangat mudah untuk menggunakan library, cukup dengan meng-import atau meng-embed dalam HTML kita. Seiring perkembangan Javascript yang semakin cepat, sehingga dalam pengembangannya React JS menggunakan ES6 syntax. Hal ini yang menjadi bahan pertimbangan developer untuk menggunakan web bundle seperti webpack untuk mengemas transpiler dan beberapa library pendukung dalam proses pengembangan.

Di sisi lain React Native sudah mengemas semua yang developer butuhkan untuk membuat sebuah aplikasi. Dalam dokumentasinya Anda akan melihat begitu mudah dan cepatnya dalam proses mengembangkan aplikasi berbasis Android dan IOS. Namun tentu saja dalam proses pengembangan React Native tidak bisa berjalan sendiri, ia masih membutuhkan instalasi Android Studio dan XCode untuk menjalankan aplikasi yang kita buat. Ketika menjalankan React Native juga mendukung penuh syntax Javascript berbasis ES5, ES6, dan ES7.

DOM

Perbedaan signifikan keduanya terletak pada cara masing-masing dalam melakukan render DOM. ReactJS menggunakan elemen HTML untuk merender komponennya, sedangkan React Native menggunakan komponen native dari Android maupun IOS untuk merender komponennya. Namun beberapa komponen sepintas mirip dengan HTML, tapi tentu saja Anda tidak dapat menggunakan library ReactJS yang merender element HTML. Anda dapat mencari library lain di react.parts sebagai alternatif.

Style

ReactJS dapat menggunakan fitur styling CSS dan framework CSS lainnya dengan baik. Sedangkan React Native, Anda membutuhkan Stylesheet API untuk membuat object stylesheet yang sepintas mirip dengan CSS (namun itu bukan). Adapun kelebihannya kita mendapatkan fleksibilitas untuk menerapkan styling tersebut di beberapa komponen yang kita inginkan. Hal ini merupakan turunan sifat dari CSS yang dimanfaatkan React Native. Selain itu React Native menerapkan konsep flexbox yang dipakai untuk membuat layout responsibel dan dinamis, dan lagi sepintas mirip sekali dengan flexbox di CSS.

Animation

ReactJS dapat menggunakan fitur animasi dari CSS tetapi tidak sepenuhnya bisa di-support, karena ReactJS menggunakan mekanisme virtual DOM. Namun jangan khawatir developer masih dapat menggunakan Animation add-on yang disediakan ReactJS untuk mengatasi masalah tersebut. Karena React Native tidak menggunakan CSS maka, penggunaan animasi akan berbeda sama sekali dengan ReactJS. Di React Native developer dapat menggunakan API Animation untuk membuat sebuah animasi. API ini sudah memiliki fitur yang cukup banyak, yang mencakup basic konfigurasi animasi hingga mengatur tingkat kedinamisan animasi tersebut.

Gesture

ReactJS dapat memanfaatkan fitur Javascript Touch Event dari Web API. Sedangkan React Native mempunyai fitur yang mirip yaitu PanResponder untuk menangani event gesture tersebut. API ini mampu merekam native event yang terjadi di layar perangkat mobile baik itu berupa lokasi, jarak, dan kecepatan dari event tersebut.

Navigator

Navigator merupakan hal fundamental yang dihadapi developer untuk membuat aplikasi yang user friendly. Terdapat perbedaan mendasar dalam penggunaan navigator dan library terkait. Salah satu library yang dapat dijadikan rujukan yaitu react-router. Namun tentu saja itu dikembalikan lagi kepada masing-masing developer. Berbeda halnya dalam pengembangan perangkat mobile dengan React Native, dimana developer dihadapkan dengan masing-masing native design dari Android dan IOS yang berbeda. React Native sendiri menggunakan package react-navigation yang dikembangkan oleh komunitas. Selain itu pengembangan lebih lanjut dari react-navigation yaitu react-native-router-flux untuk menangani kasus routing yang lebih kompleks.

Developer Tool

Proses pengembangan perangkat lunak tidak bisa dipisahkan dari proses debuging dari kode yang developer kembangkan. Kita dapat memanfaatkan developer tool yang terdapat di browser Chrome dan Firefox. Selain itu terdapat extension/add-on seperti react devtool untuk memudahkan proses debuging. React Native sudah memfasilitasi kita dengan developer tool bawaannya yang menurut saya cukup keren. Banyak fitur yang ditawarkan seperti fitur hotreload, Debug JS Remote, dan live reload yang membuat proses pengembangan perangkat mobile menjadi menyenangkan.

Dan saya yakin masih banyak lagi perbedaan-perbedaan antara keduanya jika kita gali lebih dalam. Saya sangat menikmati setiap perkembangan dari keduanya yang saling melengkapi fiturnya sama lain. Hal ini tentu saja berkat support dan komunitas pengembang React yang semakin banyak. Bagi Anda yang tertarik mencoba, selamat bereksplorasi dan berbahagialah :D