Angular Belgrade 2023 Infinite Scrolling Implemented using RxJS

Slides from my talk at Angular Belgrade 2023. The talk was named: Infinite Scrolling Implemented using RxJS.

The example project can be found here: https://github.com/jakovljevic-mladen/ng-pagination-rx-streams

Transcript

1. Infinite Scrolling Implemented using RxJS
2. Mladen Jakovljević Frontend developer @ goUrban RxJS Core Team member Twitter: twitter.com/@jakovljevicMla GitHub: github.com/jakovljevic-mladen
3. What is RxJS? What is Observable? • JS object • From 0 to infinite values • Push based • Cancellable • Lazy
4. Observables require subscription articles$.subscribe( articles => display(articles) ); <p>{{ articles$ | async }}</p> articles$.subscribe({ next: articles => display(articles), error: error => displayError(error), complete: () => console.log('Completed') });
5. Observables have an option to be cancelled const subscription = articles$. subscribe( articles => display(articles) ); // later subscription.unsubscribe(); // or articles$.pipe( takeUntil(this.destroy$) ).subscribe(...);
6. Observables bring values and/or events (push based) • From 0 to infinite many values (next) • A notification that there are no more values (complete) • A notification that an error happened during production of the values (error)
7. Observables are collections of values or events
8. As collections, we can transform them by - using operators • Filtering operators ◦ filter, take, takeUntil, first, last, ... • Math operators ◦ count, max, min, reduce • Transform operators ◦ map, scan, buffer, ... ◦ mergeMap, switchMap, exhaustMap, concatMap // higher order mapping
9. How to make an Observable? const getData$ = of('Data?'); const arr = [1, 2, 3, 4]; const getMoreData$ = from(arr); const getDataFromAPI$ = from( fetch('https://api.github.com/search/users?q=mladen' ).then(res => res.json()) ); const tickEverySecond$ = interval(1_000); import { of, from, interval, fromEvent } from 'rxjs'; const onDocumentClick$ = fromEvent(document, 'click'); new Observable(...);
10. Composing asynchrony is where RxJS is the best
11. How could we solve infinite scrolling problem?
13. Scroll events?
14. Scroll events have issues • They happen too many times ◦ buffer, window, audit • We need to provide a threshold • They don't solve an issue with large amount of DOM elements in an easy way ◦ Threshold needs to be adjusted after each data load and we can never be sure that we did it the right way • What is the solution? ◦ IntersectionObserver • RxJS doesn't have out-of-the-box solution to create an IntersectionObserver Observable
15. How to create an Observable from IntersectionObserver? function fromIntersectionObserver ( target: Element, options?: IntersectionObserverInit ): Observable<IntersectionObserverEntry> { return new Observable(subscriber => { const callback = ([entry]: IntersectionObserverEntry[]) => { subscriber. next(entry); }; const io = new IntersectionObserver (callback, options); io.observe(target); return () => io.disconnect(); }); }
16. Application structure • FeedService • FeedComponent
17. import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http' ; import { catchError, EMPTY, Observable } from 'rxjs'; import { FakeFeedResponse } from '../models'; @Injectable({ providedIn: 'root' }) export class FeedService { private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>( '/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ); constructor(private http: HttpClient) { } }
18. class FeedService { private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>( '/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ); constructor(private http: HttpClient) { } } interface FakeFeedResponse { page: number; nextPage: number | null; items: FeedItem[]; } interface FeedItem { id: string; user: { name: string, avatar: string }; type: 'text' | 'image'; text?: string; imageURL?: string; }
19. class FeedComponent { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); constructor(private feedService: FeedService) { } }
20. <div class="articles"> <article #article [id]="item.id" *ngFor="let item of (feed$ | async)"> <div class="user"> <img [src]="item.user.avatar" [alt]="item.user.name + ' avatar'"> {{item.user.name}} </div> <p *ngIf="item.type === 'text'">{{item.text}}</p> <img *ngIf="item.type === 'image'" [src]="item.imageURL" [alt]="item.imageURL"> </article> </div>
23. class FeedService { private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>( '/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ); constructor(private http: HttpClient) { } }
24. class FeedService { private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ); constructor(private http: HttpClient) { } }
25. class FeedService { private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ); constructor(private http: HttpClient) { } }
26. private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse>('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) );
27. private nextPage: number | null = 1; feed$: Observable<FakeFeedResponse> = this.http.get<FakeFeedResponse> ('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) );
28. private nextPage: number | null = 1; feed$ = this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) );
29. private nextPage: number | null = 1; feed$ = this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) );
30. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ) };
31. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) ) : EMPTY; };
32. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY) , tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; };
33. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; feed$: Observable<FakeFeedResponse> = this.getLoadObservable();
34. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; feed$: Observable<FakeFeedResponse> = this.getLoadObservable();
35. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.getLoadObservable();
36. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable() ) );
37. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
38. class FeedComponent { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); constructor(private feedService: FeedService) { } }
39. class FeedComponent { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); constructor(private feedService: FeedService) { } }
40. class FeedComponent { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; constructor(private feedService: FeedService) { } }
41. <div class="articles"> <article #article [id]="item.id" *ngFor="let item of feed$ | async"> <div class="user"> <img [src]="item.user.avatar" [alt]="item.user.name + ' avatar'"> {{item.user.name}} </div> <p *ngIf="item.type === 'text'">{{item.text}}</p> <img *ngIf="item.type === 'image'" [src]="item.imageURL" [alt]="item.imageURL"> </article> </div>
42. class FeedComponent { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; constructor(private feedService: FeedService) { } }
43. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; constructor(private feedService: FeedService) { } ngAfterViewInit() { } }
45. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { } }
46. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes } }
47. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes .pipe( ); } }
48. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map( ) ); } }
49. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList ) ); } }
50. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() ) ); } }
51. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) ) ); } }
52. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ) ); } }
53. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ) ); } }
56. function fromIntersectionObserver ( target: Element, options?: IntersectionObserverInit ): Observable<IntersectionObserverEntry> { return new Observable(subscriber => { const callback = ([entry]: IntersectionObserverEntry[]) => { subscriber. next(entry); }; const io = new IntersectionObserver (callback, options); io.observe(target); return () => io.disconnect(); }); }
57. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), ); } }
58. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => ) ); } }
59. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => elements.map(el => fromIntersectionObserver(el)) ) ); } }
61. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => elements.map(el => fromIntersectionObserver(el)) ) ); } }
62. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el)) ) ) ); } }
64. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))) ) ); } }
65. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))) .pipe(mergeAll()) ) ); } }
66. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe( mergeMap(x => x)) ) ); } }
67. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ) ); } }
68. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ); } }
69. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
70. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ); } }
71. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( map(({ items }) => items) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ).subscribe(this.feedService.loadMore$) ; } }
72. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items }) => acc.concat(items), []) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ).subscribe(this.feedService.loadMore$); } }
74. <div class="filter"> <form #f="ngForm"> <label> Feed options <select name="feedFilter" ngModel> <option value="">All</option> <option value="onlyImages">Only Images</option> <option value="onlyText">Only Text</option> </select> </label> </form> </div> <div class="articles"> <article #article [id]="item.id" *ngFor="let item of (feed$ | async)"> ... </article> </div>
76. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
77. private nextPage: number | null = 1; private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
78. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
79. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) ); export type FeedFilterType = '' | 'onlyImages' | 'onlyText';
80. <div class="filter"> <form #f="ngForm"> <label> Feed options <select name="feedFilter" ngModel> <option value="">All</option> <option value="onlyImages">Only Images</option> <option value="onlyText">Only Text</option> </select> </label> </form> </div> <div class="articles"> <article #article [id]="item.id" *ngFor="let item of (feed$ | async)"> ... </article> </div>
81. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) );
82. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( switchMap(feedFilter => this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) ) ) );
83. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( switchMap(feedFilter => { this.nextPage = 1; return this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable()) ); }) );
84. private getLoadObservable: () => Observable<FakeFeedResponse> = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( switchMap(feedFilter => { this.nextPage = 1; return this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable( feedFilter)) ); }) );
85. private getLoadObservable = () => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( switchMap(feedFilter => { this.nextPage = 1; return this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable( feedFilter)) ); }) );
86. private getLoadObservable = ( feedFilter: FeedFilterType ) => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage , feedFilter } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( switchMap(feedFilter => { this.nextPage = 1; return this.loadMore$.pipe( exhaustMap(() => this.getLoadObservable(feedFilter)) ); }) );
87. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items }) => acc.concat(items), []) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ).subscribe(this.feedService.loadMore$); } }
88. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items , page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ).subscribe(this.feedService.loadMore$); } }
89. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( map(queryList => queryList .toArray() .splice(-3) .map(({ nativeElement }) => nativeElement) ), switchMap(elements => from(elements.map(el => fromIntersectionObserver(el))).pipe(mergeAll()) ), filter(({ isIntersecting }) => isIntersecting) ).subscribe(this.feedService.loadMore$); }
90. <div class="filter"> <form #f="ngForm"> <label> Feed options <select name=" feedFilter" ngModel> <option value="">All</option> <option value="onlyImages">Only Images</option> <option value="onlyText">Only Text</option> </select> </label> </form> </div> <div class="articles"> <article #article [id]="item.id" *ngFor="let item of (feed$ | async)"> ... </article> </div>
91. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... } }
92. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... this.form.valueChanges } }
93. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... this.form.valueChanges .pipe( map(({ feedFilter }) => feedFilter) ); } }
94. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... this.form.valueChanges.pipe( map(({ feedFilter }) => feedFilter) ).subscribe(this.feedService.filterChange$) ; } }
95. class FeedComponent implements AfterViewInit { feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... this.form.valueChanges.pipe( map(({ feedFilter }) => feedFilter) ).subscribe(this.feedService.filterChange$); } }
97. <div class="loading" *ngIf="loading$ | async"> Loading... </div> <div class="filter"> <form #f="ngForm"> ... </form> </div> <div class="articles"> <article #article [id]="item.id" *ngFor="let item of (feed$ | async)"> ... </article> </div>
98. class FeedComponent implements AfterViewInit { loading$: Observable<boolean> = this.feedService.loading$; feed$: Observable<FeedItem[]> = this.feedService.feed$.pipe( scan((acc, { items, page }) => page === 1 ? items : acc.concat(items), []) ); @ViewChild('f') form: NgForm; @ViewChildren('article') articles: QueryList<ElementRef<HTMLElement>>; ngAfterViewInit() { this.articles.changes.pipe( // ... this.form.valueChanges.pipe( map(({ feedFilter }) => feedFilter) ).subscribe(this.feedService.filterChange$); } }
99. private loadingChange$ = new Subject<boolean>(); private getLoadObservable = (feedFilter: FeedFilterType) => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage, feedFilter } }).pipe( catchError(() => EMPTY), tap({ next: ({ nextPage }) => this.nextPage = nextPage }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( ... );
100. private loadingChange$ = new Subject<boolean>(); private getLoadObservable = (feedFilter: FeedFilterType) => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage, feedFilter } }).pipe( catchError(() => EMPTY), tap({ subscribe: () => this.loadingChange$.next(true), next: ({ nextPage }) => this.nextPage = nextPage, finalize: () => this.loadingChange$.next(false) }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( ... );
101. private loadingChange$ = new Subject<boolean>(); private getLoadObservable = (feedFilter: FeedFilterType) => { return this.nextPage ? this.http.get('/feed', { params: { nextPage: this.nextPage, feedFilter } }).pipe( catchError(() => EMPTY), tap({ subscribe: () => this.loadingChange$.next(true), next: ({ nextPage }) => this.nextPage = nextPage, finalize: () => this.loadingChange$.next(false) }) ) : EMPTY; }; loadMore$ = new BehaviorSubject(null); filterChange$ = new Subject<FeedFilterType>(); feed$: Observable<FakeFeedResponse> = this.filterChange$.pipe( ... ); loading$: Observable<boolean> = this.loadingChange$.asObservable();
103. Summary • RxJS is best used for coordination of multiple events ◦ I loaded data from server and I tracked loading state ◦ I handled events from QueryList (I suggest using MutationObserver which is natively supported by modern browsers) ◦ I subscribed to IntersectionObserver events ◦ I tracked changes in filters • Work backwards ◦ feed$ Observable was written once and extended as needed ◦ loadMore$ and filterChange$ Subject were added ◦ and loading$ Observable in the end • Factor out your Observables - there's no need to use factory functions (like I did here) • But, what about resources? ◦ async pipe ◦ takeUntil (just in case)
104. Thank you • Demo project: ◦ https://github.com/jakovljevic-mladen/ng-pagination-rx-streams • The StackOverflow question ◦ https://stackoverflow.com/q/60155426/1253279 • If you'd like to contribute to RxJS-u: ◦ https://github.com/ReactiveX/rxjs • My Twitter (quite inactive) profile: ◦ https://twitter.com/jakovljevicMla