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

Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022

15934fa2aa7b2ce21f091e9b7cffa856?s=47 Manfred Steyer
PRO
June 22, 2022
Programming
0
350

Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

June 22, 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
Angular-basierte Micro Frontends mit Module Federation @API Summit
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
150
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
170
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
2022年のモダンCSS改
Ffb0af5bf5cb5a0b728ed94418a096f5?s=48 tonkotsuboy_com
24
16k
SGGとは
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
440
Pythonで鉄道指向プログラミング
Cc15f7fbb06e96bdb56992e3d42ea8cd?s=48 usabarashi
0
130
kintone × LINE Bot で餃子検定Botを作った話
9452778272d5d1a19e897f4b75204fb2?s=48 naberina
0
330
Babylon.jsで作ったsceneをレイトレーシングで映えさせる
C54e383f9597a63832fcc1c2547c7540?s=48 turamy
1
210
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
400
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
Ae763d151aeee101b40ae10cc13ebe63?s=48 maroon1st
0
13k
SRE NEXT 2022に学ぶこれからのSREキャリア
71929a476c581dd754e4e1f355ac07d0?s=48 fukubaka0825
2
390
How GitHub Supports Vim License Detection, The Five Years Journey
C4ce16f549c450f4759eb37f5d5d1a63?s=48 othree
1
360
VIMRC 2022
E76db8a47bdae9ef76629ecb366483ed?s=48 achimnol
0
130
ゴーファーくんと辿るプログラミング言語の歴史/history-of-programming-languages-with-gopher
Be01969dc1e5ac0998183f9a114dbf58?s=48 iwasiman
11
5k
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
140

Featured

See All Featured
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
62
10k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
782
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
GraphQLとの向き合い方2022年版
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
16
8.4k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Robots, Beer and Maslow
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7.1k
Designing for humans not robots
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
241
24k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k

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

    Single Version: No Conflicts! Better Build Times !!!

  36. @ManfredSteyer Free eBook ANGULARarchitects.io/book

  37. @ManfredSteyer • • •

  38. @ManfredSteyer

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