Mikro Frontends Architecture: Panduan Pelaksanaan Praktikal

Frontend Micro menyelesaikan cabaran skala dalam pasukan besar dengan membolehkan pembangunan dan penempatan bebas. 1) Pilih Strategi Integrasi: Gunakan Persekutuan Modul dalam Webpack 5 untuk pemuatan runtime dan kemerdekaan sebenar, integrasi masa untuk persediaan mudah, atau komponen iframes/web untuk pengasingan yang kuat. 2) Tentukan sempadan pasukan oleh domain perniagaan, dengan setiap pasukan memiliki timbunan mikro, CI/CD, dan penempatan. 3) Alamat kebimbangan silang: Ketergantungan saham melalui tetapan singleton Persekutuan Modul, menguatkuasakan sistem reka bentuk bersama, memusatkan penghalaan peringkat atas dalam aplikasi tuan rumah, dan berkomunikasi melalui peristiwa atau URL tersuai dan bukannya negara global. 4) Melaksanakan DevOps Bebas: Setiap pasukan menguruskan repo, saluran paip, dan pemantauan mereka, sementara tuan rumah memantau kesihatan jauh dan menyediakan kegagalan untuk kegagalan. 5) Mengadopsi secara bertahap dengan mengekstrak halaman yang serba lengkap ke dalam frontend mikro mandiri dan mengintegrasikannya melalui Persekutuan Modul, kemudian ulangi. Pendekatan ini mengimbangi autonomi dengan konsistensi, menjadikan pembangunan frontend berskala praktikal untuk organisasi besar.

Frontends mikro bukan sekadar kata kunci -mereka penyelesaian praktikal untuk meningkatkan pembangunan frontend dalam pasukan besar. Idea ini mudah: memecahkan frontend monolitik ke dalam kepingan yang lebih kecil, bebas yang boleh digunakan, masing -masing dimiliki oleh pasukan yang berbeza. Tetapi bagaimana anda sebenarnya melaksanakannya tanpa membuat kekacauan? Mari kita berjalan melalui pendekatan dunia nyata.

Masalah apa yang kita selesaikan?

Sebelum melompat ke dalam kod, fahami titik kesakitan:

• Perlahan binaan dan penyebaran merentasi aplikasi besar.
• Kesesakan pasukan apabila pelbagai pasukan bekerja di pangkalan yang sama.
• Tech Stack Lock-in , di mana menaik taraf atau bereksperimen berisiko.
• Melepaskan gandingan , di mana bug satu pasukan menangguhkan semua orang.

Mikro frontend membantu dengan membolehkan autonomi pasukan , penyebaran bebas , dan kepelbagaian teknologi .

Langkah 1: Pilih strategi integrasi anda

Tidak ada satu-saiz-sesuai-semua. Berikut adalah pilihan yang paling praktikal:

Opsyen A: Integrasi Masa Bina (sederhana tetapi terhad)

Setiap frontend mikro dibina secara berasingan dan kemudian digabungkan ke dalam aplikasi shell pada masa yang digunakan.

• ✅ Mudah untuk disediakan dengan perkakas sedia ada.
• ❌ Pasukan masih berkongsi saluran paip penempatan.
• ❌ Tiada kemerdekaan yang benar.

Terbaik untuk: Aplikasi berskala kecil atau pasukan yang beralih dari monolit.

Pilihan B: Integrasi Runtime melalui Persekutuan Modul (Webpack 5)

Ini adalah permainan changer. Persekutuan Modul Webpack 5 membolehkan anda memuatkan JavaScript dari satu aplikasi ke dalam yang lain semasa runtime.

 // dalam aplikasi Hos (bekas)
ModulefederationPlugin baru ({
  Nama: "bekas",
  Remot: {
    Dashboard: "Dashboard@https: //dashboard-app.com/remoteentry.js",
    profil: "profil@https: //profile-app.com/remoteentry.js",
  },
  Dikongsi: ["React", "React-dom"],
});

 // di aplikasi jauh (mikro frontend)
ModulefederationPlugin baru ({
  Nama: "Dashboard",
  Nama fail: "remoteentry.js",
  mendedahkan: {
    "./Dashboard": "./src/components/dashboard",
  },
  Dikongsi: ["React", "React-dom"],
});

Sekarang, tuan rumah boleh memuatkan komponen secara dinamik:

 import {malas, ketegangan} dari "reaksi";

const dashboard = malas (() => import ("papan pemuka/papan pemuka"));

aplikasi fungsi () {
  kembali (
    <Suspense Fallback = "Loading ...">
      <Dashboard />
    </Suspense>
  );
}

✅ Kemerdekaan yang benar
✅ Tumpukan teknologi yang berbeza (selagi mereka mendedahkan modul)
✅ Penyebaran bebas

Gunakan ini jika anda menggunakan Webpack 5 dan mahu fleksibiliti.

Pilihan C: IFRAME atau KOMPONEN WEB (pengasingan pertama)

Apabila anda memerlukan pengasingan yang kuat (misalnya, keselamatan, sistem warisan):

