For lab instructions, see the lab documentation.
For the completed version of this lab, see https://github.com/kito99/micro-frontends-demo.
This is a simple application that demonstrates one approach to creating Micro frontends: using Web Components to integrate different web apps. It was originally demoed at Oracle CodeOne 2019 in San Francisco as part of the talk Micro Front Ends: Breaking Up the Front-End Monolith (slides) (mind map) by Kito D. Mann (@kito99), Principal Consultant at virtua.tech.
There are several sub-projects in this repo:
orchestrator- Entry point for the app; simple HTML page that uses the Vaadin Router web component to dynamically load different micro frontends.app-one- Simple web app that uses Web Components. Built withlit-elementandlit-html, and uses the cute emoji slider web component.app-two- Default app created using the Angular 8 CLI, but packaged as a web component via Angular Elements.app-three- Another Angular 8 created via the CLI and packaged via Angular Elements, but this one uses the PrimeNG Table component to talk to theapp-three-servicemicroservice.app-three-service- Simple microservice built using Java and the MicroProfile standard running on Payara Micro; returns canned data.
NOTE: This project does not currently use any polyfills for Web Components or other standards, so evergreen browsers are required. (If you want polyfills, you'll need to add them from https://github.com/webcomponents/polyfills)
It's theoretically possible to include other technologies using this method, such as React via Adobe's react-webcomponent, or Vue.js via vue-web-component-wrapper.