Angular 17 And Signals

Recap about Angular Changes overtime and how Angular 17 comes as game changer with Signals

Transcript

1. @angular Defer views in Angular Dany Paredes GDE / Technical Writer Kendo Telerik Angular Reactivity with Signals
2. What version of Angular are you currently using in production? 😉
3. About Me Dany Paredes 🏀 NBA, 🏆🅰ngular GDE Technical Writer for Telerik Google Dev Library http://danywalls.com
4. The Starting Lineup: JavaScript's Early All-Stars
5. October, 2010 AngularJS two-way data binding, revolutionizing how web applications were built. I wish a Happy 2013!😉 The Early Days: AngularJS
6. September 2016 Angular 2 Complete rewrite from AngularJS, introducing a component-based architecture March 2017 Angular 4 Introducing HttpClient, a smaller, New router life cycle events for Guards and Resolvers. Nov 2017 & May 2019 Angular 5, 6, 7, 8 Angular in the Pre-React Era: Struggling to Hold Court
7. February 2020 Angular 9 Ivy AOT Type checking June 2020- November 2021 A10- A11-A12-A13 The Comeback: Angular's Evolution Through Community Insight
8. Revealing Strategies and Actions Leads to Others Learning and Benefiting Over Time 😒 The Turning Point
9. November 2022 Angular 15 Standalone Stable - Composition API Ng Optimized Image - Functional Guards May 2023 Angular 16 Signals (preview) Hydratation(preview) ESBuild Required Inputs The Comeback The Comeback: Angular's Evolution Through Community Insight June 2022 A14 Standalone Components (preview) Strict Typed Forms Angular Debug Extension
10. State of Angular Reactivity 🛺
11. NgZone ChangeDetection Reactivity, Change Detection and NgZone
12. NgZone
13. Change Detection
14. export class App { ngZone = inject(NgZone); name = 'Angular'; click() { //other code… this.ngZone.runOutsideAngular(() => { console.log("Hello Vienna"); } ); } } decoded Cipher
15. ChangeDetectionStrategy.OnPush
16. More About Change Detection & ZoneJS https://www.youtube.com/@DecodedFrontend
18. 🤷‍ ♀️ Subject switchMap distinctUntilChanged BehaviorSubject HttpClient mergeMap
20. Angular hear the community feedback to make easy to learn and start.
21. Angular 17: The Game Changer
22. Key Features of Angular 17 angular.dev Vite & esbuild DI Debugging Input Transform Built-In Control Flow Async Animations & View Transition API New Lifecycle Hooks Server Side Rendering
23. What Next ? Preconnect Image Directive Testing Styles and StylesUrl defer Material 3 Server Side Rendering hydratation
24. Signals
25. Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments)
26. Developer Preview Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments) Signal-based APIs
27. Developer Preview Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments) Support for inputs, outputs and queries Signal-based APIs
28. Developer Preview Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments) Fully zoneless apps Support for inputs, outputs and queries Signal-based APIs
29. Angular Momentum
30. Reactivity Everywhere Precision Updates Lightweight Dependencies Signal primitives let you react to state changes anywhere in your code, not just components. Signals unlocks better performance- by-default - by minimizing the work Angular performs to keep your DOM up-to-date with precise writes. Signals are ~2KB* and fast. With no requirement to load third-party dependencies and no up-front startup cost when your page first loads. Build Faster Apps By Default
31. signal computed effect Three reactive primitives Developer Preview
32. signal A value that can tell Angular when it changes Signal
33. signal A value that can tell Angular when it changes capable of notifying its context of future changes in its value Signal
34. signal A value that can tell Angular when it changes capable of notifying its context of future changes in its value Signal
35. First Last Full Name Emma Twersky Emma Twersky Dany Paredes Dany Paredes firstName = signal("Dany"); lastName = signal("Paredes");
36. //declare a signal name = signal<string>(''); //set this.name.set('dany'); //update this.name.update((n) => `${n}walls`);
37. signal computed Derive new value when one of the dependent signals change 2. Compute
38. First Last Full Name Emma Twersky Emma Twersky Simona Cotin Simona Cotin firstName = signal("Simona"); lastName = signal("Cotin"); fullName = computed(() => firstName()+ " " + lastName());
39. effect computed signal An effect is a side-effectful operation which reads the value of zero or more signals Automatically scheduled to be re-run whenever any of those signals is notified of a change 3. Effect
40. export class App implements OnInit { count = signal(0); limitMessage = 'Feel free to click!'; constructor(): void { effect(() => { if (this.count() == 10) { this.limitMessage = 'You reached the limit, sorry'; } }); }
41. Injection Context Effects is that they can only be used in an injection context Effects runInjectionContext
42. injector = inject(Injector); ngOnInit(): void { runInInjectionContext(this.injector, () => { effect(() => { console.log(this.lastClient()); }) }); } Effects and Injection Context
43. How Signals works? 💖
44. Model as signals view view view view view view Refresh queue: Precision updates
45. Model as signals Refresh queue: Precision updates view view view view view view
46. Model as signals Refresh queue: Precision updates view view view view view view
47. Model as signals view Refresh queue: Precision updates view view view view view view
48. Model as signals Refresh queue: view Precision updates view view view view view view
49. Model as signals Refresh queue: Precision updates view view view view view view
50. Fast Lightweight dependencies
51. Writing a Signals
52. @Injectable({ providedIn: 'root' }) export class CardsService { cards = signal<Card[]>([]); cardSlots = signal<number>(3); lastClient = signal('No clients yet!'); add(holder: string) { const card = { id: Math.random().toFixed(), holder, status: 'pending', }; this.cards.update((p) => [...p, card]); this.cardSlots.update((p) => p - 1); this.lastClient.set(`Thanks ${holder}`!!); } } decoded Cipher
53. @Component({ selector: 'my-app', standalone: true, imports: [CommonModule], template: ` <h1>{{title}}</h1> <h3>We have {{cardSlots()}} slots </h3> <p>{{lastClient()}}</p> <input type="text" #holder [disabled]="soldOut()"/> <button (click)="add(holder)" [disabled]="soldOut()">Save</button> <div *ngFor="let card of cards()"> {{card.holder}} {{card.id}} </div> `, }) decoded Cipher
54. export class App { private cardsService = inject(CardsService); cards = this.cardsService.cards; cardSlots = this.cardsService.cardSlots; soldOut = this.cardsService.soldOut; lastClient = this.cardsService.lastClient; add(holder: HTMLInputElement) { this.cardsService.add(holder.value); holder.value = ''; } } decoded Cipher
55. 👀 But What about Rxjs ?
56. toSignal toObservable takeUntilDestroyed Get the current value of an Observable as a reactive Signal. Exposes the value of an Angular Signal as an RxJS Observable. Completes the Observable when the calling context (component, directive, service, etc) is destroyed. RxJS Interop
57. Interoperability Backwards compatible Reactive ecosystem
58. Embrace The Community
59. Content & Resources
60. Thanks! 👍 @danywalls www.danywalls.com