Perkenalan
React Native adalah framework open source besutan
facebook yang dibuat setelah facebook sebelumnya membuat react.js,
ReactJS
sendiri merupakan sebuah library dari facebook yang dapat digunakan
untuk membangun antarmuka pengguna (UI). nah apa itu react native, adalah
framework open source untuk membuat aplikasi multi-platform (android, ios dan
windows platform”dalam tahap pengembangan”) dengan bahasa javascript, sesuai
dengan deskripsi di situs resminya“Learn once, write anywhere”. semoga
paham dengan penjelasan singkat saya :), oke sebelum bicara lebih jauh
lagi sekarang kita mulai persiapan nya terlebih dahulu sehingga kedepannya bisa
enak explore coding an nya, disini saya share tentang menggunakan react native
untuk membuat aplikasi android di windows.
Mengapa Tak Mencoba React Native?
Apa yang kita pikirkan saat kita mendengar kata
React Native? Ya, React Native adalah salah satu framework javascript yang kita
gunakan untuk mengembangkan aplikasi mobile. Jika dahulu kita mengenal
Ionic Framework React Native, maka React Native sangat berbeda dengan Ionic
karena dia memang ditujukan untuk membuat aplikasi mobile yang benar-benar real
native sedangkan Ionic ditujukan untuk membuat aplikasi Web App.
Dengan React Native kita akan merasakan sensasi membuat aplikasi yang sangat
mendekati bahkan tidak dapat dibedakan dengan dengan aplikasi native.
Ini dikarena library yang tersedia dalam React Native memang ada native
nya, jadi aplikasi yang kita buat langsung terintegrasi dengan aplikasi native
yang sebenarnya.
Perbedaan UI dan UX antara android dan iOS
sangat banyak, React Native sangat peduli akan hal tersebut dengan membuat render
component yang berbeda antara iOS dan android namun ada beberapa component
juga yang kita bisa gunakan bersamaan antara android dan iOS. Jadi kita bisa
membuat dua buah aplikasi yaitu iOS dan android dalam waktu yang bersamaan,
yang tentunya akan mengurangi cost. Kita bisa mengunakan 1 developer
mobile untuk membuat sebuah aplikasi mobile dalam 2 enviroment
yang berbeda yaitu iOS dan android.
Bagaimana React Native bekerja?
React Native bekerja dengan dengan menanamkan file
Javascript yang sudah di-bundle didalam aplikasi, dan menjalankan
mereka secara local dari aplikasi yang kita buat. Namun kita juga
dapat meletakan file Javascript kita didalam server dan
diambil ketika ada koneksi hal ini memungkin kan kita untuk melakukan update
aplikasi secara cepat tanpa melalu proses submit ke Google Playstore
atapun iOS Appstore. Untuk UI dan UX, React Native juga mengunakan Javascript
untuk styling hampir mirip dengan CSS diweb namun dengan CamelCase.
React Native yang dikembangkan oleh Facebook sudah digunakan oleh
beberapa perusahaan besar untuk mengembangkan aplikasi mobile guna
mendukung proses bisnis mereka, contohnya dapat dilihat di halaman berikut :
https://facebook.github.io/react-native/showcase.html
Introduction
Secara singkat, react native
merupakan framework javascript yang digunakan untuk mengembangkan aplikasi pada
smartphone. Aplikasi yang dikembangkan dengan react native ini pada
dasarnya dapat berjalan di ponsel berbasis Android dan IOS, hanya saja perlu
sedikit penyesuaian untuk masing-masing OS nya. Sedangkan Expo adalah adalah
framework berbasis react native yang digunakan juga untuk mengembangkan
aplikasi dengan tujuan yang sama yaitu dapat berjalan pada Android dan IOS.
Expo merupakan satu set tools,
library, dan services yang digunakan dalam pengembangan aplikasi.
Pada dasarnya Expo dan react native ini sama dalam hal menuliskan kode program
namun pengembangan aplikasi pada Expo dapat lebih cepat karna beberapa tools,
library, dan services sudah disediakan oleh Expo. Untuk pro dan kontra pada
Expo dapat dilihat pada list dibawah.
My
Experience
Sebagai pengembang aplikasi dengan
react native saya tertarik untuk mencoba menggunakan Expo (lebih tepatnya ada
project yang harus menggunakan Expo ini). Meskipun saya agak gak sreg
sama Expo ini jadi ya tetap memakai Expo. Yang bikin saya kurang yakin dengan
Expo ini akan saya jelaskan nanti meskipun dalam pengembangan dan pengecekan
apps nya menurut saya lebih mudah.
Singkat cerita, memang lebih cepat
dalam project yang sudah saya kerjakan ini. Saya lebih menghemat waktu dalam
pengembangannya. Fitur font, kamera, dan galeri sudah disediakan oleh Expo.
Pengaturan AndroidManifest dan Info.plist juga sudah disediakan oleh Expo
tinggal menambahkan pada file app.json dan tinggal direstart pada ExpoKit.
Why
use Expo?
- Expo menggunakan Expo SDK jadi tidak memerlukan Android Studio dan Xcode
- pengaturan aplikasi lebih mudah, bisa langsung ditambahkan pada file app.json, untuk lebih detail nya bisa dilihat disini
- mode debug aplikasi dapat langsung di jalankan pada device dengan aplikasi Expo pada Android dan IOS (dengan membagikan link / qr code project)
- beberapa fitur seperti Push Notification dan Facebook login sudah disediakan oleh Expo
- beberapa library seperti maps, camera, dan gallery sudah di sediakan Expo sehingga tidak perlu menambahkan library dan dapat berjalan pada Android dan IOS
- membuat versi rilis aplikasi lebih mudah karena dilakukan oleh server Expo (Expo akan memberikan link untuk mendownload versi rilis aplikasi kita)
Menarik sekali ya kelebihan yang
dimiliki Expo. Sampai pada akhirnya saya memerlukan library I18n untuk kamus String
untuk aplikasi yang saya kerjakan. Untungnya, ada yang membuat library I18n ini
untuk Expo, jadi saya terselamatkan dari keribetan. Namun saat sampai FCM saya
baru merasakan Expo ini menyusahkan karena saya belum bisa mengimplementasikan
fitur push notifikasinya.
Why
we should not use Expo?
- Expo tidak mendukung native module sehingga beberapa library yang memerlukan react-native link tidak dapat berjalan pada aplikasi
- aplikasi yang dibuat dengan Expo memiliki ukuran (size) yang besar sekitar 25 mb (pada react native sekitar 10mb)
- Expo tidak mendukung background process sehingga fitur seperti tracking tidak dapat berjalan pada aplikasi
- fitur push notification menggunakan server Expo sehingga dalam implementasi nya menjadi lebih rumit [?] (mungkin)
Kemudian saya coba detach Expo sehingga
saya dapat menggunakan native module react-native-fcm karena push notification
ini memerlukan settingan khusus di level AndroidManifest dan react native link.
Proses detach yang lumayan lama akhirnya sukses. Kemudian fitur-fitur yang dari
Expo tidak dapat digunakan.
Detaching
Expo
Expo memberikan kita fitur untuk
melepaskan Expo dari project yang sudah kita buat. Expo akan mengunduh
file-file project yang diperlukan dalam Android dan IOS sehingga setelah proses
detach selesai akan terdapat folder android dan ios pada project kita yang
kemudian kita dapat meneruskan project kita sebagai project react native biasa.
Setelah project kita detach maka
kita harus mengatur file project kita sendiri seperti file credential dan SDK.
Namun faktanya kita masih bergantung pada Expo SDK itu sendiri hanya saja kita
perlu mengatur secara manual hal-hal yang diperlukan project kita.
“We call this “detaching” because you still depend on the
Expo SDK, but your project no longer lives inside the standard Expo client. You
control the native projects, including configuring and building them yourself.”
Setelah melakukan detach kita dapat
menggunakan library-library yang menggunakan native module. Namun perlu
diperhatikan, beberapa fungsi bawaan Expo tidak dapat berjalan pada file
project yang sudah kita detach.
Saya kemudian mengganti kode untuk
font, kamera, dan galeri. Tidak apalah, gak lama juga. Kemudian saya install
react-native-fcm untuk push notifikasi dari firebase. Install nya sukses namun
pada saat dipasang pada device tidak berhasil. Error depency google gms.
Kemudian saya cek pada level android. Ternyata, masih terdapat file-file dari
Expo yang lumayan banyak. Saya cek pada file gradle untuk mengecek duplikasi
versi dependency google gms. Ternyata banyak dependency-dependency bawaan Expo
yang masih ada pada file gradle tersebut. Hal inilah yang membuat aplikasi dari
Expo memiliki size besar. Saya samakan versi gms pada react-native-fcm
agar sama dengan bawaan Expo. Aplikasi sukses diinstal pada device.
Setelah aplikasi sukses diinstal
pada device dilakukan testing pada semua fiturnya. Semua fiturnya dapat
berjalan kecuali saat menerima notifikasi dari firebase. Saya cek
berulang-ulang dan hasilnya tidak berhasil. React native fcm akan memanggil
react activity pada saat menerima notifikasi sedangkan pada level android
aplikasi tidak menggunakan react activity namun menggunakan activity dari Expo
sehingga aplikasi akan langsung crash saat menerima notifikasi. Saya
coba otak-atik native module react native fcm namun hasilnya sama, tetap crash.
React
Native vs Expo
Expo merupakan pengembangan dari
react native sehingga dari segi fungsional aplikasi kurang lebih sama. Expo
lebih mudah dan lebih cepat dalam pengembangan aplikasi namun tidak semua fitur
yang didukung oleh react native dapat dijalankan dalam expo. Native module
merupakan salah satu hal yang sangat penting dalam pengembangan aplikasi
meskipun tidak semua aplikasi memerlukan fitur tersebut.
Expo lebih cocok digunakan dalam
pengembangan aplikasi sederhana yang tidak memerlukan kode pada level native
module atau fitur-fitur dasar yang sudah didukung oleh Expo. Untuk fitur yang
sudah didukung oleh Expo dapat dilihat disini.
React native lebih cocok digunakan
untuk mengembangkan aplikasi yang tingkat kerumitannya diatas dari yang sudah
didukung oleh Expo. React native mendukung kode berbasis native module sehingga
kita dapat menambahkan fitur yang tidak didukung oleh react native namun masih
di dukung oleh bahasa pemrograman dasar aplikasi (java untuk Android, swift
untuk IOS) meskipun dalam implementasinya tidak mudah. Salah satu fitur yang
tidak didukung Expo dan didukung react native adalah bluetooth.
Aplikasi dari react native memiliki size
yang lebih kecil dibanding Expo. Hal ini juga menjadi pertimbangan dalam
pengembangan aplikasi yang memiliki banyak fitur namun tetap dalam size
yang wajar. Size aplikasi juga sangat mempengaruhi kinerja dari aplikasi
yang telah kita buat.
Akhirnya saya memutuskan untuk
membuat project baru dari react native dan mengkopi paste file js dari project
yang dari Expo tadi. Kemudian aplikasi baru berjalan lancar tanpa crash :D
Conclusion
Expo menjadi rekomendasi dalam
pengembangan aplikasi yang sederhana dan aplikasi dengan fitur yang sudah
didukung oleh Expo. Untuk aplikasi yang lebih rumit tidak disarankan
menggunakan Expo dan menggunakan react native saja. Detach bukan solusi untuk
menambahkan fungsi native module pada aplikasi. Faktanya masih terdapat
file-file bawaan Expo yang menurut saya tidak terlalu digunakan hanya
memberatkan dan membuat beberapa library tidak compatible.
Solusi terakhir untuk yang sudah
terlanjur menggunakan Expo dan melakukan detach project dan masih terjadi
crash, lebih baik membuat project baru dan memindahkan file js project Expo ke
project react native.
Komentar
Posting Komentar