A simple experiment to implement infinite scroll with RxJS Blog post on Angular Implementation : Simple Infinite Scroller directive with RxJS Observables **What is Reactive Programming ?**In simple terms it is programming with asynchronous data streams. There is a great post by — The introduction to Reactive Programming you’ve been missing accompanied by an egghead.io video. Andre Staltz The introduction to Reactive Programming you’ve been missing https://egghead.io/courses/introduction-to-reactive-programming What is RxJS? RxJS or Reactive Extensions is a library developed by Microsoft Open Technologies in Javascript for and data streams. transforming, composing querying https://github.com/Reactive-Extensions/RxJS There is a great talk by on this Ben Lesh Thinking Reactively with RxJS 5 Below are a couple of nice introductions to Observables and a few operators by Netanel Basal . Observables under the hood RxJS — Six Operators That you Must Know What will we be building? We are going to build a naive infinite scroller using observables. Whenever the user scrolls a given container to 70%, we will trigger the api call to get more data from the server. For this implementation we will use the to get the latest news. HackerNews unofficial api Below are the operators we will be using from RxJS : similar to map in an array, map over the stream of incoming data. [map](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map) : similar to filter in an array, filter the stream of incoming data. [filter](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter) : returns an array of current emitted data and also the previous emitted data . [pairwise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pairwise) : returns an observable emits supplied values before emitting the values from source observable [startWith](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) : waits to emit value until the passed in inner observable has completed [exhaustMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-exhaustMap) Link to the output in jsbin.com : https://output.jsbin.com/punibux — Setup basic html and styles #Phase1 Import the RxJS library and we will use as a scroll container and append news to it. infinite-scroller — Setup helpers functions for data processing, rendering and calculations #Phase2 First three functions are straight forward, — returns the api url with the current page number as query param getQuotesAPI — processes the return data from the api which is performed using and increase the currentPage. processData fetch API — takes each news item and renders to the view. renderNews The next two functions are the ones used for scroll calculations 4. — determines if the user is scrolling down or not. isUserScrollingDown 5. — determines if the user has scrolled to the passed in percentage to get more data. isScrollExpectedPercent — Setup up observable stream #Phase3 To capture the scroll events in the container, we need to create an observable from the scroll event. This can be achieved by using - . It is a convention to append to the variable when referencing an observable stream. Rx.Observable.fromEvent docs $ — Stream logic to process scroll events and call the api #Phase4 We are going to take the scroll event emitted by and over to take only the values we need for our infinite scroll logic. We need only three properties from the scroll element — , and . scrollEvent$ map [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) We pass the mapped data to operator which emits the current and previous value in an array which will look like below. pairwise Now we can take the pair of positions and pass it to the them to filter according to our conditions filter Is the user scrolling down Has the user scrolled reached seventy percent of the container — It gets invoked when the has passed filter conditions. We start with an initial value of an empty array. requestOnScroll$ userScrollDown$ We going to use to create an observable from a promise. makes the http call and returns a promise. will wait for the fetch to complete and the inner observable to emit the data from the API. [Rx.Observable.fromPromise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromPromise) fetch exhaustMap — means they do not do anything until you subscribe to them. We will subscribe to the and pass in to the subscribe method. When emits the data from the api it will be passed on to which will call to render on to the view. Observables are lazy requestOnScroll$ processData exhaustMap processData renderNews Below is the gif of the infinite scroll in action, watch the scroll bar on the right. In my next post I will try to implement it in Angular 2 by creating an infinite scroll directive. Update: Here is the link to my follow post on Simple Infinite Scroller directive with RxJS Observables

Fetch

Microsoft

Mozilla

Twitter

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Naive Infinite scroll in Reactive Programming using RxJS Observables

Too Long; Didn't Read

Companies Mentioned

Ashwin Sureshkumar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Naive Infinite scroll in Reactive Programming using RxJS Observables

Too Long; Didn't Read

Companies Mentioned

Ashwin Sureshkumar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES