0Pricing
React Academy · Pelajaran

Konsep Micro-Frontend & Pertimbangannya

Pahami alasan tim mengadopsi micro-frontend serta pendekatan pemisahan saat runtime dan saat build.

Konsep Micro-Frontend & Pertimbangannya adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Mikro-Frontend?

Mikro-frontend memperluas layanan mikro ke lapisan antarmuka pengguna. Satu aplikasi web dibagi menjadi beberapa bagian antarmuka depan yang dimiliki, dikembangkan, dan diterapkan secara independen oleh tim yang berbeda.

Strategi Integrasi

Ada tiga strategi integrasi utama: saat pembangunan (paket npm), sisi server (komposisi di tepi jaringan), dan saat berjalan (Module Federation, bingkai sebaris, komponen web).

Integrasi Saat Pembangunan

Publikasikan komponen bersama sebagai paket npm. Sederhana, tetapi setiap perubahan memerlukan penerbitan ulang dan penerapan ulang semua pengguna — bukan penerapan yang benar-benar independen.

// Team A publishes:
npm publish @company/design-system

// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independent

Integrasi Saat Berjalan melalui Module Federation

Module Federation pada Webpack 5 memungkinkan satu aplikasi (induk) memuat komponen dari aplikasi lain (jarak jauh) saat berjalan — penerapan yang benar-benar independen.

Integrasi Bingkai Sebaris

Sisipkan mikro-frontend dalam bingkai sebaris untuk isolasi maksimal. Kelebihan: tidak ada konflik CSS/JS. Kekurangan: pengalaman pengguna buruk (pengguliran, fokus, ukuran), sulit berbagi status, dan tidak ramah SEO.

Komponen Web

Bungkus setiap mikro-frontend dalam elemen khusus. Cara ini bekerja dengan kerangka kerja apa pun dan menyediakan isolasi bawaan, tetapi tidak memiliki fitur khusus React seperti berbagi konteks.

// Remote team builds:
customElements.define('product-detail', ProductDetailElement);

// Host team embeds:
<product-detail product-id="123" />

Kompromi: Manfaat

Penerapan independen (menerapkan antarmuka pengguna satu tim tanpa menyentuh tim lain), otonomi tim (memilih tumpukan teknologi dan dependensi sendiri), serta skalabilitas (tim bekerja secara paralel tanpa konflik kode).

Kompromi: Biaya

Kompleksitas operasional (lebih banyak repositori, alur CI, dan penerapan), duplikasi bundel (React dimuat berkali-kali tanpa berbagi), beban performa, serta proses debug yang lebih sulit di antara batas-batas sistem.

Kapan Memilih Mikro-Frontend

Mikro-frontend paling bermanfaat untuk: beberapa tim besar yang mengerjakan produk yang sama, tumpukan teknologi berbeda untuk bagian yang berbeda, atau kebutuhan untuk menerapkan setiap bagian secara sepenuhnya independen.

Kapan TIDAK Memilih Mikro-Frontend

Hindari mikro-frontend untuk tim kecil (beban tambahannya lebih besar daripada manfaatnya), aplikasi sederhana, atau saat Anda memiliki kendali penuh atas seluruh antarmuka depan — monorepo dengan Nx/Turborepo biasanya sudah memadai.

Sistem Desain Bersama

Terlepas dari strategi integrasi, sistem desain bersama (dipublikasikan sebagai paket atau diekspos melalui Module Federation) memastikan konsistensi visual di seluruh mikro-frontend.

Pemeriksaan Singkat

Pendekatan integrasi apa yang memungkinkan penerapan mikro-frontend yang benar-benar independen saat berjalan?

Ringkasan

Mikro-frontend menguraikan antarmuka pengguna untuk mendukung otonomi tim dan penerapan independen. Pilihan integrasinya berkisar dari paket npm (sederhana, tetapi tidak independen) hingga Module Federation (saat berjalan dan benar-benar independen). Pertimbangkan biaya operasionalnya — mikro-frontend cocok untuk produk besar dengan banyak tim, tetapi menambah kompleksitas pada proyek yang lebih kecil.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Konsep Micro-Frontend & Pertimbangannya” gratis?

Ya — teks lengkap “Konsep Micro-Frontend & Pertimbangannya” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Konsep Micro-Frontend & Pertimbangannya”?

Pahami alasan tim mengadopsi micro-frontend serta pendekatan pemisahan saat runtime dan saat build. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Konsep Micro-Frontend & Pertimbangannya” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Konsep Micro-Frontend & Pertimbangannya
  2. Module Federation dengan Webpack 5
  3. Status Bersama & Perutean Antar-MFE
  4. Penerapan Mandiri & Pipeline CI untuk MFE
← Kembali ke React Academy