Angular 17 - Rainaissance

A lot happened this year in the Angular universe and there is a lot more to come. Sometimes it seems to be overwhelming what the Angular Team is capable of shipping.
Now we are taking some time to sit back and learn about the new features Angular 17 provides.
We go through various demos, including:

- Input-Transforms
- @-Syntax - Declarative control-flow syntax for code elegance.
- Deferrable Views - Optimize component rendering for peak performance.
- New LifeCycle-Hooks
- View Transition API
- Lazy Loaded Animations
- Server-Side Rendering Enhancements - Turbocharging SEO and user experience.

Transcript

1. ngular Renaissance
2. Tools & Resources Agenda DI Debugging vite + esbuild angular.dev Features Lazy Loaded Animations Built-In Control Flow Input Transforms View Transition API New Life Cycle Hooks Server-Side Rendering SignalsQ&A
3. @GregOnNet Gregor Woiwode, CTO Find me after the talk and say hi!
4. angular.dev Tutorials Playground BETA NEW NEW
5. Vite & esbuild https://blog.angular.io/introducing-angular-v17-4d7033312e4b
6. vite & esbuild https://angular.io/guide/esbuild#using-the-application-builder Configure application builder deployURL wont work, anymore
7. Vite & esbuild built-time decreases by 70%
8. DI Debugging New Feature in Angular DevTools Visualize your application’s hierarchy Only supported in Angular 17
9. DI Debugging TvView
10. Short Demo
11. Input Transforms Imagine, you want to offer the following Component-API.
12. Input Transforms … You would need to enhance the setter of the respective @Input.
13. Input Transforms Now you can configure a middleware
14. Input Transforms booleanAttribute & numberAttribute are provided by @angular/core You can write your own transformations, too. Custom transforms need to be statically analyzable by the compiler.
15. Short Demo
16. Built-In Control Flow Syntax
17. Built-In Control Flow Performance enhancements, especially @for. No fiddling with NgFor, NgIf, NgSwitch-Imports https://blog.angular.io/introducing-angular-v17-4d7033312e4b
18. Built-In Control Flow DEVELOPER PREVIEW Migrate to the new Control Flow Syntax using the Schematic.
19. Code Journey
20. Async AnimationsModule Loads Angular’s Animations lazily Reduces your initial bundle size by 60KB
21. Async AnimationsModule Main Bundle decreased More Chunks generated Initial Bundle Decreased by 55.16KB
22. View Transition API https://developer.chrome.com/docs/web-platform/view-transitions/ Web Standard to animate view transitions
23. View Transition API Declare groups that should be animated Image are taken behind the scenes, which are then animated
24. View Transition API Activate View Transitions
25. Short Demo
26. New LifeCycle hooks afterNextRender & afterRender Only executed on the Browser Executed after ChangeDetection Intended to read/write the DOM Fine grained control when these hooks are executed to optimize performance
27. New LifeCycle hooks afterNextRender afterRender Executed once For Initialization Executed after each detected change Sync Changes with DOM
28. New LifeCycle hooks What is the difference between afterNextRender & AfterViewInit? Only executed in the Browser Executed on the server, too.
29. New LifeCycle hooks https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e
30. New LifeCycle hooks AfterRenderPhase.EarlyRead AfterRenderPhase.Write AfterRenderPhase.MixedReadWrite AfterRenderPhase.Read https://angular.io/api/core/AfterRenderPhase can significantly degrade performance! Please Refactor! can degrade performance! Use built-in browser functionality
31. Quiz AfterRenderPhase.Write AfterRenderPhase.Write
32. Server Side Rendering Strategic change NEW @nguniversal/express-engineMAINTANANCE MODE @angular/ssr package
33. Short Demo
34. Gregor Woiwode, CTO Slides
35. Further Reading Lazy Loading with @defer https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide Angular 17 View Transition API https://netbasal.com/angular-v17s-view-transitions-navigate-in-elegance-f2d48fd8ceda View Transition API https://developer.chrome.com/docs/web-platform/view-transitions/ afterNextRender & afterRender use case: chart.js https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e Lazy Loaded Animations https://riegler.fr/blog/2023-10-04-animations-async https://www.youtube.com/watch?v=8-KxBmiPbCk
36. Further Reading Rich Harris on framework, the web, on the edge https://youtube.com/watch?v=uXCipjbcQfM Making the Case for Signals in JavaScript https://dev.to/this-is-learning/making-the-case-for-signals-in-javascript-4c7i The evolution of Signals https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob