Memilih Flutter atau React Native?

Comparison review dengan aplikasi yang sama. How to decide between Flutter and React Native.

Gua mau mengangkat topik ini karna gua gatel mau ngetik 😆. Becandalah dikit, ini menarik untuk gua bahas karena beberapa waktu lalu gua dapet side job untuk membuat materi kursus yang membahas basic react-native dan basic flutter dengan contoh apikasi yang dibuat sama.

Gua ga membahas secara detail semua, yang Akan gua bahas itu dari sisi:

1. Learning
2. Development
3. App Bundle size

Bisa dibilang level story ini sih ringan.

Aplikasi

Aplikasinya pun simple CRUD yang terdiri dari:

1. Login Screen
2. Home Screen
3. Detail Screen
4. Form Screen

Integrasi dengan SQlite database sebagai persistent database.

Tampilan Login dan Home Screens

Ok, bahas satu persatu.

Learning

buat perbandingan dulu, mempelajari react-native:

1. JavaScript modern

Well, javascript module, ES20xx, konsep this keyword dan bind method (OO JavaScript), konsep functional. Untuk mempelajari ini mesti banyak baca-baca artikel terkait dan dokumentasi di MDN.

2. React

JSX, React lifecycle method, React Class component & function component.

3. React Native

React Native Component, CSS & Layout Flexbox (walau aneh kalau dibandingkan dengan CSS sebenarnya), React Native API dan harus pelajari sedikit tentang cara kerja mobile app.

4. Pustaka tambahan

Ini tegantung kebutuhan, yang sering dibutuhkan itu Navigation dan Reusable UI Component sebagai contoh react-navigation dan react-native-paper dan react-native-vector-icons karena React Native sendiri tidak ada standar Navigation dan UI. Dan yang menarik dari react-navigation, setiap versi selalu ada yang berubah dan break aplikasi yang sudah ada. Kita diharuskan membaca changelog / release notes jika mau upgrade versi.

5. Static type inference?

Ini optional saja, static type checker rekomendasi dari React team dan secara default adalah Flowtype. Alternatif lain menggunakan TypeScript.

Selanjutnya, mempelajari Flutter:

1. Dart

Sudah pasti pelajari bahasa dan syntax-nya. Yang menarik adalah kita cukup pelajari di satu tempat.

2. Flutter

Flutter Layout, Widget, API dan Built-in Navigation dan Material / Cupertino design dengan icon yang lengkap. Termasuk bagian dari widget adalah Stateless & Stateful widget dengan lifecycle method-nya.

Ini asli jelas perbedaannya, dan gua mengalami pengalaman ini ketika menulis presentasi materi kursus react-native dan flutter. Materi Flutter effortless dari jumlah slides dan materi yang dijelaskan lebih sedikit. Jadi, lebih cepat membuat materi flutter daripada react native!😲

Development

Kita coba lihat dari official getting started-nya, di sini untuk react native dan di sini untuk flutter. kita samakan di bagian install di windows platform (diluar install dan setup Android Studio), mana yang lebih singkat step-nya?

Ketika demo aplikasi bawaan dari flutter create dan react-native init, yang menarik adalah feature hot reload di flutter dan cool new feature fast refresh di react native. Fast refresh ini mengatasi masalah yang sering terjadi di hot reload yaitu gagal update. Dan ini pun juga muncul di flutter karena masih menggunakan hot reload.

React native dan flutter sama-sama punya feature inspector. Ini memudahkan developer untuk debugging UI Component. Inspector di flutter dan inspector react native tidak jauh berbeda, sama-sama menampilkan component / widget tree. Yang lebih keren lagi itu feature Layout Explorer di flutter. Dilihat sendiri aja ya.

Feature auto linking di react native ini keren ga kalah dengan flutter yang ga harus link native library. Yang gua tau, react native pakai teknologi yang mereka sebut native bridge kalau flutter pakai teknologi yang disebut platform channel.

Selebihnya tidak ada yang berbeda antara react native dan flutter jika ada native library yang perlu native dependency ini harus ditambahkan manual, contoh: integrasi firebase, ini butuh dependency di build.gradle pada Android platform.

Menjalankan di 2 platforms(Android & iOS) ga ada masalah di flutter, tapi di react native gua dapet masalah kayak gini ketika jalanin di iOS.

note: Using new build system
note: Planning build
note: Using build description from disk
Build system information
error: Multiple commands produce ‘/Users/kira325/develop/sekolahku_rn/ios/build/SekolahKu/Build/Products/Debug-iphonesimulator/SekolahKu.app/Zocial.ttf’:
1) Target ‘SekolahKu’ (project ‘SekolahKu’) has copy command from ‘/Users/kira325/develop/sekolahku_rn/node_modules/react-native-vector-icons/Fonts/Zocial.ttf’ to ‘/Users/kira325/develop/sekolahku_rn/ios/build/SekolahKu/Build/Products/Debug-iphonesimulator/SekolahKu.app/Zocial.ttf’
2) That command depends on command in Target ‘SekolahKu’ (project ‘SekolahKu’): script phase “[CP] Copy Pods Resources”

Ini terjadi karna manual linking di react-native-vector-icons bentrok dengan auto linking yang ada di Podfile. ada duplikat file-file icon (.ttf)-nya, tinggal dihapus salah satu, yaitu di bagian Copy Bundle Resources di tab Build phases (dependencies yang digunakan di section App bundle size)

Icon .ttf files yang sudah dihapus

App Bundle Size

File APK

1. Besar file apk flutter adalah 12.5 MB.
2. Besar file apk react-native adalah 23.6 MB.

Wow. besar file apk react native hampir dua kali besar file apk flutter.

Berapa besar space yang digunakan aplikasi yang sudah diinstall?

React Native

Flutter

Tapi, Jika gua aktifkan feature hermes lain cerita, keren banget feature ini tuh bisa mangkas besar file dua kalinya dan process booting nya juga cepet, hingga splashscreen pun tidak terlihat efeknya. File apk yang tadinya 23.6 MB menjadi 14 MB. Gokil!

React Native with hermes enabled

Ga penasaran? apa sih dependency yang digunakan di project ini baik itu flutter maupun react native?

Project dependencies React native

Project dependencies Flutter

Sorry, gua ga ngasih source code-nya untuk dicoba. ya karena nanti gua di komplen orang yang minta buat materi kursusnya. hehe..

Gua pun besar di JavaScript dan hidup juga dari sana. Tapi ada teknologi yang menarik untuk dicoba, kenapa engga?. Ga harus fanatic ke satu teknologi. Teknologi itu terus berkembang, kita harus mengikuti jaman supaya ga tertinggal. Open mind 🤯…

Nah, gimana menurut kalian? kembali lagi ke masing-masing. Mau pakai yang mana? Gua harap dari story ini bisa menjadi referensi kalian yang masih bingung mau pakai teknologi yang mana.

Note: Banyak bahan yang ingin gua bahas jadi stories di medium ini, cuma seringnya gua udah males atau sibuk dengan keluarga which is anak gua masih kecil-kecil, energi mereka tak terbatas 😄. So, Biar semangat buat story kayak gini boleh dong minta claps-nya. Mau komen silakan. Thank you for reading!😊