{"id":6371,"date":"2022-10-06T16:43:37","date_gmt":"2022-10-06T14:43:37","guid":{"rendered":"https:\/\/www.luklagroup.com\/sem-categoria\/architecture-micro-frontends\/"},"modified":"2022-10-06T16:43:37","modified_gmt":"2022-10-06T14:43:37","slug":"architecture-micro-frontends","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/pt-pt\/web-marketing-pt-pt\/architecture-micro-frontends\/","title":{"rendered":"Architecture micro frontends"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"qu-est-ce-que-c-est\">Architecture micro frontends ? Qu&#8217;est ce que c&#8217;est ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019architecture micro frontends c\u2019est faire d\u2019une application web frontend <strong>un ensemble d\u2019applications ind\u00e9pendantes<\/strong> (cycle de vie, complexit\u00e9, technologie) <strong>cohabitant <\/strong>et <strong>communiquant <\/strong>sur le m\u00eame site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019objectif des micro frontends est dans la continuit\u00e9 de celui des micro-services : <strong>fragmenter la complexit\u00e9<\/strong> pour avoir des codes isol\u00e9s, sp\u00e9cifiques, maintenables et d\u00e9ployables en continu les uns ind\u00e9pendamment des autres.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En r\u00e9sum\u00e9 : <strong><em>un style architectural o\u00f9 les applications frontales livrables ind\u00e9pendamment sont compos\u00e9es en un tout plus grand<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2022\/10\/Schema-archi-micro-frontends-1600x815.jpg\" alt=\"\" class=\"wp-image-4295\"\/><figcaption>Application en architecture micro frontends<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"pour-quoi-faire\">Pour quoi faire ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Certaines entreprises peinent \u00e0 assurer <strong>la maintenance<\/strong> de leurs applications web pour diverses raisons :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Les technologies utilis\u00e9es sont d\u00e9su\u00e8tes<\/li><li>Les batteries de tests ne sont pas suffisantes pour s\u00e9curiser l\u2019application : une modification sur une fonctionnalit\u00e9 entra\u00eene une r\u00e9gression sur d\u2019autres fonctionnalit\u00e9s\u2026<br><br>Finalement, la moindre \u00e9volution devient une t\u00e2che complexe et risqu\u00e9e.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">D\u2019un autre c\u00f4t\u00e9, les exigences du business et les attentes des utilisateurs ne cessent d\u2019augmenter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On pourrait imaginer que recommencer une application de z\u00e9ro pourrait \u00eatre la meilleure des solutions. Mais ce n\u2019est bien entendu pas si simple :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00c7a coute cher<\/li><li>C\u2019est long<\/li><li>Les fonctionnalit\u00e9s d\u00e9j\u00e0 d\u00e9velopp\u00e9es (parfois sur des ann\u00e9es) qui fonctionnent pourraient ne plus fonctionner<\/li><li>Et finalement, rien ne nous assure que la nouvelle application apportera une r\u00e9elle plus-value. Le r\u00e9sultat sera-t-il au niveau des attentes ?<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">C\u2019est l\u00e0 que les micro frontends montrent leur int\u00e9r\u00eat :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Les bases de code sont plus petites, plus coh\u00e9rentes et donc plus maintenables<\/li><li>L\u2019organisation du projet peut se constituer d\u2019\u00e9quipes d\u00e9coupl\u00e9es et autonomes<\/li><li>Il est possible de mettre \u00e0 niveau, de mettre \u00e0 jour ou m\u00eame de r\u00e9\u00e9crire des parties de l&#8217;interface de mani\u00e8re plus atomique et incr\u00e9mentale<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Bref, faire \u00e9voluer progressivement l\u2019application, brique par brique, en continuant de g\u00e9n\u00e9rer du trafic.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"les-grands-principes\">Les grands principes de l&#8217;architecture micro frontends<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9ploiement ind\u00e9pendant<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La capacit\u00e9 de d\u00e9ploiement ind\u00e9pendante des micro-frontend est essentielle car elle <strong>r\u00e9duit <\/strong>la port\u00e9e d&#8217;un d\u00e9ploiement et donc <strong>les risques<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque micro-frontend doit avoir son propre pipeline de livraison continue, qui le construit, le teste et le d\u00e9ploie jusqu&#8217;\u00e0 la production.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous devrions \u00eatre en mesure de d\u00e9ployer chaque micro- frontend sans se soucier de l&#8217;\u00e9tat actuel des autres bases de code ou pipelines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Peu importe si l&#8217;ancien monolithe suit un cycle de publication fixe, manuel et trimestriel, ou si l&#8217;\u00e9quipe voisine a pouss\u00e9 une fonctionnalit\u00e9 \u00e0 moiti\u00e9 termin\u00e9e ou cass\u00e9e dans sa branche principale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em><strong>Si un micro frontal donn\u00e9 est pr\u00eat \u00e0 passer en production, il devrait pouvoir le faire.<\/strong><\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2022\/10\/Deploiement-micro-frontends-1-1600x575.png\" alt=\"\" class=\"wp-image-4305\"\/><figcaption>D\u00e9ploiement de micro frontends<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Des \u00e9quipes autonomes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un autre avantage du d\u00e9couplage des bases de code et des cycles de vie des publications est de tendre vers la cr\u00e9ation d&#8217;\u00e9quipes enti\u00e8rement ind\u00e9pendantes, qui peuvent \u00eatre garantes d\u2019une section d&#8217;un produit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les \u00e9quipes peuvent avoir la pleine propri\u00e9t\u00e9 de tout ce dont elles ont besoin pour offrir de la valeur aux clients, ce qui leur permet d&#8217;<strong>agir rapidement et efficacement<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour que cela fonctionne, nos \u00e9quipes doivent \u00eatre form\u00e9es autour de tranches verticales de fonctionnalit\u00e9s commerciales, plut\u00f4t qu\u2019autour de capacit\u00e9s techniques.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un moyen simple est de d\u00e9couper le produit en fonction de ce que les utilisateurs finaux verront.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ainsi chaque micro- frontend encapsule une seule page de l&#8217;application et une seule \u00e9quipe s\u2019en occupe de bout en bout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2022\/10\/Organisation-e\u0301quipe-micro-frontends-1600x808.png\" alt=\"\" class=\"wp-image-4289\"\/><figcaption>Organisation des \u00e9quipes avec une application micro frontends<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"la-pratique\">L&#8217;architecture micro frontends en pratique<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un front end aujourd\u2019hui qu\u2019est-ce que c\u2019est ?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Majoritairement, c\u2019est une interface utilisateur r\u00e9alis\u00e9e avec les technologies HTML\/CSS\/JS.<br>C\u00f4t\u00e9 javascript, les frameworks \u00ab \u00e0 la mode \u00bb sont g\u00e9n\u00e9ralement, Angular, VueJs, React (Svelte ?).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Int\u00e9grer du contenu, telle une vid\u00e9o YouTube, dans son application via une balise <code>iframe<\/code>, c&#8217;est le d\u00e9but d\u2019un micro-front end.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La vid\u00e9o est alors une brique autonome faisant int\u00e9gralement partie de l\u2019application.<br>L\u2019iframe n\u2019est toutefois pas une solution recommand\u00e9e pour organiser son application en micro frontends pour de nombreuses raisons :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Incompatible avec un Responsive Design<\/li><li>Probl\u00e8mes de s\u00e9curit\u00e9<\/li><li>Difficult\u00e9 pour le r\u00e9f\u00e9rencement<\/li><li>Difficult\u00e9s de communiquer avec les autres parties de l\u2019application due \u00e0 l\u2019unique possibilit\u00e9 qu\u2019est <em>window.postMessage()<\/em><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Les Web Components<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Selon la <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/Web_Components\">d\u00e9finition de mozilla.org&nbsp;<\/a>: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Les composants web (Web Components) sont un ensemble de plusieurs technologies qui permettent de cr\u00e9er des \u00e9l\u00e9ments personnalis\u00e9s r\u00e9utilisables, dont les fonctionnalit\u00e9s sont encapsul\u00e9es en dehors du reste du code et qui peuvent \u00eatre utilis\u00e9es au sein d&#8217;applications web.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A l\u2019inverse des composants React, Vue, Angular ou de tout autre framework JavaScript, ces composants sont (enfin&nbsp;!) support\u00e9s nativement par la majorit\u00e9 des navigateurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Concr\u00e8tement un web component est compos\u00e9 d\u2019un template HTML encapsul\u00e9 dans un&nbsp;<a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/Web_Components\/Using_shadow_DOM\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Shadow DOM<\/em><\/a>&nbsp;\u2013 document imbriqu\u00e9 dans le document et \u201ccach\u00e9\u201d du reste de l\u2019arbre \u2013 auquel sont attach\u00e9s les scripts et les styles du web component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour injecter un web component dans son application, il suffit alors d\u2019une balise personnalis\u00e9e dans le code HTML et d\u2019un script utilisant l\u2019API&nbsp;<em>Custom Elements<\/em>&nbsp;qui permet de d\u00e9finir et d\u2019injecter notre micro frontend dans cette balise.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html&gt;\n &lt;head&gt;\n  &lt;script src=\"https:\/\/mon-site.fr\/web-components.js\" async&gt;&lt;\/script&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n    &lt;react-web-component&gt;&lt;\/react-web-component&gt;\n    &lt;angular-web-component&gt;&lt;\/angular -web-component&gt;\n    &lt;autre-web-component&gt;&lt;\/autre-web-component&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Librairie&nbsp;pour Vue.js&nbsp;: <a href=\"https:\/\/github.com\/vuejs\/vue-web-component-wrapper\" target=\"_blank\" rel=\"noreferrer noopener\">@vue\/web-component-wrapper<\/a><\/li><li>Librairie&nbsp;pour Angular&nbsp;: <a href=\"https:\/\/angular.io\/guide\/elements\" target=\"_blank\" rel=\"noreferrer noopener\">@angular\/elements<\/a>&nbsp;<\/li><li>Librairie pour React&nbsp;: <a href=\"https:\/\/direflow.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Direflow<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Avantages <\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Les web components sont r\u00e9utilisables et adaptables \u00e0 presque tous les cas d\u2019usage.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On peut les encapsuler dans un&nbsp;<em>Shadow DOM<\/em>&nbsp;qui prot\u00e8ge notamment de tout conflit de style \u00e9ventuel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On peut imbriquer des web components dans des web components.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Iconv\u00e9nients<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Les web components sont g\u00e9n\u00e9r\u00e9s c\u00f4t\u00e9 client par le script JS associ\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De ce fait, il est compliqu\u00e9 de les rendre c\u00f4t\u00e9 serveur<strong>&nbsp;<\/strong>en cas de besoin en r\u00e9f\u00e9rencement naturel par exemple.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019encapsulation via&nbsp;<em>Shadow DOM<\/em>&nbsp;pose aujourd\u2019hui des probl\u00e8mes d\u2019accessibilit\u00e9 web encore non r\u00e9solus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rendu c\u00f4t\u00e9 serveur : Node.JS \/ Express \/ EJS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De plus en plus d\u2019applications utilisent le rendu c\u00f4t\u00e9 serveur (<em>Server-Side Rendering)<\/em>&nbsp;pour coupler l\u2019affichage dynamique des applications rendues c\u00f4t\u00e9 client et le r\u00e9f\u00e9rencement naturel qu\u2019offrent les&nbsp;<a href=\"https:\/\/blog.octo.com\/a-la-decouverte-des-architectures-du-front-2-4-les-multiple-page-applications\/\">MPA<\/a> (Multiple Page Applications).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aujourd\u2019hui les frameworks les plus connus sont Next.js (React) et Nuxt.js (Vue).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gr\u00e2ce au&nbsp;<a href=\"https:\/\/ejs.co\/\">module de templating EJS d\u2019Express<\/a>, on peut alors composer des applications rendues c\u00f4t\u00e9 serveur sur la m\u00eame page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour ce faire, chaque application vivant \u00e0 une adresse diff\u00e9rente est requ\u00eat\u00e9e, assign\u00e9e \u00e0 une variable EJS, puis rendue en fonction des templates.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* index.js *\/\nserver.get(\"\/\", (req, res) =&gt;\n Promise.all(&#91;\n   get(\"https:\/\/adresse-react.fr\"),\n   get(\"https:\/\/adresse-vue.fr\"),\n   get(\"https:\/\/adresse-angular.fr\"),\n   get(\"https:\/\/adresse-ember.fr\")\n ])\n   .then((responses) =&gt; {\n     res.render(\"index\", {\n       react: responses&#91;0],\n       vue: responses&#91;1],\n       angular: responses&#91;2],\n       ember: responses&#91;3],\n     });\n   })\n   .catch((error) =&gt; res.send(error.message))\n)\n&lt;!-- index.ejs --&gt;\n&lt;html&gt;\n &lt;head&gt;...&lt;\/head&gt;\n &lt;body&gt;\n    &lt;%- react %&gt;\n    &lt;%- vue %&gt;\n    &lt;%- angular %&gt;\n    &lt;%- ember %&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Avantages<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Le r\u00e9f\u00e9rencement naturel est optimis\u00e9 car le premier affichage du site et de ses micro frontends dans le navigateur ne n\u00e9cessite pas l\u2019ex\u00e9cution de JavaScript, plus long \u00e0 charger que HTML et CSS, et non lu par la majorit\u00e9 des&nbsp;<em>web crawlers<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Inconv\u00e9nients<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">On retrouve le probl\u00e8me classique des MPA: le rafra\u00eechissement automatique lors d\u2019un changement de page est un frein \u00e0 la fluidit\u00e9 de la navigation, et donc \u00e0 l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Framework Single SPA<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Single-SPA est une technique \u00e0 part puisqu\u2019il s\u2019agit d\u2019un framework d\u00e9di\u00e9 \u00e0 l\u2019impl\u00e9mentation de micro frontends \u00e0 partir de plusieurs SPA (d\u2019o\u00f9 son nom).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C\u2019est un \u00ab m\u00e9ta-framework \u00bb, cat\u00e9gorie \u00e9mergente avec le d\u00e9veloppement des micro frontends, visant le besoin de centraliser la gestion des cycles de vie et la communication inter-applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le principe de Single-SPA est le suivant :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Chaque micro frontend impl\u00e9mente 3 m\u00e9thodes \u2013 <em>bootstrap<\/em>, <em>mount<\/em> et <em>unmount<\/em> \u2013 permettant respectivement de cr\u00e9er l\u2019application, de l\u2019attacher au DOM et de l\u2019en retirer.<\/li><li>Une application \u201cracine\u201d (root-config) permet d\u2019orchestrer le positionnement et l\u2019affichage dynamique des applications, en fonction des routes.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Avantages<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019avantage principal de Single-SPA est de pouvoir migrer une application SPA existante en micro-frontend gr\u00e2ce aux librairies qu\u2019il propose.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Inconv\u00e9nients<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">La documentation ne permet pas encore une prise en main facile et les formations un peu ch\u00e8res pour faire un POC.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On observe encore des bugs d\u2019affichage non r\u00e9solus dans certains cas (<em>l\u2019unmount<\/em> des micro frontends Angular).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Comme le framework est bas\u00e9 sur des SPA, le rendu c\u00f4t\u00e9 serveur n\u2019est pas disponible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"et-ensuite\">Et ensuite<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cet article se termine ici, mais il y a encore beaucoup \u00e0 dire sur ce type d\u2019architecture.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans un prochain article, nous irons un peu plus loin dans la mise en pratique de ces applications avec trois questions importantes&nbsp;:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li>Comment faire communiquer les diff\u00e9rentes parties d\u2019une telle application, potentiellement r\u00e9alis\u00e9es dans des technologies diff\u00e9rentes&nbsp;?<\/li><li>Quelle est le meilleur moyen pour communiquer avec une API&nbsp;?<\/li><li>Quelle strat\u00e9gie de tests peut-on mettre en place, pour assurer la coh\u00e9rence et le bon fonctionnement de cet ensemble&nbsp;?<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Architecture micro frontends ? Qu&#8217;est ce que c&#8217;est ? L\u2019architecture micro frontends c\u2019est faire d\u2019une application web frontend un ensemble d\u2019applications ind\u00e9pendantes (cycle de vie, complexit\u00e9, technologie) cohabitant et communiquant sur le m\u00eame site. L\u2019objectif des micro frontends est dans la continuit\u00e9 de celui des micro-services : fragmenter la complexit\u00e9 pour avoir des codes isol\u00e9s, [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":6372,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[183,184,182],"tags":[],"class_list":["post-6371","post","type-post","status-publish","format-standard","has-post-thumbnail","category-apps-data-pt-pt","category-change-adopt-pt-pt","category-web-marketing-pt-pt"],"_links":{"self":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=6371"}],"version-history":[{"count":0,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6371\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media\/6372"}],"wp:attachment":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=6371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=6371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=6371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}