Angular Signals - HARBOUR SPACE

Talk about the State of Reactivity in Angular and how signals help us in Angular 17.

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
17. Angular & RxJs
19. Subject switchMap distinctUntilChanged BehaviorSubject mergeMap of from Learn RxJs
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
25. Signals
26. Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments)
27. Developer Preview Momentum forwards v15 v16 v17+ Angular Release User research and prototyping GitHub RFCs (Request for Comments) Signal-based APIs
28. 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
29. 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
30. Angular Momentum
31. 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
32. signal computed effect Three reactive primitives Developer Preview
33. signal A value that can tell Angular when it changes 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. signal A value that can tell Angular when it changes capable of notifying its context of future changes in its value Signal
36. First Last Full Name Emma Twersky Emma Twersky Dany Paredes Dany Paredes firstName = signal("Dany"); lastName = signal("Paredes");
37. //declare a signal name = signal<string>(''); //set this.name.set('dany'); //update this.name.update((n) => `${n}walls`);
38. signal computed Derive new value when one of the dependent signals change 2. Compute
39. First Last Full Name Emma Twersky Emma Twersky Simona Cotin Simona Cotin firstName = signal("Simona"); lastName = signal("Cotin"); fullName = computed(() => firstName()+ " " + lastName());
40. 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
41. 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'; } }); }
42. Injection Context Effects is that they can only be used in an injection context Effects runInjectionContext
43. injector = inject(Injector); ngOnInit(): void { runInInjectionContext(this.injector, () => { effect(() => { console.log(this.lastClient()); }) }); } Effects and Injection Context
44. How Signals works? 💖
45. Model as signals view view view view view view Refresh queue: Precision updates
46. Model as signals Refresh queue: Precision updates view view view view view view
47. Model as signals Refresh queue: Precision updates view view view view view view
48. Model as signals view Refresh queue: Precision updates view view view view view view
49. Model as signals Refresh queue: view Precision updates view view view view view view
50. Model as signals Refresh queue: Precision updates view view view view view view
51. Fast Lightweight dependencies
52. 👀 But What about Rxjs ?
53. 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
54. Interoperability Backwards compatible Reactive ecosystem
55. Embrace The Community
56. Content & Resources
57. Thanks! 👍 @danywalls www.danywalls.com