Modèles avaScript Microfrontend pour applications Web évolutives-js tutoriel-php.cn

avaScript Microfrontend Patterns for Scalable Web Applications

En tant qu'auteur prolifique, je vous encourage à explorer mes livres sur Amazon. N'oubliez pas de suivre mon travail sur Medium pour un soutien continu. Merci! Votre engagement est inestimable !

L'architecture microfrontend a gagné en popularité en tant que solution permettant de créer des applications Web maintenables à grande échelle. Ayant travaillé sur de nombreux projets de grande envergure, j'ai directement expérimenté les avantages de la décomposition des frontends monolithiques en unités plus petites et plus gérables. Cet article détaille huit modèles architecturaux de microfrontend JavaScript pour améliorer la flexibilité et l'évolutivité des applications.

Structure Monorepo

Une décision initiale cruciale dans la mise en œuvre du microfrontend implique l’organisation de la base de code. Une structure monorepo, hébergeant plusieurs applications frontend dans un seul référentiel, s'avère très bénéfique.

Monorepos simplifie le partage de code entre les microfrontends et rationalise le contrôle de version. Ils favorisent la cohérence et simplifient la gestion des dépendances.

Un exemple de structure monorepo :

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

Copier après la connexion

Chaque microfrontend existe sous forme de package distinct dans le répertoire packages. Les ressources partagées résident dans le répertoire shared.

Fédération de modules

La fédération de modules de Webpack 5 charge et partage dynamiquement le code entre les applications, ce qui est idéal pour les microfrontends, permettant le chargement des composants d'exécution.

Une configuration de base de la fédération de modules :

<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>

Copier après la connexion

Cela expose un composant Button de app1 pour une utilisation par d'autres microfrontends.

Éléments personnalisés

Les composants Web, en particulier les éléments personnalisés, créent des composants réutilisables et indépendants du framework. Ceci est crucial dans les architectures microfrontend où les équipes peuvent utiliser différents frameworks.

Un exemple d'élément personnalisé :

<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>

Copier après la connexion

Cet élément fonctionne sur les microfrontends, quels que soient leurs frameworks sous-jacents.

Cadre à SPA unique

Single-SPA est un framework microfrontend dédié. Il facilite la création d'applications à partir de microfrontends développés et déployés indépendamment.

Une configuration de base d'un seul SPA :

<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>

Copier après la connexion

Ceci enregistre app1 et app2, les activant en fonction de l'itinéraire.

Communication événementielle

Une communication efficace entre les microfrontends faiblement couplés est essentielle. Les approches basées sur les événements, utilisant des événements pub/sub ou personnalisés, sont très efficaces.

Un exemple d'événement personnalisé :

<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>

Copier après la connexion

Cela permet de communiquer sans exposer les détails internes.

Gestion d'État partagée

Bien que la communication basée sur les événements soit suffisante dans de nombreuses situations, la gestion centralisée de l'état (Redux, MobX) garantit la cohérence entre les microfrontends.

Un exemple Redux de base :

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

Copier après la connexion

L'état partagé garantit un accès cohérent aux données.

Stratégies de chargement d'actifs

La performance est essentielle. Le chargement intelligent des actifs, comme le chargement paresseux, est vital. Un exemple de 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>

Copier après la connexion

Le chargement paresseux réduit la taille initiale du paquet.

Processus de construction standardisé

Des processus de création cohérents sur les microfrontends sont essentiels pour simplifier le déploiement et réduire les erreurs. Un package.json exemple :

<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>

Copier après la connexion

Des outils de construction cohérents garantissent l'uniformité.

Ces modèles améliorent l'architecture microfrontend. Cependant, n’oubliez pas que chaque projet est unique et que la sélection des modèles appropriés est essentielle. Une planification minutieuse est cruciale pour une mise en œuvre réussie.

101 livres

101 Books est une maison d'édition basée sur l'IA cofondée par l'auteur Aarav Joshi. Notre technologie d'IA maintient les coûts de publication à un niveau bas (certains livres coûtent aussi peu que 4 $), ce qui rend les connaissances accessibles.

Retrouvez notre livre Golang Clean Code sur Amazon.

Restez informé ! Recherchez Aarav Joshi pour plus de titres et d'offres spéciales !