Mastering Reactive JavaScript

In functional reactive programming, an observable is an object where you can listen for events. This way, you can, for instance, create an observable for a button and then listen and act when a click happens.

The bacon.js gives you two flavors of an observable: the first one is EventStream and the other is Property. We will see the difference between the two objects later. To listen to events in an observable (or subscribe to an observable), you can use the onValue()method with a callback. So if you want to log every event in an EventStream, you can use the following code:

myEventStream.onValue(function(event){ 
    console.log(event); 
}); 

As we saw in the example in the last chapter, we can transform our observable using bacon.js operators. These operators let us filter, combine, map, buffer, and do a lot of other interesting things with our EventStream.

An observable can either finish or stay open...

As discussed earlier, an observable is an object where you can listen to events. The act of listening to events in this object is called subscription. Here, we will see the different ways in which we can subscribe to an observable and also how we can stop listening to events in this observable (unsubscribe).

observable.onValue(functionToBeCalledWhenAnEventOccurs); 

Bacon 
    .fromArray([1,2,3,4,5]) 
    .onValue((number)=&gt...

Throughout this book, you will see a lot of diagrams explaining how an operator works. These diagrams are a graphical representation of observables and operations in those observables. Usually, the diagrams consist of three parts. On the top they shows a line with balls representing the initial state of an observable. The line itself represents an observable. The circles are events that happened in this observable and they are pushed from left to right; therefore, the leftmost ball is the first event, the second one is the second, and so on. This is illustrated in the following diagram:

So, the preceding line represents an observable with three emitted events. The string at the center of each circle is the value emitted by that event. The short vertical line on the right-hand side of the diagram represents the end of this observable. This diagram is a graphical representation of the following observable:

Bacon 
   .fromArray([ 
         'First Event', 
      ...

One important thing when learning functional reactive programming is how you can transform the events emitted by an observable. This way, you can use successive function calls to create new objects from the original input. This also improves the reuse of your code; every transformation of an observable creates a new observable, and each observable can have several listeners subscribed to it.

Before applying any transformations to our observables, let's implement an observable to generate and print the current date. To do this, let's use the Bacon.interval() method. So, the following code will emit an empty object every second:

var eventSource = Bacon 
    .interval(1000); 

Now we can just subscribe a function to print the current date to the console. We can do this...

In this chapter, you learned the basics of functional reactive programming using the bacon.js library. We wanted to give you the taste of functional reactive programming and also get your hands dirty with a lot of different examples.

You learned about observables and the different types of observables that bacon.js has implemented. You also learned about some of the built-in methods that help you create observables in bacon.js and also how you can create your own observable using the fromBinder() method.

Apart from this, you also learned how to subscribe and unsubscribe from an observable, how to use operators to transform an observable, and the importance of reuse in this context.

In the next chapter, we will start using RxJS as it gives us more tools for functional reactive programming. We will see how it compares with bacon.js and understand the basics of this new tool.