Seperti apa setup React Native development yang saya gunakan ?
Dari pengalaman saya membangun beberapa aplikasi mobile dengan react native. Disini saya mencoba membuat dokumentasi setup khususnya untuk tools dan library yang biasa gunakan pada proses development.
1. Editor
Sebelumnya saya menggunakan sublime dan atom. Saat ini saya beralih ke Visual Studio Code. Tidak ada yang salah dengan kedua editor sebelumnya. Dari segi speed VSCode memang lebih baik dibanding atom. Fitur builtin VS Code seperti Intellisense, Integrated terminal, Git, Task Runner, Node.JS debugger membuat editor ini memang cocok untuk javascript developer. Tapi bagaimanapun editor tergantung preferensi masing-masing. Tidak ada yang perlu di perdebatkan, selama anda bisa produktif lanjutkan.
Untuk theme saya menggunakan Solarized Light. Memang sebagai besar coder yang saya kenal umumnya menggunakan dark theme tapi untuk saat ini saya sedang tidak ingin gelap-gelapan :)
Untuk extension saya berusaha untuk seefektik & seminimal mungkin, terlalu banyak extension dampaknya membuat performance menurun. Untuk saat ini yg saya gunakan :
- Quokka.js → Instant playground yang outputnya langsung kelihatan di editor. Sangat berguna ketika kita ingin experiment library, functions atau code snippet.
- Snippets Extension → Ada banyak code yang sering kita ketik berulang-ulang seperti import, membuat component, class dsb. Saya menggunakan beberapa extension untuk menghemat waktu & tenaga :
React-Native/React/Redux snippets for es6/es7
React Redux ES6 Snippets
JavaScript (ES6) code snippets - Clock in status bar → Ngoding sering lupa waktu ? pakai extension ini untuk menampilkan informasi jam di statusbar
- Color Picker → Mengubah kode warna kedalam bentui GUI, sangat membantu ketika bereksperimen dengan warna.
2. Boilerplate
react-native-cli vs create-react-native-app (CRNA)
Boilerplate, Generator, Starter disini saya anggap sama, yaitu tools untuk membuat project baru react native. Untuk saat ini ada 2 official boilerplate react native yaitu react-native-cli dan create-react-native-app (CRNA)
Saya lebih suka menggunakan yang CRNA ( create-react-native-app ) karena terintegrasi dengan expo. Expo membuat pengujian realtime di real device lebih mudah di tambah lagi hanya dengan mengirimkan barcode siapa saja bisa mencoba aplikasi kita di smartphone nya. Ini sangat berguna ketika kita ingin mendapatkan feedback yang cepat dari user atau client ketika development.
Sebenarnya Expo juga menyediakan boilerplate sendiri, di dalamnya terdapat SDK expo yang cukup komplit. Tapi expo menggunakan fork official react-native, untuk menjaga kompatibilitas dengan SDKnya. Expo juga menyediakan XDE, Aplikasi desktop GUI untuk membuat dan mengelola project react native.
Untuk saat ini Saya menggunakan XDE untuk mengelola project dan CRNA untuk generate project baru. Untuk package manager sendiri disarankan menggunakan Yarn. Untuk saat ini NPM kurang stabil untuk react native development.
Ignite CLI
Ignite CLI adalah generator untuk membuat project react native. Pengembangan dari dari react-native-cli di tambah library-library lain seperti redux, storybook, dan masih banyak lagi. Ini seperti kumpulan resep dari best practice development react native.
Saya banyak belajar dari best practice yang dibuat oleh oleh team ignite ini. Boilerplate ini cocok untuk anda yang sudah familiar dengan official boilerplate react native dan ingin mencari best practice atau inspirasi setup project react native.
3. UI ( User Interface)
Ketika bekerja dengan UI sebisa mungkin saya menggunakan native component yang sediakan oleh react native, dalam berbagai kasus mungkin tidak cukup. Solusinya bisa dengan membuat sendiri, menggunakan 3rd party component, atau Component kit.
Native Base
Component Kit yang cukup populer saat ini sekaligus menjadi favorite saya. Saya menggunakan native base untuk beberapa project. Native base menyediakan banyak component cross-platformseperti card, button, checkbox, deck, forms, dan masih banyak lagi.
Untuk urusan kostumasi relatif mudah, native base menyediakan konfigurasi global untuk semua component. Konfigurasi juga bisa berdasarkan platform, sebagai contoh jika kita ingin membuat style yg berbeda dengan di ios & android. Konsep konfigurasi global itu disebut theme yang terinspirasi dari shoutem.
React Native Element
Hampir sama seperti native base, react native element targetnya juga component cross platform, bahkan founder native base pernah mengajak untuk merger, tapi sepertinya belum tercapai kesepakatan dengan alasan beda pattern dan filosopi. Component kit ini tidak memiliki konsep theme seperti pada native-base dan shoutem.
Saya sendiri sering menggunakan keduanya ( native base dan react native elemenet) sekaligus. Karena ada beberapa komponen yang tidak ada di native base dan sebaliknya, jadi saling melengkapi.
Shoutem
Shoutem sedikit berbeda dengan yang sebelumnya. Shoutem arahnya lebih ke premium platform all in one untuk membuat aplikasi mobile atau mungkin lebih tepat disebut app builder, tapi shoutem tersedia dalam open source yang bisa kita gunakan secara gratis.
Shoutem menyediakan 3 library yaitu UI, theme & animations. Menurut saya UI dan animation shoutem lebih terlihat profesional dibanding yang UI kit di atas di tambah lagi dengan web builder yang intuitive.
Sayangnya shoutem kurang cepat dalam mengikuti update react native. Sebagai contoh api Navigation Experimental deprecated sejak versi react native 0.44, sedangkan component shoutem banyak bergantung pada api ini. Ini membuat aplikasi yang dibuat dengan shoutem untuk sementara belum bisa di upgrade versi react native terbaru. Sayang sekali saya harus menunda menggunakan shoutem untuk production. Mudahan-mudahan dalam waktu dekat shoutem segera memperbaikinya.
React Native UI Kitten
Component Kit ini termasuk pendatang baru dibanding Component kit yang disebut diatas, tampilannya fresh meskipun component yang disediakan belum sebanyak pendahulunya. Kustomisasi componentnya juga mudah. Sejauh ini saya belum menggunakan UI kit ini untuk production.
React Native Material Kit
Jika anda ingin membuat aplikasi dengan material design di kedua OS ( ios & android ) maka Component kit ini adalah yang paling tepat. Jumlah componentnya memang tidak sebanyak Component kit sebelumnya. Library nya ringan dan cocok untuk aplikasi kecil atau aplikasi yang tidak membutuhkan component yang banyak. Untuk kostumasi Component kit ini tidak mengenal konsep theme, jadi harus di kostumasi langsung di componentnya. Sejauh ini saya belum menggunakan ini untuk production.
Native Directory & JS Coach
Kalau yang ini bukan Component kit, tapi resources untuk components react native independent. Ada banyak component yang tidak cover oleh Component kit, sebagai contoh calendar, maps, audio. Biasanya saya terlebih dahulu mencarinya di kedua tempat tersebut.
4. State Management
Saat ini ada 2 yang paling populer untuk urusan state management yaitu redux dan mobx. Untuk sekarang saya memilih redux untuk production, mungkin kedepannya saya akan mencoba mobx.
Untuk melengkapi redux saya juga menggunakan library redux-thunk, redux-persist, redux api middleware, dan react native debugger untuk membantu debug pada aplikasi redux
5. Navigasi
Untuk urusan navigasi saya menggunakan react navigation. Sejauh ini performance cukup baik untuk kedua OS (ios dan android), stabil, dan bisa di integrasikan dengan redux. Library ini juga resmi di rekomendasikan oleh official react native.
6. Form
Berurusan dengan form itu gampang-gampang susah. Untuk form saya menggunakan library redux-form dan untuk validasi saya menggunakan Validate.js
7. Testing
Untuk urusan testing saya menggunakan Jest untuk redux dan Jest Snapshot untuk testing UI, detail teknisnya mungkin akan saya tuliskan di lain waktu.
Kesimpulan
Memilih tools dan library yang tepat sangat mendukung produktifitas. Ekosistem react memang sedang dalam kondisi berkembang dan sangat cepat berubah. Tools dan library yang sebut di atas adalah berdasarkan pengalaman saya dan belum tentu cocok untuk semua situasi. Luangkanlah waktu untuk evaluasi dan eksplorasi mana yang cocok untuk anda. Prinsipnya adalah bukan mana yang paling keren tapi Having the Right Tool for the Right Job
Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan like & share. Jika anda tertarik belajar lebih dalam tentang react native silahkan isi email anda di box disini
