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

Beyond Micro Frontends: Frontend Moduliths for ...

Avatar for Manfred Steyer Manfred Steyer
PRO
June 14, 2022
Programming
0
430

Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022

Avatar for Manfred Steyer

Manfred Steyer
PRO

June 14, 2022
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
The Missing Link in Angular‘s Signal Story Resource API and httpResource @ngRome 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
82
Your Architecture as a Crime Scene: Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Rethinking Data Access: The New httpResource in Angular
Avatar for Manfred Steyer manfredsteyer
PRO
0
290
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
JavaScript as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
90
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @jax2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
Avatar for Manfred Steyer manfredsteyer
PRO
0
99
Your Architecture as a Crime Scene Forensic Analysis
Avatar for Manfred Steyer manfredsteyer
PRO
0
72

Other Decks in Programming

See All in Programming
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール？ 〜
Avatar for Yoda Keisuke yodakeisuke
0
120
#QiitaBash MCPのセキュリティ
Avatar for Tommy(sigma) ryosukedtomita
0
890
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
0
300
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
400
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
220
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
350
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
12
2.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
13
8.2k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
1.9k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
490
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
Avatar for marcy731 marcy731
0
110
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
740

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Side Projects
Avatar for Sacha Greif sachag
455
42k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

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