Apa itu Micro-Frontends? Memecah Website Raksasa Menjadi Kepingan

Bencana Aplikasi React Raksasa (Monolith Frontend)

Jika kamu bekerja di perusahaan *E-Commerce* raksasa, proyek React-mu (Frontend) pasti akan menjadi monster. Di dalam satu folder Repository, ada kode untuk halaman Beranda, Keranjang Belanja, Dasbor Mitra Penjual, dan Laporan Keuangan.

Bayangkan ada 50 *Frontend Developer* yang melakukan Pull Request setiap hari ke dalam proyek raksasa tersebut. Waktu Build (*Compile* Webpack/Vite) bisa memakan waktu 30 menit! Jika Tim Keranjang salah menulis titik koma, SELURUH WEBSITE termasuk halaman Beranda akan ikut down. Aplikasi Frontend yang kaku ini disebut Frontend Monolith.

Revolusi Micro-Frontends (MFE)

Melihat kesuksesan *Backend* yang memecah aplikasinya menjadi Microservices, para *Architect Frontend* menirunya dan menciptakan Micro-Frontends.

Idenya sangat revolusioner: Kita memecah satu website besar menjadi beberapa "Mini-Aplikasi" yang benar-benar independen dan berdiri sendiri.

• Tim A (Tim Beranda): Membangun aplikasi Beranda menggunakan Next.js, punya Repository sendiri, dan di-deploy di *Server* A.
• Tim B (Tim Keranjang): Membangun aplikasi Keranjang Belanja menggunakan Vue.js, deploy di *Server* B.

Bagaimana Cara Menyatukannya di Layar Browser?

Di mata pengunjung, mereka hanya membuka URL toko.com. Mereka melihat Header, Beranda, dan Ikon Keranjang di pojok kanan atas secara menyatu sempurna. Bagaimana kepingan beda *server* ini bisa bersatu?

Jawabannya ada pada teknologi Webpack Module Federation (atau fitur sejenisnya). Aplikasi Utama (disebut Host Shell) akan memuat kerangka dasar. Saat Browser mencapai bagian kanan atas layar, Aplikasi Utama akan "Memanggil secara Live" (*Remote Fetching*) kode JavaScript milik Aplikasi Keranjang dari Server B, dan langsung menempelkannya (menginjeksinya) ke dalam DOM.

Kelebihan Arsitektur Tingkat Dewa Ini

1. Teknologi Bebas: Tim A bebas memakai React versi 18, sementara Tim B masih memakai React 16. Mereka tidak akan saling bentrok!
2. Deploy Sendiri-Sendiri (Independent Release): Jika Tim Keranjang ingin merilis warna tombol baru, mereka cukup men-deploy *Server* B. Tampilan ikon keranjang di website toko.com akan otomatis berubah tanpa perlu me-restart seluruh *website* utama! Arsitektur inilah yang digunakan oleh Spotify, Netflix, dan IKEA masa kini.