David LACOURT

J'ai joué avec les #microfrontends. Je suis partis sur l'option #CustomElements / #WebComponents, plutôt que #WebPack et #ModuleFederation. C'est bien parti, mon objectif est de fédérer dans mon blog tous mes projets persos... là j'ai un blog en #SvelteKit, qui intègre un QR Code #StencilJS, et une app #AngularElements. 🤹‍♀️

L'article est en mode brouillon, je vais l'étoffer mais la démo est live : https://lacourt.dev/2023/01/21

Re-using my sample QR Code StencilJS Web Component

Sample QR Code component usage in a SvelteKit page.

Jan 30, 2023 at 9:47pmWeb
Show threadDavid LACOURTFeb 26, 2023
Depuis cette première version, j’ai ajouté mon CV qui est une app React et une autre application de gestion de feuille de personnage d’un jeu de rôle français méconnu, écrite en Vue. Donc actuellement j’ai réuni Svelte, React, Angular, Vue et Stencil sur une même page. Je trouve ça trop cool car en fait tout est du JS + HTML + CSS donc ça aurait toujours du être possible 😂
Show threadRenoir BoulangerFeb 25, 2023
@david_lacourt cool stuff les #microfrontends as tu pu te rendre avec plusieurs services écrits séparément et assemblés et collaborer entre eux?
Show threadDavid LACOURTFeb 26, 2023
@renoirb merci ☺️ j’ai juste assemblé différents side-projects dans un article de blog. Je n’avais pas pensé à les faire interagir plus que cela. Je vais y réfléchir, merci pour la suggestion 👍🏻
Show threadRenoir BoulangerFeb 26, 2023

Le livre "Micro Frontends In Action" [1] est merveilleux @david_lacourt

C'est le point; d'avoir chaque verticaux en isolation, et un protocole pour communiquer. Puis, bien, le nouveau #ContextAPI du #WebComponents Community Group [2,3], il est possible de réellement aller de façon découplée.

(les #DOM Event, c'est très puissant!)

1: https://micro-frontends.org/
2: https://github.com/webcomponents-cg/community-protocols/blob/47f55ffa/proposals/context.md
3: https://github.com/lit/lit/tree/%40lit-labs/context%400.2.0/packages/labs/context

Micro Frontends

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.

neuland - Büro für Informatik
Show threadDavid LACOURTFeb 27, 2023
@renoirb merci pour ces liens et suggestions de lecture, déjà j’ai redécouvert les Server Side Includes que j’utilisais en 1998 et que j’avais oublié ! Trop cool 👍🏻
Show threadRenoir BoulangerMar 5, 2023

@david_lacourt ouais, les <!--#include --> mais ça ne se limite pas a ça. Il y a aussi en Varnish le ESI qui peuvent être utilisés.

Il y a même des packages MJS servi via HTTP comme Deno le ferait. Donc, une équipe entretien un micro-frontend distribué via un fichier et pouvant être `import {} from "..."`

Comme par exemple, le "layout" est un CustomElement https://renoirb.com/esm-modules/app-layout-element.mjs

Inclus dans cette page https://renoirb.github.io/blogtini/using-app-layout.html

Très excitant comparé a lorsque j'ai commencé a en vivre en 2003.

Show threadRenoir BoulangerMar 5, 2023

@david_lacourt

Mais dans cet exemple

https://renoirb.github.io/blogtini/using-app-layout.html

La page servie assemble les choses, c'est la partie qu'on appelle «l'application shell». Elle détient les routes, et quelles parties de chaque équipe.

Dans mon exemple, ça ne charge seulement que le app layout, tandis que le shell est simplement "loadFromGitHub" aussi importé. Normalement il y aurait plus de parties impliqués.