Observables

Everything is a stream

Streams simplify asynchronous and concurrent programming.

RXJS simplifies functional reactive programming in Javascript.

All events and state changes over time can be piped into observable streams.

Streams are easily "observed" by subscribers who can easily consume its data.

Everything that changes over time can be handled a stream: application state, component events, data arrays, json packets, sockets, http connections.

Observables and Functional Reactive Programming

Debouncing, throttling, filtering, AJAX cancellation and others, are just the tip of the iceberg. We have a myriad of operators at our disposal, making difficult use-cases trivial to solve. Using these operators, you can get as creative as your imagination allows you to be! Functional Reactive Programming (FRP) is elegant in its own way.

Image result for marbles

Observables

One of the reasons we favour the Angular framework is it's tight integration with and support for RXJS Observables - unique objects similar to a Promise that can help manage async code. Observables provide support for passing messages between publishers and subscribers in your application.

Observables offer significant benefits over other techniques for event handling, asynchronous programming, and handling multiple values.

Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.

Observables are not part of the JavaScript language yet but are being proposed to be added to the language. Since we can’t use a built-in Observable, we rely on a popular Observable library called RxJS.

RxJS provides an Observable implementation for use to use as many other helpful utilities related to Observables.

So why marbles?

Learning Reactive Programming can be a daunting task so the Rx team came up with a concept of marble diagrams to visually explain ReactiveX operators.

In its basic form, Reactive Programming deals with event streams (a sequence of events that happen over time). Whenever an event occurs, we react to it by doing something. We could react to events by using for loops but in Functional Programming the transformations are done via map()filter() and other Rx operators.

Use cases

Stream Handling

Event handling

Promise alternative

Reactive forms

Real time content

Socket streams

throttleWithSelector

Functional Reactive Programming with RXJS library

RXJS has a learning curve and introduces new programming concepts, but in doing so it greatly simplifies development asynchronous streams. Instead of looping around data, RXJS users higher order functions: map, mergemap, switchmap and concatmap.

Map is for mapping ‘normal’ values to whatever format you need it to be. The return value will be wrapped in an Observable to enable stream further processing. MergeMap, switchMap or concatMap exist for dealing with wrapped observeables.  MergeMap flattens data into one Observable, SwitchMap flattens data into one Observable but only keeps the latest value. ConcatMap flattens the data into one Observable and retains the previous order of inner observables.

Explore how Syntapse can assist your business and software development. Contact us for further assistance or general enquiries.

We can offer a range of services from half day consultancy, assessment reports, and troubleshooting to long term greenfield project involvement

As your technology partners we are happy to hear from schools and local authorities, communities and charities, engineers and scientists, startups and institutions