Any plans on demo / template project? about micro-frontends

[naltatis]

Have you seen the product page example in the Repo? Up until now I only address integration on one page and data fetching/skeleton there.

I’m planning to add more examples to show how page transitions (html app shell) could be implemented. This is the next topic I’ll address.

After that I’ll go into performance topics, lazy loading, code splitting, bundling. And finally show a possible integration with a shared pattern library.

I currently don’t intend to build a ready to use boilerplate, which is production ready. My main goal is to show one way how it can be done.

I also haven’t decided yet if I want to add larger frameworks like Angular/react to the examples. I guess it might be helpful for some people, but for showing the mechanics I like sticking to simple plain JavaScript.

Where are you giving the talk? Is it public? Like to see your take on this.

[naltatis]

Yes, if you want client side page transitions you would have to establish a shared top-level router. This could also be done in a way that works server-side.

single-spa does a similar thing. They let the individual apps responde to url changes and let them take over control if they want to.

[naltatis]

Hi @amazzoccone,

Yes I would give every fragment/component it’s own data fetching and state management and it’s totally fine if a team decides to use GraphQL internally. It would also be ok for a team to share state between multiple of its own fragments on the same page, but not across different teams.

I really like the idea of stencil and played with their universal rendering feature a bit. I haven’t gotten the chance to use this in a bigger project yet. But it would be very cool if you could assemble an example with this.
Feel free to use the assets of the examples here. I could link or maybe integrate the example once it’s done.

Same goes for universal routing. As I said, here I’m planning to build an example myself, but don’t let that block you. I don’t have a schedule for this yet.

Thanks, naltatis

[amazzoccone]

@naltatis i have some doubts about this strategy for Micro frontends. How could be managed page transitions? Using a router in the front?
Mosaic implements something similar. What are the differences?
Thanks a lot!

[amazzoccone]

Thanks @naltatis ! 👍
UI Services have multiple Web Components and each one is responsable, is needed, of have their own State Management (Redux for example) and request API to get/post data?

Let's say the back system has an API Gateway built with GraphQL..
Some Web Components of a UI Service could use internally Apollo to simplify requests?

What do you think of StencilJS?
If you like the idea, I could work to contribute with a 4 example that would have a more complete stack:

• Webapp with a Router for SPA and SSR
• UI Services with Web Components built with StencilJS, Redux, Apollo/GraphQL

Thanks a lot!! 🙌