Tomasz Ducin
independent consultant, architect, developer, trainer, speaker #architecture #performance #javascript #typescript #react #angular
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
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 UNSUBSCRIBESignals 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!
Back in the game: Recent Revolutionary Changes in Angular
By Tomasz Ducin
