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

The Microfrontend Revolution: Module Federation...

Avatar for Manfred Steyer Manfred Steyer PRO
April 14, 2021
Programming
1
490

The Microfrontend Revolution: Module Federation with Angular @μCon 2021

Avatar for Manfred Steyer

Manfred Steyer PRO

April 14, 2021
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
All About Angular‘s New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
17
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Your Architecture as a Crime Scene? Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
240
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Reactive Thinking with Signals and the new Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Rethinking Angular: The Future with Signal Store and the New Resource API @w-jax 2025, Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
98
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
150
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
180

Other Decks in Programming

See All in Programming
TestingOsaka6_Ozono
Avatar for O3(ozono) o3
0
270
AI 駆動開発ライフサイクル(AI-DLC):ソフトウェアエンジニアリングの再構築 / AI-DLC Introduction
Avatar for kanamsasa kanamasa
11
5.3k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
640
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
150
ゆくKotlin くるRust
Avatar for TATSUNO Yasuhiro exoego
1
200
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
940
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
5.3k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
720
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
150
組み合わせ爆発にのまれない - 責務分割 x テスト
Avatar for HAL halhorn
1
190
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
450
Python札幌 LT資料
Avatar for t3tra t3tra
7
1.1k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
2
3.9k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
110
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
550
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
100
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
140
Crafting Experiences
Avatar for Bethany Jepchumba bethany
0
29
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
41

Transcript

  1. @ManfredSteyer ManfredSteyer The Microfrontend Revolution Webpack 5 Module Federation Manfred

    Steyer, ANGULARarchitects.io

  2. @ManfredSteyer

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

    App Boarding App Luggage App Luggage App Microfrontends

  4. @ManfredSteyer Micro Frontends

  5. @ManfredSteyer

  6. @ManfredSteyer Contents #1: Module Federation #2: Federated Angular #3: Live-Coding

    #4: Possible Roadmap

  7. @ManfredSteyer Manfred Steyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @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!

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

  12. @ManfredSteyer How to Get the Microfrontend's URL? Shell (Host) Microfrontend

    (Remote) RemoteEntry.js <script src="…"></script>

  13. @ManfredSteyer How to Share Libs? Shell (Host) Microfrontend (Remote) shared:

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

  14. @ManfredSteyer

  15. @ManfredSteyer ?

  16. @ManfredSteyer Custom Builder

  17. @ManfredSteyer

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

    ng serve

  19. @ManfredSteyer

  20. @ManfredSteyer

  21. @ManfredSteyer When can we have it? Webpack 5 and Module

    Federation: final Angular CLI 11 + webpack 5: experimental Angular CLI 12 (May 2021): webpack 5 integrated

  22. @ManfredSteyer Free eBook Now: 3rd Edition ANGULARarchitects.io/book Updated for Module

    Federation and Alternatives (~100 pages)

  23. @ManfredSteyer Conclusion Module Federation Loading Separately Deployed Code Micro Frontends

    Federated Angular

  24. @ManfredSteyer

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

    http://angulararchitects.io