Menyusun halaman dan tampilan dengan frontend mikro

Anda dapat menyusun tampilan aplikasi dengan komposisi sisi klien, komposisi sisi tepi, dan komposisi sisi server. Pola komposisi memiliki karakteristik yang berbeda dalam hal keterampilan tim yang diperlukan, toleransi kesalahan, kinerja, dan perilaku cache.

Diagram berikut menunjukkan bagaimana komposisi terjadi pada lapisan sisi klien, sisi tepi, dan sisi server dari arsitektur mikro-frontend.

Lapisan sisi klien, sisi tepi dan sisi server dibahas di bagian berikut.

Komposisi di sisi klien

Secara dinamis memuat dan menambahkan micro-frontend sebagai fragmen Document Object Model (DOM) pada klien (browser atau tampilan web seluler). Artefak mikro-frontend, seperti JavaScript atau file CSS, dapat dimuat dari jaringan pengiriman konten (CDN) untuk mengurangi latensi. Komposisi sisi klien membutuhkan yang berikut:

• Tim untuk memiliki dan memelihara aplikasi shell atau kerangka kerja micro-frontend untuk mengaktifkan penemuan, pemuatan, dan rendering komponen micro-frontend saat runtime di browser

• Tingkat keterampilan tinggi dalam teknologi frontend seperti HTML, CSS, dan JavaScript, dan pemahaman mendalam tentang lingkungan browser

• Optimalisasi jumlah yang JavaScript dimuat dalam halaman, dan disiplin untuk menghindari bentrokan namespace global

Diagram berikut menunjukkan contoh AWS arsitektur untuk komposisi sisi klien tanpa server.

Komposisi sisi klien terjadi di lingkungan browser melalui aplikasi shell. Diagram menunjukkan rincian berikut:

1. Setelah aplikasi shell dimuat, aplikasi ini membuat permintaan awal ke Amazon CloudFront untuk menemukan frontend mikro yang akan dimuat melalui titik akhir manifes.

2. Manifes berisi informasi tentang setiap mikro-frontend (misalnya, nama, URL, versi, dan perilaku fallback). Manifestasi dilayani oleh layanan penemuan mikro-frontend. Dalam diagram, layanan penemuan ini diwakili oleh Amazon API Gateway, sebuah AWS Lambda fungsi, dan Amazon DynamoDB. Aplikasi shell menggunakan informasi manifes untuk meminta frontend mikro individu untuk menyusun halaman dalam tata letak tertentu.

3. Setiap bundel micro-frontend terdiri dari file statis (seperti JavaScript, CSS, dan HTML). File-file tersebut di-host di bucket Amazon Simple Storage Service (Amazon S3) dan dilayani. CloudFront

4. Tim dapat menerapkan versi baru dari frontend mikro mereka dan memperbarui informasi manifes dengan menggunakan pipeline penerapan yang mereka miliki.

Komposisi sisi tepi

Gunakan teknik transklusi seperti Edge Side Included (ESI) atau Server Side Included (SSI) yang didukung oleh beberapa CDN dan proxy di depan server asal untuk membuat halaman sebelum mengirimnya melalui kabel ke klien. ESI membutuhkan yang berikut:

• CDN dengan kemampuan ESI, atau penyebaran proxy di depan frontend mikro sisi server. Implementasi proxy seperti HAProxy, Varnish, dan NGINX mendukung SSI.

• Pemahaman tentang penggunaan dan keterbatasan implementasi ESI dan SSI.

Tim yang memulai aplikasi baru biasanya tidak memilih komposisi sisi tepi untuk pola komposisi mereka. Namun, pola ini mungkin menyediakan jalur untuk aplikasi lama yang mengandalkan transklusi.

Komposisi di sisi server

Gunakan server asal untuk membuat halaman sebelum di-cache di tepi. Hal ini dapat dilakukan dengan teknologi tradisional, seperti PHP, Jakarta Server Pages (JSP), atau template library, untuk menyusun halaman dengan memasukkan fragmen dari micro-frontend. Anda juga dapat menggunakan JavaScript kerangka kerja, seperti Next.js, yang berjalan di server untuk membuat halaman di server dengan rendering sisi server (SSR).

Setelah halaman dirender di server, mereka dapat di-cache pada CDN untuk mengurangi latensi. Ketika versi baru micro-frontend dikerahkan, halaman harus dirender ulang, dan cache harus diperbarui untuk mengirimkan versi terbaru kepada pelanggan.

Komposisi sisi server memerlukan pemahaman mendalam tentang lingkungan server untuk menetapkan pola penerapan, penemuan mikro-frontend sisi server, dan manajemen cache.

Diagram berikut menunjukkan komposisi sisi server.

Diagram mencakup komponen dan proses berikut:

1. Amazon CloudFront menyediakan titik masuk unik ke aplikasi. Distribusi memiliki dua asal: yang pertama untuk file statis dan yang kedua untuk komposer UI.

2. File statis di-host di bucket Amazon S3. Mereka dikonsumsi oleh browser dan komposer UI untuk template HTML.

3. Komposer UI berjalan pada cluster kontainer di AWS Fargate. Dengan solusi kontainerisasi, Anda dapat menggunakan kemampuan streaming dan rendering multithreaded jika diperlukan.

4. Parameter Store, kemampuan AWS Systems Manager, digunakan sebagai sistem penemuan mikro-frontend dasar. Kemampuan ini menyediakan penyimpanan nilai kunci yang digunakan oleh komposer UI untuk mengambil endpoint mikro-frontend untuk dikonsumsi.

5. Notifikasi micro-frontend menyimpan JavaScript bundel yang dioptimalkan di bucket S3. Ini dirender pada klien karena harus bereaksi terhadap interaksi pengguna.

6. Ulasan micro-frontend disusun oleh fungsi Lambda, dan ulasan pengguna disimpan di DynamoDB. Ulasan micro-frontend diberikan sepenuhnya di sisi server, dan menghasilkan fragmen HTML.

7. Detail produk micro-frontend adalah micro-frontend kode rendah yang digunakan. AWS Step Functions Alur Kerja Ekspres dapat dipanggil secara sinkron, dan berisi logika untuk merender fragmen HTML dan lapisan caching.

Untuk informasi lebih lanjut tentang komposisi sisi server, lihat posting blog Server-side rendering micro-frontend - arsitekturnya.