This project was created to create an instructional video on how to split your angular application into multiple microfrontends using web components.
Watch Web Component-based Micro Frontends with Angular on YouTube
We have also each published a post on our blogs based on this video:
- Read Why Microfrontends? on traveling-coderman.net
- Read Web Component-based Micro Frontends with Angular on xkons.de
$ git clone https://github.com/fboeller/microfrontends-with-angular.git
$ cd microfrontends-with-angular
$ npm install
$ npm start
A visit to localhost:4200 shows the application.
- Vertical services (backend and frontend are fully owned by one team, see micro-frontends.org)
- Ship code independently and faster
- Freedom from existing opinionated codebase
- Failures will likely only affect your microfrontend and not the whole app and you can release a fix more quickly
- your releases are slow
- you need to wait for other teams for unblocking the release pipeline
- it is not clear who owns which views
- bigger bundle size
- added complexity of stitching shell app and microfrontends together
- microfrontends are more tightly coupled since they share common dependencies
iframes are more isolated while web-components are more tightly integrated with the application that embeds them.
Modals and toast messages are only displayed within the element of the iframe itself and cannot "escape" it. This is why with iframes you would need to use some mechanisms like Window.postMessage to let the outer application know that it should display a modal or toast message with some specific content that is passed along.
The DOM of the iframe is separate from the DOM of the embedding application. This makes it harder to use CSS variables for example.