ngular Renaissance 

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 

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

angular.dev Tutorials Playground BETA NEW NEW 

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

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

Vite & esbuild built-time decreases by 70% 

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

DI Debugging TvView 

Short Demo 

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

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

Input Transforms Now you can configure a middleware 

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. 

Short Demo 

Built-In Control Flow Syntax 

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

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

Code Journey 

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

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

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

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

View Transition API Activate View Transitions 

Short Demo 

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 

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

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

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

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 

Quiz AfterRenderPhase.Write AfterRenderPhase.Write 

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

Short Demo 

Gregor Woiwode, CTO Slides 

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 

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