- React Native versi 0.76 telah dirilis ke npm. Versi ini menyertakan arsitektur baru secara default dan mendukung sepenuhnya fitur-fitur React terbaru.
- Arsitektur baru ini mendukung fitur seperti Suspense, Transitions, automatic batching, dan
useLayoutEffect, serta memperkenalkan sistem native module dan komponen yang baru sehingga memungkinkan penulisan kode yang type-safe.
- Ini merupakan hasil dari penulisan ulang React Native secara fundamental sejak 2018, dan dirancang agar sebagian besar aplikasi dapat beralih ke arsitektur baru secara bertahap.
- React Native 0.76 dapat diadopsi oleh sebagian besar aplikasi dengan tingkat usaha yang setara dengan rilis sebelumnya, dan library populer sudah mendukung arsitektur baru ini.
Apa itu arsitektur baru?
- Arsitektur baru adalah penulisan ulang total sistem-sistem utama React Native, termasuk rendering komponen, komunikasi antara JavaScript dan abstraksi native, serta cara penjadwalan pekerjaan antar-thread.
- Arsitektur sebelumnya berkomunikasi dengan platform native melalui bridge asinkron, tetapi arsitektur baru dirancang untuk mendukung update sinkron maupun asinkron.
- Arsitektur baru terdiri dari empat bagian utama: sistem native module baru, renderer baru, event loop, dan penghapusan bridge.
Native module baru
- Ditulis dalam C++ untuk menyediakan kemampuan baru
- Memungkinkan komunikasi sinkron dengan runtime native
- Menyediakan type safety antara JavaScript dan kode native
- Memungkinkan berbagi kode lintas platform
- Menyediakan lazy module loading secara default
- Seluruh kemampuan implementasi native C++ dapat dimanfaatkan dari API JavaScript/TypeScript
- Kontrak tipe yang kuat dapat didefinisikan dengan Codegen
- Module hanya dimuat ke memori saat dibutuhkan, sehingga mempercepat waktu startup aplikasi
Renderer baru
- Ditulis ulang dalam C++ dan memberikan keuntungan berikut:
- Dapat merender update dengan prioritas berbeda di thread yang berbeda
- Dapat membaca layout secara sinkron dari thread lain
- Kode C++ yang dibagikan di semua platform
- Kini hierarki view disimpan dalam struktur tree yang immutable
- Memungkinkan penanganan update yang thread-safe
- Memungkinkan penanganan beberapa tree yang sedang berjalan untuk merepresentasikan versi antarmuka pengguna yang berbeda
- Dapat menghentikan update berprioritas rendah, merender hal yang mendesak seperti input pengguna, lalu melanjutkan kembali update berprioritas rendah
Event loop
- Arsitektur baru mengimplementasikan model penanganan event loop yang jelas untuk mengurangi perbedaan antara React DOM dan React Native.
- Mengimplementasikan model pemrosesan event loop yang terdefinisi dengan baik untuk menangani pekerjaan di thread JavaScript
- Event loop menyusun update dan event secara lebih dapat diprediksi, sehingga update berprioritas rendah dapat diinterupsi oleh event pengguna yang mendesak.
- Lebih selaras dengan spesifikasi web
- Akan menjadi fondasi bagi lebih banyak fitur browser di masa depan
Penghapusan bridge
- Arsitektur baru menghapus bridge, sehingga memungkinkan komunikasi yang lebih langsung dan efisien antara JavaScript dan kode native.
- Dengan dihapusnya bridge, waktu startup membaik, crash akibat perilaku yang tidak terdefinisi berkurang, serta pelaporan error dan debugging menjadi lebih mudah.
Fitur baru
- Transitions
- Transitions, konsep baru di React 18, membedakan update yang mendesak dan yang tidak mendesak.
- Update mendesak memerlukan respons langsung, sedangkan update Transition memindahkan UI dari satu view ke view lain.
- Automatic batching mengelompokkan lebih banyak state update bersama-sama untuk menghindari rendering state perantara, sehingga React Native dapat berjalan lebih cepat dan tanpa jeda.
- Arsitektur baru mendukung pembacaan informasi layout secara sinkron dan update UI dalam frame yang sama melalui
useLayoutEffect.
- Arsitektur baru sepenuhnya mendukung Suspense yang diperkenalkan di React 18, untuk menangani status loading dan memberi prioritas tinggi pada input pengguna.
Cara upgrade
- Saat upgrade ke 0.76, sebagian besar aplikasi dapat melakukannya dengan tingkat usaha yang sama seperti rilis lain berkat lapisan interoperabilitas
- Namun, untuk sepenuhnya memanfaatkan New Architecture dan fitur concurrent, custom native module dan komponen perlu dimigrasikan
- Untuk developer aplikasi
- Library, custom native component, dan custom native module perlu di-upgrade agar sepenuhnya mendukung New Architecture
- Sebagian besar library React Native populer telah bekerja sama untuk mendukung New Architecture
- Untuk pengelola library, disarankan memigrasikan library ke API native module dan komponen yang baru
Ringkasan GN⁺
- Peralihan ke New Architecture tampaknya akan menjadi tonggak penting bagi pengembangan React Native. Dukungan untuk update sinkron/asinkron, teratasinya bottleneck bridge, dan kemampuan membaca layout dari thread lain tampak akan membawa banyak peningkatan dari sisi performa dan pengalaman pengguna
- Khususnya, dukungan penuh terhadap fitur Concurrent di React 18 juga sangat layak diperhatikan. Dengan memanfaatkan Suspense dan Transition, UX yang lebih responsif dan alami akan menjadi mungkin
- Namun, aplikasi dan library yang sudah ada kemungkinan tetap memerlukan pekerjaan migrasi agar sepenuhnya mendukung New Architecture. Prosesnya mungkin perlu dilakukan bertahap, tetapi setelah migrasi selesai, manfaat New Architecture dapat dirasakan sepenuhnya
- Arsitektur ini sudah digunakan di aplikasi Facebook dan Instagram milik Meta, dan memiliki contoh sukses seperti Expensify, Kraken, dan BlueSky
- Secara keseluruhan, New Architecture tampak sebagai kemajuan besar untuk masa depan React Native. Diharapkan ini dapat teradopsi dengan baik lewat kerja sama komunitas
6 komentar
Rasanya sudah sangat lama sejak pertama kali saya mendengar React Native. Meski dimulai dari Facebook, tetap mengejutkan bahwa sampai sekarang masih belum mencapai versi 1..
Saya belum pernah memakai RN jadi penasaran, tetapi rasanya seperti akan lebih dioptimalkan untuk Android, jadi cukup mengejutkan bahwa dalam praktiknya performanya justru lebih baik di iOS.
Sepertinya hampir semua crash di pihak kami terjadi di Android.
Di Android, ini benar-benar mengerikan... sampai di tingkat yang mengerikan..
Rasanya belum lama ganti engine ke hermes, eh sekarang dirombak besar lagi ya.
Opini Hacker News
Memiliki pengalaman 4 tahun mengembangkan aplikasi React Native dan API backend; migrasi ke Expo menyelesaikan banyak masalah, tetapi bug masih tetap ada. iOS lebih stabil daripada Android dan performanya juga lebih baik. React Native mudah dipelajari dan memiliki ekosistem JS yang besar sehingga layak direkomendasikan, tetapi saat ini menggunakan Flutter
Ada beragam pendapat tentang React Native; sebagian mengeluhkan Expo dan merekomendasikan Kotlin Multiplatform. Ada juga pendapat bahwa diskusi di Hacker News makin lama makin tidak berarti
Sebagai pengembang Flutter, menganggap Swift UI dan Compose lebih cocok untuk pengembangan mobile, dan tidak akan memakai Flutter maupun React Native saat memulai aplikasi baru
React Native cukup baik di iOS tetapi lambat di Android. Hermes menarik, tetapi masih membutuhkan banyak polyfill. Menantikan hari ketika web menggantikan React Native
Sedang mengembangkan Bluesky dengan Expo/RN, dan dalam pengujian awal terhadap arsitektur baru, performa Android meningkat
Memiliki pengalaman positif menggunakan React Native bersama Expo, dan sebagai pengembang solo, RN memungkinkan banyak hal. Menantikan arsitektur baru
Kecepatan rendering Flutter 5 kali lebih cepat daripada React Native, dan saat menggunakan React di web, kecepatannya lebih tinggi
Melihat tweet bahwa Capacitor berguna untuk melakukan porting aplikasi web NextJS
React Native sudah jauh lebih baik tahun ini, dan ketika react-strict-dom siap, itu akan membawa perubahan besar