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
   

   View Slide

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
   

   View Slide

3. @GregOnNet
   Gregor Woiwode, CTO
   Find me after the
   talk and say hi!
   

   View Slide

4. angular.dev
   Tutorials
   Playground
   BETA
   NEW
   NEW
   

   View Slide

5. Vite & esbuild
   https://blog.angular.io/introducing-angular-v17-4d7033312e4b
   

   View Slide

6. vite & esbuild
   https://angular.io/guide/esbuild#using-the-application-builder
   Configure application builder
   deployURL wont work, anymore
   

   View Slide

7. Vite & esbuild
   built-time decreases by 70%
   

   View Slide

8. DI Debugging
   New Feature in Angular DevTools
   Visualize your application’s hierarchy
   Only supported in Angular 17
   

   View Slide

9. DI Debugging
   TvView
   

   View Slide

10. Short
    Demo
    

    View Slide

11. Input Transforms
    Imagine, you want to offer the following Component-API.
    

    View Slide

12. Input Transforms
    … You would need to enhance the
    setter of the respective @Input.
    

    View Slide

13. Input Transforms
    Now you can configure a middleware
    

    View Slide

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.
    

    View Slide

15. Short
    Demo
    

    View Slide

16. Built-In Control Flow
    Syntax
    

    View Slide

17. Built-In Control Flow
    Performance enhancements, especially @for.
    No fiddling with NgFor, NgIf, NgSwitch-Imports
    https://blog.angular.io/introducing-angular-v17-4d7033312e4b
    

    View Slide

18. Built-In Control Flow
    DEVELOPER PREVIEW
    Migrate to the new Control Flow Syntax using the Schematic.
    

    View Slide

19. Code
    Journey
    

    View Slide

20. Async AnimationsModule
    Loads Angular’s Animations lazily
    Reduces your initial bundle size by 60KB
    

    View Slide

21. Async AnimationsModule
    Main Bundle
    decreased
    More Chunks
    generated
    Initial Bundle
    Decreased by 55.16KB
    

    View Slide

22. View Transition API
    https://developer.chrome.com/docs/web-platform/view-transitions/
    Web Standard to animate
    view transitions
    

    View Slide

23. View Transition API
    Declare groups that should be animated
    Image are taken behind the scenes, which are then animated
    

    View Slide

24. View Transition API
    Activate View Transitions
    

    View Slide

25. Short
    Demo
    

    View Slide

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
    

    View Slide

27. New LifeCycle hooks
    afterNextRender afterRender
    Executed once
    For Initialization
    Executed after each detected change
    Sync Changes with DOM
    

    View Slide

28. New LifeCycle hooks
    What is the difference between
    afterNextRender & AfterViewInit?
    Only executed in the Browser Executed on the server, too.
    

    View Slide

29. New LifeCycle hooks
    https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e
    

    View Slide

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
    

    View Slide

31. Quiz
    AfterRenderPhase.Write
    AfterRenderPhase.Write
    

    View Slide

32. Server Side Rendering
    Strategic change
    NEW
    @nguniversal/express-engineMAINTANANCE MODE
    @angular/ssr package
    

    View Slide

33. Short
    Demo
    

    View Slide

34. Gregor Woiwode, CTO
    Slides
    

    View Slide

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
    

    View Slide

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
    

    View Slide