Link Bacon.js Makes Functional Reactive Programming Sizzle

Like most other JavaScript developers, we’ve been in a callback hell. Functional Reactive Programming (FRP) is one, and in our opinion rather powerful, tool to improve the structure of your web app. This blog post introduces FRP concepts and benefits with Bacon.js, an FRP library for both browsers and server-side JS. We’ve been using Bacon.js in the new Flowdock.

Reactive programming is different from event-driven programming in the sense that it focuses on data flows and propagation of change instead of handling single events. For example, in an imperative world, there could be a statement that sums up two variables and produces a third variable. If either of the variables change, you wouldn’t expect the value of the result variable to change. If you’re using reactive building blocks, the result variable would always be the sum of the two variables. In this sense, reactive programming is almost like a spreadsheet.

FRP implements reactive programming with functional building blocks. Referential transparency is strictly enforced, which prohibits the use of variables. An alternative way has to be used to handle time-varying values. The main concepts in FRP are properties (not to be confused with JavaScript properties) and event streams. There are different names for these in different implementations. ‘Signal’ and ‘event’ are commonly used, but we’ll stick with Bacon.js nomenclature.

EventStreams are sources of events. These can be mouse clicks, keyboard events or any other input. The power of EventStreams is that they are composable. It is possible to use similar tools that are used to handle arrays for event streams: you can filter events, map event values to other values or reduce events to a property.

Property is used as an abstraction for a time-varying value. Properties are similar to EventStreams, but they also have the notion of current value. Most of the functionality is shared with EventStreams.