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

More Decks by Gregor Woiwode

Other Decks in Programming


  1. 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
  2. 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.
  3. Built-In Control Flow Performance enhancements, especially @for. No fiddling with

    NgFor, NgIf, NgSwitch-Imports https://blog.angular.io/introducing-angular-v17-4d7033312e4b
  4. View Transition API Declare groups that should be animated Image

    are taken behind the scenes, which are then animated
  5. 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
  6. New LifeCycle hooks What is the difference between afterNextRender &

    AfterViewInit? Only executed in the Browser Executed on the server, too.
  7. 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
  8. 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