# Signals, watch the effect
## a presentation by Sander Elias
+
---NextSlide
----toml
-title = "Who I am"
-
----
@@ -45,20 +49,13 @@ title = "Who I am"
---NextSlide
----toml
-title = "What I do"
-
----
@@ -78,102 +75,495 @@ title = "What I do"
+
---NextSlide
----toml
-title = ""
----
+
+
# Signals, watch the effect
+
## so, what's that about?
Once upon a time, in a land far far away, there was a developer who used Angular. He had heard about the new `effect()` function and wanted to use it. But he was warned. He was told not to use it. But he did not listen. He used it anyway. And he lived happily ever after. Or did he?
-
+
+
---NextSlide
----toml
-title = ""
----
+
+
# Signals, watch the effect
+
## bummer!
Well, to be honest, he did.
+
+
---NextSlide
----toml
-title = ""
----
+
+
# Signals, watch the effect
+
## shortest talk ever!
-### the end!
+### The end!
+
+
---NextSlide
----toml
-title = ""
----
-# Shortest talk ever!
-## or is it?
+
+# The shortest talk ever?
+
+## Yeah, right!
+
+- `signals` are synchronous
+- `effect()`'s not (so much)
+- `AfterRenderEffect` is really not
+- because of that, glitches can occur
+- (unless you want to demo those glitches,
+ then they _never_ occur)
+
+
---NextSlide
----toml
-title = "Takeaways"
----
+
+
+# Why do I _need_ effects?
+
+## _checks manual_
+
+- to bridge the gap between sync and async
+- for the handling of side effects
+ - **me:** _skips the cautions_
+- to do DOM updates after the render
+ - When there is no other way
+ - something read/wri.(_stopped reading_)
+ - **me:** _stops reading manual_
+- **me:** _I know what I'm doing_, **lets build**
+
+
+
+
+
+
+---NextSlide
-
-# key takeaway
+# Create an userService class
+
+## after all, we need some data
+
+```typescript
+type MyResourceParams = { resource: number; abortSignal?: AbortSignal };
+
+@injectable({ providedIn: 'root' })
+class UserService {
+ // gets a user by id, this operation will _never_ fail!!!
+ getUser = async ({ request, abortSignal }: MyResourceParams): Promise => {
+ return fetch(`https://api.example.com/users/${request}`, { signal: abortSignal })
+ .then(response => response.json())
+ .catch(() => ({}));
+ };
+
+ saveUser = async (user: User): Promise => {
+ // I have saved the user to the backend, pinky promise!
+ return true;
+ };
+ /** I'm using fetch here, but `firstValueFrom(http.get(url))`
+ would work just as well. */
+}
+```
+
+
+
+---NextSlide
-- do not use `effect()`.
-- do really not use `effect()`.
-- really! Do not use `effect()`.
+
+# And then the component
+
+## we can do this!
+
+```typescript
+class MyComponent {
+ us = inject(UserService);
+ userId = input();
+ user = signal({} as User); // 🔥 this is fine 🔥
+ save = this.us.saveUser;
+
+ _ = effect(async () => {
+ const id = this.userId();
+ if (id) {
+ const user = await this.us.getUser({ request: id });
+ this.user.set(user);
+ }
+ });
+}
+```
+
+
+
+
+---NextSlide
+
+
+
+# Done! Push to production
+
+## not so fast
+
+- what happens when the id gets updated?
+ - before the previous call is done?
+ - results are out of sync?
+
+
+
+
+
+---NextSlide
+
+
+
+# Urg, Fine............!
+
+## not frustrated at all
+
+```typescript
+class MyComponent {
+ us = inject(UserService);
+ userId = input();
+ user = signal({} as User); // 🔥 this is fine 🔥
+ save = this.us.saveUser;
+
+ ab = new Abortcontroller();
+ _ = effect(async () => {
+ const id = this.userId();
+ this.ab.abort();
+ this.ab = new Abortcontroller();
+ const abortSignal = this.ab.signal;
+
+ if (id) {
+ const user = await this.us.getUser({ request: id, abortSignal });
+ this.user.set(user);
+ }
+ });
+}
+```
+
+
+---NextSlide
+
+
+
+# Done! Now, Push to production
+
+## ahum, but...
+
+- don't we need a spinner?
+
+
+
+
+
+
+
+
+
+
+
+---NextSlide
+
+
+
+# Grmbl beeeeeeep..erdebeep.......!
+
+## I love my craft, totally
+
+```typescript
+class MyComponent {
+ us = inject(UserService);
+ userId = input();
+ user = signal({} as User); // 🔥 this is fine 🔥
+ save = this.us.saveUser;
+ spinner = signal(false);
+
+ ab = new Abortcontroller();
+ _ = effect(async () => {
+ const id = this.userId();
+ this.ab.abort();
+ this.ab = new Abortcontroller();
+ const abortSignal = this.ab.signal;
+
+ if (id) {
+ this.spinner.set(true);
+ const user = await this.us.getUser({ request: id, abortSignal });
+ this.user.set(user);
+ this.spinner.set(false);
+ }
+ });
+}
+```
+
+
+
+
+
+---NextSlide
+
+
+
+# Ok, no `effect()` but what then?
+
+## Now, let me show you
+
+### linked signals:
+
+```typescript
+class MyComponent {
+ userId = input();
+
+ state = computed(() = {
+ const id = this.userId();
+ return {
+ id,
+ loading: signal(true)
+ };
+ });
+
+ _ = effect(() => { // we will replace this later.
+ const { id, loading } = this.state();
+ if (id) {
+ this.us.getUser({ request: id })
+ .then(user => {
+ this.user.set(user);
+ loading.set(false);
+ });
+ }
+ });
+}
+```
+
+
+
+
+---NextSlide
+
+
+
+# Ok, no `effect()` but what then?
+
+## Now, let me show you
+
+### linkedSignal (experimental in Ng19):
+
+```typescript
+class MyComponent {
+ userId = input();
+
+ loading = linkedSignal({
+ resource: this.userId,
+ compute: () => true
+ })
+
+ _ = effect(() => { // we will replace this later.
+ const id = this.userId();
+ if (id) {
+ this.us.getUser({ request: id })
+ .then(user => {
+ this.user.set(user);
+ this.loading.set(false);
+ });
+ }
+ });
+}
+```
+
+
+
+---NextSlide
+
+
+
+# Ok, no `effect()` but what then?
+
+## Now, let me show you
+
+### resource (experimental in Ng19):
+
+```typescript
+class MyComponent {
+ userId = input();
+
+ userResource = resource({
+ resource: this.userId,
+ loader: this.us.getUser
+ });
+
+ user = this.userResource.value; // a writable signal
+ loading = this.userResource.isLoading; // a signal
+
+}
+```
+
+
+
+
+---NextSlide
+
+
+
+# Ok, no `effect()` but what then?
+
+## Now, let me show you
+
+- `linkedSignal` and `resource` are experimental
+- asyncComputed is also an option (`npm install @se-ng/signal-utils`)
+- deferredAsync
+- rxMethod
+- many
+- many more
+
+
+---NextSlide
+
+
+
+
+
+# key takeaways
+
+- `effect()`'s:
+ - are not the only way
+ - are hard to get right
+ - should be avoided
+ - unless there is really no other option
+
---NextSlide
----toml
-title = "Thank you"
----
+
+
+# Signals, watch the effect
+
+## for real this time
+
+### The end!
+
+
`,
+ styles: [],
+
})
export class ObservableUtilsComponent implements OnInit {
constructor() {}
diff --git a/projects/se-ng/signal-utils/src/async-computed.spec.ts b/projects/se-ng/signal-utils/src/async-computed.spec.ts
index a7aa2c70..5c287884 100644
--- a/projects/se-ng/signal-utils/src/async-computed.spec.ts
+++ b/projects/se-ng/signal-utils/src/async-computed.spec.ts
@@ -13,9 +13,8 @@ const dom = new jsdom.JSDOM(``);
globalThis.document = dom.window.document;
@Component({
- selector: 'test-component',
- template: '',
- standalone: true,
+ selector: 'test-component',
+ template: ''
})
class TestComponent {}
diff --git a/projects/se-ng/signal-utils/src/async-computed.ts b/projects/se-ng/signal-utils/src/async-computed.ts
index ce6951e5..fa19a43a 100644
--- a/projects/se-ng/signal-utils/src/async-computed.ts
+++ b/projects/se-ng/signal-utils/src/async-computed.ts
@@ -1,4 +1,4 @@
-import { computed, DestroyRef, effect, inject, type Signal, signal } from '@angular/core';
+import { computed, DestroyRef, effect, inject, isDevMode, type Signal, signal } from '@angular/core';
import { isObservable, type Observable, type Subscription } from 'rxjs';
import { isAsyncIterable } from './is-async-iterable';
@@ -52,9 +52,13 @@ export const asyncComputed: AsyncComputed = (
} as { value?: T | Y | undefined; error?: any });
try {
destroyRef = destroyRef ?? inject(DestroyRef);
- } catch (e) {} // ignore the error, as it is expected when used outside a injection
- if (!destroyRef) {
- throw new Error('destroyRef is mandatory when used outside a injection context');
+ } catch (e) {
+ if (!destroyRef) {
+ throw new Error('[asyncComputed] destroyRef is mandatory when used outside a injection context');
+ }
+ if (!(destroyRef instanceof DestroyRef)) {
+ throw new Error('[asyncComputed] parameter destroyRef is not a DestroyRef');
+ }
}
let abortPrevious: AbortController | undefined;
let subscription: Subscription | undefined;
@@ -121,6 +125,18 @@ export const asyncComputed: AsyncComputed = (
return computed(() => {
const currentState = state();
if (currentState.error) {
+ if (isDevMode()) {
+ console.warn(`
+ [asyncComputed] error: ${currentState.error.message}
+ The error was thrown inside the callback function. The best way to handle
+ this error is inside that function. However, asyncComputed will rethrow
+ the error to make sure that the error is not silently ignored.
+ The error will be reset when one of the signals inside the function changes.
+ Until that happens, the error will be re-thrown by Angular on every use
+ of the signal. (usually every change detection cycle)
+ (this warning is only shown in dev mode)
+`);
+ }
// rethrow error to be handled by the user
throw currentState.error;
// note to self: do not wrap this in a new error, as it will hide the original stack trace
diff --git a/projects/se-ng/swapi/src/lib/swapi.component.ts b/projects/se-ng/swapi/src/lib/swapi.component.ts
index c02a23bb..eedc5fb3 100644
--- a/projects/se-ng/swapi/src/lib/swapi.component.ts
+++ b/projects/se-ng/swapi/src/lib/swapi.component.ts
@@ -1,13 +1,13 @@
import { Component, OnInit } from '@angular/core';
@Component({
- selector: 'lib-swapi',
- template: `
+ selector: 'lib-swapi',
+ template: `