Modern Angular

Angular is gaining more and more momentum. First, it introduced Standalone Components and new functional approaches like inject, guards, and interceptors. But the innovation didn't stop there. Instead, it increased its pace. Signals and a better hydration keep moving the framework even further. In this talk, I will write a new application from scratch. I'll show what a modern tooling setup can look like and make use of all the latest features that Angular provides. Coding in Angular has never been easier.

Transcript

1. RainerHahnekamp Modern Angular Rainer Hahnekamp 21. May 2024
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp The Goal
4. RainerHahnekamp
5. RainerHahnekamp Agenda • Standalone Components • Standalone API • Functional Interceptors and Guards • Template Blocks • SSR • Signals • New API
6. RainerHahnekamp Standalone Components • Easier • Good for Non-Mocking Tests • Exclusive Features (@defer, Host Directives) • No Impact on Bundle Size or Performance • Future Version require {standalone: false}
7. RainerHahnekamp Standalone API • Separation of Services and Components • Better Tree-Shakability • provideHttpClient • provideRouter & lazy Routes
8. RainerHahnekamp inject • Pros ◦ DI in functions ◦ Independent of Decorator Standardization ◦ Type at Runtime available ◦ Easier Inheritance ◦ Type-Safe Injection Tokens • Cons ◦ Requires TestBed ◦ Two Ways on how to things
9. RainerHahnekamp Functional HttpInterceptors & RouterGuards • Functions • Simpler • Guard Class deprecated • Only work with inject()
10. RainerHahnekamp Template Blocks (@if, @for, @switch) • Replaces Structural Directives for Control Flow • Better Options ◦ if/else if/else ◦ tracking • Zoneless • Execute during Compilation • Better DX • More to come… ◦ @defer ◦ @let (18.1)
11. RainerHahnekamp Signals • Optimized for Frontend • Reactive Alternative to RxJs • Manages State • Simple ◦ signal: writable ◦ computed: read-only & derived ◦ effect: side effects • Improved DX • Local Change Detection (v17) • Triggers Change Detection(v18)
12. RainerHahnekamp Signal-based API • input() • model() • viewChild() & contentChild() • output() (doesn't return a Signal)
13. RainerHahnekamp SSR & Hydration • Cooperation with Wiz • Important for Internet-facing apps • Evolution ◦ Destructive Hydration (Community-based) ◦ Default Hydration ◦ Partial Hydration (@defer-based) • Challenges ◦ User-based Context ◦ Asynchronous Tasks ◦ DOM Access