Renovate your Angular App! - iJS London 04/2024

ANGULARarchitects.io - Michael Egger-Zikes

The Angular Team is currently pushing the popular enterprise frontend framework into a bright future. New APIs which are prooved as Solid in the JavaScript ecosystem and Qwiker start-up time by introducing more advanced server-side rendering support are combined with the new Control Flow syntax that feels like a perfect joint-venture between Svelte and .NET. The Standalone APIs make NgModules optional as well as RxJS and Zone.js will not be mandatory dependencies in the future anymore.

But what does this mean for your current codebase? Which refactoring strategy is the best compromise between good preparation for the future and tight project budgets? The good news - all of this comes with backwards compatibility in mind. It is your own decision which pace to use to refactor your own codebase to the latest framework features.

In this practical session, we will discuss those new APIs and discover ways to transform your code into a future-proof application.

Transcript

1. Renovate your Michael Egger-Zikes Angular App! ANGULARarchitects.io
2. Standalone Migration Signals in Practice New Angular Features Router Integration provideFn() & inject() Michael Egger-Zikes (@MikeZks) Control Flow …
3. About Michael • Michael Egger-Zikes ANGULARarchitects.io • Focus on Angular • Trainings, Consultancy, Reviews • Conference Speaker Public: in-person or remote In-House: everywhere angulararchitects.io /en/angular-workshops Michael Egger-Zikes @MikeZks
4. Standalone Migration • Implement new Features as Standalone • Components, Directives, Pipes • provide-Fn instead of NgModule-Methods • Change Angular’s Bootstrapping to Standalone • Bootstrap AppComponent instead of AppModule • Use app.config.ts File for Application Setup • Update Schematics • ng generate @angular/core:standalone • 3-Step process Michael Egger-Zikes (@MikeZks)
5. DEMO Standalone
6. Signal API • WritableSignal • Signal is a Function and Object combined • user = signal({ name: 'michael.egger-zikes' }) • <p>{{ user().name }}</p> • Update Signal value • Overwrite • user.set({ name: 'manfred.steyer' }) • Immutable • user.update(u => ({ ...u, name: 'manfred.steyer' })) Michael Egger-Zikes (@MikeZks)
7. Derived State / Side-Effect • Computed Signal • Uses Signals als Inputs to create derived state • userStr = computed(() => 'User: ' + user().name) • Side Effects • Is executed again, if consuming Signals change • effect(() => console.log(user(), product())) Michael Egger-Zikes (@MikeZks)
8. Signal Components APIs Michael Egger-Zikes (@MikeZks) @Component({ selector: 'app-flight-card', standalone: true, template: ` <h2>{{ flightRoute() }}</h2> <p>Date: {{ item().date }}</p> `, }) export class FlightCardComponent { item = input.required<Flight>(); // no inital value, but provided by parent selected = model(false); // writable Signal: this.select.set(true) → emits output delayTrigger = output<Flight>(); // creates EventEmitter → this.delayTrigger.emit(this.item()) flightRoute = computed(() => this.item().from + ' - ' + this.item().to); }
9. Signals Interop w/ RxJS & NgRx Michael Egger-Zikes (@MikeZks) toObservable(signal) toSignal(observable$) takeUntilDestroyed() this.store.selectSignal(ngrxSelectorFn)
10. DEMO Signals
11. Router Integration • Router Config Update • Array instead of FeatureRouterModule • provideRouter()-Fn • default export or lean Lazy Loading • Component Input Bindings • Automatically map Router State to Component Inputs • Dyn Params • Query Params • Static Route Data • Dynamic Resolver Data Michael Egger-Zikes (@MikeZks)
12. DEMO Routing
13. provideFn() & inject() • Configure your App • Root-Level, Lazy Routes • Environment Provider • Components, Directives • Element Provider • Instead of NgModule.staticMethod() • Function-based Injection • inject() in addition to Constructor-Injection • Supports Functional Implementation • Easier in Inheritence-Scenarios • Easier Type-Inference • Generic Injection Logic Michael Egger-Zikes (@MikeZks)
14. DEMO provideFn() inject()
15. Control Flow • @-Template Language • Instead of Structural Dirgectives • *ngFor → @for • *ngIf → @if • *ngSwitch → @switch • Easier to Read • Better Performance • @for with mandatory track-definition • ng generate @angular/core:control-flow Michael Egger-Zikes (@MikeZks)
16. DEMO Control Flow
17. Further Features • Host Directives • Esbuild Support • Server-side Rendering • Part of the Angular Framework now • Hydration • Merger with Google’s Wiz-Framework • Upcoming Partial Hydration • Rich Ecosystem • State Management with @ngrx/signals → signalStore Michael Egger-Zikes (@MikeZks)
18. [web] ANGULARarchitects.io [twitter] Michael Egger-Zikes (@MikeZks) [repo] https://github.com/mikezks/ijs-london-renovate-angular Contact • Slides • Code Remote Workshops: Public & tailored to your company angulararchitects.io/angular-workshops