Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends and Nx Monorepos: The Best of Two Worlds? @NxConf 2021

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
September 16, 2021
Programming
0
330

Micro Frontends and Nx Monorepos: The Best of Two Worlds? @NxConf 2021

Example:
https://github.com/manfredsteyer/monorepo_mf.git

Free eBook on this:
http://www.angulararchitects.io/book

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

September 16, 2021
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
270
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
91
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
48
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
170
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
220
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
180
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
410

Other Decks in Programming

See All in Programming
7988692211244373f0e84a922a1f4f78?s=48 inabajunmr
0
9.3k
Fb0a40e5e7a9dc85520f1646fd41eb44?s=48 higuuu
0
160
0ed400174f90a4bcee05f3455597932f?s=48 ohbarye
3
190
F74146bada61d15a5e652919815bd355?s=48 satoki
0
300
2594ac7ce91fd7d9a3ce71ca7cc2d0c0?s=48 d_date
1
160
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
1
260
80a3a3857a55f154d23acb705eff72cc?s=48 star_zero
2
4.1k
4ce0d60e368cef89450f1d9dfdcb493f?s=48 n8ebel
1
200
32aaa4ac3529ab1886190d7ed5acdcbc?s=48 tetsuya0617
0
190
Aa254f26f91d4776b9cd19a7ce632867?s=48 ciniml
2
140
77c3dfd58301b6dbc53cfd33854f8147?s=48 sreespanol
0
120
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
0
190

Featured

See All Featured
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
18
2.1k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
11k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
99
15k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
9k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.7k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
400k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
210
11k

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends and Nx Monorepos: The Best of

    Two Worlds? Manfred Steyer, ANGULARarchitects.io

  2. @ManfredSteyer Bonnie Barstow, PhD

  3. @ManfredSteyer

  4. @ManfredSteyer

  5. @ManfredSteyer Booking Booking Check-in Check-in Boarding Boarding Luggage Luggage

  6. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding

    App Boarding App Luggage App Luggage App

  10. @ManfredSteyer

  11. @ManfredSteyer

  12. @ManfredSteyer #1 Monorepo vs. Multirepo #2 Module Federation #3 Federation

    w/ Monorepos

  13. @ManfredSteyer Manfred Steyer

  14. @ManfredSteyer

  15. @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 Publish shared libs seperately via npm Repository n Repository 2 Repository 1 Version Mismatches? Strict Borders

  16. @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

  17. @ManfredSteyer

  18. @ManfredSteyer

  19. @ManfredSteyer • • •

  20. @ManfredSteyer

  21. @ManfredSteyer

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

  23. @ManfredSteyer 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')

  24. @ManfredSteyer Shell (Host) Microfrontend (Remote) RemoteEntry.js <script src="…"></script>

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

    shared: [ "@angular/core", "…" ]

  26. @ManfredSteyer

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer

  30. @ManfredSteyer Separately deployed Just loaded once

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer

  34. @ManfredSteyer Deploy MFE1 Change Shared Lib Deploy MFE2 Conflict?

  35. @ManfredSteyer

  36. @ManfredSteyer

  37. @ManfredSteyer ➔ ➔ ➔

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

  39. @ManfredSteyer Runtime Integration Autarkic Teams One-Version- Policy Access Restrictions

  40. @ManfredSteyer

  41. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io