Micro Frontends and Monorepos: Smart Idea or Contradiction?

@ManfredSteyer ManfredSteyer Micro Frontends and Monorepos: Smart Idea or Contradiction?
Manfred Steyer, ANGULARarchitects.io

@ManfredSteyer

@ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage Example

@ManfredSteyer Micro Frontends

@ManfredSteyer

@ManfredSteyer Contents #1 Monorepo vs. Multirepo #2 Federated Angular #3
Federation w/ Monorepos

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@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 Option 1: One App per Domain Monorepo

@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 Option 2: One Monorepo per Domain Publish shared libs seperately via npm Repository n Repository 2 Repository 1

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

@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) RemoteEntry.js <script src="…"></script>

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

@ManfredSteyer

@ManfredSteyer ?

@ManfredSteyer Custom Builder

@ManfredSteyer

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

@ManfredSteyer

@ManfredSteyer Tooling & Generator https://nrwl.io/nx

@ManfredSteyer Scenario Separately deployed Just loaded once

@ManfredSteyer

@ManfredSteyer Just one Version in Monorepo!

@ManfredSteyer However … Deploy MFE1 Change Shared Lib Deploy MFE2
Conflict?

@ManfredSteyer Solution 1 (Prefered) Deploy all changed apps in release
branch together!

@ManfredSteyer Make Parsing in Build Process Easier

@ManfredSteyer Solution 2a Deploy MFE1 Change Shared Lib v1.2 Deploy
MFE2 Change Shared Lib v1.1 Share highest compatible version: v1.2

@ManfredSteyer Solution 2b Deploy MFE1 Change Shared Lib v2.1 Deploy
MFE2 Change Shared Lib v1.1 Conflict? Prevent with E2E tests!

@ManfredSteyer Configuring // Required Version in app's webpack.config.js shared: {
[…] sharedMappings.getDescriptor('auth-lib', '^1.1'), } // Assign version number in lib's package.json "version": "1.2"

@ManfredSteyer Current Pitfalls (working on it …) See npm page

@ManfredSteyer

@ManfredSteyer When can we have it? Webpack 5 and Module
Federation: final Angular CLI 11: Experimental Opt-in for webpack 5 Angular CLI 12: Official webpack 5 integration

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

@ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends
Monorepo Always Deploy Changed Apps Or: Assign Versions

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

Micro Frontends and Monorepos: Smart Idea or Co...

Micro Frontends and Monorepos: Smart Idea or Contradiction?

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript