Micro Frontends : Pourquoi, quand et comment les intégrer ?

2 août 2023

Micro Frontends Pourquoi, quand et comment les intégrer ?

La recherche est effectuée par Marielle

La vitesse est devenue l'élément vital du monde numérique, et les attentes des utilisateurs n'ont jamais été aussi élevées. C'est là que les micro-frontaux viennent à la rescousse : une approche moderne et agile du développement frontal qui promet de révolutionner la manière dont nous créons des applications web.

Dans ce blog, nous allons nous plonger dans le monde des micro-frontaux. Nous explorerons les raisons de leur popularité, les scénarios idéaux pour leur mise en œuvre et, surtout, comment les intégrer dans vos projets de manière transparente !

Plongeons-y !

Qu'est-ce qu'un micro-frontal ?

Les microservices sont une approche architecturale populaire utilisée pour be mettre en place des applications distribuées. Ils consistent à diviser le backend en services distincts, à assurer un fonctionnement transparent et à éviter les goulets d'étranglement. Les micro-frontaux étendent ce concept au monde des frontaux, permettant un développement modulaire et évolutif.

Imaginez : une application web divisée de manière transparente en modules - chacun avec ses propres fonctions, mises en œuvre de manière indépendante. C'est le domaine de l'architecture micro-frontale, qui permet aux équipes frontales de bénéficier de la même agilité et de la même rapidité que les microservices offrent aux équipes dorsales.

L'objectif ? Libérer les équipes de travail de toute dépendance, accélérer le développement et simplifier la complexité des produits numériques !

Services de développement complet StarTechUP

Architecture monolithique et architecture micro-frontale

Lorsque l'on met côte à côte l'architecture monolithique et l'architecture micro-frontale, il devient évident qu'il s'agit de deux approches fondamentalement différentes de la construction d'applications web.

Approfondissons la comparaison entre ces deux styles architecturaux :

Frontaux monolithiques

L'image ci-dessous montre les différentes architectures avec des frontaux monolithiques :

Micro Frontend Architecture StarTechUP

Le monolithe dispose d'une seule équipe qui s'occupe de tout, de la création et de la maintenance de l'application complète au partage des bases de données, du backend et du frontend.

L'avant et l'arrière divisent l'application monolithique en deux, divisant également l'équipe de travail qui possède son backend ou son frontend monolithique.

Avec les microservices, l'architecture dorsale a évolué vers une configuration plus évolutive. Ainsi, chaque microservice appartient à des équipes différentes, ce qui rend les choses plus efficaces et plus flexibles.

Même si l'utilisateur ne remarque pas la division du backend, les choses peuvent devenir délicates lorsqu'on essaie d'intégrer les microservices dans le frontend monolithique. C'est alors que le goulot d'étranglement de l'application entre en jeu et cause des problèmes. C'est comme si l'on avait les inconvénients d'un système monolithique, tels que :

  • Trop vaste et trop complexe pour que quiconque puisse la comprendre et y apporter des modifications rapidement et correctement.
  • Un changement dans le code du frontend peut affecter l'ensemble de l'application. site web.
  • Toute modification du code frontal doit être réimplémentée, ce qui augmente le temps de compilation.

Micro-frontaux

micro frontend features end to end

L'organisation verticale divise l'application en petites fonctions indépendantes, chacune étant mise en œuvre simultanément, du backend au frontend, par une équipe de travail.

La raison pour laquelle cette approche a gagné en popularité est due aux problèmes posés par l'approche monolithique. Vous voyez, le frontend a grandi à un rythme rapide, et avec une architecture monolithique, il devient plus difficile de garder les choses en ordre.

Les micro-frontaux offrent la même évolutivité, la même souplesse et la même adaptabilité que l'architecture microservices du backend. De plus, ils rendent l'application moins lourde et plus conviviale. Et le meilleur ? Chaque micro-front peut être développé avec différents frameworks.

