kumparan
search-gray
Opini & Cerita26 Juni 2019 22:27

Kupas Tuntas Arsitektur Baru React Native-Codegen

Konten kiriman user
Kupas Tuntas Arsitektur Baru React Native-Codegen (13188)
Dalam seri Kupas Tuntas Arsitektur Baru React Native saya akan memberikan ikhtisar tentang elemen-elemen utama yang akan membentuk struktur baru pada React Native.
ADVERTISEMENT

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
Kupas Tuntas Arsitektur Baru React Native-Codegen (13189)
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.
ADVERTISEMENT
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.
ADVERTISEMENT
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.

Manfaat terbesar dari Codegen bukan hanya type-safety, tetapi juga compile time type-safety. Hal ini memungkinkan kode dari kedua dunia dapat saling percaya dan berkomunikasi tanpa adanya pemeriksaan saat runtime, yang berdampak pada ukuran kode yang lebih kecil dan eksekusi yang lebih cepat (lebih sedikit kode untuk dimuat dan lebih sedikit kode untuk dieksekusi). Valentin Shergin Anggota Tim React Native Core di Facebook

ADVERTISEMENT
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.
ADVERTISEMENT
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

  • Fabric: Arsitektur ulang lapisan antar muka React Native.
  • TurboModules: arsitektur ulang NativeModules, juga menggunakan JSI.
  • JSI: JavaScript Interface, ini adalah API ringan terpadu untuk (secara teoritis) mesin virtual JavaScript apa pun.

Material Pendukung

Tulisan ini adalah kiriman dari user, isi tulisan ini sepenuhnya menjadi tanggung jawab penulis. Laporkan tulisan
sosmed-whatsapp-white
sosmed-facebook-white
sosmed-twitter-white
sosmed-line-white