What is Functional Reactive Programming?
Functional Reactive Programming enables a much simpler way to deal with events. With Bacon JS, events are seperate from the views and models as a stream of values in time. These streams can be thought of as lists of values that can then be mapped to transformation functions that model the data before passing to the views to render. This requires a different mindset to the typical imperative style of UI programming as rather than mutating the state throughout the code, changes are represented as new state objects that are passed down through the views.
A very simple example of this relationship between events and state is an event stream that listens to clicks and maps each click to the value 1. The resulting list (or stream) of 1s at each point in time that the event is fired, can then be reduced with a Bacon JS scan function to add them all together, thereby resulting in a state representing the number of times something has been clicked.
The benefits of this may not be immediately apparent, but this can greatly simplify your asynchronous code by composing pure functions around the values from the event stream in a very easy to read manner, rather than chaining callbacks together (that can become very difficult to maintain) and mutating the state of variables (leading to side effects that can produce unexpected bugs).
I highly advise watching the following presentation by Phillip Roberts to help gain a clearer insight:
When is it useful
Functional Reactive Programming is useful in almost any case that deals with realtime, event driven behaviour. Examples of this would be computer games (like the classic ‘Snake’ game) realtime charts, spreadsheets, and could also be handy on the server side for background processes.
What is BaconJS?
Below I’ve adapted the simple plus/minus demo from the Bacon JS Docs to include key presses as additional event streams, and tied it in with the time based visual that Phillip Roberts used in his talk: