Arsitektur Micro-Frontend Lintas Framework
Host Next 14 dengan nextjs-mf, remote auth Next 16 dengan enhanced, design-system dibangun Rslib, dan satu feature yang ditulis Vue — empat toolchain berbeda dalam satu halaman. Yang menyambungkan mereka bukan framework yang sama, tapi satu kontrak: Module Federation.
ADitulis olehAngga Wika Nugraha
Yang sebenarnya disepakati
Kalau framework boleh berbeda, apa yang menyatukan mereka? Jawabannya bukan teknologi, tapi kontrak. Dan kontraknya jauh lebih kecil dari yang saya kira:
- nama container "duidtin_feature_beranda"
- daftar exposes "./base", "./globals"
- URL remoteEntry.js /beranda/static/remoteEntry.js
- share scope siapa menyediakan react, siapa memakainya
remoteEntry.js itu kuncinya, dan isinya sering disalahpahami. Dia bukan kodenya — dia daftar isi:
__webpack_require__.initializeExposesData = { moduleMap: { "./base": () => Promise.all([ __webpack_require__.e("328"), // lib-vue __webpack_require__.e("354"), // lib-axios __webpack_require__.e("585"), // kode fiturnya __webpack_require__.e("332"), // modul yang di-expose ]).then(() => () => __webpack_require__(306)), }, shareScope: "default", };
Percobaan 1 — beda plugin Module Federation
- nextjs-mf 8.8.54 → MF runtime 0.24.1
- rsbuild-plugin 0.24.1 → MF runtime 0.24.1
- enhanced 2.x → MF runtime 2.x
init({ name: "duidtin_feature_beranda", remotes: [{ name: "duidtin_ui_design_system", entry: … }], });Percobaan 2 — beda framework
duidtin-feature-beranda ditulis Vue, dirender host React.
Komponen React, dipakai dari Vue
Tiap komponen dibungkus jadi custom element yang menjalankan komponen React yang sama di dalamnya:
<dtn-button color="primary">Masuk</dtn-button> │ └─ custom element → satu React root di dalamnya → <button class="ui-button …"> atribut HTML → props React onPress React → CustomEvent("press")