Angular Architecture Workshop @AngularDays in Berlin 2025

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Angular Architecture Workshop ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Agenda #1 Modularization with Nx & Sheriff #2 Micro Frontends with Federation #3 Signals & Signal Forms #4 Signal Store
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 About me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Workshop Website Link
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Structure our Solution?
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Good Fences Makes Good Neighbors!
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Vertical Architectures < Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature Conway's law
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Strategic Design (DDD) Booking Check-in Boarding Luggage Sub-Domains
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 Booking Boarding Bounded Context Flight Price Seats Passenger Tickets Flight Ticket Ubiquitous Language
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 Finding Bounded Contexts Passenger Travel Agency Check-in Agent Boarding Agent Book Flight Check-in Passenger Check-in Luggage Board Plane Pickup Luggage
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Event Storming
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Translation Into The Frontend
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 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 Enterprise Monorepo Patterns, Nrwl 2018: https://tinyurl.com/y2jjxld7 Smart Comp. Dumb Comp. Shared Kernel (if really needed) & other libs
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nx
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 DEMO
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Sheriff
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff Works with the Angular CLI and with Nx 20 Modularization Boundaries on a per-folder basis
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Visualizing your Architecture • Analyzing your Architecture • Works with CLI and Nx 21 Detective
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Micro Frontends
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Micro Frontends Booking App Check-in App Boarding App Luggage App
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Module Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 7 Alternatives Getting Popular TURBOPACK
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DEMO
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io