Federated Angular – Why and How? @AngularMaster @ngPoland

@ManfredSteyer ManfredSteyer Federated Angular – Why and How? Manfred Steyer,
ANGULARarchitects.io

@ManfredSteyer Which one is the best?

@ManfredSteyer It’s all about consequences in your very situation!

@ManfredSteyer Micro Frontends

@ManfredSteyer Contents #1 Why: Real-World Case Studies #2 How: Module
Federation #3 What: New Features

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)

@ManfredSteyer DATEV eG (~8000 Employees, 200 Products)

@ManfredSteyer Huge European Bank Domain A Domain B Domain C
Domain D Domain E Domain F eBanking

@ManfredSteyer Another Huge European Bank Details from Domain A Customer
Relationship Management Domain A Customer XYZ Domain B Domain C

@ManfredSteyer Quality Bytes (No Micro Frontends but Domain Cutting)

@ManfredSteyer Reasons for Micro Frontends Huge Product/ Product Suite Scaling
Teams & Domains Switching out Technologies Rapitely Changing Requirements

@ManfredSteyer Consequences Effort for „Meta Framework“ Sharing Code at Runtime
and Bundle Size Common Look and Feel

@ManfredSteyer

@ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding
App Boarding App Luggage App Luggage App 1st Step: Domain Slicing

@ManfredSteyer Idea const Component = await import('http://other-app/xyz') Does not work
with webpack/ Angular CLI Even lazy parts must be known at compile time!

@ManfredSteyer Webpack 5 Module Federation Shell (Host) Microfrontend (Remote) //
Maps Urls in // webpack config remotes: { mfe1: "mfe1" } // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' } import('mfe1/Cmp')

@ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend
(Remote) RemoteEntrypoint.js <script src="…"></script>

@ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:
[ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

@ManfredSteyer 1) ng add @angular-architects/module-federation 2) Adjust generated configuration 3)
ng serve

@ManfredSteyer

@ManfredSteyer Webpack 5 is Backed Into CLI 12 No need
for forcing the CLI into webpack 5 anymore: "resolutions": { "webpack": "^5.0.0" }, Feel free to use yarn or npm

@ManfredSteyer Better Monorepo Support Share like npm package

@ManfredSteyer Big Thanks to Webpack's Tobias Koppers

@ManfredSteyer npm run run:all

@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature
Feature Feature Feature Feature Feature Feature Feature … … … … … … … … … … … … … … … … … … Booking App Booking App Boarding App Boarding App Btw: Also Works Perfectly w/ Multiple Repos Repository n Repository 2 Repository 1

@ManfredSteyer Make sure you use Version ^12 for Angular 12!

@ManfredSteyer Reduce Boilerblate for Common Tasks!

@ManfredSteyer Web Components Support for Module Federation

@ManfredSteyer Reason

@ManfredSteyer

@ManfredSteyer Evolution, not Revolution! Keep Track with upcoming Angular CLI
versions More Web Components Support SSR Support Tools for Reducing Boilerplate

@ManfredSteyer Conclusion No free Lunch: Consequences Scaling Teams & Domains
Module Federation

@ManfredSteyer

@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io

Federated Angular – Why and How? @AngularMaster @ngPoland

Federated Angular – Why and How? @AngularMaster @ngPoland

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript