React Native dibundel dengan beberapa keunggulan seperti dukungan lintas platform, pembaruan OTA, pemuatan ulang langsung, efisiensi biaya, dll. Namun hambatan terbesar dalam penskalaan aplikasi react native adalah kinerja saat Anda menambahkan lebih banyak modul, saat aplikasi menjadi intensif data atau saat ada banyak lintasan yang diperlukan di atas jembatan.

Tapi bagaimana arsitektur saat ini bekerja?

Bereaksi Arsitektur asli bergantung pada tiga utas: a) Utas UI: Ini adalah utas aplikasi utama yang digunakan untuk merender tampilan Android dan iOS. b) Utas bayangan: Ini adalah semacam utas latar belakang yang menghitung tata letak elemen (menggunakan Yoga ) sebelum merender pada platform host. c) Utas JS: JS yang dibundel yang bertanggung jawab untuk menangani semua logika dalam aplikasi asli reaksi Anda.

Interaksi antara utas ini tidak langsung dan setiap kali satu utas perlu berinteraksi dengan utas lainnya, ia harus melalui tugas berat serialisasi dan deserialisasi data ke JSON untuk melewati jembatan. Ini menghasilkan salinan data yang tidak perlu dan jembatan ini dapat dengan mudah dilewati karena operasinya asinkron dan tidak ada pengetikan yang ketat.

Beberapa batasan arsitektur saat ini:
1. Javascript dan sisi asli tidak mengetahui satu sama lain dan bergantung pada pesan JSON asinkron.
2. Semua modul memuat saat startup yang meningkatkan waktu interaksi.
3. Tidak ada prioritas tindakan: Interaksi pengguna yang penting tidak dapat diprioritaskan di atas tindakan lainnya.
4. Serialisasi jembatan
5. Elemen UI tidak dapat diakses langsung dari utas JS.

Memperkenalkan JSI

JSI membawa perubahan besar dalam cara javascript dan bagian asli berinteraksi. Ini menyediakan komunikasi langsung antara dua ranah dengan bantuan antarmuka antara JS dan C++. Menggunakan Antarmuka JavaScript, JS dapat menyimpan referensi ke objek host dan memanggil metode pada mereka. Dengan bantuan objek host kita sekarang dapat menggunakan objek asli dalam konteks javascript. Jembatan yang merupakan kemacetan terbesar dibagi menjadi beberapa bagian:

Kain

Sistem rendering baru yang dibuat oleh Facebook yang merupakan arsitektur ulang dari pengelola UI. Perender ini diimplementasikan dalam C++ dan intinya dibagi di antara platform. Dalam pembuatan tata letak implementasi sebelumnya melibatkan beberapa langkah seperti serialisasi JSON dan melompat melintasi jembatan yang memiliki masalah besar ketika jembatan diblokir misalnya: Frame turun saat menggulir daftar yang tak terbatas. Implementasi baru memungkinkan manajer UI untuk membuat Pohon Bayangan secara langsung di C++, yang sangat meningkatkan pengalaman dengan mengurangi jumlah lompatan melintasi alam. Operasinya sinkron dan thread-safe yang dijalankan dari React (JavaScript) ke dalam renderer (C++), biasanya di thread JavaScript. Ini juga melibatkan lebih sedikit serialisasi data karena nilai javascript dapat langsung diambil dari JSI. Kontrol langsung ini juga membantu memprioritaskan tindakan, perender sekarang dapat memprioritaskan interaksi pengguna tertentu untuk memastikan mereka ditangani tepat waktu. Ini akan sangat meningkatkan kinerja dalam daftar, navigasi, dan penanganan isyarat.

Modul Turbo

Dalam implementasi sebelumnya, kami tidak memiliki referensi ke modul asli sehingga setiap modul dimuat saat startup yang meningkatkan TTI (Waktu untuk Interaktif) tetapi dengan modul turbo kami dapat memuat modul secara malas jika diperlukan yang akan membantu dalam meningkatkan waktu startup. Misalnya: Jika Anda memiliki modul untuk mencetak dokumen dari tautan, kami sekarang dapat memuat modul ini saat kami mendarat di layar cetak dan bukan saat memulai aplikasi yang sedang dilakukan di arsitektur sebelumnya. Kemampuan untuk menulis modul dalam C++ juga menambah keuntungan karena mengurangi implementasi duplikat di seluruh platform.

Kodegen

Untuk merekatkan semua ini bersama-sama dan membuat tim React Native yang kompatibel dengan kedua ranah membuat pemeriksa tipe untuk mengotomatiskan kompatibilitas antara sisi JS dan Native. Alat ini disebut Codegen. Ini menggunakan pendekatan modular, yang berarti bahasa Javascript yang diketik secara statis dapat didukung dengan menggunakan parser untuk sistem itu. Dengan menggunakan JavaScript yang diketik sebagai sumber kebenaran, generator ini dapat menentukan file antarmuka yang dibutuhkan oleh Fabric dan TurboModules untuk mengirim pesan ke seluruh dunia dengan percaya diri. Codegen juga menyediakan keamanan jenis waktu kompilasi yang berarti kedua lingkungan dapat mengeksekusi perintah tanpa pemeriksaan runtime yang berarti ukuran kode yang lebih kecil untuk dikirimkan dan eksekusi yang lebih cepat.
Karena sekarang kami memiliki kode C++ dan C++ diketik dengan kuat, kami memaksa kode JS kami untuk diketik, karena kami harus menentukan jenis dan tidak dapat menulis di mana pun dalam kode. Ini pada dasarnya membuat antarmuka untuk Anda dan sekarang karena dibuat dan berada di C ++, sekarang kami pada dasarnya dapat mempercayai data yang dikirim dan kami tidak perlu bolak-balik memverifikasi data. Ini juga berarti bahwa dengan menggunakan pemeriksaan tipe, kami dapat dengan mudah mengidentifikasi masalah selama fase pengembangan yang dapat mengakibatkan crash fatal atau pengalaman pengguna yang buruk.

Beberapa keunggulan utama JSI

1. Kode Javascript dapat menyimpan referensi ke elemen UI Asli apa pun dan memanggil metode di atasnya (Mirip dengan manipulasi DOM di Web)
2. Pengikatan cepat dan langsung ke kode asli yang dapat sangat meningkatkan kinerja, misalnya MMKV menggunakan JSI yang ~30x lebih cepat daripada Asyncstorage.
3. Mesin selain JavaScript Core dapat digunakan.
4. Native Module dapat dimuat saat dibutuhkan.
5. Pemeriksaan tipe statis untuk membuat kode JS dan Native kompatibel.

Bereaksi JSI asli saat ini sedang dalam fase peluncuran eksperimental dan karena lebih banyak proyek mengadopsi perubahan ini, kita akan mengetahui lebih banyak tentang batasan dan dampak dari arsitektur baru, tetapi satu hal yang pasti adalah masa depan pengembangan aplikasi reaksi asli dan lintas platform sepertinya mengasyikkan.