Kerangka kerja dan alat - AWS Bimbingan Preskriptif
Pertimbangan kerangka umum

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Kerangka kerja dan alat

Tidak ada kekurangan kerangka kerja frontend, seperti Angular dan Next.js, tetapi kebanyakan dari mereka tidak dibuat dengan mempertimbangkan frontend mikro. Oleh karena itu, mereka terkadang kehilangan mekanisme untuk mengatasi tantangan arsitektur mikro-frontend.

Pertimbangan kerangka umum

Panduan ini tidak bertujuan untuk merekomendasikan, atau membandingkan, kerangka kerja individu. Karena beberapa frontend mikro sering berjalan di halaman aplikasi web yang sama, kinerja pemuatan dan runtime menjadi perhatian utama. Penting untuk memilih kerangka kerja yang memperkenalkan overhead sesedikit mungkin.

Kerangka kerja dibagi berdasarkan lapisan rendering:

  • Rendering sisi klien (CSR)

  • Rendering sisi server (SSR)

Arsitektur frontend mencakup kemampuan lain, seperti pembuatan situs statis (SSG). Namun, SSG dilakukan satu kali saja. Micro-frontend terutama disusun saat runtime, jadi CSR dan SSR adalah opsi utama.

Rendering sisi klien

Untuk CSR, ada dua opsi populer:

  • Kerangka SPA tunggal

  • Federasi Modul

Single SPA adalah pilihan ringan untuk menyusun frontend mikro. Ini memecahkan tantangan paling umum dalam arsitektur mikro-frontend, seperti menyusun beberapa frontend mikro di halaman yang sama dan menghindari bentrokan ketergantungan.

Federasi Modul dimulai sebagai plugin, ditawarkan oleh webpack 5, dan memecahkan sebagian besar tantangan dalam arsitektur mikro-frontend, termasuk manajemen dependensi di berbagai artefak. Module Federation 2.0 bekerja secara native dengan Rspack, webpack, esbuild, dan sekarang dengan. JavaScript

Pertimbangkan untuk tidak menggunakan kerangka kerja sama sekali. Browser modern, dengan pangsa pasar 98 persen secara keseluruhan menurut caniuse.com, menawarkan fitur seperti elemen khusus secara native, dan mereka memadai untuk aplikasi micro-frontend. Jika perlu, gabungkan elemen kustom dengan pustaka ringan untuk propagasi acara, internasionalisasi, atau masalah spesifik lainnya.

Rendering sisi server

Di sisi SSR, dua opsi utama lebih rumit:

  • Rangkullah kerangka kerja yang ada seperti Next.js, dan terapkan prinsip mikro-frontend yang menggunakan Federasi Modul.

  • Gunakan HTML- over-the-wire untuk bertukar fragmen HTML yang mewakili frontend mikro, dan buat fragmen ini di dalam template saat runtime. Contoh dari pendekatan ini adalah Podium.