Tweet
Tweet

Slide 1

Slide 1 text

@ManfredSteyer Angular's Future with Signals ManfredSteyer

Slide 2

Slide 2 text

@ManfredSteyer

Slide 3

Slide 3 text

@ManfredSteyer

Slide 4

Slide 4 text

@ManfredSteyer Zone.js: Monkey Patching After Event Handler: Inform Angular CD Checks Components all components (default) or selected ones (OnPush)

Slide 5

Slide 5 text

@ManfredSteyer Zone.js: Magic Zone.js: ~100K Cannot patch async/await coarse grained CD e.g. Components are always checked as a whole, even if only a tiny fraction changed

Slide 6

Slide 6 text

@ManfredSteyer Signals!

Slide 7

Slide 7 text

@ManfredSteyer Signals!

Slide 8

Slide 8 text

@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712

Slide 9

Slide 9 text

@ManfredSteyer flights: Flight[] = []; const flights = await this.flightService.findAsPromise(from, to); this.flights = flights;

Slide 10

Slide 10 text

@ManfredSteyer flights = signal([]); const flights = await this.flightService.findAsPromise(from, to); this.flights.set(flights);

Slide 11

Slide 11 text

@ManfredSteyer

Slide 12

Slide 12 text

@ManfredSteyer

Slide 13

Slide 13 text

@ManfredSteyer

Slide 14

Slide 14 text

@ManfredSteyer

Slide 15

Slide 15 text

@ManfredSteyer

Slide 16

Slide 16 text

@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: `

C: {{ celsius() }}

F: {{ fahrenheit() }}

`, }) export class SimpleCounter { celsius = signal(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); } Taken from the Signals RFC: https://github.com/angular/angular/discussions/49685

Slide 17

Slide 17 text

@ManfredSteyer @Component({ signals: true, selector: 'temperature-calc', template: `

C: {{ celsius() }}

F: {{ fahrenheit() }}

`, }) export class SimpleCounter { celsius = input(25); fahrenheit = computed(() => this.celsius() * 1.8 + 32); }

Slide 18

Slide 18 text

@ManfredSteyer Work w/o Zone.js Interop with traditional components Fine-grained CD No need to update code!

Slide 19

Slide 19 text

@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation, Nx, DDD 12 chapters

Slide 20

Slide 20 text

@ManfredSteyer Fine-grained CD Zone-less Future Convertible to Observables and vice versa! No need to unsubscribe! No need to update code!

Slide 21

Slide 21 text

@ManfredSteyer • Maintainable Architectures • 🆕🔥 Standalone Components & APIs • Micro Frontends and Module Federation • 🆕🔥 Signals and Your Architecture: CD, NGRX, RxJS-Interop Public or Company Training, Remote or On-Site German: angulararchitects.io/workshop-de English: angulararchitects.io/workshop-en