$30 off During Our Annual Pro Sale. View Details »

Angular 17 - Rainaissance

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.

Gregor Woiwode

November 14, 2023
Tweet

More Decks by Gregor Woiwode

Other Decks in Programming

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