Introduction au micro-frontend

Dans Micro-frontend, nous divisons une application monolithique en plusieurs applications plus petites.

Chaque application est responsable d'une fonctionnalité distincte de l'application monolithique.
Par exemple,
Une application de commerce électronique peut être divisée en applications micro-frontend indépendantes ci-dessous.

• Liste des produits
• Panier
• Expédition
• Paiement
• Suivi
• Services clients, etc.

Pourquoi Micro-frontend ?

• Plusieurs équipes peuvent travailler de manière isolée et dédiées à une seule application MFE.
• La réutilisabilité du code est très élevée.
• Chaque équipe est libre de choisir sa propre technologie (React/Angular/Vue), son déploiement, ses stratégies de développement etc.
• Si une application est en panne, les autres applications peuvent toujours fonctionner.
• Chaque application MFE est plus petite, donc facile à comprendre et à apporter des modifications.

Architecture d'application frontend monolithique vs micro

Application monolithique :- Toutes les fonctionnalités de l'application Web dans une seule application.
Application micro-frontend :- Chaque fonctionnalité est gérée par une application MFE indépendante, c'est-à-dire
MFE #1 est responsable de l'App-bar.
MFE #2 est responsable de la liste des produits.
MFE #3 est responsable de la barre Side-Nav.
Container App est responsable de la coordination entre ces applications MFE.

Comment les applications MFE s'intègrent les unes aux autres

1. Intégration du temps de compilation (intégration du temps de compilation)
2. Intégration au moment de l'exécution (intégration côté client)
3. Intégration côté serveur (intégration SSR).

Intégration du temps de compilation (intégration du temps de compilation)
Dans cette intégration, l'application conteneur a accès à tous les codes sources des applications MFE et un ensemble combiné est créé lorsque l'application conteneur est créée/compilée avant son chargement dans le navigateur.

Avantages

• Très simple à configurer et à comprendre.
• Les MFE peuvent être chargés paresseusement pour améliorer les performances.

Inconvénients

• L'application conteneur doit être reconstruite et redéployée chaque fois que des modifications sont apportées au package MFE npm.
• Si plusieurs MFE sont étroitement couplés à l'application Container, il y a des chances qu'une application MFE devienne une application monolithique distribuée.
• En bref, votre MFE est intégré à une application conteneur similaire à un package NPM.

Comment les applications MFE s'intègrent dans l'intégration du temps de construction (en prenant ici l'exemple d'une application de commerce électronique)

1. Équipe n°1, développe l'application Products-List MFE.
2. L'équipe n°1 déploie l'application Products-List MFE et la publie sous forme de package NPM.
3. L'équipe n°2, qui gère l'application conteneur, inclut l'application Products-List MFE en tant que dépendance du package NPM dans l'application conteneur.
4. L'équipe n°2, compile et crée un bundle d'applications conteneur, ce bundle contient également le code de l'application Container, y compris le code de l'application Products-List MFE.
5. En bref, votre MFE est intégré à une application conteneur similaire à un package NPM.
6. C'est tout.

Intégration au moment de l'exécution (intégration côté client)
Dans cette intégration, une fois l'application conteneur chargée dans le navigateur, elle peut accéder aux applications MFE en utilisant les URL des applications MFE.

Avantages

• Chaque MFE peut être déployé sans redéployer l'application conteneur.
• Différentes versions de la même application MFE peuvent être utilisées, le conteneur peut décider quelle version MFE utiliser et quand, cela facilite les tests et l'intégration.
• Chaque application MFE peut avoir ses propres outils et bibliothèques à des fins de développement.

Inconvénients

• Les MFE au moment de l'exécution sont plus complexes à configurer et à intégrer que les MFE au moment de la construction.

Comment les applications MFE s'intègrent dans l'intégration au runtime (en prenant ici l'exemple d'une application de commerce électronique)

1. Équipe n°1, développe l'application Products-List MFE.
2. L'équipe n°1 déploie Products-List MFE, c'est-à-dire https://mystore.in/productslist.js
3. L'équipe n°2, qui gère l'application conteneur, utilisera webpack-module-federation pour l'intégrer à l'application conteneur.
4. Lorsque l'utilisateur ouvre https://mystore.in/, l'application conteneur est chargée dans le navigateur et récupère l'application Products-List MFE et l'affiche à un emplacement défini dans la page de l'application conteneur.
5. C'est tout.

Intégration côté serveur (intégration SSR)

Dans cette intégration, l'application Micro-frontend fonctionne de la même manière que les composants SSR. Toutes les applications MFE sont intégrées du côté du serveur et une application conteneur composite est renvoyée au navigateur.

Avantages

• L'application se charge plus rapidement.
• Approche SEO conviviale.

Inconvénients

Interactivité limitée.
Défi de développement.

C'est tout pour l'instant, merci pour votre temps.

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!