0 views
Read
#0
Belajar Microfrontend - Pre-Requisites Skill & Setup Environment
Sebelum menyentuh microfrontend, kalian perlu menguasai React/TypeScript, dasar bundler, package manager, dan Git. Di episode ini kalian juga menyiapkan Node.js LTS, pnpm, Vite, dan seluruh tooling Module Federation sebagai fondasi seluruh series.
August 16, 2026
00
Read
#1
Belajar Microfrontend - Sejarah, Latar Belakang & Mengapa Microfrontend
Menelusuri bagaimana frontend monolitik (SPA besar) menjadi penghambat di organisasi besar, ide yang dipinjam dari microservices untuk memecah frontend ke domain-domain, konsep independent deploy & team ownership, hingga mengapa microfrontend penting di 2026 dan contoh adopsi dari Spotify, Zalando, DAZN, dan Marriott.
August 16, 2026
00
Read
#2
Belajar Microfrontend - Konsep Dasar & Arsitektur Utama
Membedah model lapisan host (shell), remotes, dan shared dependencies, tiga strategi integrasi (build-time, run-time, server-side), dua pendekatan utama 2026 yaitu Module Federation 2.0 dan single-spa, serta trade-off dan kapan tidak perlu memakai microfrontend.
August 16, 2026
00
Read
#3
Belajar Microfrontend - Arsitektur Studi Kasus: storefront (Tokoku)
Membangun proyek praktis storefront (Tokoku) sepanjang series: struktur monorepo pnpm dengan shell sebagai host, lima remotes (catalog, product-detail, cart, checkout, account) plus design-system, serta alur development yang menjalankan banyak aplikasi di port berbeda.
August 16, 2026
00
Read
#4
Belajar Microfrontend - Setup Module Federation (Vite) Pertama
Konfigurasi Module Federation pertama di Vite: instalasi plugin, konfigurasi host dev shell, konfigurasi remote catalog, penggunaan singleton untuk react, serta verifikasi pertama bahwa host memuat remote dari port berbeda lewat manifest dan network.
August 16, 2026
00
Read
#5
Belajar Microfrontend - Shared Dependencies & Versioning
Membedah shared dependencies di Module Federation: mengapa react harus singleton, penggunaan requiredVersion untuk mengatasi version skew, type-safe dengan dts, hingga fitur auto-singleton dan tree-shaking shared dependency di Module Federation 2.0.
August 16, 2026
00
Read
#6
Belajar Microfrontend - Routing & Navigasi (Host + Remotes)
Membedah routing dan navigasi di arsitektur microfrontend: host memegang route top-level, remote merender isi halaman, lazy load dengan React.lazy dan Suspense, deep linking dari server, serta pola whitespace prefix untuk menghindari konflik route antara host dan remote.
August 16, 2026
00
Read
#7
Belajar Microfrontend - Global State & Auth (Shared Across Remotes)
Membedah berbagi state global dan auth antar remote: pola event bus dengan CustomEvent, central store di host yang dibagikan via props, sharing auth token yang aman, dan implementasi di storefront dengan package shared-state (zustand).
August 16, 2026
00
Read
#8
Belajar Microfrontend - Design System & Styling Bersama (CSS/JS)
Membangun design system bersama untuk microfrontend: package design-system dengan komponen dan design token, teknik isolasi CSS (prefix, CSS Modules, CSS-in-JS, Web Components), theming dengan CSS variables, versioning semver, dan dokumentasi dengan Storybook.
August 16, 2026
00
Read
#9
Belajar Microfrontend - Dynamic Federation & Runtime Loading
Membedah dynamic federation di Module Federation 2.0: memuat remote tanpa konfigurasi build-time via loadRemote, paket runtime-only, manifest-based loading untuk produksi, fallback dengan errorLoadRemote dan ErrorBoundary, serta progressive enhancement.
August 16, 2026
00