Back in the game:

Recent Revolutionary Changes in Angular

Back in the game:

Recent Revolutionary Changes in Angular

Hi, I'm Tomasz

Independent Consultant & Software Architect

Trainer, Speaker, JS/TS Expert

ArchitekturaNaFroncie.pl (ANF)

Warsaw, PL

E: tomasz (at) ducin.dev

X: @tomasz_ducin

YT: @DucinDev

EH: bit.ly/ducin-egghead

Round 1:

Signals

Round 1:

Signals

RxJS Observables

🤯

🤯

🤯

🤯

🤯

🤯

🤨

sig = signal(t) // WritableSignal<T>

sig.set(t)
sig.update(oldT => newT)

sig.asReadonly() // Signal<T>

c = computed(() => sig())
e = effect(() => display(sig()))

// NO SUBSCRIBE, NO UNSUBSCRIBE

Signals API

Round 2:

Deferrable Views

Round 2:

Deferrable Views

@defer {
  <component />
}

Deferrable Views

that's it !!!1

@defer (<TRIGGER>) {
  <component />
}
@defer (<TRIGGER>) {
  <component />
} @placeholder (minimum 500ms) {
  <placeholder>
}
@defer (<TRIGGER>) {
  <component />
} @placeholder (minimum 500ms) {
  <placeholder>
} @loading (after 100ms; minimum 1s) {
  <loader>
}
@defer (<TRIGGER>) {
  <component />
} @placeholder (minimum 500ms) {
  <placeholder>
} @loading (after 100ms; minimum 1s) {
  <loader>
} @error {
  something went wrong!
}
  • @defer (on idle) {...}
  • @defer (on immediate) {...}
  • @defer (on interaction) {...}
  • @defer (on hover) {...}
  • @defer (on viewport) {...}
  • @defer (on timer) {...}
  • @defer (when <CONDITION>) {...}

😎

Round 3:

Functional APIs

Round 3:

Functional APIs

Dependency Injection

@Component({ … })
class SomeComponent {
  constructor(private something: SomeService) {}
}
@Component({ … })
class SomeComponent {
  #something = inject(SomeService)
}

Dependency Injection

@Component({ … })
class SomeComponent {
  #something = inject(SomeService)
}
const injectSomething = () => {
  const something = inject(SomeService)
  return something
}

@Component({ … })
class SomeComponent {
  #something = injectSomething()
}
const injectSomething = (PARAMS) => {
  const something = inject(SomeService)
  something.parametrizeAndAll(PARAMS)
  return something
}

@Component({ … })
class SomeComponent {
  #something = injectSomething(PARAMS)
}
const injectSomething = (PARAMS) => {
  const something = inject(SomeService)
  something.parametrizeAndAll(PARAMS)
  const destroyRef = inject(DestroyRef)
  something.subscribe()
  destroyRef.onDestroy(() => { something.unsubscribe() })
  return something
}

@Component({ … })
class SomeComponent {
  #something = injectSomething(PARAMS)
}
const injectSomething = () => {...}
const injectElse = () => {...}

const injectSomethingElse = () => {
  const something = injectSomething()
  const else_ = injectElse()
  return combine(something, else_)
}

@Component({ … })
class SomeComponent {
  #somethingElse = injectSomethingElse()
}

Round 4:

Zoneless

Round 4:

Zoneless

Service

AngularJS

Digest Cycle

async task ⚙️

async task ⚙️

async task ⚙️

Zone (zone.js)

Angular (v2+)

Zone.js-based Change Detection

Zoneless

<article>
  <p>{{ content() }}</p>
</article>
#content = signal('some content')

Incremental DOM

Round 5:

Tooling

Round 5:

Tooling

THX!

E: tomasz (at) ducin.dev

X: @tomasz_ducin

YT: @DucinDev

EH: bit.ly/ducin-egghead