Pengenalan kepada Micro-frontend

Dalam Micro-frontend kami membahagikan apl monolitik kepada berbilang apl yang lebih kecil.

Setiap apl bertanggungjawab untuk ciri tersendiri apl monolitik.
Contohnya,
Apl E-Dagang boleh dibahagikan kepada apl bahagian hadapan mikro bebas yang lebih kecil di bawah.

• Penyenaraian Produk
• Keranjang
• Penghantaran
• Bayaran
• Penjejakan
• Perkhidmatan Pelanggan dsb.

Mengapa Micro-frontend?

• Berbilang pasukan boleh bekerja secara berasingan khusus untuk satu apl MFE.
• Kebolehgunaan semula kod adalah sangat tinggi.
• Setiap pasukan bebas memilih teknologi mereka sendiri (React/Angular/Vue), penempatan, strategi pembangunan dll.
• Jika satu apl tidak berfungsi, apl rehat masih boleh berfungsi.
• Setiap apl MFE adalah lebih kecil supaya mudah difahami dan membuat perubahan.

Seni Bina Apl bahagian hadapan Monolitik Vs Mikro

Apl Monolitik :- Semua ciri aplikasi web dalam satu apl.
Apl Micro-frontend :- Setiap ciri diurus oleh apl MFE bebas iaitu
MFE #1 bertanggungjawab untuk App-bar.
MFE #2 bertanggungjawab untuk Senarai Produk.
MFE #3 bertanggungjawab untuk bar Side-Nav.
Apl Kontena bertanggungjawab untuk menyelaras antara apl MFE ini.

Cara apl MFE berintegrasi antara satu sama lain

1. Penyepaduan Masa Bina (Penyepaduan Masa Kompilasi)
2. Penyepaduan Masa Jalankan (Penyepaduan sisi pelanggan)
3. Penyatuan Sisi Pelayan (penyepaduan SSR).

Penyepaduan Masa Bina (Penyepaduan Masa Kompilasi)
Dalam penyepaduan ini, apl kontena mempunyai akses kepada semua kod sumber apl MFE dan himpunan gabungan dibuat apabila apl Kontena dibina / disusun sebelum dimuatkan dalam penyemak imbas.

Kebaikan

• Sangat mudah untuk disediakan dan difahami.
• MFE boleh dimuatkan secara malas untuk meningkatkan prestasi.

Keburukan

• Apl kontena perlu dibina semula dan digunakan semula setiap kali sebarang perubahan dibuat dalam pakej npm MFE.
• Jika berbilang MFE akan digandingkan rapat dengan apl Kontena maka terdapat kemungkinan apl MFE akan menjadi apl monolitik teragih.
• Ringkasnya MFE anda disepadukan dengan aplikasi kontena yang serupa dengan pakej NPM.

Cara apl MFE disepadukan dalam Integrasi Masa Binaan (di sini mengambil contoh aplikasi E-dagang)

1. Pasukan #1, membangunkan apl MFE Senarai Produk.
2. Pasukan #1 menggunakan apl MFE Senarai Produk dan menerbitkannya sebagai pakej NPM.
3. Pasukan #2, mengurus apl kontena, menyertakan apl MFE Senarai Produk sebagai kebergantungan pakej NPM dalam apl kontena.
4. Pasukan #2, menyusun dan membina berkas aplikasi kontena, berkas ini mengandungi kod apl Bekas termasuk kod apl MFE Senarai Produk juga.
5. Ringkasnya MFE anda disepadukan dengan aplikasi kontena yang serupa dengan pakej NPM.
6. Itu sahaja.

Integrasi Run Time (Integrasi sebelah pelanggan)
Dalam penyepaduan ini, Setelah apl kontena dimuatkan dalam penyemak imbas maka ia boleh mengakses apl MFE dengan menggunakan url apl MFE.

Kebaikan

• Setiap MFE boleh digunakan tanpa menggunakan semula apl kontena.
• Versi berbeza apl MFE yang sama boleh digunakan, bekas boleh menentukan versi MFE yang hendak digunakan dan bila, ia memudahkan ujian dan penyepaduan.
• Setiap apl MFE boleh mempunyai alatan dan perpustakaan mereka sendiri untuk tujuan pembangunan.

Keburukan

• MFE Masa Jalanan adalah lebih kompleks untuk disediakan dan disepadukan daripada MFE masa binaan.

Cara apl MFE disepadukan dalam Run Time Integration (di sini mengambil contoh aplikasi E-dagang)

1. Pasukan #1, membangunkan apl MFE Senarai Produk.
2. Pasukan #1 menggunakan MFE Senarai Produk iaitu https://mystore.in/productslist.js
3. Pasukan #2, mengurus apl kontena, akan menggunakan webpack-module-federation untuk menyepadukannya dengan apl kontena.
4. Apabila pengguna membuka https://mystore.in/ , apl kontena dimuatkan dalam penyemak imbas dan mengambil apl MFE Senarai Produk dan memaparkannya di lokasi yang ditetapkan dalam halaman apl kontena.
5. Itu sahaja.

Serve Side Integration (SSR Integration)

Dalam apl bahagian hadapan Mikro Integrasi ini berfungsi dengan cara yang sama seperti komponen SSR berfungsi. Semua apl MFE disepadukan di hujung pelayan dan apl kontena gabungan dikembalikan ke penyemak imbas.

Kebaikan

• Apl dimuatkan dengan lebih cepat.
• Pendekatan mesra SEO.

Keburukan

Interaktiviti terhad.
Cabaran pembangunan.

Itu sahaja buat masa ini, Terima kasih atas masa anda.

Atas ialah kandungan terperinci Pengenalan kepada Micro-frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!