Repenser un site web peut s'avérer nécessaire lorsque ce dernier tend à se développer, surtout pour les activités e-commerce. En interne, l'architecture du site et de ses applications peut faire l'objet d'une restructuration appelée micro frontend. Le micro frontend a pour objectif principal de travailler sur des codes isolés, différents et indépendants des uns des autres.
Qu'est-ce qu'un micro frontend ?
Un micro frontend est la restructuration de l'architecture d'un site web ou d'une application selon des fonctionnalités indépendantes. Ces dernières sont gérées par différentes équipes dont l'objectif est de fragmenter les composantes d'une application pour qu'elles soient indépendantes des unes et des autres.
Quels sont les avantages d'une architecture micro frontend ?
Des équipes d'experts
L'approche architecturale du micro frontend permet à plusieurs intervenants aux compétences diverses d'intégrer le projet. Chacun avec ses propres formations et acquis, ils donnent naissance à la nouvelle architecture d'un site ou d'une application. En ayant un partage de connaissances de plusieurs experts, il est donc plus facile d'opter pour la meilleure décision en termes d'architecture. Les tests et les styles de codage sont donc confiés à des collaborateurs qualifiés dans leur domaine. L'avantage est que chaque équipe est indépendante les unes des autres.
Un développement d'interface amélioré
L'avantage de l'architecture en micro frontend se traduit par un excellent développement du processus des interfaces. Le fait d'avoir recours à différentes équipes indépendantes et spécialisées travaillant sur diverses fonctionnalités permet d'éviter des frais généraux ainsi que des frais de communication coûteux. De plus, l'élaboration de micro-interfaces est nettement plus rapide et beaucoup plus simple d'utilisation comparée aux logiciels monolithes.
Un codebase plus simple
En choisissant le micro frontend, l'entreprise opte donc pour un code source beaucoup plus petit qu'un code source d'un logiciel monolithique. Les codes source étant plus petits, ils sont d'autant plus accessibles et simples à utiliser pour les professionnels tels que les développeurs. Ce choix peut notamment éviter les problèmes liés à un couplage involontaire complexe des composants.
Une application web plus performante
A contrario des grandes applications difficiles à gérer, surtout lorsque ces dernières sont monolithes, une architecture micro frontend permet d'avoir une approche différente en fragmentant les éléments. Les tests et la maintenance sont facilités et chaque expert peut gérer ses propres difficultés sans impacter les autres parties. De plus, chaque intervenant peut faire le choix d'utiliser les outils qu'il souhaite.
Quels sont les inconvénients d'un micro frontend ?
Des dépendances récurrentes
Chaque structure de micro frontend est indépendante. De ce fait, l'inconvénient est que l'entreprise qui l'utilise perd les avantages d'une utilisation d'un gestionnaire de paquets. L'application construite sous micro frontend est constituée de nombreuses fonctionnalités et variantes pouvant être dispersées. Concrètement, les utilisateurs sont obligés de télécharger plus de données.
Au niveau du code, si ce sont des équipes différentes qui travaillent sur chaque projet, la manière de coder peut diverger. Ce qui pose un problème de cohérence, voire de duplication de code.
La présence de styles et de chevauchements
Le fait que les fonctionnalités soient traitées indépendamment peut malgré tout poser quelques problèmes. Chaque application (microfrontend) peut avoir ses propres styles. Par contre si pour une même classe des styles différents existent, ce sera alors le dernier style injecté au document qui écrasera les autres. Il arrive également que plusieurs éléments frontaux, faisant partie d'une même structure d'application, provoquent un chevauchement des règles CSS. Ceci pouvant légèrement entraver la réputation de la marque. Cela se traduit notamment par une interface utilisateur perturbée.
Même si des styles peuvent être partagés, du fait de l'indépendance de chaque application, il serait possible de rencontrer certaines variations UI mais aussi UX.
Risque de ralentissement de l'application
L'inconvénient d'utiliser le micro frontend est également le risque de ralentissement de l'application dû à plusieurs éléments en JavaScript. En effet, avoir un nombre important de JavaScript sur une même page provoque inévitablement un ralentissement, le framework ayant besoin de ressources complémentaires en CPU et RAM. Il serait donc judicieux de réduire les fichiers ou les supprimer.
Enfin, une architecture microfrontent demande une certaine organisation pour qu'elle puisse rester maintenable, évolutive et compréhensible.
Comment mettre en place le micro frontend ?
Exemple de partage d'un module avec Angular
Workspace
Pour présenter l'architecture microfrontend avec Angular, il est possible de mettre en place un workspace où placer toutes les applications.
ng new workspace --create-application=false
--create-application=false permet de créer le workspace sans application.
Applications
Maintenant que le workspace est prêt, il est possible d'y ajouter les applications. La première application qui sera créée, se nommera « home » et la seconde « users »
cd workspace
ng g application home --routing --style=scss
ng g application users --routing --style=scss
--routing prépare le routing
--style=scss on choisit notre pré-processeur CSS
Un dossier « projects » a été créé, où se trouvent les deux applications.
Composants
Il est ensuite possible d'ajouter le routing au projet « users » et trois composants, le premier qui serait, dans une application réelle, la page d'accueil de l'application "home", le deuxième serait pour afficher une liste d'utilisateurs, et enfin, le dernier, pour afficher les détails d'un utilisateur.
ng g c home --project home
ng g m users --routing --project users
ng g c users --project users
ng g c user --project users
"g" pour "generate"
"m" pour "module"
"c" pour "component"
app.component.html (home)
<div class="container">
<header>
<h1>HubSpot</h1>
<div class="links">
<a routerLink="/" class="link">Accueil</a>
<a [routerLink]="['users']" class="link">Liste des utilisateurs</a>
</div>
</header>
<router-outlet></router-outlet>
</div>
<header>
<h1>HubSpot</h1>
</header>
<router-outlet></router-outlet>
app.component.scss (home)
.container {
width: 550px;
margin: auto;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 30px;
background-color: #1A1A1A;
color: #fff;
}
.links {
display: flex;
flex-direction: column;
}
home.component.html (home)
<h1>Depuis Home</h1>
<p>home works!</p>
app-routing.module.ts (home)
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent,
}
];
users.component.html
<h1>Depuis Users</h1>
<p>users works!</p>
<a class="link" [routerLink]="['details']">Détails</a>
user.component.html
<h1>Depuis Users</h1>
<p>user works!</p>
styles.scss
.link {
display: inline-block;
padding: 15px;
background-color: aliceblue;
text-decoration: none;
color: #1A1A1A;
&:hover {
background-color: antiquewhite;
}
}
users-routing.module.ts
const routes: Routes = [
{ path: '', component: UsersComponent },
{ path: 'details', component: UserComponent },
];
app-routing.module.ts (users)
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'users'
},
{
path: 'users',
loadChildren: () => import('./users/users.module').then(m => m.UsersModule)
}
];
En suivant ces étapes, vous voilà maintenant avec une application qui propose une liste d'utilisateurs et une page présentant les détails d'un utilisateur.
Utiliser « users » dans « home »
Maintenant l'application "users" peut-être rendu accessible depuis l'application "home".
Utiliser @angular-architects/module-federation permettra de travailler avec Webpack Module Federation à la manière d'Angular.
ng add @angular-architects/module-federation --project home --port 4200 --type host
Il est possible de faire de même pour l'application "users". Cette fois-ci avec le type "remote".
ng add @angular-architects/module-federation --project users --port 4201 --type remote
Il faut noter l'argument –type qui, lorsque sa valeur est "host", permet de préparer le fichier de configuration webpack du projet désigné comme le projet depuis lequel vous aurez accès aux éléments exposés.
Plusieurs fichiers ont été générés, notamment webpack.config.js, webpack.prod.config.js à la racine de l'application et le fichier bootstrap.ts. Ce dernier reprend le contenu du fichier main.ts d'une application angular normale. Quant aux fichiers webpack ils contiennent le strict minimum pour faire fonctionner le Webpack Module Federation.
Quand –type a pour valeur "remote" alors la configuration webpack générée sera prête pour "exposer" les modules et composants du projet ciblé.
Pour rendre accessible le module UsersModule depuis l'application "home", il faut l'exposer ainsi :
webpack.config.js (users)
exposes: {
'./UsersModule': './projects/users/src/app/users/users.module.ts'
},
Et depuis l'application "home" il faut préciser où trouver le fichier remoteEntry.js de l'application "users".
webpack.config.js (home)
remotes: {
'users': 'http://localhost:4201/remoteEntry.js',
},
Utilisation
Maintenant que le module est disponible, il peut être utilisé.
app-routing.module.ts (home)
const routes: Routes = [
…,
{
path: 'users',
loadChildren: () => import('users/UsersModule').then(m => m.UsersModule)
},
];
users : nom du projet précisé dans le webpack.config.js (home)
UsersModule : nom du module précisé dans le webpack.config.js (users)
À cette étape, une erreur est attendue à la compilation. Il sera nécessaire de déclarer le module dans un fichier avec l'extension d.ts placé au même niveau que le dossier "app" de l'application "home". Dans cet exemple, il sera appelé "remotes.d.ts".
declare module 'users/UsersModule';
Et voilà, vous pouvez accéder à "users" depuis "home".
yarn run:all
http://localhost:4200/users
http://localhost:4200/users/details
Détails sur le code
shared
La propriété shared permet de définir les packages npm qui seront partagés entre l'application host et les microfrontends.
Par défaut, dans une application Angular, @angular-architects/module-federation - npm (npmjs.com) utilise sharedAll qui partage tous les packages présents dans le package.json ce qui n'est en général pas nécessaire. On préférera alors utiliser "share".
expose
C'est ici que nous exposons tout ce qui pourrait être partagé.
remote
C'est la configuration de l'application Host. Permet au host de savoir où trouver ce qui a été exposé.
Liens utiles
@angular-architects/module-federation - npm (npmjs.com)
create-mf-app - npm (npmjs.com)
Aller plus loin avec Angular
The Microfrontend Revolution: Module Federation in Webpack 5 - ANGULARarchitects
Aller plus loin avec React
Micro-Frontends Course - Beginner to Expert - YouTube
Exemples de sites web utilisant le micro frontend
L'entreprise Spotify utilise sur son site web le micro frontend. Des micro interfaces sont mises en place dans son application de bureau et ainsi arrivent à profiter des iframes. Ces dernières permettent à différentes parties de s'assembler pour former une même vue. Les iframes communiquent entre elles par l'intermédiaire d'un bus d'événements. Avec ce style de micro frontend, Spotify réalise un gain de temps sur la gestion de la mémoire de l'application.
Une autre enseigne utilisant le micro frontend pour son site internet est Leroy Merlin. L'enseigne a choisi de migrer son infrastructure vers GCP et a modifié complètement l'architecture logicielle. Les achats en ligne n'ont jamais cessé de progresser pour Leroy Merlin depuis 2018 environ. Depuis, l'enseigne a voulu se développer pour répondre aux besoins des internautes. Au départ, Leroy Merlin avait une seule équipe de collaborateurs qui gérait le site et ses fonctionnalités. Ce n'est qu'en 2014 que l'enseigne a opté pour une toute nouvelle méthodologie incluant plusieurs équipes devant gérer différentes bases de code selon divers serveurs. La mise en place de micro interfaces a permis à Leroy Merlin de développer ses applications plus facilement.
L'enseigne Airbnb a également mis en place le micro frontend. Les équipes ont revu complètement l'architecture du site au niveau du JavaScript de leur base de code. Ce changement a été essentiellement pensé pour que l'expérience des internautes soit plus fluide et agréable. La navigation sur le site d'Airbnb entre les onglets, les pages de résultats et les réservations devant être optimales, cela a convaincu l'enseigne d'intégrer une méthodologie différente dans son système de gestion de site et d'application.
Le micro frontend représente donc une excellente solution lorsque le site internet d'une entreprise ou son application devient trop complexe à gérer. En segmentant les fonctionnalités par métiers, chaque équipe est à même de se concentrer sur les besoins réels et les modifications à effectuer en interne dans le code.
Pour aller plus loin dans voPour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil website grader ; ou découvrez les modèles de site web gratuits de HubSpot.tre stratégie , téléchargez Website grader.
