Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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 full-size 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 full-size slide

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

    View full-size slide

  4. angular.dev
    Tutorials
    Playground
    BETA
    NEW
    NEW

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. DI Debugging
    TvView

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Input Transforms
    Now you can configure a middleware

    View full-size slide

  13. 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 full-size slide

  14. Built-In Control Flow
    Syntax

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. View Transition API
    Activate View Transitions

    View full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. Quiz
    AfterRenderPhase.Write
    AfterRenderPhase.Write

    View full-size slide

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

    View full-size slide

  29. Gregor Woiwode, CTO
    Slides

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide