Federasi yang tak kami bangun
Tampilan pangaea.id semuanya lahir dari satu sistem rv-* — tapi terkurung di dalam satu app. Kami
ingin membagikannya. Cara yang menggoda adalah yang paling keren; kami merilis yang paling
membosankan. Ini alasannya — dan apa yang ingin kami sampaikan ke diri kami di hari pertama.
Jalan yang menggoda
"Bagikan UI antar-surface" nyaris selalu menuntun ke satu jawaban seksi:
micro-frontendⓘ dengan module
federationⓘ — tiap komponen jadi remote yang di-load host saat runtime, dengan resolver
ber-semver di tengah. Kami menghabiskan waktu menekan ide ini: runtime vs server-side, remote
ber-gate versi, DIY versions.json + maxSatisfying, sampai Zephyr Cloud.
Keputusannya
Kami tak butuh itu — belum, mungkin tak akan pernah. Yang kami butuh cuma UI yang bisa dipakai ulang
dan ber-versi. Jadi kami merilis yang membosankan: satu monorepoⓘ berisi
satu paket ber-versi per komponen (@labspangaea/ds-button, ds-card, …), plus katalog live di
ui.pangaea.id.
Module federation runtime
- Remote di-load host saat runtime (client-side)
- Crawler melihat halaman kosong
- Butuh resolver di sebuah server
- Berbenturan dengan CSP + deploy statis
Monorepo paket ber-versi
- Komponen di-import saat build, di-prerender
- Crawler & answer engine membaca semuanya
- Tanpa server, tanpa runtime tambahan
- Tiap komponen naik versi sendiri-sendiri
Yang menyenangkan: monorepo per-komponen sudah ~90% siap federasi. React sebagai peer dependency, tiap paket ESM terisolasi dengan CSS-nya sendiri, token dipisah jadi paket sendiri. Kalau suatu hari sebuah komponen benar-benar butuh di-federasi, itu tinggal ditambahkan — tanpa menulis ulang. Pintunya kami biarkan terbuka dengan biaya nyaris nol; mesinnya tak kami bangun (YAGNIⓘ).
Arsitektur yang seksi biasanya masalah distribusi yang menyamar. Rilis yang membosankan, asal pintunya tetap terbuka.
Bonus: rilis dari 2 PR jadi 1
Rilis pertama kali menuntut dua merge manual: PR kode Anda, lalu Version PR yang menaikkan versi. Merge kedua itu yang merepotkan. Kami memperbaikinya jadi satu run: bot yang membuka dan men-merge Version PR, lalu mem-publish — semua dalam satu CI run. Satu-satunya langkah manual yang tersisa adalah menulis changeset-nya.
Yang ingin kami sampaikan ke diri kami dulu
Do
- Kemas komponen jadi paket ber-versi yang terisolasi (peer React, CSS sendiri)
- Jaga pintu federasi tetap terbuka lewat higiene paket, bukan mesinnya
- Otomatiskan rilis sampai satu-satunya langkah manual adalah menulis intent-nya
Don't
- Membangun module federation runtime untuk halaman yang harus dibaca crawler
- Menukar satu app monolit dengan orkestrasi remote yang berlebihan
- Menambah server hanya untuk menghindari satu langkah build
Cerita utuh cara membangunnya — monorepo, deploy, dan Changesets — ada di artikel teknisnya: Merilis design system di ui.pangaea.id.
Sources