5 Best Practices for your successful Angular Applications @BASTA 2019 in Mainz, Germany

Examples: https://github.com/manfredsteyer/basta_2019_angular_best_practices

Transcript

1. @ManfredSteyer 5 Best Practices for your successful Angular Applications Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @ManfredSteyer Contents 1) Unidirectional Dataflow and Change Detection 2) OnPush w/ Immutables and Observables 3) Smart vs. Dumb Components 4) Cutting Modules and Module Configuration 5) Facades and State Management
3. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator for Angular Page ▪ 3 Manfred Steyer Public: Frankfurt, München, Wien In-House: everywhere http://softwarearchitekt.at/workshops
4. @ManfredSteyer 1) Unidirectional Dataflow and Change Detection
5. @ManfredSteyer Data-Binding in AngularJS 1.x Page ▪ 5 Model Model Directive
6. @ManfredSteyer Component-Tree in Angular 2+ Page ▪ 6 Komponente für App Komponente (z. B. Liste) Komponente (z. B. Eintrag) Komponente (z. B. Eintrag)
7. @ManfredSteyer Rules for Property-Bindings • Data flews top/down • Parent can pass data to its children • Children cannot pass data to their parents • Dependency-Graph is a tree • Angular just needs one digest to traverse tree Page ▪ 7
8. @ManfredSteyer Property-Binding Page ▪ 8 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
9. @ManfredSteyer Event-Bindings (One-Way, Bottom/Up) Page ▪ 9 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
10. @ManfredSteyer Event Bindings (One-Way, Bottom/Up) • No digest needed • But: Events can change data → Property Binding Page ▪ 10
11. @ManfredSteyer Property- and Event-Bindings Page ▪ 11 Execute Property-Binding Execute Event Handler Event occours App is ready all event handlers executed Properties bound
12. @ManfredSteyer View Page ▪ 12 <button [disabled]="!von || !nach" (click)="search()"> Search </button> <table> <tr *ngFor="let flight of flights"> <td>{{flight.id}}</td> <td>{{flight.date}}</td> <td>{{flight.from}}</td> <td>{{flight.to}}</td> <td><a href="#" (click)="selectFlight(flight)">Select</a></td> </tr> </table> <td [text-content]="flight.date"></td>
13. @ManfredSteyer DEMO
14. @ManfredSteyer Recap • Property-Binding: One-Way; Top/Down • Event-Binding: One-Way; Bottom/Up • Two-Way-Binding? • Two-Way = Property-Binding + Event-Binding Page ▪ 14
15. @ManfredSteyer Property and Event-Bindings Page ▪ 15 <input [ngModel]="from" (ngModelChange)="update($event)">
16. @ManfredSteyer Property and Event-Bindings Page ▪ 16 <input [ngModel]="from" (ngModelChange)="from = $event"> Property + Change Changed Value <input [(ngModel)]="from">
17. @ManfredSteyer DEMO
18. @ManfredSteyer 2) OnPush with Immutables and Observables
19. @ManfredSteyer DEMO
20. @ManfredSteyer OnPush flights flight flight {{ flight.id }} {{ flight.id }} FlightSearch Card Card Angular just checks when “notified”
21. @ManfredSteyer "Notify" about change? • Change bound data (@Input) • OnPush: Angular just compares the object reference! • e. g. oldFlight === newFlight • Raise event within the component • Notify a bound observable • {{ flights$ | async }} • Trigger it manually • Don't do this at home ;-) • At least: Try to avoid this
22. @ManfredSteyer Activate OnPush @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCard { […] @Input() flight; }
23. @ManfredSteyer DEMO
24. 3) Smart vs. Dumb Components
25. Thought experiment • What if <flight-card> would be "smarter"? • Executing Use Case logic? • Talking to the backend? • Traceability? • Performance? • Reuse?
26. Smart vs. Dumb Components Smart Component •Drives the "Use Case" •Usually a "Container" Dumb •Independent of Use Case •Reusable •Usually a "Leaf"
27. 4) Cutting Modules and Module Configuration
28. @ManfredSteyer Typical Module Structure Page ▪ 28 AppModule … … … SharedModule Root Module Feature Modules Shared Module
29. @ManfredSteyer DEMO
30. @ManfredSteyer 5) Facades and State Management
31. @ManfredSteyer DEMO
32. @ManfredSteyer Use Case Services Use Case Service Component Component Resource Service Resource Service Use Case Service Component
33. @ManfredSteyer Use Case Services Facade Component Component Resource Service Resource Service Facade Component
34. @ManfredSteyer DEMO
35. @ManfredSteyer Use Case Services Facade Component Component Resource Service Resource Service Facade Component
36. @ManfredSteyer Use Case Services Facade Component Component Resource Service Resource Service Facade Component
37. @ManfredSteyer Use Case Services Facade Component Component Resource Service Resource Service Facade Component State Management Solution
38. @ManfredSteyer More about this on Wed … • Wartbare Angular-Anwendungen dank State Management Cornelia Rauch 11:30, Gutenberg 4 • Angular, Monorepos und Strategic Domain-driven Design für nachhaltige Architekturen Manfred Steyer 18:00, Forum West
39. @ManfredSteyer Summary • Event --> Properties • No Cycles allowed Change Detection • Immutables • Observables OnPush • Smart: Knows Use Case • Dumb: Does NOT know Use Case --> Reusable Smart vs. Dumb Components
40. @ManfredSteyer Summary • 1 Module per Use Case • Shared Modules Cutting Modules • Facade per Use Case • Introduce State Libs behind Facade when needed Facades and State Management
41. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d Slides & Examples http://softwarearchitekt.at/workshops