Build a Wikipedia search engine using RxJS

In this tutorial, we will be building a Wikipedia search engine using RxJS

1 Build a Wikipedia search engine using RxJS

1.1 What is RxJs?

Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators. Data sequences can take many forms, such as a stream of data from a file or web service, web services requests, system notifications, or a series of events such as user input.

Reactive Extensions represents all these data sequences as observable sequences. An application can subscribe to these observable sequences to receive asynchronous notifications as new data arrive.

RxJS has no dependencies which complements and interoperates smoothly with both synchronous data streams such as iterable objects in JavaScript and single-value asynchronous computations such as Promises.

1.2 HTML markup for the search box

1.3 Capturing the keyup events in search box

Here we capture the keyup events of the input element using the fromEvent operator of Rx.Observable which creates an observable sequence by adding an event listener to the matching DOM Element

1.4 Throttle the input events

Here we are debouncing the keyup events for about 500 milliseconds using the throttle operator of Rx.Observable which returns an Observable that emits only the first item emitted by the source Observable during sequential time windows of a specified duration

1.5 Get only distinct values by eliminating other characters

The throttled input stream is then run through the distinctUntilChanged operator which returns an observable sequence that contains only distinct contiguous elements according to the keySelector and the comparer.

1.6 Querying Wikipedia

We can now send the filtered input terms to Wikipedia for getting the search results. For that we will be defining a new function called searchWikipedia by passing the term as the parameter.

1.7 Subscribe to the event stream

We now got the distinct observable streams and the flatMapLatest transform the items emitted by an Observable into Observables, and mirror those items emitted by the most-recently transformed Observable.