MFE : Qwik Containers

[white moth]

Hello qwikifiers ,
I'm eager to test a microfrontend project using Qwik, leveraging its Container API (https://qwik.dev/docs/advanced/containers/). however, I find the documentation lacks detail, and I'm struggling to locate any concrete implementation examples. could you please assist me by providing examples or details on implementing this API? I'm determined to deepen my understanding and effectively implement this api.
many thanks

[rocky fog]

I believe @glacial moth has a cool tiktok clone example

The docs are in the process of being revamped, another example would be the Qwik Astro integration, which uses containers instead of islands.

[glacial moth]

https://github.com/gioboa/qwik-tiktok-microfrontends

You can look this one as well https://github.com/gioboa/qwik-dream-demo

[white moth]

Many thanks @glacial moth @rocky fog

[cobalt kite]

Looking forward to diving into these MFE examples. Thank you @glacial moth & @rocky fog .

[rocky fog]

For sure, we intend to improve the microfrontend experience even further post v2

[cobalt kite]

That sounds great.

In the meantime, is there a recommended pattern for using Qwik's Context feature to share Read & Write state across multiple MFE remotes? I am envisioning a Host App that contains a Mega Menu/Top Nav as one MFE remote that is responsible for creating a Context for a User state object that is observed and edited by the Account Management MFE remote.

Pardon if I may have missed this in the samples

[rocky fog]

hm... so I actually haven't tried one mega global context. Let me know how it goes! And perhaps @glacial moth might have some more insight here. In the case of Astro, we use custom events.

Qwik could do it like how Solid does it with global signals, but there are issues with that approach that they mention in their own tutorial when using it with SSR (bugs, memory leaks, etc.)

[cobalt kite]

I've searched for the Solid.js reference article to read for perspective but haven't come across it. Mind sharing a link if you have it handy?

RE: the problems (bugs, memory leaks, etc.)
Do these problems go away if we impose a constraint that the "shared state" is created and remains isolated to "just" the client side process. SSR data fetching via routeLoader$() would still execute but would be stateless?

I would love to successfully introduce Qwik to our company's Engineering leadership team. My hope is to build a prototype with several MFEs and a Host that is easily configurable for variants of the application that are used by different teams. A key aspect would be to maintain decoupled MFE remotes while sharing some shared state that cut across them.

[rocky fog]

Yep, so this is in solid's tutorial here:

If you're using context it's not a problem

But at least in solid's case where you can use signals globally, it is when server side rendering is involved

I would love to successfully introduce Qwik to our company's Engineering leadership team. My hope is to build a prototype with several MFEs and a Host that is easily configurable for variants of the application that are used by different teams. A key aspect would be to maintain decoupled MFE remotes while sharing some shared state that cut across them.

Awesome! Yeah if I recall AWS was recently looking into Qwik for their AWS console dashboard specifically because of Qwik's micro-frontend capabilities.

Qwik was built from the ground up as a micro-frontend (it doesn't expect to own the page). This is due to the primitive of containers in Qwik, which can have their own versions / applications.

We intend to improve the micro-frontend experience further post v2.

Qwik is based on interactions and events, and as such the current optimal way to communicate across containers is with custom events.

Now Qwik could have global signals in the future, as signals are not coupled to a component, it was a design decision to have them scoped, for the reasons mentioned above, but perhaps some more digging could be done by both consumers and contributors to figure out what we can do there to make the state management experience more seamless.

cc @upbeat estuary

[cobalt kite]

This is very helpful insight. And thanks for demarcating Global State (server side) versus Shared Context which I infer is a browser (client side) only construct. If I understand then I don't foresee a need for Global State that is shared across browser sessions; however, I hope to discover that Context and Events provide the primitives to faciltate Read/Write messaging for reactivity across 1:N Qwik Containers that encapsulate a single MFE.

Thanks again for the great insight and reminder to be more specific when approaching the loaded topic of "Shared state." I'll report back when I've made some progress with my prototype.

[cobalt kite]

@rocky fog , regarding the "In the case of Astro, we use custom events."
Is it possible to emit and observe events across Qwik containers? And if so, is there an up to date guide or example on how to do this to avoid the pitfalls of global state and over-couplling of the MFE sub-apps?

[rocky fog]

Yes, there's an example in the Astro readme. If you're using a custom event, you're already avoiding the pitfalls.

https://github.com/thejackshelton/astro-qwik-global-state-example/blob/main/src/components/counter.tsx