Les idées centrales d'un micro-frontend sont les suivantes :

  • Promouvoir l'indépendance technologique Les équipes de travail ont la liberté de choisir leur pile technologique préférée, ce qui leur permet d'optimiser les flux de travail et de favoriser l'innovation sans contraintes.
  • Code d'application séparé pour chaque équipe - Aucune variable globale ou d'exécution partagée n'existe entre les différentes équipes de travail utilisant le même cadre, ce qui garantit des états d'application indépendants et élimine les états partagés.
  • Conception d'un site web résilient - Pour garantir une utilisation optimale, les fonctions de l'application doivent être conçues avec soin. L'utilisation de méthodologies telles que le "rendu universel" et l'"amélioration progressive" peut considérablement améliorer les performances.

En comparaison, l'architecture micro-frontale s'impose clairement comme une approche plus efficace et plus rationnelle pour les applications web contemporaines. Cette architecture permet de combler le fossé entre les microservices du backend et le développement du frontend, en incarnant des pratiques de développement agiles et évolutives.

10 avantages du Micro Frontend Framework

Construire une application web moderne avec des micro-frontaux n'est pas seulement technologiquement efficace mais aussi organisationnellement bénéfique. Elle offre plusieurs avantages qui aideront votre équipe !

Voici dix avantages de la mise en œuvre d'un micro-frontend framework :

1. Mises en œuvre indépendantes

Avec l'architecture micro-frontale, les fonctions d'une application monolithique sont séparées pour devenir des sous-applications différentes qui sont mises en œuvre indépendamment par différentes équipes de travail au lieu de mettre en œuvre toutes les fonctions en même temps.

2. Des performances plus élevées

Dans une application monolithique, l'application entière doit toujours être chargée, même si toutes ses parties ne sont pas utilisées, ce qui rend son temps de chargement initial élevé. Avec l'architecture micro-frontale, un module spécifique de l'application est chargé à la demande, ce qui réduit le temps de chargement initial.

3. Une mise en œuvre et un déploiement plus rapides

Comme chaque fonction est mise en œuvre de manière indépendante, la vitesse de développement est considérablement accrue. Pour corriger ou ajouter quelque chose dans une fonction, il n'est pas nécessaire d'exécuter toute l'application.

La construction de micro-frontaux est beaucoup plus rapide et facile que la construction d'un logiciel monolithique géant, ce qui représente un grand pas en avant pour la mise à disposition de nouvelles fonctionnalités. En conséquence, le temps de mise en œuvre est considérablement amélioré.

4. Fiabilité

Les micro-frontaux fonctionnent en garantissant que si un module tombe en panne, les autres peuvent continuer à fonctionner de manière transparente. Ceci est particulièrement important pour les grandes applications qui ont plusieurs fonctions indépendantes.

5. Passage à l'échelle de plusieurs équipes

Contrairement à un frontend monolithique traditionnel, les micro-frontends offrent la flexibilité nécessaire pour que plusieurs équipes puissent travailler indépendamment sur différents éléments du logiciel. En fait, vous avez des équipes indépendantes qui apportent leur propre expertise et prennent des décisions sur l'architecture, le style de codage et les tests en fonction de leurs tâches spécifiques. Cela permet à chacun de s'exprimer et de contribuer au projet de la meilleure façon possible.

6. Adoption de différentes technologies

Les micro-frontaux peuvent utiliser différentes piles technologiques, offrant ainsi flexibilité et personnalisation. Il s'agit d'éléments logiciels autonomes qui améliorent l'évolutivité en permettant un développement et un déploiement indépendants. Cela favorise l'efficacité du développement et de la maintenance, en permettant aux équipes de travailler sur des fonctionnalités spécifiques sans interférence.

7. Applications web faciles à maintenir

