Interaktivitas silang menggunakan acara - AWS Bimbingan Preskriptif

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Interaktivitas silang menggunakan acara

Dalam beberapa skenario, beberapa frontend mikro mungkin perlu berinteraksi satu sama lain untuk bereaksi terhadap perubahan status atau tindakan pengguna. Misalnya, beberapa frontend mikro pada halaman dapat menyertakan menu yang dapat dilipat. Menu muncul ketika pengguna memilih tombol. Menu disembunyikan ketika pengguna mengklik di tempat lain, termasuk menu lain yang dirender dalam micro-frontend yang berbeda.

Secara teknis, pustaka negara bersama seperti Redux dapat digunakan oleh beberapa frontend mikro dan dikoordinasikan oleh shell. Namun, itu menciptakan kopling yang signifikan antara aplikasi, menghasilkan kode yang lebih sulit untuk diuji, dan mungkin memperlambat kinerja selama rendering.

Salah satu pendekatan yang umum dan efektif adalah mengembangkan bus acara yang didistribusikan sebagai perpustakaan, diatur oleh shell aplikasi, dan digunakan oleh beberapa mikro-frontend. Dengan cara ini, setiap mikro-frontend menerbitkan dan mendengarkan peristiwa tertentu secara asinkron, mendasarkan perilakunya pada keadaan internalnya sendiri saja. Kemudian, beberapa tim dapat memelihara halaman wiki bersama yang menjelaskan peristiwa dan perilaku dokumen yang telah disepakati oleh desainer pengalaman pengguna.

Dalam implementasi contoh event-bus, komponen dropdown menggunakan bus bersama untuk mempublikasikan acara yang dipanggil drop-down-open-menu dengan muatan. {"id": "homepage-aboutus-button"} Komponen menambahkan pendengar ke drop-down-open-menu acara untuk memastikan bahwa jika suatu peristiwa diaktifkan untuk ID baru, komponen dropdown dirender untuk menyembunyikan bagian yang dapat dilipat. Dengan cara ini, mikro-frontend dapat bereaksi terhadap perubahan secara asinkron dengan peningkatan kinerja dan enkapsulasi yang lebih baik, memudahkan banyak tim untuk merancang dan menguji perilaku.

Kami merekomendasikan penggunaan standar yang APIs diterapkan secara native oleh browser modern untuk meningkatkan kesederhanaan dan pemeliharaan. Referensi MDN Event memberikan informasi tentang penggunaan peristiwa dengan aplikasi yang diberikan sisi klien.