{"id":6363,"date":"2023-06-12T12:45:07","date_gmt":"2023-06-12T10:45:07","guid":{"rendered":"https:\/\/www.luklagroup.com\/sem-categoria\/architecture-micro-frontends-communication-et-strategie-de-tests\/"},"modified":"2023-06-12T12:45:07","modified_gmt":"2023-06-12T10:45:07","slug":"architecture-micro-frontends-communication-et-strategie-de-tests","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/pt-pt\/web-marketing-pt-pt\/architecture-micro-frontends-communication-et-strategie-de-tests\/","title":{"rendered":"Architecture micro frontends – Communication et strat\u00e9gie de tests"},"content":{"rendered":"\n

Nous avons pr\u00e9sent\u00e9 dans un pr\u00e9c\u00e9dent article<\/a> l’architecture micro frontends. Si vous n’\u00eates pas familier de ce type d’architecture, je vous conseille vivement de commencer par la lecture de celui-ci. Dans cet article, nous allons aborder plusieurs points de conception li\u00e9s \u00e0 ce type d’architecture, notamment sur la communication entre micro frontends et sur la strat\u00e9gie de tests. <\/p>\n\n\n\n

La communication entre micro frontends<\/h2>\n\n\n\n

Le but de l’architecture micro frontends est de d\u00e9coupler au maximum les diff\u00e9rentes parties d’une application. Mais voil\u00e0, le plus souvent certaines parties doivent interagir entre elles. Elles doivent pouvoir communiquer.<\/p>\n\n\n\n

Comment faire, alors que chaque micro frontends est potentiellement r\u00e9alis\u00e9 dans une technologie diff\u00e9rente ?<\/p>\n\n\n\n

Pour ce faire, on peut utiliser simplement les param\u00e8tres d’url, avec toutes les limitations que \u00e7a implique. Mais il existe d’autres solutions, plus pratiques, que nous allons aborder ci-dessous.<\/p>\n\n\n\n

Attributes + Properties<\/h3>\n\n\n\n

Dans le cas particulier des Web Components, on peut passer des donn\u00e9es avec les attributs directement via le code HTML.<\/p>\n\n\n\n

<product-details product-id=\"1234567890\"><\/product-details><\/code><\/pre>\n\n\n\n
L’exemple utilise via une properties<\/code> javascript l’identifiant du produit pour afficher les d\u00e9tails dudit produit.<\/p>\n\n\n\n
const monWebComponent = document.getElementById(\"mon-web-component\")\n \nmonWebComponent.produit = {\n   id: \"1234567890\",\n   name: \"Mon produit\",\n   price: 30.5\n}\n<\/code><\/pre>\n\n\n\n
Avantages<\/h4>\n\n\n\n
L’approche attributes<\/code> est semblable au transfert de donn\u00e9es de composant parent \u00e0 composant enfant dans les frameworks SPA actuels. C’est donc une fa\u00e7on de faire intuitive pour les d\u00e9veloppeurs front.<\/p>\n\n\n\n
Dans le cas de l’approche properties<\/code>, certaines librairies permettent m\u00eame de simplifier l’utilisation de ces derni\u00e8res en passant les donn\u00e9es – m\u00eame complexes – comme des attributes<\/code>.<\/p>\n\n\n\n
Inconv\u00e9nients<\/h4>\n\n\n\n
Le format de donn\u00e9es pass\u00e9 en attributes<\/code> reste assez limit\u00e9, car n’acceptant que des donn\u00e9es sous forme de cha\u00eenes de caract\u00e8res.<\/p>\n\n\n\n
Ces donn\u00e9es sont directement visibles dans le code, \u00e0 bannir pour les donn\u00e9es sensibles !<\/p>\n\n\n\n
Dom \/ Custom Events<\/h3>\n\n\n\n
Le DOM est notamment constitu\u00e9 d’une interface orchestrant les events, \u00e9v\u00e9nements qui ont lieu au sein de la page, qu’ils soient provoqu\u00e9s par l’utilisateur (clic de souris, touche enfonc\u00e9e par exemple), ou par d’autres \u00e9l\u00e9ments (vid\u00e9o\/audio en pause par exemple).<\/p>\n\n\n\n
On peut cr\u00e9er et utiliser ces events pour faire passer des donn\u00e9es via l’\u00e9l\u00e9ment window<\/code>.<\/p>\n\n\n\n
On distingue deux principes :<\/p>\n\n\n\n