Micro frontends lab

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 with lit-element and lit-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 the app-three-service microservice.
• 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.