Qu’est-ce qu’un micro frontend ?

Qu’est-ce qu’un micro frontend ?

La plupart des développeurs ont déjà entendu parler de l’architecture de microservices, mais le terme de micro frontend est moins connu. Comme son nom l’indique, le concept de micro frontend est similaire à celui des microservices. Son objectif est de résoudre la plupart des problèmes relatifs aux applications monolithiques : elles sont trop volumineuses, difficiles à utiliser, à modifier, et inviter de nouvelles personnes à travailler sur ces applications peut s’avérer difficile. De plus, si plusieurs équipes travaillent sur différentes parties de l’application, elles devront coordonner toutes leurs modifications.

Les microservices vous aident à diviser le back-end en plusieurs services indépendants. Vous pouvez utiliser la même approche pour diviser une application monopage en applications plus petites. Vous aurez alors besoin d’un « orchestrateur » pour réunir les différentes parties afin que l’utilisateur ne remarque aucun changement.

Quelles sont les alternatives à l’architecture micro frontend ?

Bien sûr, il existe d’autres moyens de gérer certains des aspects indésirables liés aux énormes applications, en séparant une partie du code dans le paquet npm, par exemple. Cela peut résoudre une partie du problème, notamment en réduisant la taille du référentiel. Dans Angular, vous pouvez également séparer le code dans un module et appliquer un chargement différé. Cela peut permettre, dans une certaine mesure, un fractionnement vertical de l’application. Mais cela présente également des inconvénients, comme celui de devoir générer le projet de premier niveau lorsque l’une des dépendances est mise à jour. L’expérience développeur n’est pas non plus idéale. Lorsqu’on utilise un framework, quel qu’il soit, il vaut mieux tout mettre à jour vers la même version, mais c’est une tâche colossale que personne n’a envie de faire. Vous avez également la possibilité de joindre plusieurs applications via l’iframe. Cela les rend indépendantes, mais peut-être trop, car la communication inter-applications pose problème, tout comme le partage du code, des styles, etc. 

Micro frontends : un bon compromis ?

Les micro frontends combinent ces deux approches. Chaque micro frontend est une application distincte comparable à une application monopage. Ils ne sont pas compilés dans un index.html avec des fichiers de script et de style liés, mais dans un module JavaScript. À la place d’une iframe dans l’application « principale », le code indique que lorsque l’URL correspond à un certain modèle, le module est alors chargé en différé et placé à un endroit spécifique. Il est ainsi possible d’avoir plusieurs applications interconnectées sur la même page.

Par conséquent, les micro frontends n’ont pas besoin de gérer la mise en page de l’application ni les règles CSS de base qui ne peuvent être traitées que dans l’application principale. Autre avantage : si plusieurs micro frontends utilisent la même version de React, ils peuvent partager le même module React. Il n’est pas nécessaire de le télécharger séparément pour chaque micro frontend. Lorsqu’il y a différentes versions d’un module JavaScript, cela n’est pas non plus un problème.

Par contre, il faut s’assurer que les styles des micro frontends ne s’appliquent pas à d’autres parties de l’application, c’est l’un des principaux soucis. Heureusement, la plupart des frameworks d’interface utilisateur incluent des outils permettant de gérer cela facilement.

Outils pour les architectures micro frontend

Écrire votre propre code pour charger des applications micro frontend serait une tâche assez fastidieuse. Heureusement, de nombreux frameworks permettent de gérer l’orchestration et offrent des outils pour convertir les applications écrites dans d’autres frameworks populaires au format micro frontend.

Chez Pure, nous avons choisi single-spa. Il présente plusieurs avantages : il est facile à comprendre, il prend en charge les frameworks JavaScript et dispose d’une documentation détaillée. En outre, single-spa propose plusieurs types de micro frontends, chacun adapté à des tâches légèrement différentes.

Pour l’instant, nous utilisons uniquement le type « Application », car c’est le plus facile à utiliser pour passer d’une application monopage à des micro frontends. Les autres types nécessitent également une architecture micro fronted plus détaillée. Le type « Application » est le type recommandé par défaut par les créateurs de single-spa.

Application

Parcel

Utility

Routage

Une ou plusieurs routes

Non

Non

API

API déclarative

API impérative

Exporte l’interface

IU

Affiche l’IU

Affiche l’IU

Peut afficher l’IU

Cycle de vie

single-spa

Propre

Module externe sans cycle de vie

Quand l’utiliser

Bloc élémentaire

Composant pouvant être utilisé dans différents frameworks

Partage des variables logiques

Création de micro frontends à l’aide d’un framework d’application monopage

Actuellement, nous utilisons single-spa pour l’une de nos applications les plus importantes, qui contient cinq micro frontends. Parfois, d’autres équipes que celles chargées du développement de l’application principale travaillent sur ces micro frontends. Heureusement, après six mois d’utilisation, aucun problème n’a été signalé. Nous sommes également ravis que l’application principale ne soit pas aussi chargée que par le passé et qu’elle puisse être mise à niveau plus facilement. En outre, nous n’avons plus peur des effets secondaires lors de l’ajout d’une nouvelle fonctionnalité, car cela passe généralement par un micro frontend. Dans un avenir proche, nous aimerions diviser les front-ends d’autres grandes applications que nous développons chez Pure, car les avantages sont susceptibles d’être également assez importants. Si vous rencontrez des problèmes similaires aux nôtres, nous vous conseillons d’essayer les micro frontends.

800-379-7873 +44 2039741869 +43 720882474 +32 (0) 7 84 80 560 +33 1 83 76 42 54 +49 89 12089253 +353 1 485 4307 +39 02 9475 9422 +31 202457440 +46850541356 +45 2856 6610 +47 2195 4481 +351 210 006 108 +966112118066 +27 87551 7857 +34 51 889 8963 +41 43 505 28 17 +90 850 390 21 64 +971 4 5513176 +7 916 716 7308 +65 3158 0960 +603 2298 7123 +66 (0) 2624 0641 +84 43267 3630 +62 21235 84628 +852 3750 7835 +82 2 6001-3330 +886 2 8729 2111 +61 1800 983 289 +64 21 536 736 +55 11 2655-7370 +52 55 9171-1375 +56 2 2368-4581 +57 1 383-2387 +48 22 343 36 49
Votre navigateur n’est plus pris en charge !

Les anciens navigateurs présentent souvent des risques de sécurité. Pour profiter de la meilleure expérience possible sur notre site, passez à la dernière version de l’un des navigateurs suivants.