Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz

Transcript

1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Your Perfect Project Setup for Angular ANGULARarchitects.io
2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2
3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Vertical Architectures < Minimal Dependencies Vertical 1 Vertical 2 Vertical 3 Feature Feature Feature Feature Feature Feature Feature Feature Feature
4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Agenda #1 Nx #2 Sheriff #3 Husky & Co #4 Micro Frontends
5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 About me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nx
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 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.
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 DEMO
11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Sheriff
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff Works with the Angular CLI and with Nx 12 Modularization Boundaries on a per-folder basis
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 DEMO
14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Detective
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Visualizing your Architecture • Analyzing your Architecture • Works with CLI and Nx 15 Detective
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 DEMO
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Try out Detective in Your Project! npm i @softarc/detective@latest -D npx detective
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Automate Quality Checks with Husky & Co.
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Conventional Commits feat(booking): allow to book flights for groups Previously, one could only book a flight for oneself. Now it is also possible to book for an entire group. Co-authored-by: Jane Doe <jane.doe@example.com> Co-authored-by: John Smith <john.smith@example.com> Closes #456789
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Micro Frontends
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Micro Frontends Booking App Check-in App Boarding App Luggage App
25. • 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' }
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 7 Alternatives Getting Popular TURBOPACK
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 30 • Nx: Build Cache, Module Boundaries per Lib, … • Sheriff: Modules per Folder • Detective: Find Hidden Patterns • Husky: Automate Quality Checks Conclusion
31. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 • Prettier: Code Formatting • Commitlint: Commit Messages • Esbuild: Best Practices • Micro Frontends: Multiple Teams Conclusion
32. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32
33. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io