Stay Reactive Stay Quiet with RxJS

Negli ultimi tempi si sente spesso parlare di Reactive Programming. Framework come Angular, l’hanno messo alla base del loro core, ma molti dei suoi utilizzatori vengono sopraffatti da essa. Facciamo allora un viaggio insieme alla scoperta della più famosa libreria di Reactive Programming per Javascript, RxJS. In questo talk navigheremo insieme su un mare mosso da Observers e Subscriptions, ci faremo spingere da qualche Operators e con l’aiuto di alcuni Subjects arriveremo a padroneggiare il famoso oceano degli Observables.

Transcript

1. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
2. Agenda 1. Why this talk? 2. Observables 3. Observers 4. Subscriptions 5. Operators 6. Marble Diagram 7. Subjects Stay Reactive Stay Quiet with RxJS Luca Del Puppo
3. Ego Slide Luca Del Puppo (aka Puppo) Full-Stack Developer in Flowing @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net
4. WE ❤ REMOTE WORKING Milan, Rome, Turin, Treviso, Bologna, Ancona, Catania and wherever you want! We are hiring ⮕ recruitment@flowing.it
5. Why this talk?
8. Observables
9. Core Observables concerns ➔ Creating Observables ➔ Subscribing to Observables ➔ Executing the Observable (next, error, complete) ➔ Disposing Observables Stay Reactive Stay Quiet with RxJS Luca Del Puppo
10. Observers
11. What is an Observer? An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete. Stay Reactive Stay Quiet with RxJS Luca Del Puppo const observer: Observer<string> = { next: (value: any) => console.log('next', value), error: (error: any) => console.error('error', error), complete: () => console.log('complete') }
12. Subscriptions
13. What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method, unsubscribe, that takes no argument and just disposes the resource held by the subscription. Stay Reactive Stay Quiet with RxJS Luca Del Puppo const subscription = observable.subscribe(observer); subscription.add(observable2.subscribe(observer)); subscription.unsubscribe();
14. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
15. Operators
16. Operators Creation Creation operators are functions that can be used to create an Observable with some common predefined behavior or by joining other Observables Pipeable Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified. Syntax: observableInstance.pipe(operator(), operator2() ….) Stay Reactive Stay Quiet with RxJS Luca Del Puppo
17. Creation Operator Creation Operator ➔ of ➔ from ➔ fromEvent ➔ interval ➔ timer ➔ EMPTY Join Creation Operator ➔ combineLatest ➔ forkJoin ➔ concat ➔ merge ➔ race ➔ zip Stay Reactive Stay Quiet with RxJS Luca Del Puppo
18. Pipeable Operator ➔ Filtering Operator debounceTime, throttleTime, distinct, filter, first, last, skip, skipLast, skipUntil, SkipWhile, take, takeLast, takeUntil, takeWhile ➔ Transformation Operator concatMap, exhaustMap, map, mergeMap, pairwise, scan, switchMap ➔ Utility Operator delay, tap, timeout, timestamp, toArray ➔ Error Operator catchError, retry, retryWhen ➔ Join Operator combineLatestAll, concatAll, exhaustAll, mergeAll, startWith, switchAll, withLatestFrom ➔ Multicasting Operator share ➔ Conditional and Boolean Operators defaultIfEmpty, every, find, findIndex, isEmpty ➔ Mathematical and Aggregate Operators count, max, min, reduce Stay Reactive Stay Quiet with RxJS Luca Del Puppo
19. But….
20. You can create your own operators too
21. It’s not all
22. Marble Diagrams are visual representations of how operators work, and include the input Observable(s), the operator and its parameters, and the output Observable. Marble Diagrams
23. Creation Operators
24. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
25. Join Creation Operators
26. combineLatest([source1$, source2$]) Combine Latest
27. concat(source1$, source2$) Concat
28. merge(source1$, source2$) Merge
29. forkJoin([source1$, source2$]) ForkJoin
30. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
31. Transform Operators
32. source$.pipe(concatMap(value => of(value))) ConcatMap
33. source$.pipe(exhaustMap(value => of(value))) ExhaustMap
34. source$.pipe(mergeMap(value => of(value))) MergeMap
35. source$.pipe(switchMap(value => of(value))) SwitchMap
36. Recap
37. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
38. Subjects
39. A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners. What is a Subject? Characteristics • Every Subject is an Observable • Every Subject is an Observer.
40. Which are they? ➔ Subject ➔ BehaviorSubject ➔ ReplaySubject ➔ AsyncSubject Stay Reactive Stay Quiet with RxJS Luca Del Puppo
41. Stay Reactive Stay Quiet with RxJS Luca Del Puppo
42. code https://github.com/puppo/rxjs-talk dev.to series https://dev.to/this-is-learning/series/13743 docs https://rxjs.dev/
43. Talk.next(“Thanks!”) Talk.complete() Questions.subscription() Luca Del Puppo @puppo92 https://www.linkedin.com/in/lucadelpuppo/ luca@delpuppo.net