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

Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
June 14, 2022
Programming
0
170

Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

June 14, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
370
Better Angular Architectures: Architectures with Standalone Components @DWX2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
410
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
300
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
350
Angular-basierte Micro Frontends mit Module Federation @API Summit
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
150
Sustainable SPAs with Strategic Design: A Wonderful Friendship?
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
150
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
280
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
200
Micro Frontends with Module Federation: Beyond the Basics @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
1
370

Other Decks in Programming

See All in Programming
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
3518f5ec9ebb241abc3569eb5cfc7d2a?s=48 1901drama
0
180
SGGとは
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
440
Rector, time to refactor your code easily
27021de2df79d619a3ebf52ab6392e82?s=48 guikingone
2
150
レビュー駆動学習のススメ_StaPy#83
86b349524dfba1c635e944f2a9c92e91?s=48 soogie
0
310
Rust on Lambda 大きめCSV生成
Bfcda4dca8fd6a07980ed8d5b21a572b?s=48 atsuyokota
1
390
Getting Started With Data Structures
Fbe54abf4094d19f1548783d072a7fa7?s=48 adoranwodo
1
260
Atomic Design とテストの○○な話
Fd3e212c7b5255c6164d7d52bfe79dfb?s=48 takfjp
2
810
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
130
ベストプラクティス・ドリフト
A15b71ae6fbdecb3216bdcba552d9a77?s=48 sssssssssssshhhhhhhhhh
1
210
How GitHub Supports Vim License Detection, The Five Years Journey
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
360
企業内スモールデータでのデータ解析
6aceb3377c71b05c1285459c596d1d1f?s=48 hamage9
0
890
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
6f425ca5b796b421dca359b95046184f?s=48 findyinc
7
2.6k

Featured

See All Featured
4 Signs Your Business is Dying
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
169
20k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
373
44k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
26k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.3k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
100
6k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
4k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
87
8.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
64k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k

Transcript

  1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Beyond Micro Frontends: Frontend Moduliths

    for the Enterprise

  2. @ManfredSteyer

  3. @ManfredSteyer

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

  5. @ManfredSteyer

  6. @ManfredSteyer

  7. @ManfredSteyer

  8. @ManfredSteyer

  9. @ManfredSteyer

  10. @ManfredSteyer Manfred Steyer

  11. @ManfredSteyer

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

  13. @ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1

    Strict Borders

  14. @ManfredSteyer Shared Booking Boarding Repository n Repository 2 Repository 1

    Strict Borders

  15. @ManfredSteyer

  16. @ManfredSteyer Shared Booking Boarding Published via npm: Pain! SPA: Download

    into the Browser Version Mismatches?

  17. @ManfredSteyer

  18. @ManfredSteyer Monorepo Structure

  19. @ManfredSteyer Everyone uses the latest versions No version conflicts Sharing

    Libs: Easy

  20. @ManfredSteyer Npm Registry

  21. @ManfredSteyer Smart, Fast and Extensible Build System https://nrwl.io/nx

  22. @ManfredSteyer Visualize Module Structure

  23. @ManfredSteyer

  24. @ManfredSteyer

  25. @ManfredSteyer

  26. @ManfredSteyer { […] "tags": ["domain:booking", "type:app"] }

  27. @ManfredSteyer { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }

  28. @ManfredSteyer DEMO

  29. @ManfredSteyer

  30. @ManfredSteyer

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer Booking Boarding Shared Feature Feature Feature Feature Feature UI

    UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util @ManfredSteyer Smart Comp. Dumb Comp.

  34. @ManfredSteyer

  35. @ManfredSteyer Shared Booking Boarding Access Restrictions Separate Apps/ Builds/ Deployments

    Better Build Times !!!

  36. @ManfredSteyer µFrontend SPA µFrontend SPA µFrontend SPA

  37. @ManfredSteyer µService µFrontend µFrontend µFrontend Shell Webpack Module Federation

  38. @ManfredSteyer Free eBook ANGULARarchitects.io/book

  39. @ManfredSteyer • • •

  40. @ManfredSteyer

  41. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops