RxJS Patterns Towards Formalising Common RxJS Patterns @elmd_ Dominic Elm @KwintenP Kwinten Pisman

No content

const show$ = this.sourceJokes$.pipe( skip(1), mapTo(true), ); const hide$ = this.update$.pipe(mapTo(false)); const showNotificationSettings$ = this.settingsService.settings$.pipe( select(({ showNotifications }) => showNotifications), ); this.showNotification$ = showNotificationSettings$.pipe( switchMap(showNotifications => { if (showNotifications) { return merge(show$, hide$).pipe(startWith(false)); } return of(false); }), );

@elmd_ Dominic Elm @KwintenP Kwinten Pisman thoughtram https://thoughtram.io StackBlitz https://stackblitz.com strongbrew https://strongbrew.io jsbe https://jsbe.io

https://angular-checklist.io @elmd_ @KwintenP

Reactive Programming

[ ] Arrays @elmd_ @KwintenP

Observables @elmd_ @KwintenP

Observable - producer: function + subscribe(observer: Observer)
 : Subscription @elmd_ @KwintenP Anatomy of an Observable

Patterns

“In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design.”

Different Levels of Patterns OPERATORS PATTERNS RECIPES @elmd_ @KwintenP

Patterns by Example

World of Jokes @elmd_ @KwintenP

@elmd_ @KwintenP What we need is a list of jokes that is cached. This cache should be updated every 10 seconds. If the call fails, we obviously want to retry this call every 5 seconds, but only when we are online. Makes no sense to retry with no internet connection. Now, these jokes should be shown on the screen but only update on demand when the user requests an update… oh and don't forget to notify the user that there is new data available. And obviously everything, the polling interval, the notifications and polling itself must be configurable. In case one of these settings are updated, we must restart everything! Request from your Manager ”

@elmd_ @KwintenP

Divide & Conquer

@elmd_ @KwintenP Problem Sub-Problem A Sub-Problem B Solution to Problem Solution to Sub-Problem B Solution to Sub-Problem A

Whenever you have a difficult situation, just split it up, fix the small parts and reassemble everything back together to get the final solution! SCHRUTE’s TIP #1

What we need is a list of jokes that is cached. This cache should be updated every 10 seconds. If the call fails, we obviously want to retry this call every 5 seconds, but only when we are online. Makes no sense to retry with no internet connection. Now, these jokes should be shown on the screen but only update on demand when the user requests an update… oh and don't forget to notify the user that there is new data available. And obviously everything, the polling interval, the notifications and polling itself must be configurable. In case one of these settings are updated, we must restart everything! Request from your Manager @elmd_ @KwintenP ”

”The list of jokes should be updated every 5 seconds. Requirement #1 @elmd_ @KwintenP

Pattern Detection

WHEN Trigger HOW WHAT Identifying Patterns @elmd_ @KwintenP Result Pattern

Triggers and results should always be streams. If the are not streams, create streams yourself. SCHRUTE’s TIP #2

WHEN every 5 seconds WHAT cachedJokes$ that updates every 5 seconds The list of jokes should be updated every 5 seconds. ” Requirement #1 HOW when the trigger fires, send HTTP request to fetch the list of jokes @elmd_ @KwintenP

@elmd_ @KwintenP JokesListComponent SettingsDialogComponent JokesService SettingsService Application Architecture

No content

Pattern #1 Work that needs to be executed n times (n > 1) const result$ = trigger$.pipe( (_ !=> work$) ); Repeater Kwinten - Dominic

Translate the written requirement into the WHAT, WHEN and HOW! SCHRUTE’s TIP #3

” Requirement #2 jokes$ that is updated on demand when the trigger fires when the user manually requests the data extracting the most recent version of the data from the cache @elmd_ @KwintenP WHEN HOW WHAT When new data is available, the user has to manually request the latest version of the jokes to be shown on the screen.

No content

Enricher Pattern #2 Lazily enrich a stream with data when the trigger fires const result$ = trigger$.pipe( withLatestFrom(enricherSource$), map(([trigger, data]) !=> ), );

” Requirement #3 showNotifcation$ that hides or shows a notification when an update is available (or none is available) create two triggers (show and hide) and merge them @elmd_ @KwintenP WHEN HOW WHAT If an update is available, the user should see a notification to update the list of jokes.

No content

Group Aggregator Pattern #3 Whenever the result is an Observable const FT$ = falseTrigger$.pipe(mapTo(false)); const TT$ = trueTrigger$.pipe(mapTo(true)); const result$ = merge(FT$, TT$);

” Requirement #4 settings$ that encapsulates state when the user changes one of the settings keep and update state when the trigger fires @elmd_ @KwintenP WHEN HOW WHAT The user should be able to manage settings, that can be updated in a dialog.

State should always be managed within a stream. SCHRUTE’s TIP #4

No content

State Manager Pattern #4 State that needs to be reactively managed const result$ = trigger$.pipe( scan((prevState, updates) !=> { return { …prevState, …updates } }) );

Use the State Manager pattern as a minimalistic alternative to state management libraries like redux. SCHRUTE’s TIP #5

It should be possible to toggle the notifications and polling ” Requirement #5 jokes$ and showNotification$ conditionally stopping and starting of the notifications and polling @elmd_ @KwintenP WHEN HOW WHAT showNotification or enablePolling changes

No content

Work Decider Pattern #5 Work that needs to be stopped and restarted when some trigger fires const result$ = trigger$.pipe( (condition !=> { if (condition) workA$;
 else workB$; }) );

Use observables as the boundaries between services and components. SCHRUTE’s TIP #6

”If fetching the list fails we want to retry fetching it. If we are offline, we only want to retry if we are back online. Otherwise, retry every 1 seconds with max of 5. Requirement #6 @elmd_ @KwintenP

Whenever you have a difficult situation, just split it up, fix the small parts and reassemble it to the solution! SCHRUTE’s TIP #1 REMEMBER

If fetching the list fails we want to retry it. ” Requirement #6.1 @elmd_ @KwintenP

If we are offline, we only want to retry if we are online.Otherwise, retry every 1 second with a max of 5. ” Requirement #6.2 if we are offline, do A (retry when online), otherwise do B (retry every second, max 5). @elmd_ @KwintenP WHEN HOW WHAT cachedJokes$ when an error occurs (call to the backend fails)

No content

Error Decider Recipe #6 Work that needs to be stopped and restarted when some trigger fires const result$ = trigger$.pipe( retryWhen(error$ !=> { return error$.pipe(switchMap(_ !=> { if (condition) workA$;
 else workB$; })) )} ); X

From Pattern to Operator

SCHRUTE’s TIP #6 When you have a pattern in your app that keeps on repeating, transform it into an operator!

Key Takeaway’s @elmd_ @KwintenP Divide & Conquer Patterns Pattern Detection Custom Operators

@elmd_ @KwintenP Think Reactive ! Everything is a Stream

Thank you! @elmd_ @KwintenP