La maintenance de grandes applications monolithiques peut prendre beaucoup de temps aux développeurs. Cependant, l'approche micro-frontale permet à chaque équipe d'assumer la responsabilité de la maintenance de ses fonctions de développement. Le fait de travailler avec des éléments logiciels plus petits facilite la compréhension et la maintenance de chaque fonctionnalité lorsque cela est nécessaire.

8. Mises à jour permanentes

Les mises à jour permanentes sont essentielles. Pourquoi ? Les micro-frontends peuvent décomposer un frontend monolithique en composants plus petits. Cela facilite la mise à jour de chaque processus métier, ce qui permet d'améliorer l'expérience client grâce à des mises à jour itératives plus fréquentes.

9. Un code plus petit et plus facile à gérer

Les micro-frontaux offrent une base de code rationalisée et gérable par rapport aux frontaux monolithiques. Cette précision réduit les risques d'erreurs et permet un développement plus rapide avec moins d'efforts. Cette précision est particulièrement précieuse pour les applications comportant des flux de travail complexes.

10. Réutilisation des fonctionnalités

Les micro-frontaux offrent des avantages significatifs dans le développement d'applications multiples ayant des exigences communes en matière de flux de travail. En tirant parti des micro-frontaux, les entreprises peuvent rationaliser les fonctionnalités entre les applications, ce qui leur permet de gagner du temps et d'économiser des efforts de développement. Par exemple, une entreprise peut utiliser la même fonction de traitement des paiements sur plusieurs sites, sans avoir à la recréer pour chaque application.

Quand utiliser les micro-frontaux ?

Les micro-frontaux sont idéaux pour les grandes applications à fonctions multiples. Si des problèmes d'évolutivité sont anticipés, l'architecture micro-frontale doit être utilisée.

L'approche recommandée consiste à diviser l'application en ensembles isolés de fonctions et d'écrans, à l'instar d'un téléphone portable doté de différentes applications et fonctions.

Par exemple, il existe une application de numérotation pour passer des appels, une application de contacts pour stocker des numéros de téléphone et une application de messagerie pour envoyer des textes.

Bien que ces applications interagissent les unes avec les autres, chacune d'entre elles sert un objectif spécifique, c'est pourquoi elles sont mises en œuvre en tant qu'applications indépendantes.

Le processus de développement d'un micro-frontend pour une application simple

Comment intégrer l'architecture micro frontend dans une application simple ? Nous avons tout ce qu'il vous faut !

Nous avons mis en œuvre une application simple qui tire parti de l'utilisation de Webpack 5 Angular et partage l'état authentifié à travers l'application. Nous avons utilisé l'architecture micro frontend qui consiste en quelques applications enfants, qui sont le profil de l'utilisateur actuellement connecté et le panier. Nous avons un shell/conteneur qui consomme toutes les applications enfants. De plus, tous les paquets sont conservés dans le même référentiel. Par conséquent, nous utilisons une monorepo ici.

L'application shell/conteneur et chaque application enfant sont déployées et servies indépendamment. L'application conteneur effectue des requêtes HTTP au moment de l'exécution pour récupérer le JavaScript nécessaire au rendu de chaque application enfant, au fur et à mesure des besoins.

Coquille/Conteneur

échantillon de coquille/conteneur

Enfant 1

Échantillon de l'enfant 1

Enfant 2

enfant 2 échantillon

Autorisation partagée

Lorsque l'on passe à une architecture micro-frontale, chaque frontale étant sa propre application, il n'y a pas d'état partagé qui puisse être utilisé pour stocker les jetons d'authentification une fois que l'utilisateur s'est connecté à la première application.

L'utilisation du protocole Open ID Connect permet de remédier à ce problème. Chaque fois que vous devez vous connecter à une application à l'aide d'OIDC, vous êtes redirigé vers votre site OpenID, où vous vous connectez et revenez ensuite à votre application avec un jeton d'accès et un jeton d'identité.

Dépendance des données

Le plugin Webpack Module Federation permet de partager des dépendances communes au sein de micro-applications :

  • Lorsque vous ajoutez des bibliothèques à l'hôte du micro-front, vous devez également les ajouter aux modules distants qui consomment les dépendances.

