Komunikasi Frontend Micro-Frontend: Event Bus dan Message Passing

Dalam pengembangan web modern, arsitektur micro-frontend telah muncul sebagai solusi yang kuat untuk membangun aplikasi yang skalabel dan mudah dipelihara. Dengan memecah monolith frontend yang besar menjadi unit-unit yang lebih kecil dan independen, tim dapat bekerja secara otonom, melakukan deployment secara mandiri, dan mengadopsi teknologi yang berbeda untuk setiap micro-frontend. Namun, sifat terdistribusi ini menimbulkan tantangan baru: bagaimana memfasilitasi komunikasi antara komponen-komponen independen ini. Di sinilah teknik event bus dan message passing berperan.

Apa itu Micro-Frontend?

Sebelum membahas strategi komunikasi, mari kita definisikan apa itu micro-frontend. Micro-frontend pada dasarnya adalah aplikasi frontend yang dapat di-deploy dan dipelihara secara mandiri, sering kali dibuat oleh tim yang berbeda. Mereka dapat menggunakan teknologi yang berbeda (misalnya, React, Angular, Vue.js) dan disusun bersama saat runtime, waktu build, atau bahkan saat interaksi pengguna.

Karakteristik utama dari micro-frontend meliputi:

• Deployment Mandiri: Setiap micro-frontend dapat di-deploy tanpa memengaruhi bagian lain dari aplikasi.
• Agnostik Teknologi: Micro-frontend yang berbeda dapat dibangun menggunakan teknologi yang berbeda.
• Tim Otonom: Tim yang berbeda dapat memiliki dan mengembangkan micro-frontend yang berbeda.
• Isolasi Kode: Perubahan pada satu micro-frontend tidak boleh merusak micro-frontend lainnya.

Kebutuhan Komunikasi Antar Micro-Frontend

Meskipun kemandirian adalah keuntungan utama dari micro-frontend, mereka sering kali perlu berkomunikasi satu sama lain. Komunikasi ini dapat terjadi karena berbagai alasan, seperti:

• Berbagi data: Meneruskan data antar micro-frontend (misalnya, informasi profil pengguna, detail produk).
• Memicu aksi: Satu micro-frontend mungkin perlu memicu aksi di micro-frontend lain (misalnya, memperbarui keranjang belanja, menampilkan notifikasi).
• Sinkronisasi state: Menjaga state yang konsisten di berbagai micro-frontend (misalnya, status otentikasi, preferensi pengguna).
• Navigasi dan routing: Mengoordinasikan navigasi antara berbagai bagian aplikasi, yang mungkin ditangani oleh micro-frontend yang berbeda.

Tanpa strategi komunikasi yang terdefinisi dengan baik, micro-frontend dapat menjadi silo yang terisolasi, menghambat pengalaman pengguna dan membuat keseluruhan aplikasi sulit dikelola. Oleh karena itu, sangat penting untuk membangun mekanisme yang andal dan efisien untuk komunikasi antar micro-frontend.

Strategi Komunikasi: Event Bus dan Message Passing

Beberapa pola komunikasi dapat digunakan dalam arsitektur micro-frontend. Postingan ini berfokus pada dua pendekatan yang banyak digunakan: Event Bus dan Message Passing.

1. Event Bus

Pola Event Bus adalah mekanisme publish-subscribe yang memungkinkan micro-frontend berkomunikasi tanpa ketergantungan langsung satu sama lain. Dalam pola ini, micro-frontend mempublikasikan event ke event bus pusat, dan micro-frontend lain berlangganan event tertentu. Ketika sebuah event dipublikasikan, semua pelanggan menerima notifikasi.

Cara kerjanya:

1. Definisi Event: Tentukan serangkaian event yang dapat dipublikasikan dan dilanggani oleh micro-frontend. Event-event ini harus memiliki struktur data (payload) yang terdefinisi dengan baik.
2. Implementasi Event Bus: Implementasikan event bus pusat. Ini bisa berupa objek JavaScript sederhana atau library yang lebih canggih seperti Mitt, rfdc, atau implementasi kustom.
3. Mempublikasikan Event: Micro-frontend mempublikasikan event ke event bus ketika aksi tertentu terjadi.
4. Berlangganan Event: Micro-frontend berlangganan event yang mereka minati. Ketika sebuah event dipublikasikan, event bus memberi tahu para pelanggan, dan mereka dapat menangani event tersebut sesuai kebutuhan.

Contoh (menggunakan Mitt):

            
// Buat sebuah event bus
import mitt from 'mitt';
const emitter = mitt();

// Micro-frontend A (Penerbit)
function publishProductAdded(product) {
  emitter.emit('product:added', product);
}