• IFRAMES : Sandboxing penuh tetapi UX miskin (menatal, gaya, komunikasi).
• Komponen Web : Sokongan penyemak imbas asli, kerangka-agnostik, tetapi memerlukan polyfills dan pengendalian acara adat.

Terbaik untuk: Persekitaran keselamatan tinggi atau mengintegrasikan aplikasi bukan JS.

Langkah 2: Tentukan sempadan pasukan yang jelas

Perkara -perkara pemilikan. Setiap frontend mikro harus memetakan ke domain perniagaan , bukan komponen UI.

Contoh:

• orders@https://orders.company.com
• user-profile@https://profile.company.com
• analytics@https://analytics.company.com

Setiap Pasukan:

• Memilih timbunan mereka (bertindak balas, vue, sudut, dll.)
• Memiliki saluran paip CI/CD mereka
• Menerbitkan titik akhir remoteEntry.js mereka

Elakkan tumpang tindih. Tidak ada dua pasukan yang memiliki bahagian -bahagian yang sama dari halaman yang sama melainkan dengan jelas dipadam.

Langkah 3: Selesaikan kebimbangan silang

Walaupun aplikasi berpecah, pengguna mengharapkan pengalaman yang lancar.

1. Dependensi bersama

Gunakan shared dalam Persekutuan Modul untuk mengelakkan reaksi pendua, lodash, dll.

 Dikongsi: {
  React: {singleton: true, eager: true},
  "React-dom": {singleton: True, Eager: True},
}

singleton: true hanya memastikan satu versi beban -kritikal untuk konteks reaksi dan cangkuk.

2. Gaya Global dan Sistem Reka Bentuk

Jangan biarkan setiap pasukan mentakrifkan butang.

• Aplikasi Host menyediakan asas CSS (fon, reset, token).
• Terbitkan Pakej Sistem Reka Bentuk Dikongsi (misalnya, @company/ui ) melalui NPM atau CDN.
• Menguatkuasakan penggunaan melalui ulasan linting atau PR.

3. Routing

Aplikasi tuan rumah harus mengawal penghalaan.

 // aplikasi kontena
<Route path = " /dashboard" element = {<dashboard />} />
<Route path = " /profil" element = {<profile />} />

Setiap frontend mikro mengendalikan laluan dalamannya (contohnya, /profile/settings ), tetapi shell menguruskan navigasi peringkat atas.

4. Negeri dan komunikasi

Elakkan keadaan global yang dikongsi bersama. Sebaliknya:

• Gunakan URL dan param pertanyaan untuk lulus data.
• Gunakan acara tersuai untuk komunikasi ringan:

 // dari frontend micro
window.dispatchEvent (baru CustomEvent ("User-Login", {detail: user}));

// dalam tuan rumah atau aplikasi lain
window.addeventListener ("user-login", (e) => console.log (e.detail));

Untuk kes -kes yang kompleks, pertimbangkan bas mesej ringan atau konteks yang diluluskan melalui prop.

Langkah 4: DevOps & Observability

Aplikasi bebas bermaksud saluran paip bebas.

✅ Setiap pasukan mempunyai:

• Repo mereka sendiri
• CI/CD (Tindakan GitHub, Jenkins, dll.)
• Persekitaran pementasan
• Pemantauan (Sentry, Logrocket, dll.)

✅ Monitor App Host:

• Kesihatan penyertaan terpencil
• Fallback UIS Sekiranya frontend mikro gagal memuatkan

Contoh Ralat Ralat:

 Remotefallback kelas memanjangkan React.comPonent {
  state = {hasError: false};

  statik getDerivedStateFromError () {
    kembali {haserror: true};
  }

  render () {
    jika (this.state.hasError) {
      kembali <div> papan pemuka tidak tersedia buat sementara waktu. </div>;
    }
    kembali this.props.children;
  }
}

Langkah 5: Adopsi tambahan

Anda tidak perlu menulis semula semuanya.

Mulakan dengan:

1. Mengenal pasti halaman yang serba lengkap (misalnya, "Tetapan" atau "Laporan").
2. Mengekstraknya ke dalam aplikasi mandiri dengan Persekutuan Modul.
3. Memuatkannya ke dalam aplikasi utama sebagai jauh.
4. Ulangi.

Dengan cara ini, anda membuktikan nilai lebih awal dan mengurangkan risiko.

Pemikiran terakhir

Frontend mikro tidak percuma. Anda berdagang kesederhanaan untuk berskala.

Mereka masuk akal ketika:

• Anda mempunyai banyak pasukan
• Anda sering menggunakan
• Anda mahu bereksperimen dengan tumpukan teknologi
• Frontend anda telah menjadi hambatan

Tetapi jika anda adalah pasukan kecil, monolit yang berstruktur mungkin masih lebih baik.

Dengan Persekutuan Modul Webpack 5, perkakas kini cukup matang untuk menjadikan frontend mikro praktikal -bukan hanya teori.

Pada asasnya: Mula -mula kecil, menyeragamkan antara muka, dan mengautomasikan segala -galanya.

Atas ialah kandungan terperinci Mikro Frontends Architecture: Panduan Pelaksanaan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!