Cara Transformasi Aplikasi Monolitik ke Micro-Frontend Angular

Yo, gaes! Pernah nggak sih kalian ngerasa aplikasi Angular kalian makin lama makin "gemuk" gara-gara semua fitur disatuin jadi satu monolit? Pas mau update satu komponen kecil, eh malah bikin build time jadi lama banget dan risiko bug di fitur lain makin gede. Capek banget kan?

Nah, sekarang saatnya kita spill cara migrasi dari monolit ke arsitektur Micro-Frontend (MFE) pake Angular. Kita bakal mecah "monster" monolit jadi bagian-bagian kecil yang independen. Skuy, simak!

Apa Itu Micro-Frontend di Angular?

Bayangin monolit itu kayak satu buku tulis tebal yang isinya semua materi pelajaran. Kalau mau revisi satu bab, harus bongkar seluruh bukunya. MFE itu ibarat pake binder per bab. Mau ganti bab "Profil", tinggal lepas pasang tanpa ganggu bab "Dashboard".

Di dunia Angular, senjata utama kita buat ini adalah Module Federation.

Langkah Praktis Migrasi

1. Setup Module Federation

Kita pake @angular-architects/module-federation. Ini tools dewa buat bikin aplikasi Angular bisa "ngobrol" antar remote dan host.

ng add @angular-architects/module-federation --project shell --port 4200
ng add @angular-architects/module-federation --project dashboard --port 4201

2. Konfigurasi webpack.config.js

Di sisi Host (Shell), kita kasih tau dia buat nge-load remote apps:

// shell/webpack.config.js
new ModuleFederationPlugin({
  remotes: {
    "dashboard": "dashboard@http://localhost:4201/remoteEntry.js",
  },
  shared: { ...shareAll({ singleton: true, strictVersion: true }) }
})

3. Routing ke Micro-Frontend

Di app-routing.module.ts, kita panggil remote aplikasi secara lazy loading:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('dashboard/Module').then(m => m.DashboardModule)
  }
];

Tips Biar Vibes-nya Tetap Aman

• Shared Dependencies: Hati-hati sama library yang di-share (kayak RxJS atau Angular core). Pastikan versinya sama biar nggak crash di browser.
• Komunikasi Antar App: Jangan ketergantungan sama state global yang ribet. Pake EventBus atau Custom Events bawaan browser biar tiap micro-frontend tetap decoupled.
• CI/CD Terpisah: Tiap MFE wajib punya pipeline sendiri. Jadi kalau fitur "Chat" update, nggak perlu nunggu fitur "Payment" di-deploy.

Kenapa Harus Pindah?

1. Build Time: Jauh lebih ngebut karena cuma build bagian yang diubah.
2. Skalabilitas Tim: Tim A bisa fokus di fitur A, Tim B di fitur B, tanpa harus rebutan merge conflict di repo yang sama.
3. Tech Freedom: Secara teori, lu bisa pake framework lain di MFE lain (walaupun tetep disaranin pake Angular semua biar library-nya lebih konsisten).

Kesimpulannya, transisi ke MFE itu emang butuh effort di awal buat ngatur arsitekturnya, tapi long-term benefit-nya bikin hidup developer jauh lebih tenang. Nggak ada lagi drama "deploy satu fitur, rusak seluruh aplikasi".

Skuy, mulai cicil mecah monolit kalian! Ada yang mau ditanyain? Spill di kolom komentar ya!