Corak Microfrontend avaScript untuk Aplikasi Web Boleh Skala

Sebagai pengarang yang prolifik, saya menggalakkan anda untuk meneroka buku saya di Amazon. Ingat untuk mengikuti kerja saya di Medium untuk sokongan berterusan. terima kasih! Pertunangan anda tidak ternilai!

Seni bina Microfrontend telah mendapat daya tarikan yang ketara sebagai penyelesaian untuk membina aplikasi web berskala besar dan boleh diselenggara. Setelah mengusahakan banyak projek yang luas, saya telah mengalami secara langsung kelebihan menguraikan bahagian hadapan monolitik kepada unit yang lebih kecil dan lebih mudah diurus. Artikel ini memperincikan lapan corak seni bina microfrontend JavaScript untuk meningkatkan fleksibiliti dan kebolehskalaan aplikasi.

Struktur Monorepo

Keputusan awal yang penting dalam pelaksanaan microfrontend melibatkan organisasi pangkalan kod. Struktur monorepo, menempatkan berbilang aplikasi bahagian hadapan dalam satu repositori, terbukti sangat bermanfaat.

Monorepos memudahkan perkongsian kod antara bahagian hadapan mikro dan memperkemas kawalan versi. Mereka memupuk konsistensi dan memudahkan pengurusan pergantungan.

Sampel struktur monorepo:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

Setiap microfrontend wujud sebagai pakej berasingan dalam direktori packages. Sumber yang dikongsi berada dalam direktori shared.

Persekutuan Modul

Persekutuan Modul Webpack 5 memuatkan dan berkongsi kod secara dinamik antara aplikasi—sesuai untuk bahagian hadapan mikro, membolehkan pemuatan komponen masa jalan.

Konfigurasi Persekutuan Modul asas:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

Ini mendedahkan komponen Button daripada app1 untuk digunakan oleh mikrofrontend lain.

Elemen Tersuai

Komponen Web, terutamanya Elemen Tersuai, mencipta komponen agnostik rangka kerja yang boleh diguna semula. Ini penting dalam seni bina microfrontend di mana pasukan mungkin menggunakan rangka kerja yang berbeza.

Contoh Elemen Tersuai:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

Elemen ini berfungsi merentas mikrofrontend tanpa mengira rangka kerja asasnya.

Rangka Kerja SPA Tunggal

Spa Tunggal ialah rangka kerja microfrontend khusus. Ia memudahkan membina aplikasi daripada mikrofrontend yang dibangunkan dan digunakan secara bebas.

Persediaan SPA Tunggal asas:

<code>import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('./app1/main.js'),
  activeWhen: '/app1',
});

registerApplication({
  name: 'app2',
  app: () => import('./app2/main.js'),
  activeWhen: '/app2',
});

start();</code>

Ini mendaftarkan app1 dan app2, mengaktifkannya berdasarkan laluan.

Komunikasi Terpacu Peristiwa

Komunikasi berkesan antara mikrofrontend yang digandingkan longgar adalah penting. Pendekatan dipacu acara, menggunakan acara pub/sub atau acara tersuai, sangat berkesan.

Contoh acara tersuai:

<code>// In one microfrontend
const event = new CustomEvent('itemAdded', { detail: { itemId: 123 } });
window.dispatchEvent(event);

// In another microfrontend
window.addEventListener('itemAdded', (event) => {
  console.log('Item added:', event.detail.itemId);
});</code>

Ini membolehkan komunikasi tanpa mendedahkan butiran dalaman.

Pengurusan Negeri Dikongsi

Walaupun komunikasi dipacu peristiwa mencukupi untuk banyak situasi, pengurusan keadaan terpusat (Redux, MobX) memastikan konsistensi merentas mikrofrontend.

Contoh asas Redux:

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

Keadaan dikongsi memastikan akses data yang konsisten.

Strategi Pemuatan Aset

Prestasi adalah kritikal. Pemuatan aset pintar, seperti pemuatan malas, adalah penting. Contoh React:

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

Pemuatan malas mengurangkan saiz berkas awal.

Proses Binaan Terpiawai

Proses binaan yang konsisten merentas mikrofrontend adalah penting untuk memudahkan penggunaan dan mengurangkan ralat. Contoh package.json:

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

Alat binaan yang konsisten memastikan keseragaman.

Corak ini meningkatkan seni bina microfrontend. Walau bagaimanapun, ingat bahawa setiap projek adalah unik, dan memilih corak yang sesuai adalah kunci. Perancangan yang teliti adalah penting untuk kejayaan pelaksanaan.

---

101 Buku

101 Buku ialah sebuah rumah penerbitan dikuasakan AI yang diasaskan bersama oleh pengarang Aarav Joshi. Teknologi AI kami mengekalkan kos penerbitan yang rendah—sesetengah buku berharga serendah $4—menjadikan pengetahuan boleh diakses.

Cari buku kami Kod Bersih Golang di Amazon.

Kekal dikemas kini! Cari Aarav Joshi untuk lebih banyak tajuk dan tawaran istimewa!

Ciptaan Kami

Teroka kerja kami:

Pusat Pelabur | Pelabur Central Spanish | Pelabur Jerman Tengah | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Sederhana

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Corak Microfrontend avaScript untuk Aplikasi Web Boleh Skala. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!