Camel and Eye of a Needle: Integration of SPA-based Micro Frontends

@ManfredSteyer ManfredSteyer Camel and Eye of a Needle Manfred Steyer,
ANGULARarchitects.io Integration of SPA-based Micro Frontends

@ManfredSteyer Which one is the best?

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

@ManfredSteyer

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

@ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1
Strict Borders

@ManfredSteyer Shared Booking Boarding

@ManfredSteyer Shared Booking Boarding Not officially tested Version Mismatches vs.
Bundle Sizes

@ManfredSteyer #1 Approaches: Traditional SPAs #2 Approaches: "New Wave"

@ManfredSteyer Manfred Steyer

@ManfredSteyer

@ManfredSteyer µFrontend SPA µFrontend SPA µFrontend SPA

@ManfredSteyer

@ManfredSteyer µService µFrontend µFrontend µFrontend Shell

@ManfredSteyer iframe Bootstrapping several SPAs Module Federation + meta frameworks
using these approaches e. g. SAP Luigi Framework

@ManfredSteyer <other-spa></other-spa> <script src="other-spa/bundle.js"></script>

@ManfredSteyer const script = document.createElement('script'); script.src = 'other-spa/bundle.js'; document.body.appendChild(script); const
myElement = document.createElement('other-spa'); myElement['visible'] = true; document.body.appendChild(myElement);

@ManfredSteyer Option: Wrap them into Web Components Angular App (MFE)
React App (MFE)

@ManfredSteyer const Component = import('http://other-app/xyz')

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

@ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ]
shared: [ "@angular/core", "…" ]

@ManfredSteyer Single Framework/ Version Multiple Frameworks/ Versions Like Lazy Loading
Like bootstrapping several SPAs + Sharing where same version No workarounds Some workarounds

@ManfredSteyer

@ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net

@ManfredSteyer

@ManfredSteyer HTML JS DATA FMP

@ManfredSteyer HTML JS DATA TTI FMP

@ManfredSteyer HTML JS DATA TTI "Uncanny Vally" FMP

@ManfredSteyer

@ManfredSteyer HTML DATA FMP JS JS JS JS JS JS
JS JS TTI

@ManfredSteyer HTML DATA FMP JS JS JS JS TTI

@ManfredSteyer

@ManfredSteyer SPAs + MF: Trade-offs Business Apps: Traditional approaches ok
Conversions: New wave very tempting! Evalulate options against requirements!

@ManfredSteyer

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

Camel and Eye of a Needle: Integration of SPA-b...

Camel and Eye of a Needle: Integration of SPA-based Micro Frontends

More Decks by Manfred Steyer

Other Decks in Programming

Featured

Transcript