Hola 👋🏼 saya Farid Inawan, salah satu Co-Founder dan juga Principal Engineer di JALA. Dalam kesempatan ini, saya dengan senang hati ingin memberitahukan bahwa kita baru saja me-release JALA App versi terbaru, yaitu versi 1.4.0 🎊 - Ta-Da. Selain itu saya juga ingin membagikan cerita tentang bagaimana "seru" dan "drama"-nya terkait proses development pada JALA App terbaru ini.
Kami di JALA berkomitmen untuk menjadi "Solusi End-to-end untuk Meningkatkan Produktivitas dan Efisiensi Tambak Udang". Aplikasi JALA bisa dibilang cukup unik, kebanyakan dari penggunanya adalah para petambak udang. Sedangkan bertambak udang biasanya dilakukan di pinggir laut, maka tantangan juga bagi kami untuk mendevelop aplikasi yang bisa digunakan dengan infrakstruktur komunikasi yang belum memadai, misal keterbatasan sinyal dan konektivitas internet. Maka aplikasi yang bisa digunakan secara offline menjadi keharusan, yang mana merupakan fitur unik dari JALA App.
Dengan fitur offline mode di JALA App, kompleksitas untuk mendevelop aplikasi menjadi meningkat. Selama setahun terakhir aplikasinya bisa digunakan, namun banyak issue yang sering terjadi, yang sering muncul adalah
- Aplikasi sering dirasa lambat
- Ada beberapa data offline yang gagal terupload
- Dan kadang ada data yang tertukar dengan kolam lainnya 🫣
- Tampilan yang belum konsisten
Dan dimulailah cerita tentang JALA App Rewrite.
⚠️ Warning! Sebelum memutuskan untuk melakukan rewrite pastikan aplikasi yang existing masih bisa berjalan untuk fungsi normal, dan ini opini pribadi, pastikan yang memimpin project Rewrite adalah orang yang paham semuanya. Yang tahu kalo akan sulit melanjutkan development kalau code base nya seperti itu. Kalo bisa fokus mungkin 1 - 3 bulan sudah cukup.
Rewrite
Kami tidak sendiri, beberapa aplikasi lain mereka juga melakukan rewrite.
- Gojek - https://medium.com/gojekengineering/the-story-of-our-big-android-app-rewrite-6ede1cc3ad9a
- Mercari - https://medium.com/mercari-engineering/why-we-decided-to-rewrite-our-ios-android-apps-from-scratch-in-react-native-9f1737558299
- Pinterest - https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154
- Shopify - https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native
Semua akan rewrite pada waktunya 😅 Tapi nggak juga sih, tergantung kondisi.
Sebagai gambaran aplikasi JALA dibuat dengan framework React Native.
Dengan kendala yang ada, kami punya beberapa opsi
- Melakukan rewrite dengan Flutter
- Melakukan rewrite dengan existing framework, tapi dengan struktur yang tidak flaw seperti sebelumnya dan update library.
Flutter menggunakan Dart Language, yang bahasanya strongly typed seperti C# atau JAVA. Ada kekhawatiran perubahan dari yang sebelumnya sangat flexible manjadi strict akan jadi pitfall. Selain itu library yang kami gunakan dan yang beberapa kami buat menggunakan JavaScript.
Tapi memang dengan resource yang ada 3 engineer mobile yang belum pernah megang Flutter, diputuskan untuk rewrite dengan existing framework. Karena pada dasarnya ada problem berlapis, struktur dan performance. Harapannya dengan struktur yang lebih proper, development bisa lebih cepat dan performance bisa mengikuti.
Update React Native dari 0.62 ke 0.67
React Native sudah semakin dewasa belakangan ini dengan adanya beberapa update performance, bahkan selama development React Native ada major release 0.70 yang mana menggunakan new Architure, Fabric, dll. Mengejar ketertinggalan performance dengan Flutter.
Checkout this tweet by @almouro
Melihat tweet tersebut cukup menarik, kami sempet mencoba untuk update ke versi 0.70, tapi chaos 😭. Pertama karena ternyata banyak library belum support, karena dia perlu build C++ per library nya, storage yang dibutuhkan untuk development jadi lebih dari 3GB. 😅 Tidak cocok untuk team yang sekarang. Masih belum efektif untuk versi 0.70, dan masih banyak pro dan cons terkait performance nya. Per hari ini sudah ada 0.70.2 . Jadi untuk teman-teman developer bisa consider saat mau upgrade, apakah library yang digunakan support atau belum?
Kami decide untuk upgrade dari 0.62 ke v0.67, bawaan dari Ignite terbaru saat melakukan Rewrite.
Update React Navigation jadi React Native Navigation
Sudah jadi rahasia umum kalo React Native dirasa berat saat navigasi, migrasi library ke React Native Navigation jadi salah satu opsi untuk kami lakukan. Kami sudah coba untuk migrasi ke React Native Navigation, kami merasa memang lebih cepat. Namun setelah 1 bulan lebih mendevelop, mulai terlihat kekurangannya dimana. React Native Navigation mengadalkan speed dengan membuat Fresh Activity baru di setiap halamannya, tapi jadinya state yang di update dihalaman B tidak terupdate ke halaman A, dan harus dihandle manual. Dengan keterbatasan tersebut rasanya akan menyulitkan development, sehingga kami balik lagi ke React Navigation, namun naik versi dari v5 ke v6. Dimana v6 by default sudah mengaktifkan React Native Screens yang mana menggunakan performa screen native.
Update UI ke NativeBase
NativeBase adalah salah satu UI library yang lengkap dan sudah ada semenjak awal-awal React Native. Untuk mengatasi problem tampilan yang belum konsisten, kami menggunakan Library ini. Namun memang secara implementasi performance nya drop dibandingkan pake library lain. Tapi kami untuk saat ini masih menggunakan ini karena untuk kecepatan development, feature resolve props di component menjadi styles bisa membuat developer jadi lebih produktif.
Selain itu kami juga menggunakan library React Native Web jujur ini membantu banget untuk proses development, karena bisa dirun di browser jadi gak perlu build untuk device sehingga waktu developmentnya lebih sedikit.
Kami me-rewrite sekitar ~130 halaman, dengan masing-masing fungsi uniknya. Dan kami juga merombak implementasi designnya menjadi pixel perfect sehingga lebih nyaman di mata.
Update Struktur Data dari Redux ke MobX (MobX State Tree)
Redux dan MobX sama-sama library tempat penyimpanan data, namun dengan adanya library MobX State Tree, kami sebagai developer dimudahkan untuk mengatur data. Pada versi aplikasi sebelumnya kami menggunakan Redux untuk menyimpan data, dimana data secara individual disimpan berdasarkan function. Misal dari kolam A ke kolam B kami masih menggunakan data penyimpanan yang sama namun diganti dengan data baru. Pada MobX State Tree kami menyimpan state nya seperti tree, yang mana misalnya saat berganti navigasi kolam kami hanya perlu switch cabang mana yang ingin ditampilkan tanpa me-load ulang datanya.
Hal ini secara tidak langsung meng-improve performance dari aplikasi JALA, karena sebelumnya di aplikasi JALA selalu me-load data dari database. Dan sebenernya 1 hal ini yang paling berdampak di performance app yang terbaru, dengan segala update yang ada di aplikasi yang sekarang.
Testing in Mind
Kami membuat versi terbaru dengan automation testing in mind, dengan menambahkan testID di semua tombol dan halaman, sehingga untuk update selanjutnya kami pastikan sudah lolos automation test.
One Last Thing... (?)
Jelas bukan "one last thing" sih.
QA vs Developer
Result
Salah satu hasil setelah rewrite
Tidak semua hasilnya bagus memang, berikut hasilnya.
| Score Performance saat Navigasi | Old | New |
|---|---|---|
| 1. Home -> List Ponds (15s) | 30 | 62 |
| 2. List Ponds -> List Measurements (25s) | 31 | 41 |
| 3. Scroll List Measurements (10s) | 85 | 50 |
| 4. Home -> List Monitoring (15s) | 57 | 61 |
| 5. Scroll List Monitoring (10s) | 99 | 78 |
| 6. Home -> List Shrimp Prices (10s)* | 76 | 63 |
| 7. Scroll List Shrimp Prices (10s)* | 81 | 59 |
| 8. List Shrimp Prices - Detail Shrimp Price (10s)* | 95 | 83 |
*Untuk list harga udang initial yang di fetch beda, di yang lama yang di fetch 20, kalo di yang baru yang di fetch 100
Beberapa problem yang di-mention sebelumnya
- Aplikasi sering dirasa lambat ⌛️
- Ada beberapa data offline yang gagal terupload dan hilang ✅
- Dan kadang ada data yang tertukar dengan kolam lainnya 🫣 ✅
- Tampilan yang belum konsisten ✅
Beberapa sudah ter-resolve, tinggal menyisakan performance, yang sepertinya masih bisa di push lebih jauh.
Release
Finally!!! We missed the deadline 😅 Tapi paling tidak ada temennya, juga Gojek says "Remember Those Deadlines? We Missed Them 🙈". *Menghibur diri~. Apakah hasil yang dicapai sesuai dengan ekspektasi di awal? Kami masih merasa kurang, tapi jauh lebih better dari aplikasi sebelumnya.
Untuk teman-teman developer bisa mengunjungi repo JALA di https://github.com/atnic . Ada beberapa project open source, salah satunya yang digunakan disini adalah react-native-jala-orm, yaitu Object Relational Mapping (ORM) dari sqlite yang heavy inspired by Laravel Eloquent.
What's Next
Dalam waktu dekat ini kami sudah mempersiapkan fitur-fitur yang akan kami release untuk lebih membantu memudahkan monitoring pencatatan, dan hal-hal lain yang seru.
Teruntuk semua pengguna JALA App kami ingin berterima kasih banyak karena sudah bertahan hingga sekarang, maka dengan ini kami ingin membalas budi dengan men-deliver JALA App versi terbaru.
Kritik dan Saran sangat dipersilakan. Terima kasih 🙏
Selamat Tahun Baru Imlek bagi yang merayakan! “Gong Xi Fa Cai!”🧧 (Semoga segera kaya raya!) buat JALA dan kalian semua.
Well done, team! Thank you very much!
- @syauqyaziz | VP of Product (dan juga QA 🙇🏻♂️)
- @wildanavian | PM Mobile (dan juga Web)
- @_sarahsimanjuntak | Sarah Simanjuntak | QA
- @ignasius_dhama | React Native Developer
- @erlanggajatikusuma | React Native Developer
