What is a stream? A stream is a sequence of ongoing events ordered in time. It can emit three different things: 1. a value (of some type) 2. an error 3. a "completed" signal Consider that the "completed" takes place, for instance, when the current window or view containing that button is closed. We capture these emitted events only asynchronously, by defining a function that will execute when a value is emitted, another function when an error is emitted, and another function when 'completed' is emitted. Sometimes these last two can be omitted and you can just focus on defining the function for values. The "listening" to the stream is called subscribing. The functions we are defining are observers. The stream is the subject (or "observable") being observed. This is precisely the Observer Design Pattern. ================================================= --a---b-c---d---X---|-> a, b, c, d are emitted values X is an error | is the 'completed' signal ---> is the timeline =================================================  

Request & Response Since every value can be a stream in Rx, a url can also be a stream, so we can create a stream that will capture everytime a url is requested by doing: var requestStream = Rx.Observable.just('https://api.github.com/users'); The url is now an observable stream, and each time this value is emitted we need to invoke some functionality, which we do by subscribing to the value. requestStream.subscribe(function(requestUrl) { //see below But, as of now we can only subscribe to the url value being invoked, we want to subscribe also to the response. So well need to upgrade the insides of hour observer function: requestStream.subscribe(function(requestUrl) {  // 1. requestStream.subscribe emits the url value, and enters into the observer function.  // 2. inside the observer function we create another new Observable but this time passing it a function as value (Rx.Observable.create)  // 3. inside the function value of the new Observable we make a server request using a promise, passing it the value emitted to us from step 1.  // 4. inside the promises callbacks (done,fail,always) we notify the observer on the corresponding server response.  // 5. after defining our new Observable, we subscribe to it, which will emit the function value to execute, doing a promise based server call, then emiting   //      the corresponding server response into the subscriptions callback, where we can complete our procedure as needed.  var responseStream = Rx.Observable.create(function (observer) {     jQuery.getJSON(requestUrl)     .done(function(response) { observer.onNext(response); })     .fail(function(jqXHR, status, error) { observer.onError(error); })     .always(function() { observer.onCompleted(); });   });   responseStream.subscribe(function(response) {     // do something with the response   }); }   We create another observable stream, that will invoke a value, this time not a url string but a function. The invoked function will do an XHR using a jQuery promise that will resolve in ether .done() or .fail() Done – observer.onNext notify other subscribers on the data events Fail – notify subscribers on errors onCompleted – notifies an end result We can see that the promise inside our stream manages the flow of the event, resolving it by notifying other subscribers about returned value, errors and the end of the event.   Is a promise an observable ?  Yes! A promise can be viewed as a single value stream, meaning you can emit a single value (the promise) which will be resolved by a subscriber (the .then()/.done() function) the difference is that a stream enables continuous values to be emited unlike a promise which resolves then waits to be subscribed to again. The two do not conflict and can be used together, and you can convert a promise to a stream using Rx.Observable.fromPromise(promise)   Meta stream As of now the responseStream is depandant on the nested Promise and its callbacks, then it is also dependent on the nested subscriptions, and its callback, this is equivalent to "callback hell". What we need to do is map each responseStream using a map function to return a new stream (Observable) from a promise (jQuery.getJSON). The result: var responseMetastream = requestStream   .map(function(requestUrl) {     return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));   }); now responseStream (responseMetastream ) is a stream of streams, returning an observable stream for each new request made to the server.  

Steaming from mouse Events var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click'); The above will create a click event stream. The code below will map that click stream into a subscribableurl stream, meaning every subscribable click will map to a subscribable URL request stream.  The click stream will contain all clicks, and all clicks are mapped to url values.   var requestStream = refreshClickStream   .map(function() {     var randomOffset = Math.floor(Math.random()*500);     return 'https://api.github.com/users?since=' + randomOffset;   });   Merging streams Lets say you have a stream for click url requests (as we did previously), and a stream for the startup url requests, which is subscribed to seperatly. The  stream for the startup url requests looks as follows: var startupRequestStream = Rx.Observable.just('https://api.github.com/users'); And lets say you want to subscribe to both the click url requests & the seperate startupRequestStream , and log all requests into the console, regardless of which request was made. One way to achieve that is to pass the same functions to both subscription, where the console function will be called. The correct way is to merge both subscriptions into a single stream (observable) of both of the url subscription (startupRequestStream  & refreshClickStream). Example: var requestStream = Rx.Observable.merge(   refreshClickStream, startupRequestStream ); Now we have a single stream that will emit on both the refreshClickStream & startupRequestStream Observables.

Data architecture using observables and services   In a reactive application Services play 2 roles: 1. Provide streams of data that our application can subscribe to 2. Provide operations to add or modify data   At a high level, the application data architecture is straightforward: • The services maintain streams which emit models (e.g. Messages) • The components subscribe to those streams and render according to the most recent values