La bibliothèque partagée contient le code et l'état de l'application que nous voulons partager sur le site :

  • Par exemple, le code de la fonctionnalité du panier réside dans la bibliothèque partagée et dépend donc des produits sélectionnés dans l'application shell/container.

Prêt pour la production

Chargement dynamique des micro-frontaux

L'hôte charge les micro-frontaux lors de l'initialisation de l'hôte, et non lors d'un changement de route.

Avec la méthode loadRemoteModule() de la bibliothèque @angular-architects/module-federation, nous pouvons charger dynamiquement les remotes du micro-frontend lors d'un changement de route avec quelques modifications rapides.

Déployer en utilisant Vercel

L'idée derrière les micro-frontaux est de pouvoir déployer chaque application indépendamment. Nous pouvons le faire dans Vercel en créant un projet séparé pour chaque application. Vercel limite le nombre de projets pour un seul repo à trois dans le plan gratuit.

déployer vercel

Mise à jour des routes pour supporter les chemins micro frontend vers la production

Nous devons mettre à jour la définition de la route pour inclure l'URI de l'application déployée.

Nous utiliserons la configuration des environnements construite pour prendre en charge à la fois les environnements locaux et déployés et définirons une configuration pour servir localement par rapport à la construction de production.

Ajouter une URL de déploiement à Okta

Vous devrez mettre à jour l'application Okta avec le nouvel emplacement de déploiement afin de pouvoir vous connecter.

ajouter l'URL de déploiement à okta

API

API

Vous devriez maintenant être en mesure d'utiliser le site déployé.

Conclusion

Les micro-frontaux peuvent apporter de nombreux avantages aux projets de développement web à grande échelle qui sont basés sur des microservices. Ils permettent aux développeurs de diviser l'ensemble de la solution en composants indépendants. Il en résulte un certain nombre d'avantages, notamment un déploiement plus rapide des fonctionnalités, des tests simplifiés des modules individuels, l'adoption de différentes piles technologiques et des mises à jour plus fluides.

Cependant, les micro-frontaux présentent également quelques inconvénients. Tester une application dans son ensemble peut s'avérer compliqué. En outre, les projets de micro-frontend sont assez coûteux car ils nécessitent une grande équipe de développeurs et de gestionnaires.

C'est pourquoi vous devez d'abord prendre en compte tous les aspects avant de prendre une décision pour votre entreprise.

réunion sur le développement du frontend

Besoin de services de développement frontaux ?

L'adoption d'une approche architecturale appropriée peut faire une différence significative dans le processus d'élaboration des politiques. succès de votre application web. Que vous commenciez un nouveau projet ou que vous rénoviez votre frontend existant, l'exploration du monde de l'architecture micro-frontend pourrait être le changement de jeu que vous recherchiez.

Chez StarTechUP, nous sommes passionnés par les limites de la technologie. développement frontal. Nous nous spécialisons dans les services de pointe, en mettant l'accent sur l'architecture des micro-frontends.

Nos des développeurs expérimentés sont là pour vous aider à exploiter tout le potentiel des micro-frontaux, en offrant une meilleure évolutivité, des cycles de développement accélérés et une collaboration transparente entre les équipes.

Prenez contact avec nous et discutons de la manière dont les différentes technologies peuvent être adaptées à vos besoins et objectifs spécifiques !

A propos de l'auteur : Andrea Jacinto - Rédacteur de contenu

Rédactrice de contenu dotée d'une solide expérience en matière de référencement, Andrea a travaillé avec des spécialistes du marketing numérique de différents domaines pour créer des articles optimisés qui sont informatifs, digestes et agréables à lire. Aujourd'hui, elle écrit pour StarTechUP afin de présenter les derniers développements technologiques aux lecteurs du monde entier. Vue sur Linkedin

PLUS D'INFOS