dans Programmation 101
Microfrontend, ou ne pas microfrontend ? Là est la question.
Yo les devz! Après plusieurs mois d’absence sur notre merveilleux blogue, Ezo a décidé dernièrement de remettre un peu d’ordre dans cette belle vitrine. En équipe, on reprend l’écriture de nos traditionnels posts du mercredi et je suis très excité à l’idée de vous partager mes dernières connaissances. Aujourd’hui, pas d’exemple de code. On regarde d’un point de vue architectural le principe de MicroFrontEnd ou MFE.
pssst! l’équipe grandie à vue d’oeil 🙂 Joins-toi à nous!
Qu’est-ce qu’un microfrontend ?
En informatique, un microfrontend est un concept d’architecture logicielle utilisé pour diviser une application web monolithique en plusieurs parties plus petites et indépendantes, chacune étant responsable d’une partie spécifique de l’interface utilisateur. Il s’agit d’une approche de développement front-end qui vise à améliorer la modularité, la maintenabilité et la scalabilité des applications web.
Le terme microfrontend s’inspire du concept d’architecture microservices, où une application monolithique est décomposée en services indépendants, qui peuvent être développés, déployés et évolués de manière autonome.
Les principales caractéristiques d’un microfrontend incluent :
- Indépendance technologique : Chaque microfrontend peut être développé en utilisant des technologies différentes, selon les besoins spécifiques de la partie de l’interface qu’il gère. Par exemple, il serait possible, mais un choix discutable, de créer une partie de l’application avec React, et une autre avec Angular.
- Indépendance du cycle de vie : Les microfrontends peuvent être déployés séparément, ce qui permet de mettre à jour une partie de l’interface sans affecter le reste de l’application.
- Isolation : Chaque microfrontend est isolé des autres, ce qui signifie qu’ils ne partagent pas le même contexte d’exécution. Cela évite les conflits et les dépendances entre les différentes parties de l’application.
- Intégration : Les microfrontends doivent pouvoir être intégrés de manière transparente dans l’application globale, de sorte que l’utilisateur final perçoive l’ensemble de l’application comme un tout cohérent.
- Chargement à la demande : Les microfrontends peuvent être chargés dynamiquement au moment où ils sont nécessaires, ce qui permet de réduire le temps de chargement initial de l’application et d’améliorer les performances. Ceci est un patron de conception (design pattern) qu’on appelle Lazy Loading (en).
L’approche microfrontend est particulièrement utile dans les grandes organisations où différentes équipes travaillent sur des parties distinctes d’une application. Elle facilite également la gestion des versions et des mises à jour en permettant de déployer rapidement de nouvelles fonctionnalités sans perturber l’ensemble de l’application.
Cependant, il est important de noter que l’architecture microfrontend peut introduire une complexité supplémentaire dans le développement et nécessite une planification et une gestion minutieuses pour assurer le bon fonctionnement de l’application dans son ensemble.
Quels sont les avantages d’un microfrontend ?
Modularité et indépendance de développement
Les microfrontends permettent de diviser l’application en modules indépendants, ce qui facilite la collaboration entre les équipes de développement. Chaque équipe peut se concentrer sur un microfrontend spécifique sans se soucier des détails d’implémentation des autres parties de l’application. Cela accélère le développement et permet des mises à jour plus fréquentes sans impact sur l’ensemble de l’application.
Évolutivité et maintenabilité
Avec les microfrontends, il est plus facile d’ajouter de nouvelles fonctionnalités ou de faire évoluer une partie spécifique de l’application sans affecter le reste. Cela permet d’améliorer la maintenabilité globale de l’application et rend les processus de test et de déploiement plus efficaces.
Intégration technologique
Les MFE permettent d’utiliser différentes technologies et frameworks pour chaque module, en fonction des préférences et des besoins de chaque équipe. Cela offre une plus grande flexibilité dans le choix des technologies et permet d’adopter les dernières innovations sans avoir à réécrire toute l’application.
Est-ce qu’il y a des désavantages à faire des microfrontends ?
Complexité initiale
L’adoption des MFE peut entraîner une complexité supplémentaire lors de la mise en place de l’architecture et de l’intégration des différents modules. La gestion des dépendances entre les microfrontends et l’orchestration de leur communication peuvent être des défis techniques.
On peut penser par exemple à une librairie maison pour des composantes communes frontend (cases à cocher, sélecteur de date, etc.) qui devrait être partagée dans tous les microfrontends, ou encore à des services d’affaires permettant de faire des opérations sur les données reçues des services backend.
Il va de soit, par contre, que ces risques peuvent être mitigés s’ils sont attaqués en amont par une analyse plus poussée de l’architecture.
Performance
Si les microfrontends ne sont pas correctement optimisés et chargés de manière efficace, ils peuvent entraîner des surcoûts de performances, notamment en raison du chargement à la demande. Cela nécessite une planification soignée pour éviter tout impact négatif sur l’expérience utilisateur.
Par exemple, l’utilisation de librairies tierces dans un microfrontend peut rapidement faire augmenter la taille du paquet final de l’application. On peut aussi s’imaginer que si cette liberté d’utilisation des frameworks comme Angular ou React peut apporter des bénéfices, ceci implique que le framework lui-même doit être téléchargé avec ses dépendances à la demande.
Communication inter-microfrontends
La communication entre les MFE, par exemple pour partager des données ou gérer l’état global de l’application, peut être complexe. L’utilisation d’un modèle de communication approprié (par exemple, événements, API, messages) est nécessaire pour assurer une intégration fluide et éviter les problèmes de synchronisation.
Par exemple, si un composant d’un MFE requiert de l’information chargée depuis une API, il ne serait pas possible de simplement stocker l’information dans un service d’état et de se l’injecter dans un autre composant d’un autre MFE. Heureusement, il existe plusieurs solutions disponibles pour y parvenir, comme par exemple le LocalStorage du navigateur ou les CustomEvents de l’objet Window. Par contre, le principe de base d’un MFE est justement d’isoler les parties d’une application. Si vous avez beaucoup de données à partager entre plusieurs MFE, il semble que vous soyez dans une situation ou vous avez overengineered votre application et vous auriez dû choisir une approche monolithique traditionnelle.
Comment on y parvient ?
Approche framework avec Single-SPA
Single-SPA, ou Single Single-Page Application (lol), est une bibliothèque JavaScript open-source qui facilite la création de MFE. Contrairement aux autres approches de MFE, Single-SPA adopte une approche agnostique aux frameworks, ce qui signifie qu’il peut être utilisé avec différents frameworks frontaux tels que React, Angular, Vue.js, et bien d’autres.
Single-SPA étant une bibliothèque complète et puissante, le choix de cette technologie devrait être basé sur des limitations obtenues lors d’une preuve de concept. Je recommanderais fortement d’y allez avec une technologie comme celle-ci uniquement si les autres ne fonctionnent pas.
Approche WebPack avec Module Federation
Module Federation est un concept et une fonctionnalité clé de Webpack, un puissant outil de gestion des dépendances et de construction pour les applications web. Module Federation facilite la création de Micro Frontends (MFE) en permettant à plusieurs applications autonomes de partager et de consommer des modules (composants, bibliothèques, etc.) les uns des autres de manière dynamique.
Cette approche a la particularité d’être assez simple à mettre en place grâce à une courbe d’apprentissage plus accessible pour des développeurs curieux. Ce serait ma première recommandation.
Approche simple avec iFrame
L’utilisation d’iFrames (Inline Frames) pour créer des Micro Frontends (MFE) est une approche alternative pour construire des applications web modulaires. Dans cette approche, chaque microfrontend est encapsulé dans un iFrame, ce qui permet de les charger de manière indépendante tout en les intégrant dans une application principale. Cette approche a la particularité d’isoler très fortement les MFE les uns des autres.
Ceci peut être un avantage dans certains cas, mais aussi un désavantage dans d’autres. Il est donc important de tester vos hypothèses avec une preuve de concept complète. Je ne recommanderais pas du tout cette approche, sauf dans quelques cas précis, comme la refonte d’un système désuet vers des technologies de fine pointe.
Conclusion
Fiou! Aujourd’hui, on fait un bon survol de ce qu’est un MFE, à quoi ça sert, comment on peut mettre en place une application basée sur des MFE ainsi que les avantages et inconvénients des MFE et des technologies pour en faire. J’ai bien hâte de poursuivre la conversation avec vous dans les commentaires ci-dessous, sur les réseaux sociaux ou par messagerie privée. Si vous avez des questions ou commentaires, n’hésitez surtout pas à m’écrire.
Ceci dit, comme expliqué en introduction, nous avons pris la décision de remettre un peu d’ordre dans notre blogue. Aidez-nous à repartir en lion en partageant cet article avec vos collègues 😀 Vous êtes notre gaz!
Commentaires
Laisser un commentaire