Native, hybrid, dan cross-platform adalah tiga keluarga cara membuat aplikasi mobile, dan memilih di antaranya adalah soal trade-off: kamu menukar sesuatu (kecepatan, biaya, kemudahan update) dengan sesuatu yang lain. Ingat Bu Rini dan papan status di dua kota. Tukang lokal di tiap kota hasilnya paling pas, tapi dibayar dua kali dan tiap perubahan harus dikerjakan dua kali. Satu desain yang dicat tukang lokal lebih hemat dan tetap terasa lokal. Poster di bingkai paling murah dan paling cepat diganti, tapi tetap kelihatan poster. Pelajaran ini menimbang pilihan itu dengan kebutuhan nyata aplikasi Laundry Bu Rini.
🧪 Tebakan cepat: Kamu menemukan bug di aplikasi React Native Bu Rini: total order #13 tertulis Rp 1.400, padahal 2 kg × Rp 7.000 = Rp 14.000. Perbaikannya satu baris JavaScript, dan kamu mengirimnya lewat EAS Update. Mbak Wulan membuka aplikasinya 10 menit kemudian. Angka mana yang dia lihat? Jawabannya ada di bagian "Update tanpa store".
Tiga keluarga pendekatan
- Native: ditulis dengan bahasa khusus platform, Swift untuk iOS dan Kotlin untuk Android. Akses ke semua API HP-nya penuh dan paling cepat dapat fitur baru, tapi kodenya dua.
- Hybrid: teknologi web (HTML, CSS, JavaScript) yang dijalankan di dalam container native, yaitu WebView. Contohnya Capacitor. Satu kode, dan ilmu web langsung terpakai.
- Cross-platform: satu kode untuk dua platform, tapi yang tampil bukan halaman web. React Native menghasilkan view native, Flutter menggambar dengan engine-nya sendiri.
Jadi beda utama native dan hybrid: native memakai bahasa platform, hybrid memakai teknologi web di dalam container native. Cross-platform cocok saat kamu harus merilis ke Android dan iOS dengan satu kode dan budget terbatas. Native lebih tepat untuk grafis game yang berat atau fitur hardware terbaru.
Tabel keputusan untuk aplikasi Bu Rini
Kebutuhan aplikasinya: timnya satu web developer yang bisa React, aplikasinya harus ada di App Store dan Play Store, ada notifikasi push "Siap diambil" di iPhone, scan nota dengan kamera, daftar order yang terasa seperti aplikasi bawaan, dan perbaikan kecil bisa sampai ke pelanggan tanpa menunggu review store.
| Kebutuhan | Native | React Native | Flutter | Capacitor | PWA |
|---|---|---|---|---|---|
| Tanpa bahasa baru untuk tim React | tidak (Swift dan Kotlin) | ya | tidak (Dart) | ya | ya |
| Ada di App Store dan Play Store | ya | ya | ya | ya | tidak, dipasang dari browser |
| Push "Siap diambil" di iPhone | ya | ya | ya | ya, lewat plugin | cuma kalau dipasang ke layar utama (iOS 16.4 ke atas) |
| Kamera untuk scan nota | ya | ya, lewat library | ya | ya, lewat plugin | bisa, lebih terbatas |
| Daftar dari view bawaan platform | ya | ya | tidak, digambar sendiri | tidak, elemen web | tidak, elemen web |
| Perbaikan JS tanpa review store | tidak | ya, EAS Update | lewat pihak ketiga (Shorebird) | lewat pihak ketiga (misalnya Capgo) | ya, tinggal deploy |
- Coret yang "tidak" di baris yang wajib. Native gugur di baris pertama, PWA di baris kedua, Flutter di baris pertama.
- Capacitor lolos hampir semua, tapi daftarnya elemen web. Kalau "terasa seperti aplikasi bawaan" wajib, yang tersisa React Native. Itu sebabnya track ini memakai React Native, lewat Expo.
- Tabel ini milik aplikasi Bu Rini. Tim lain dengan kebutuhan lain bisa sampai di jawaban lain, dan itu wajar.
Performa dan New Architecture React Native
Untuk daftar order dan form, kelima pendekatan cukup cepat di HP zaman sekarang. Bedanya terasa di animasi berat, list ribuan baris, dan HP Android murah. Native gak punya lapisan tambahan. Flutter mengompilasi Dart ke kode mesin dan menggambar sendiri. WebView menjalankan engine browser, jadi animasi berat lebih gampang patah-patah.
React Native menjalankan JavaScript di engine Hermes, dan UI-nya view native. Cara JavaScript bicara dengan sisi native diganti sejak New Architecture:
- Dulu (bridge): tiap panggilan dari JavaScript ke native diubah jadi pesan, diantrikan, lalu diproses secara asinkron di seberang.
- JSI (JavaScript Interface): JavaScript bisa memanggil kode C++ langsung dan sinkron, tanpa antrean pesan.
- TurboModules: modul native (misalnya kamera) dimuat baru saat dipakai, dengan kontrak bertipe dari Codegen.
- Fabric: renderer baru yang bisa mengukur layout secara sinkron dan mendukung fitur concurrent React.
New Architecture jadi default sejak React Native 0.76 (Oktober 2024), dan sejak 0.82 (Oktober 2025) jadi satu-satunya arsitektur: newArchEnabled=false diabaikan.
Update tanpa store
Aplikasi native di-update lewat store: build baru, kirim ke review, lalu pelanggan meng-update. Review Apple biasanya selesai 50% dalam 24 jam dan 90% dalam 48 jam. Google Play bilang review bisa sampai 7 hari, kadang lebih.
React Native punya jalan lain untuk perubahan JavaScript: OTA update (over the air), di Expo namanya EAS Update.
eas update --channel production --message "Perbaiki total harga" --environment production
- Yang terkirim: JavaScript, style, dan gambar baru untuk build yang sudah terpasang.
- Yang gak bisa: kode native. Library baru yang punya kode native, izin kamera baru, atau versi SDK baru tetap butuh build baru dan review.
- Bawaannya, aplikasi mengecek update saat dibuka (
checkAutomatically: ON_LOAD), tapifallbackToCacheTimeoutbernilai0: aplikasi langsung jalan dengan versi yang sudah ada, update diunduh di belakang, lalu dipakai di pembukaan berikutnya.
| Waktu | Yang terjadi di HP Mbak Wulan |
|---|---|
| 10.00 | kamu menjalankan eas update, Rp 14.000 sudah di server |
| 10.10 | Mbak Wulan membuka aplikasi: masih Rp 1.400, update diunduh di belakang |
| 13.00 | Mbak Wulan membuka aplikasinya lagi: Rp 14.000 |
Jadi 10 menit kemudian dia masih melihat Rp 1.400. Angka yang benar muncul di pembukaan berikutnya, tanpa review store. Itu jawaban tebakannya.
Aturan store tetap berlaku. Pedoman App Store 2.5.2 melarang mengunduh kode yang "introduces or changes features or functionality", dan perjanjian lisensi developer Apple membolehkan kode yang diinterpretasi (seperti JavaScript) asal gak mengubah tujuan utama aplikasi. Google Play melarang aplikasi meng-update dirinya di luar Play, kecuali kode yang jalan di interpreter seperti JavaScript. Jadi pakai OTA untuk perbaikan bug, dan kirim fitur baru lewat review.
⚠️ Jebakan yang sering ketemu
- Memilih native "biar performanya terbaik" untuk aplikasi daftar dan form. Kamu membayar dua kode untuk selisih yang gak terasa pelanggan. Ukur dulu kebutuhannya.
- Mengira OTA bisa mengirim apa saja. Perubahan native butuh build baru, dan fitur baru sebaiknya lewat review. OTA itu untuk perbaikan JavaScript.
- Mengira update langsung tampil. Dengan pengaturan bawaan, update dipakai di pembukaan berikutnya. Jangan bilang ke pelanggan "sudah diperbaiki" sebelum mereka membuka ulang aplikasinya.
- Menganggap New Architecture masih bisa dimatikan. Sejak React Native 0.82 cuma ada satu arsitektur. Library yang belum mendukungnya gak bisa dipakai.
TL;DR: Native memakai bahasa platform (Swift, Kotlin) dan berarti dua kode. Hybrid menjalankan teknologi web di dalam container native (WebView, misalnya Capacitor). Cross-platform memakai satu kode untuk Android dan iOS, cocok saat budget terbatas: React Native lewat view native, Flutter lewat engine sendiri. Untuk Bu Rini (tim React, wajib di store, terasa seperti aplikasi bawaan, perbaikan cepat), yang tersisa React Native. New Architecture (JSI, TurboModules, Fabric) default sejak 0.76 dan satu-satunya sejak 0.82. Review Apple biasanya di bawah 48 jam, Google Play bisa sampai 7 hari. EAS Update mengirim perubahan JavaScript tanpa review, dipakai di pembukaan berikutnya, dan gak bisa mengubah kode native.
