Kupas Tuntas Arsitektur Baru React Native-Codegen

Dalam seri Kupas Tuntas Arsitektur Baru React Native saya akan memberikan ikhtisar tentang elemen-elemen utama yang akan membentuk struktur baru pada React Native.

1. Pendahuluan

Sebelum kita menyelam lebih dalam, mari kita tinjau kembali dasar-dasarnya. React Native adalah solusi framework lintas-platform sumber terbuka yang dengan mudah memungkinkan Anda menggunakan React (dan JavaScript) untuk membuat aplikasi seluler lintas-platform yang sepenuhnya "asli". React Native digunakan secara luas, tidak hanya oleh Facebook (yang mengembangkannya dengan bantuan komunitas pengembang lainya), tetapi juga oleh perusahaan perusahaan seperti kumparan, Amazon, Microsoft, dan juga para startup-startup besar di indonesia.

Visualisasi cara kerja React Native

Dok. Penulis - Visualisasi cara kerja react-native sederhana

Seperti yang Anda lihat, ada empat bagian inti dalam arsitektur React Native. Kode React yang Anda tulis (yang sangat mirip dengan rekan webnya ReactJS), JavaScript yang ditafsirkan dari apa yang Anda tulis, serangkaian elemen yang secara kolektif dikenal sebagai "Jembatan" atau Bridge, dan sisi Native.

Aspek kunci dari arsitektur saat ini adalah bahwa kedua ranah, JavaScript dan Native, tidak benar-benar "sadar" antar satu sama lain. Ini berarti bahwa untuk berkomunikasi, mereka bergantung pada pesan JSON asinkron yang dikirim melalui "Jembatan". Pesan-pesan ini dikirim ke sisi native dengan harapan (tetapi bukan jaminan) bahwa mereka akan mendapat respons di masa mendatang.

Arsitektur seperti ini sangat baik pada saat React Native baru saja memulai kiprahnya sebagai framework aplikasi lintas-platform, dan telah melayani React Native dengan baik selama bertahun-tahun. Akan tetapi tim di Facebook ingin memikirkan kembali pendekatan pesan asynchronous ini untuk mengatasi banyak keterbatasannya. Oleh karena itu, mereka sekarang sedang mengerjakan arsitektur baru untuk React Native.

2. Codegen

Tim React Native dalam mengerjakan arsitektur barunya menggandakan keberadaan checker statis (baik Flow atau TypeScript) dalam kode. Secara khusus, mereka sedang mengerjakan alat yang disebut Codegen.

Codegen pada dasarnya adalah sebuah alat untuk "mengotomatisasi" kompatibilitas antara JavaScript dan sisi Native. Dengan menggunakan kode Javascript yang telah diketik secara statis (statically typed) menggunakan Flow atau TypeScript, Codegen dapat menghasilkan file antarmuka yang dibutuhkan oleh Fabric dan TurboModules untuk saling berkomunikasi. Otomatisasi ini juga akan mempercepat komunikasi, karena tidak perlu memvalidasi data lagi setiap saat untuk berkomunikasi.

Sebagai contoh, dalam kasus TurboModules, codegen dapat menghasilkan kelas C ++ yang membungkus kelas Java atau ObjC dan mengekspos metode nya menggunakan objek JSI.

Hal ini akan memastikan bahwa semua panggilan JavaScript memiliki implementasi yang tersedia di sisi native.

Kesimpulannya, Codegen akan menjadi cara baru yang mudah dan "aman" bagi developer React Native dalam membuat suatu native module.

-------

Pembahasan Codegen kali ini mengakhiri bagian pertama dari seri Kupas Tuntas Arsitektur Baru React Native saya. Selama beberapa minggu ke depan saya akan merilis lebih banyak posting yang membahas aspek-aspek lain dari arsitektur baru React Native. Sementara itu, ingatlah untuk membagikan artikel ini dengan sesama pengembang atau jika ada pertanyaan lebih lanjut bisa langsung komen di bawah.

Seperti yang dapat Anda bayangkan, perubahan ini membuka pintu bagi banyak lagi perbaikan di sektor lain. Dan saya berharap mereka memicu kegembiraan terkait bagaimana perubahan ini akan memengaruhi basis kode Anda.

Terminologi

Material Pendukung