// Micro-frontend B (Pelanggan)
function handleProductAdded(product) {
  console.log('Product added:', product);
  // Perbarui keranjang belanja, tampilkan notifikasi, dll.
}

emitter.on('product:added', handleProductAdded);

// Penggunaan di Micro-frontend A:
publishProductAdded({ id: 123, name: 'Example Product', price: 19.99 });

            

              
                Copy
              
            
          

Kelebihan Event Bus:

• Keterkaitan Longgar (Loose Coupling): Micro-frontend tidak perlu tahu tentang satu sama lain. Mereka hanya berinteraksi dengan event bus.
• Skalabilitas: Micro-frontend baru dapat dengan mudah ditambahkan tanpa memengaruhi yang sudah ada.
• Fleksibilitas: Micro-frontend dapat secara dinamis berlangganan dan berhenti berlangganan event sesuai kebutuhan.

Kekurangan Event Bus:

• Potensi Tabrakan Event: Jika event tidak didefinisikan dengan baik, ada risiko tabrakan nama. Menerapkan konvensi penamaan yang jelas dan skema event sangat penting.
• Kompleksitas Debugging: Melacak alur event bisa menjadi tantangan, terutama di aplikasi besar. Pertimbangkan untuk menggunakan logging atau alat debugging untuk melacak event.
• Beban Kinerja (Performance Overhead): Publikasi event yang berlebihan dapat memengaruhi kinerja. Optimalkan frekuensi event dan ukuran payload.
• Tidak ada jaminan pengiriman: Event mungkin terlewat jika pelanggan tidak mendengarkan pada saat publikasi.

2. Message Passing

Message Passing melibatkan komunikasi langsung antara micro-frontend menggunakan teknik seperti `window.postMessage`. Ini memungkinkan satu micro-frontend mengirim pesan ke yang lain, menargetkan origin tertentu (domain atau subdomain).

Cara kerjanya:

1. Definisi Pesan: Tentukan struktur pesan yang akan dipertukarkan oleh micro-frontend. Setiap pesan harus memiliki properti `type` untuk mengidentifikasi tujuan pesan dan properti `payload` yang berisi data.
2. Mengirim Pesan: Satu micro-frontend mengirim pesan ke yang lain menggunakan `window.postMessage`. Pesan tersebut mencakup tipe pesan, payload, dan origin target.
3. Menerima Pesan: Micro-frontend penerima mendengarkan event `message` pada objek `window`. Ketika pesan diterima, ia memeriksa origin dan tipe pesan untuk menentukan cara menanganinya.

Contoh:

            
// Micro-frontend A (Pengirim)
function sendMessageToB(message) {
  const targetOrigin = 'https://microfrontend-b.example.com';
  window.postMessage(message, targetOrigin);
}

// Contoh pesan:
const message = {
  type: 'user:updated',
  payload: { id: 1, name: 'John Doe' },
};

// Kirim pesan
sendMessageToB(message);

// Micro-frontend B (Penerima)
window.addEventListener('message', (event) => {
  // Validasi origin untuk mencegah kerentanan keamanan
  if (event.origin !== 'https://microfrontend-a.example.com') {
    return;
  }

  const message = event.data;

  if (message.type === 'user:updated') {
    console.log('User updated:', message.payload);
    // Perbarui profil pengguna, tampilkan notifikasi, dll.
  }
});

            

              
                Copy
              
            
          

Kelebihan Message Passing:

• Komunikasi Langsung: Menyediakan saluran langsung antara micro-frontend, yang bisa lebih efisien untuk kasus penggunaan tertentu.
• Pesan Tertarget: Pesan dikirim ke origin tertentu, mengurangi risiko penerima yang tidak diinginkan.
• Implementasi Sederhana: Relatif mudah diimplementasikan menggunakan API browser bawaan.

Kekurangan Message Passing:

• Keterkaitan Erat (Tight Coupling): Micro-frontend perlu mengetahui origin dari micro-frontend lain yang mereka ajak berkomunikasi.
• Pertimbangan Keamanan: Sangat penting untuk memvalidasi origin pesan yang masuk untuk mencegah kerentanan cross-site scripting (XSS).
• Kompleksitas dalam Skenario Rumit: Mengelola beberapa saluran pesan bisa menjadi rumit seiring bertambahnya jumlah micro-frontend.
• Penanganan Error: Bisa lebih sulit untuk menangani error dan memastikan pengiriman pesan yang andal dibandingkan dengan sistem perpesanan yang lebih kuat.

Memilih Strategi Komunikasi yang Tepat

Pilihan antara Event Bus dan Message Passing bergantung pada kebutuhan spesifik aplikasi Anda. Berikut adalah perbandingan untuk membantu Anda memutuskan:

