The Microfrontend Revolution Module Federation with Angular @Jax2020

@ManfredSteyer ManfredSteyer The Microfrontend Revolution Module Federation with Angular Manfred
Steyer, ANGULARarchitects.io

@ManfredSteyer Do you remember her? Bonnie Barstow, PhD

@ManfredSteyer Software Engineering is a Team Sport

@ManfredSteyer Coordination b/w Teams

@ManfredSteyer Monolith Flight System

@ManfredSteyer Booking Service Check-in Service Boarding Service Luggage Service Microservices
Sub-Domains (DDD)

@ManfredSteyer Booking App Check-in App Boarding App Luggage App Microfrontends

@ManfredSteyer

@ManfredSteyer Contents #1: Consequences of Microfrontends #2: Module Federation #3:
Dynamic Module Federation #4: Version Mismatch #5: Possible Roadmap

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer Booking App Check-in App Boarding App Luggage App Autonomous
Teams

@ManfredSteyer Autonomous Teams Separate Development Separate Deployment Own architecture decisions
Own technology descisions

@ManfredSteyer

@ManfredSteyer Challenges UI Composition UI Consistency Bundle Size/ Sharing Dependencies
Version Conflicts between Microfrontends …

@ManfredSteyer Module Federation Solves Some of Them! UI Composition UI
Consistency Bundle Size/ Sharing Dependencies Version Conflicts between Microfrontends …

@ManfredSteyer

@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

@ManfredSteyer Dynamic Module Federation Shell (Host) Microfrontend (Remote) remotes: {
mfe1: "mfe1" } exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

} exposes: { Cmp: './my.cmp.ts' } import('mfe1/Cmp')

} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' })

} exposes: { Cmp: './my.cmp.ts' } loadRemoteModule({ remoteEntry: 'http://…', remoteName: 'mfe1', exposedModule: './Cmp' }) Helper Function using the Webpack API

@ManfredSteyer

@ManfredSteyer Dealing with Version Mismatch SemVer by Default: Highest compatiable
version Fallback: Use own version Relaxing: Configure a range of accepted versions Singleton: Warning or error

@ManfredSteyer Configuring Singletons shared: { "my-lib": { singleton: true, strictVersion:
true // Error instead of warning! } }

@ManfredSteyer Relaxing Version Requirements shared: { "my-lib": { requiredVersion: ">=1.0.1
<11.1.1" } }

@ManfredSteyer

@ManfredSteyer Well … Webpack 5 is currently beta Shown examples:
PoC w/ custom webpack conf + patched CLI lib CLI: Not before version 11 (fall 2020) Squeeze federation config into CLI's webpack config Custom Builder (e. g. ngx-build-plus)

@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives

@ManfredSteyer Conclusion Main Purpose of µFrontends: Scaling Teams Decoupling Federation:
Import From Other App Sharing Libs Take Care of Conflicts

@ManfredSteyer Be like Bonnie and think first! Evaluate whether you
need µFrontends No: Majestic Monolith Yes: Consider Module Federation

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

The Microfrontend Revolution Module Federation ...

The Microfrontend Revolution Module Federation with Angular @Jax2020

Transcript

More Decks by Manfred Steyer

Other Decks in Programming

Featured