Tweet
Tweet

Slide 1

Slide 1 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Your Perfect Project Setup for Angular ANGULARarchitects.io

Slide 2

Slide 2 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2

Slide 3

Slide 3 text

• 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

Slide 4

Slide 4 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Agenda #1 Nx #2 Sheriff #3 Husky & Co #4 Micro Frontends

Slide 5

Slide 5 text

• 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

Slide 6

Slide 6 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Nx

Slide 7

Slide 7 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7

Slide 8

Slide 8 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 • Organize Repos and Project(s) Around Libraries • Module Boundaries • Build Cache • Dependency Graph Selected Features

Slide 9

Slide 9 text

• 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.

Slide 10

Slide 10 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 DEMO

Slide 11

Slide 11 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Sheriff

Slide 12

Slide 12 text

• 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

Slide 13

Slide 13 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 DEMO

Slide 14

Slide 14 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Detective

Slide 15

Slide 15 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten • Visualizing your Architecture • Analyzing your Architecture • Works with CLI and Nx 15 Detective

Slide 16

Slide 16 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 DEMO

Slide 17

Slide 17 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Try out Detective in Your Project! npm i @softarc/detective@latest -D npx detective

Slide 18

Slide 18 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Automate Quality Checks with Husky & Co.

Slide 19

Slide 19 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19

Slide 20

Slide 20 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20

Slide 21

Slide 21 text

• 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 Co-authored-by: John Smith Closes #456789

Slide 22

Slide 22 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 DEMO

Slide 23

Slide 23 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Micro Frontends

Slide 24

Slide 24 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Micro Frontends Booking App Check-in App Boarding App Luggage App

Slide 25

Slide 25 text

• 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' }

Slide 26

Slide 26 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]

Slide 27

Slide 27 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 7 Alternatives Getting Popular TURBOPACK

Slide 28

Slide 28 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 DEMO

Slide 29

Slide 29 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 • Prettier: Code Formatting • Commitlint: Commit Messages • Esbuild: Best Practices • Micro Frontends: Multiple Teams Conclusion

Slide 32

Slide 32 text

• Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32

Slide 33

Slide 33 text

• 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