Pertimbangkan faktor-faktor ini saat membuat keputusan:

• Tingkat Keterkaitan (Coupling): Jika Anda membutuhkan micro-frontend yang longgar keterkaitannya, Event Bus adalah pilihan yang lebih baik. Jika Anda membutuhkan komunikasi langsung antara micro-frontend tertentu, Message Passing mungkin lebih sesuai.
• Kebutuhan Skalabilitas: Jika Anda mengantisipasi jumlah micro-frontend yang besar, Event Bus umumnya lebih skalabel.
• Pertimbangan Keamanan: Kedua pendekatan memerlukan pertimbangan keamanan yang cermat. Pastikan definisi event dan validasi origin yang tepat untuk mencegah kerentanan.
• Toleransi Kompleksitas: Pertimbangkan kompleksitas dalam mengimplementasikan dan memelihara setiap pendekatan. Mulailah dengan solusi paling sederhana yang memenuhi kebutuhan Anda.

Praktik Terbaik untuk Komunikasi Micro-Frontend

Terlepas dari strategi komunikasi yang Anda pilih, mengikuti praktik terbaik ini akan membantu memastikan arsitektur micro-frontend yang kuat dan mudah dipelihara:

• Definisikan Protokol Komunikasi yang Jelas: Buat protokol komunikasi yang jelas dan terdokumentasi dengan baik yang mendefinisikan struktur event atau pesan. Ini akan membantu memastikan konsistensi dan mencegah error.
• Gunakan Versioning: Beri versi pada event atau pesan Anda untuk memastikan kompatibilitas seiring berkembangnya micro-frontend Anda. Ini memungkinkan Anda memperkenalkan perubahan tanpa merusak integrasi yang ada.
• Implementasikan Penanganan Error: Implementasikan mekanisme penanganan error yang kuat untuk menangani kegagalan komunikasi dengan baik. Ini termasuk mencatat error, mencoba kembali upaya yang gagal, dan memberikan umpan balik kepada pengguna.
• Pantau Komunikasi: Pantau komunikasi antara micro-frontend untuk mengidentifikasi hambatan kinerja dan potensi masalah. Gunakan logging dan metrik untuk melacak frekuensi, latensi, dan tingkat error dari event atau pesan.
• Prioritaskan Keamanan: Selalu prioritaskan keamanan saat mengimplementasikan komunikasi micro-frontend. Validasi origin pesan yang masuk, sanitasi data, dan gunakan saluran komunikasi yang aman (misalnya, HTTPS).
• Dokumentasikan Semuanya: Dokumentasikan arsitektur micro-frontend Anda secara menyeluruh, termasuk protokol komunikasi, skema event, dan format pesan. Ini akan membantu memastikan tim Anda dapat memahami dan memelihara sistem seiring waktu.

Strategi Komunikasi Alternatif

Meskipun Event Bus dan Message Passing umum digunakan, berikut adalah pendekatan lain untuk komunikasi micro-frontend:

• Manajemen State Bersama (misalnya, Redux, Vuex): Sebuah store pusat yang dapat diakses oleh semua micro-frontend. Ini memerlukan manajemen yang cermat untuk menghindari konflik.
• Web Components: Menggunakan elemen HTML kustom untuk mengenkapsulasi micro-frontend dan mendefinisikan antarmuka yang jelas.
• Backend for Frontend (BFF): Setiap micro-frontend berkomunikasi dengan layanan backend khususnya sendiri, yang kemudian mengoordinasikan komunikasi.
• Custom Events: Mengirim dan mendengarkan event kustom pada DOM.

Kesimpulan

Komunikasi yang efektif sangat penting untuk arsitektur micro-frontend yang sukses. Dengan memahami kekuatan dan kelemahan dari strategi komunikasi yang berbeda seperti Event Bus dan Message Passing, Anda dapat memilih pendekatan yang tepat untuk kebutuhan spesifik Anda. Ingatlah untuk mengikuti praktik terbaik untuk keamanan, penanganan error, dan dokumentasi untuk memastikan sistem yang kuat dan mudah dipelihara. Seiring lanskap micro-frontend terus berkembang, menjelajahi pola komunikasi alternatif dan tetap mengikuti tren terbaru akan menjadi sangat penting untuk membangun aplikasi web yang skalabel dan mudah beradaptasi. Pertimbangkan audiens global dan kondisi jaringan yang bervariasi saat merancang pola komunikasi, pilihlah pendekatan yang meminimalkan transfer data dan memaksimalkan ketahanan. Implementasikan pemantauan dan peringatan untuk secara proaktif mengidentifikasi dan mengatasi masalah komunikasi yang dapat memengaruhi pengalaman pengguna, terutama di wilayah dengan infrastruktur yang kurang andal.