Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Advanced Micro Frontends Multi Version/ Framework Scenarios ANGULARarchitects.io ngGraz

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Micro Frontends Booking App Check-in App Boarding App Luggage App

Slide 3

Slide 3 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Integration at Runtime

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }

Slide 5

Slide 5 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Module und Native Federation TURBOPACK Native Federation Module Federation Module Federation

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Booking App Check-in App Boarding App Luggage App 19 18

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Booking App Check-in App Boarding App Luggage App 19.0 19.1

Slide 9

Slide 9 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19.0 19.1 { f(); } Your Code Angular Compiler Compiled Code Private API

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Implement Multi-Version/ - Framework Solutions?

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 • Hiding Frameworks and Versions • Web Components and Federation • Alternatives • Costs Contents

Slide 12

Slide 12 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 About me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Hiding Frameworks and Versions

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Wrap them into Web Components Abstract Differences Angular App (MFE) React App (MFE) Coarse-grained Web Component

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Creating a Web Component Wrapper class MyWebComponent extends HTMLElement { connectedCallback() { // Bootstrap your SPA here } […] } customElements.define('my-webcmp', MyWebComponent); Or: Tools such as @angular/elements

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Exposing Web Components // federation.config.js module.exports = withNativeFederation({ […] exposes: { './my-webcmp': './projects/mfe2/src/my-webcmp.ts', }, […] });

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Loading Web Components via Federation

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Federation await import('other-app/my-webcmp');

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Federation await import('other-app/my-webcmp'); const rootElm = document.createElement('my-webcmp') document.body.appendChild(rootElm);

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Federation await import('other-app/my-webcmp'); const rootElm = document.createElement('my-webcmp') document.body.appendChild(rootElm); WrapperComponent

Slide 21

Slide 21 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Result: Best of Both Worlds

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 DEMO https://red-ocean-0fe4c4610.azurestaticapps.net

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 More Details Workarounds for Zone.js and the Router Link

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Alternatives

Slide 25

Slide 25 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Alternatives Modular Monolith Monorepo + Micro Frontends Governance: Single Version Hyperlinks iframes Only Web Components

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Linting for Moduliths

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten http://nx.dev http://sheriff.softarc.io 34 Tools for Moduliths Smart Repos - Fast Builds

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change

Slide 30

Slide 30 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx

Slide 31

Slide 31 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Conclusion Abstraction: Web Components Loading/ Sharing: Native Federation Platform Team: Workarounds, Guidelines

Slide 32

Slide 32 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io