Intégrer le composant Web/MFE avec du HTML statique simple

Introduction

Dans un monde idéal, nous n’aurions jamais besoin d’une solution hybride où une pile technologique modernisée s’intègre à un système existant. Mais vivons-nous vraiment dans un monde idéal ?! Le plus souvent, j’ai dû mettre en œuvre une approche hybride. Je suis sûr que la plupart d'entre vous ont entendu parler des micro-frontends (MFE) et de la façon dont la fédération de modules est une solution fantastique. Mais savez-vous comment intégrer MFE à une simple page HTML statique sans vous soucier des mises à jour dynamiques des versions ? En d’autres termes, comment éviter de mettre à jour la page HTML grand public à chaque changement de MFE ? Je vais vous expliquer quelques changements de code simples qui pourraient bien changer votre vie (pour le mieux ?).

Commencer

Grâce à la bibliothèque SystemJS, nous pouvons intégrer de manière transparente un composant Web ou MFE, ou même importer n'importe quel module au moment de l'exécution.

Étape 1 : Exportez votre module sous forme de carte

Tout d'abord, à l'aide d'un bundler de modules comme Webpack, exportez le module sous forme de carte au format JSON. Le webpack-import-map-plugin facilite la génération du fichier de carte d'importation.

// with a Webpack 4 config like:
config.entry = { entryName: 'entry-file.js' };
config.output.filename = '[name].[contenthash:8].js';

// Add to plugins
new ImportMapWebpackPlugin({
    filter: x => {
        return ['entryName.js'].includes(x.name);
    },
    transformKeys: filename => {
        if (filename === 'entryName.js') {
            return 'mfe-module/out-file';
        }
    },
    fileName: 'import-map.json',
    baseUrl: 'https://super-cdn.com/'
});
// output import-map.json
{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

Remarque : l'extrait de code ci-dessus provient du référentiel webpack-import-map-plugin

Étape 2 : Charger SystemJS

Ensuite, chargez le fichier SystemJS en l'important en tant que fichier JavaScript standard. Vous pouvez héberger la version du fichier de s.min.js sur votre propre CDN ou utiliser un hébergement existant.

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

Étape 3 : Importer le fichier Map JSON

Maintenant, importez le fichier JSON de la carte pour que votre module puisse être intégré à la page HTML. La carte d'importation élimine le besoin de coder en dur les chemins de fichiers JS, permettant les mises à jour de votre module importé sans nécessiter de modifications du code consommateur.

<script type="systemjs-importmap" src="/path/to/module-importmap.json">

Remarque : utilisez l'attribut crossorigin si vous chargez à partir d'une origine différente.

<script crossorigin type="systemjs-importmap" src="/path/to/import-map.json">

Exemple d'importation de fichier de carte :

{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

Étape 4 : Chargez votre module
À ce stade, SystemJS est chargé et a importé le module de composant MFE/Web. Maintenant, il est temps de charger votre module :

<script crossorigin>
    System.import('mfe-module');
</script>

Une fois importé, vous pouvez appeler votre module en fonction de son type, qu'il s'agisse d'un composant Web ou d'une balise HTML standard amorcée :

//web component
<mfe-module/>
//some regular HTML tag that is bootstrapped.
<div id="mfe-module" />

Conclusion

En suivant ces étapes, vous pouvez intégrer de manière transparente des micro-frontends ou des composants Web dans un système existant sans vous soucier des mises à jour fréquentes ou de la gestion des versions. L'utilisation de SystemJS et d'importation de cartes vous permet de charger et de gérer dynamiquement des modules, garantissant ainsi que vos pages HTML statiques restent à jour avec un minimum d'effort. Cette approche fournit une solution évolutive et efficace pour relier les micro-interfaces modernes avec les systèmes existants, permettant une transition plus fluide et une flexibilité continue dans votre architecture.

Si vous êtes arrivé ici, alors j'ai fait un effort satisfaisant pour vous continuer à lire. N'hésitez pas à laisser des commentaires ou à demander des corrections.

Mes autres blogs :

• Comment réduire le temps de chargement des pages - Partie 1
• Évitez l'implémentation par défaut de Spring RestTemplate pour éviter tout impact sur les performances
• Mon expérience directe avec les composants Web – apprentissages et limites
• Cadre de décision micro-frontend
• Tester le service Web SOAP à l'aide de Postman Tool

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!