Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022

Transcript

1. @ManfredSteyer ManfredSteyer Manfred Steyer, ANGULARarchitects.io Enterprise Angular: Frontend Moduliths with Nx and Standalone Components
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
5. @ManfredSteyer
6. @ManfredSteyer
7. @ManfredSteyer
8. @ManfredSteyer
9. @ManfredSteyer
10. @ManfredSteyer Manfred Steyer
11. @ManfredSteyer
12. @ManfredSteyer Booking App Booking App Check-in App Check-in App Boarding App Boarding App Luggage App Luggage App
13. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository 2 Repository 1 Strict Borders
14. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Repository n Repository 2 Repository 1 Strict Borders
15. @ManfredSteyer
16. @ManfredSteyer Shared Shared Booking Booking Boarding Boarding Published via npm: Pain! SPA: Download to the Client 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 https://nrwl.io/nx Smart, Fast and Extensible Build System
22. @ManfredSteyer Visualize Module Structure
23. @ManfredSteyer
24. @ManfredSteyer
25. @ManfredSteyer
26. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
27. @ManfredSteyer "booking": { "tags": ["domain:booking", "type:app"] }, "booking-feature-search": { "tags": ["domain:booking", "type:feature"] },
28. @ManfredSteyer { "sourceTag": "domain:booking", "onlyDependOnLibsWithTags": ["domain:booking", "domain:shared"] }
29. @ManfredSteyer DEMO
30. @ManfredSteyer
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer Smart Comp. Dumb Comp.
35. @ManfredSteyer Automate
36. @ManfredSteyer Usage
37. @ManfredSteyer DEMO
38. @ManfredSteyer Finegrained Libraries • Unit of recompilation • Unit of retesting • Access restrictions • Information Hiding • Easy: Just ng g lib … • Future replacement for NgModules?
39. @ManfredSteyer
40. @ManfredSteyer What's the Issue With NgModules? import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {} TypeScript Modules Angular Modules
41. @ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent, HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
42. @ManfredSteyer
43. @ManfredSteyer It looks like you want to use NgIfDirective and MyComponent. Shall I import it for you?
44. @ManfredSteyer
45. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
46. @ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […] HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
47. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
48. @ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent ], }) export class TicketsModule { }
49. @ManfredSteyer
50. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Today (with NgModules) NgModule Comp3 NgModule
51. @ManfredSteyer Lib A Lib B index.ts Comp1 Comp2 Tomorrow (without NgModules) Comp3
52. @ManfredSteyer DEMO
53. @ManfredSteyer Free eBook ANGULARarchitects.io/book
54. @ManfredSteyer • • • • •
55. @ManfredSteyer
56. @ManfredSteyer d Slides & Examples Remote and In-House http://softwarearchitekt.at/workshops