𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀

SingleSPA berhasil. Kami menjalankan aplikasi React, Vue, dan Angular dalam satu halaman. Semuanya dimuat secara independen. Framework ini memberikan hasil yang diharapkan.

Masalahnya bukan pada framework tersebut. Masalahnya ada pada ekosistem di sekitarnya.

Dalam arsitektur terdistribusi, Anda membutuhkan kepemilikan (ownership). Anda membutuhkan audit. Anda membutuhkan tata kelola (governance). SingleSPA membuat kebutuhan ini terlihat jelas karena import map adalah titik koordinasi pusat.

Import map berada di root config Anda. Ini adalah file JSON. Ia memberi tahu setiap micro frontend (MFE) versi React mana yang harus dimuat. Secara teori, ini adalah sumber kebenaran (source of truth). Namun dalam praktiknya, tidak ada yang memilikinya.

Setiap tim memiliki MFE mereka sendiri. Tidak ada yang memiliki map tersebut.

Ini menimbulkan masalah:

  • Tim menghentikan sebuah MFE, tetapi entri tersebut tetap ada di dalam map.
  • Dependensi baru muncul, tetapi tidak ada yang menambahkannya ke dalam map.
  • Map menjadi usang karena Anda mengabaikannya.

Kami menemukan sebuah MFE di dalam map kami yang sudah tidak dideploy selama delapan bulan. MFE tersebut sudah mati, tetapi masih dimuat di produksi. Tidak ada yang menyadarinya karena tidak ada yang memeriksanya.

Anda mungkin berpikir untuk membuat map secara otomatis selama proses build. Kami sudah mencobanya. Hal itu justru menciptakan masalah baru: merge conflicts. Jika empat belas tim semuanya mencoba menulis ke satu file JSON yang sama setiap kali deploy, pipeline CI Anda akan menjadi berantakan.

Masalah lainnya adalah drift. Polanya sederhana: tandai React sebagai external di config Anda. Biarkan import map yang menyediakannya. Ini mencegah adanya bundle duplikat.

Namun kemudian seseorang melakukan refactor pada kodenya. Tanpa sengaja, mereka membundel kembali React ke dalam MFE mereka. Build berhasil. Test berhasil. Deploy pun berwarna hijau (green).

Anda baru akan menyadarinya ketika:

  • Ukuran bundle melonjak tajam.
  • Ketidakcocokan versi (version mismatch) merusak sebuah komponen.
  • Anda melihat React dimuat dua kali di Chrome DevTools.

Kami mengaudit sistem kami dan menemukan dua MFE yang mengirimkan React mereka sendiri. Build mereka berhasil (green). Mereka tidak menyadari bahwa mereka sudah tidak patuh (out of compliance).

Import map dan file package.json Anda adalah dua input yang terpisah. Keduanya menjauh secara perlahan (drift apart).

Pengecekan CI dapat menemukan bundle duplikat. Namun, ia tidak dapat menemukan ketidakcocokan versi. Jika MFE A menggunakan React 18.2 dan MFE B menggunakan 18.3, build tidak akan gagal. Tetapi komponen bersama (shared components) Anda akan rusak saat runtime.

Saat kami perlu memperbarui React, kami menghabiskan waktu berjam-jam melakukan grepping di empat belas repositori yang berbeda. Ini tidak efisien.

Kami membangun sebuah alat untuk memperbaiki hal ini. Alat ini melakukan dua hal:

  1. Ia menyusun matriks versi dari setiap package.json MFE.
  2. Ia membandingkan matriks tersebut dengan import map Anda.

Alat ini menunjukkan celah yang ada. Ia menunjukkan tim mana yang patuh dan tim mana yang telah menyimpang. Alat ini juga menemukan entri yang usang dan URL yang rusak. Kami menjalankannya setiap Senin pagi. Prosesnya hanya memakan waktu 12 detik.

Pelajaran yang kami petik bukanlah masalah teknis. Setiap arsitektur terdistribusi membutuhkan pemilik untuk infrastruktur bersama. Dalam SingleSPA, import map adalah infrastruktur. Jangan perlakukan ia seperti file bersama. Perlakukan ia sebagai aset yang dikelola.

Bagaimana Anda menangani hal ini? Apakah Anda memiliki pemilik import map? Atau apakah Anda menghabiskan Senin pagi Anda dengan melakukan grepping pada file?

Sumber: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe