$30 off During Our Annual Pro Sale. View Details »

Modern Angular

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.

Rainer Hahnekamp

May 23, 2024
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. 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
  2. RainerHahnekamp Agenda • Standalone Components • Standalone API • Functional

    Interceptors and Guards • Template Blocks • SSR • Signals • New API
  3. 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}
  4. RainerHahnekamp Standalone API • Separation of Services and Components •

    Better Tree-Shakability • provideHttpClient • provideRouter & lazy Routes
  5. 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
  6. 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)
  7. 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)
  8. RainerHahnekamp Signal-based API • input() • model() • viewChild() &

    contentChild() • output() (doesn't return a Signal)
  9. 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