Angular Academy · Pelajaran

Arsitektur Mikro Frontend

Pisahkan aplikasi menjadi unit yang dapat diterapkan secara mandiri.

Arsitektur Mikro Frontend adalah pelajaran Angular 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa Itu Micro Frontend

Micro frontend memperluas gagasan microservice ke UI: aplikasi web besar dipecah menjadi bagian-bagian yang dikembangkan, diuji, dan diterapkan secara independen. Setiap bagian dimiliki oleh tim yang berbeda dan digabungkan menjadi satu pengalaman saat runtime.

Masalah yang Diselesaikannya

Satu aplikasi Angular raksasa ("frontend monolitik") mengikat setiap tim pada satu rangkaian rilis, satu build, dan satu penerapan. Seiring bertambahnya jumlah tim, semuanya menjadi lebih lambat. Micro frontend memungkinkan tim merilis sesuai jadwal masing-masing.

Artefak yang Dapat Diterapkan Secara Independen

Sifat utamanya adalah kemampuan penerapan independen: tim pembayaran dapat menerapkan alur pembayaran baru tanpa membangun ulang atau menerapkan ulang katalog produk. Setiap remote adalah artefak terpisah di balik pipeline-nya sendiri.

Host dan Remote

Secara arsitektural, terdapat host (shell) yang memuat satu atau beberapa remote. Shell menangani perutean tingkat atas dan tata letak; remote menyediakan area fitur yang dimuat sesuai kebutuhan.

// conceptually
host  -> loads -> remote: catalog
        -> loads -> remote: checkout
        -> loads -> remote: account

Strategi Komposisi

Remote dapat digabungkan saat build, di server (SSI/edge), atau saat runtime di peramban. Komposisi saat runtime dengan Module Federation adalah yang paling umum untuk Angular karena mempertahankan penerapan independen.

Module Federation dalam Satu Kalimat

Module Federation memungkinkan satu aplikasi yang telah dibangun mengekspos modul yang dimuat aplikasi lain melalui HTTP saat runtime, sambil berbagi pustaka umum agar tidak diduplikasi. Teknologi ini menjadi mesin di balik sebagian besar micro frontend Angular.

Kemandirian Tim dan Batasan

Setiap micro frontend sebaiknya mewakili domain bisnis yang jelas (katalog, pembayaran, akun). Batasan domain yang bersih meminimalkan ketergantungan lintas tim, yang merupakan tujuan utamanya. Hal-hal bersama (autentikasi, sistem desain) menjadi kontrak yang eksplisit.

Biayanya

Micro frontend menambah kompleksitas nyata: ketidaksesuaian versi antarremote, dependensi yang terduplikasi jika salah konfigurasi, penelusuran kesalahan yang lebih sulit di sepanjang batasan, dan kegagalan pemuatan saat runtime. Gunakan hanya jika skala tim membenarkan biaya tambahannya.

Kapan TIDAK Menggunakannya

Untuk tim kecil atau satu produk, monolit yang terstruktur dengan baik dan rute yang dimuat secara malas lebih sederhana dan cepat. Micro frontend bermanfaat ketika beberapa tim perlu menerapkan perubahan secara independen ke aplikasi yang sama.

Tampilan dan Nuansa yang Selaras

Untuk menghindari UI Frankenstein, tim menggunakan pustaka sistem desain dan gaya global secara bersama. Konsistensi adalah kontrak yang disengaja, bukan kebetulan, karena setiap remote dibangun secara terpisah.

Pertimbangan Khusus Angular

Remote Angular harus berbagi satu salinan framework Angular saat runtime; memuat dua versi Angular akan merusak injeksi dependensi dan memperbesar bundel. Peralatan seperti Native Federation mengelola pembagian ini untuk Anda.

Pemeriksaan Singkat

Apa manfaat utama micro frontend?

Ringkasan

Micro frontend memecah aplikasi besar menjadi remote yang dapat diterapkan secara independen dan dimuat oleh shell host, serta dipetakan ke domain bisnis. Komposisi saat runtime melalui Module Federation merupakan standar untuk Angular, yang harus berbagi satu salinan framework. Teknologi ini mengatasi ketergantungan pada skala tim, tetapi menambah biaya operasional yang nyata.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Arsitektur Mikro Frontend” gratis?

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

Apa yang akan aku pelajari di “Arsitektur Mikro Frontend”?

Pisahkan aplikasi menjadi unit yang dapat diterapkan secara mandiri. Kamu berlatih Angular 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 Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular 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 “Arsitektur Mikro Frontend” 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 Angular Academy ini?

Ya. Setiap pelajaran Angular 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

← Kembali ke Angular Academy