What is this?
In this application the Micro Frontends are used directly in a static html webpage. Check Applications submenu for other website technologies that are using the same Micro Frontends components.
How does this work?
The Micro Frontends are loaded from a CDN and used directly in this HTML using 2 lines of code. After that, the native HTML tags collection is extended with the Micro Frontends components, like HeaderComponent or GlobalCounterComponent.
Why should I be amazed?
Usecase 1: The same header in all applications
If you navigate through Applications in the menu you will notice that each website has a different URL. However, the menu is the same on all pages (both UI and functionality). Of course, there are customization hooks for the header component.
Usecase 2: MicroFrontend components can have state and communicate with its own API
For example, the GlobalCounterComponent is a simple counter that persists value on the backend and is shared with all the applications and users. Click on the counter and then navigate to another application. You will notice that the counter value is the same. Try also in another browser or another device.
Usecase 3: Components can share state
Here are 2 more instances of the GlobalCounterComponent. If you increment any of the 3 counters, all of them will be incremented.
Here is a ResetGlobalCounterComponent that will reset all the counters.
Clicking on it will reset the :
Usecase 4: Components can be specific to user's current session
And the session can be shared across multiple applications in the same browser. Below is a MicroFrontend component for configuring your name. Do it, then navigate to another application and check the header.