Quick and dirty ReactiveX example

Event-driven architectures have been around for a while and lately its use has become popular in environments such as Node.js. One of the most expressive and graceful implementations of these ideas is ReactiveX. It was created from the idea of interfacing three facets of event-based systems : modeling of asynchronous streaming data, rich queries on those streams and their interaction with time-triggered events.

ReactiveX provides a comprehensive set of libraries to make use these concepts. The official getting-started section presents a nifty autocomplete search example using Wikipedia's web endpoint. The highlights of this example are:

• The Observable element that represents an asynchronous flow of data to react upon integrates easily with the widely used A+ Promises
• map and filter functions, are examples of query operations that perform basic data manipulation on the data stream.
• The throttle function is used to control the frequency of the requests, i.e. regulate the stream.
• flatMapLatest is used to queue all the calls and keep the latest one, effectively filtering out redundant data.

At the end of the example, everything is tied up nicely by subscribing to the processed data stream and appending the results to the display.

This is my implementation of their example:

See the Pen RxJS wikisearch by CV (@cesarvelandia) on CodePen.