View source for FRP explanation using reactive-banana

This is an attempt to explain Functional Reactive Programming (FRP) enough to give a reader with no previous exposure to FRP an intuition what FRP is about. After reading this you should hopefully understand enough of FRP to understand the [http://www.haskell.org/haskellwiki/Reactive-banana reactive-banana] examples.

FRP has certain terms such as behavior, event and time-varying that can be confusing for people unfamiliar with it. I'll avoid these terms at first and will focus on spreadsheets and a generalization of spreadsheet cells (which I will call boxes). Later, once the most important concepts are explained, reactive-banana syntax will be introduced along with an example that demonstrates how to work with behaviors and events in reactive-banana. Finally some theory about time-varying functions and how events and behaviors can be implemented using pure functions by making time explicit should provide the necessary background to understand reactive-banana's haddock comments.

The version of reactive-banana used here is [http://hackage.haskell.org/package/reactive-banana-0.8.0.0 0.8.0.0].

== Reactive programming for the masses: the spreadsheet ==

Spreadsheets are something we all (for certain values of we) know about. Let's talk about a typical, simplified, spreadsheet. We have a list of products that we sell and want to compute their price with the Value Added Tax (VAT) added. We might have cells A1 to A10 contain the raw prices of our products and cell B1 contain the current VAT rate (say 19 for a 19% VAT). In cells C1 to C10 we'd like to see the prices including VAT.

In cell C1 we'd have a formula: <tt>=A1*(1+B1/100)</tt>, in cell C2 <tt>=A2*(1+B1/100)</tt>, etc. So if A1 contains $100 C1 would contain $119.

But what if the government, in its eternal quest to reduce the budget deficit, raises the VAT rate? We'd adjust cell B1, just change it to 20. And like magic all the C cells are updated.

Though this may seem mundane what we've just seen is actually a very good example of reactive programming. We didn't tell the C cells to update; they updated on their own because a value they depend on changed.

== From cells to boxes: generalizing the spreadsheet ==

Spreadsheets are nice, but if we want to truly get a feel for FRP we'll have to think beyond them. If we look at a spreadsheet at an abstract level it pretty much consists of cells of two types: value cells (<tt>19</tt>) and formula cells (<tt>=A1*(1+B1/100)</tt>). Let's lose the reference to spreadsheets and talk about boxes.

Say, for now, that there are two kinds of boxes: formula boxes and value boxes. Both support a &ldquo;get&rdquo; operation that returns a value. Value boxes additionally support a &ldquo;set&rdquo; operation that sets the value.

Formula boxes can contain any kind of pure function. They can also refer to the values of other boxes (both formula and value boxes). Value boxes don't have a function inside them, they have a value.

The translation of our VAT spreadsheet would be something like a formula box ''fIncl1'' containing the expression <tt>get(vExcl1) * (1 + get(vVat) / 100)</tt>. This expression uses two value boxes: ''vExcl1'' and ''vVat''.

We could also write ''fIncl1'' using a helper formula box ''fVat''. Let ''fVat'' have the formula <tt>1 + get(vVat) / 100</tt> and ''fIncl1'' have the formula <tt>get(vExcl1) * get(vVat)</tt>. I'll use <tt>:=</tt> for this kind of definition, the <tt>:=</tt> is there to remind you that this isn't Haskell.

It's important to note that any kind of value may be put into value boxes, including IO actions and functions.

Try doing this with a spreadsheet: <tt>fIncls := [get(ve) * get(vVat) | ve <- vExcls]</tt>. Or this: <tt>fIncl1 := apply(get(vVatFunc), get(vExcl1))</tt>.

If you're wondering why I'm not using Haskell syntax, it's to focus on the meaning of boxes rather than what the functions and combinators mean. That said, this pseudo-imperative syntax is on its way out as it's getting too clunky (that <tt>apply</tt> function is really just ugly). For a quick peek ahead the last few examples would be something like this in reactive-banana:

<haskell>fIncls = map (\ve -> (*) <$> ve <*> fVat) vExcls
fIncl1 = fVatFunc <*> vExcl1</haskell>

== Events ==

Let's say we want to build the worlds worst synthesizer. We have 7 buttons: &ldquo;a&rdquo;, &ldquo;b&rdquo;, &ldquo;c&rdquo;, &ldquo;d&rdquo;, &ldquo;e&rdquo;, &ldquo;f&rdquo; and &ldquo;g&rdquo;. Our output is generated by sampling a box twice per second and playing the frequency in the box until the next sample is taken.

This can't be expressed with the crude formula and value boxes system we've had so far. There is no way to express key presses in that system, a key press isn't like changing a value, it's something that occurs on a specific point in time but after it occurs it's forgotten (your keyboard doesn't remember key strokes, at least mine doesn't).

In this new system we'll forget about formula boxes and value boxes and introduce event boxes. Event boxes are like formula boxes in that they can refer to the value of other boxes. Event boxes can also react to events.

Events can be thought of like signals in something like D-Bus. Multiple things (event boxes) can listen to them and do something once a specific event is fired (triggered).

Every event has a value associated with it. Sometimes the value isn't important because the fact that the event has occurred is what's interesting but often we do want to know the value.

Events come in streams. When we say event box ''b1'' changes to the value of event ''e1'' when it receives that event we're actually saying that whenever an event from the stream of events we colloquially call ''e1'' comes ''b1'' changes to the value of that event.

Yes, that's confusing so I'll try to be precise. Just remember that when I refer to something like ''e1'' when defining an event box it's always to a stream of events, never a specific event.

If you're puzzled by the stream just think of it as an acknowledgement that a certain kind of event can occur multiple times. It actually goes a lot deeper than that, involving those confusing <tt>[(t, e)]</tt> types, but for now just remembering that a kind of event can occur multiple times with possibly different values is good enough.

Events have values and we can use that to chose to do something only for events with some value. So not only can we determine which streams of events we'll do something with when defining an event box, we can also determine for what values of events we'll do something.

For example if we have an event that directly sets our synthesizer frequency we can apply a filter that only allows events with frequencies that are pleasant to the human ear.

== Some reactive-banana syntax ==

Expressing event handling with the pseudo-code I've used before is tricky and gets near impossible soon. So it's a good thing that once you've understood or at least got a basic idea of the concepts of event streams and event boxes the syntax of reactive-banana starts to make sense. In this section I'll explain the most fundamental functions and operators.

If you're reading the [http://hackage.haskell.org/package/reactive-banana-0.5.0.0 reactive-banana 0.5 haddocks] there are a few things to keep in mind. The first is that what I've called an event box in the previous section is called a Behaviour in reactive-banana. To avoid confusion I'll stop using the term event box from here on.

In the reactive-banana haddocks you'll find a lot of references to time-varying functions and lists involving time variables. Just ignore those, they're important but we'll get to them later. As a general rule just ignore what you don't understand.

You'll also notice a <hask>t</hask> parameter on the <hask>Event</hask> and <hask>Behavior</hask> types. It's basically similar to the <hask>s</hask> parameter for <hask>STRef</hask>, it's a trick to use the type system to prevent constructs that would result in undefined or incorrect behavior. Just ignore it.

For understanding the next sections you'll need to know about a basic subset of reactive-banana which I'll explain here. First up: event streams.

=== Events ===

Event streams are represented by the type Event in reactive-banana. The type <hask>Event t Int</hask> means a stream of events carrying Int values.

There are three basic things you can do with just event streams. You can transform the events in them, you can filter in events in them and you can combine the event streams.

Transforming an event stream means changing the values carried by the events in them. As this is ''Functional'' Reactive Programming the streams themselves are not changed. When you transform a stream you create a new stream. Whenever an event in the old stream is fired an event in the new stream is also fired, but with a different value.

Transforming an event stream is done primarily by good old fmap. The expression <hask>show `fmap` eInt</hask> (or with the (<hask><$></hask>) operator <hask>show <$> eInts</hask>) with ''eInt'' having the type <hask>Event t Int</hask> creates a new event stream of the type <hask>Event String</hask> with the int in every event in the original stream being a string in the new stream.

To replace the value of an event (if the event doesn't carry a useful value) just use (<hask><$</hask>): <hask>"MOO!" <$ eWhatever</hask> causes every value in the stream eWhatever to be replaced by MOO!. Like (<hask><$></hask>) this is an operator from Control.Applicative.

Filtering is done using the <hask>filterE</hask> function. When you filter an event stream you create a new event stream with the same associated values but which doesn't contain all the events from the original stream. To only deal with events with non-negative integers you can create a filtered stream using <hask>filterE (>= 0) eInt</hask>.

Combining event streams creates a new event stream with all the events from both streams. So if you combine ''eOne'' and ''eTwo'' into ''eThree'' there will be an event in ''eThree'' for every event in ''eOne'' and for every event in ''eTwo''.

Combining is done with the union function: <hask>eThree = eOne `union` eTwo</hask>. Beware however that when events come in at the same time things can get a little tricky, you'd have to wonder in what order the events are processed. Reactive-banana contains several functions to handle simultaneous events. For the purpose of this page we'll do the easiest thing and ignore simultaneous events. In real world code you would need to think about it.

=== Behaviors ===

To create a behavior (event box) in reactive-banana you'll typically use one of two functions: <hask>stepper</hask> and <hask>accumB</hask>. Both work with an initial value and an event stream. The difference is that when an event occurs <hask>stepper</hask> changes the value of the behavior to the value in the event while <hask>accumB</hask> applies the function in the event to the value of the behavior.

<haskell>eNewVal :: Event t Int
bSet :: Behavior t Int
bSet = stepper 0 eNewVal

eUpdater :: Event t (Int -> Int)
bUpdated :: Behavior t Int
bUpdated = accumB 0 eUpdater</haskell>
The expression <hask>bSet = stepper 0 eNewVal</hask> creates a behavior named ''bSet'' with initially value 0. Once an event from the ''eNewVal'' stream comes in the value of ''bSet'' changes to the value in that event. So if an event comes in with value 2 the value of bSet becomes 2.

On the other hand the expression <hask>bUpdated = accumB 0 eUpdater</hask> makes ''bUpdated'' a behavior with initially the value 0 but which gets updated (modified) whenever an event comes in. If an event comes in with value (+1) (a slice, so <hask>\x -> x + 1</hask>) and the current value of ''bUpdated'' is 1 the new value becomes 2.

That's basically it for behaviors. Well, there's a third way to create behaviors: using <hask>pure</hask>. To create a behavior with the value 1 which doesn't change at all use <hask>pure 1</hask>. In case you didn't know, for applicative functors (which behaviors are) <hask>pure</hask> is what <hask>return</hask> is for monads.

To create a behavior that's depends on old behaviors (<hask>f3 := get(f1) + get(f2)</hask> in our old formula box syntax) we have to use applicative functor functions in reactive-banana. There is unfortunately no option to use monad syntax. To express that the value of ''b3'' is the sum of the value of ''b1'' and the value of ''b2'' we write: <hask>b3 = (+) <$> b1 <*> b2</hask>.

== Example: the worlds worst synthesizer ==

Now for an example. We'd like to create a synthesizer. The synthesizer will use our keyboard for input, which we notice through a stream of events called ''eKey'' with as associated value a Char containing the key that was pressed. Something outside our program (and scope of discussion) samples the behavior ''bNote'' every 100ms and plays the tone currently in there until the next sample time.

To avoid getting caught up in music theory (read: I'm lazy and can't be bothered to look up tone frequencies) the note to play is expressed as an algebraic data type.

<haskell>type Octave = Int
data Pitch = PA | PB | PC | PD | PE | PF | PG
data Note = Note Octave Pitch

-- Type signature for the key event, it comes from outside our
-- system.
eKey :: Event t Char</haskell>
You'll notice the octave. To change the octave we'll use the '-' and '+' keys. To set the pitch we'll use the 'a'..'g' keys on the keyboard. Never mind that it's really annoying to play with those keys as they're scattered all over the keyboard, this is about the FRP logic not practicality.

Those chars in the ''eKey'' event stream need to be translated to pitches. Here's one way to do that.

<haskell>ePitch :: Event t Pitch
ePitch =  (PA <$ filterE (=='a') eKey) `union`
          (PB <$ filterE (=='b') eKey) `union`
          ... 
          (PG <$ filterE (=='g') eKey)</haskell>
The &ldquo;trouble&rdquo; here is that we're filtering the stream multiple times, not very efficient. Here's a better way.

<haskell>table = [('a', PA), ('b', PB), ..., ('g', PG)]
ePitch = filterJust $ (\e -> lookup e table) <$> eKey</haskell>
The <hask>filterJust</hask> function is a simple helper in reactive-banana. It filters out <hask>Nothing</hask> events and returns the value inside the <hask>Just</hask> constructor for <hask>Just</hask> events. To get ''ePitch'' we first look up the characters in the translation table and then remove all events who's chars aren't in the table, removing the <hask>Just</hask> wrapper from events who's chars are in the table at the same time.

The ''bNote'' behavior will not use these events directly, instead ''bOctave'' and ''bPitch'' will each store part of the note and ''bNote'' will combine the information.

<haskell>eOctChange :: Char -> Maybe (Octave -> Octave)
eOctChange c = case c of
                '+' -> Just (+1)
                '-' -> Just (subtract 1)
                _   -> Nothing

bOctave :: Behavior t Octave
bOctave = accumB 0 $ filterJust (eOctChange <$> eKey)

bPitch :: Behavior t Pitch
bPitch = stepper PC ePitch

bNote :: Behavior t Note
bNote = Note <$> bOctave <*> bPitch</haskell>
If you understand what's going on here you should have a basic idea of what FRP is in practice. There are of course considerations in the real world that we've skipped over here, such as how to get the keyboard event and how to play the sounds. To get a better idea of what FRP in the real world looks take a look at the [http://www.haskell.org/haskellwiki/Reactive-banana/Examples reactive-banana examples], they should be easy to follow.

When following those examples you'll come across the (<hask><@</hask>) and (<hask><@></hask>) operators. I'll give a short introduction here to make it easier to understand the examples. The (<hask><@</hask>) operator is used like this: <hask>e2 = b1 <@ e1</hask>, if an event in stream ''e1'' comes in the value of that event is replaced in the ''e2'' stream by whatever value is in ''b1'' at the time. The (<hask><@></hask>) operator is used in much the same way, but it doesn't replace the value from ''e1'' outright but uses it to compute a new value.

<haskell>bOne       :: Behavior t Int
bOne       = pure 1

bPlusOne   :: Behavior t (Int -> Int)
bPlusOne   = pure (+1)

eAlwaysOne, ePlusOne :: Event t Int
eAlwaysOne = bOne <@ eWhatever
ePlusOne   = bPlusOne <@> eInt</haskell>

== Time-varying values and functions ==

If you've read about FRP before you're likely to have come across the term &ldquo;time-varying function&rdquo;. This sounds difficult, but once you understand the basics of behaviors and events it's really no big deal.

Here's the clue: a behavior contains a value, but the value can change. Therefore at different points in time a behavior can have different values. So we could say that a behavior has a value that varies in time.

We could also throw away the concept of boxes and say a behavior ''is'' a value that varies in time. This is more correct, those boxes are helpful as teaching concepts but once we talk directly about time they are no longer needed.

So, a time-varying value is simply a behavior as behaviors can have different values at different points in time. A time-varying function is also just a behavior, one where the value is a function (functional programming 101: the clue to every riddle is that functions are values).

To go further down the rabbit hole a time-varying value can actually be thought of as a function by making time explicit. If a behavior has value 1 up to the 30th's second and from that point forward value 2 we could express the behavior as: <hask>\t -> if t < 30 then 1 else 2</hask>. This is important: by making time explicit we can reason about behaviors as if they were pure functions. While in practice we're dealing with applicative functors (or in other libraries monads or arrows) we can think of behaviors as pure functions.

Real world behaviors aren't as simple as from 30 seconds onwards change to value 2. They interact with events. So to express such behaviors as pure functions events need to be expressed in a way that works for pure functions. This is where the <hask>[(t,e)]</hask> type comes in. We can see events as a list of values at certain points in time, for example <hask>[(10, 1), (20, 2), (30, 3)]</hask> for events that occur on second 10, 20 and 30 with values 1, 2 and 3 respectively.

When viewing events in such a way it becomes easy to create a behavior that changes to whatever value was last:

<haskell>type Time = Int
stepped :: [(Time, Int)] -> Time -> Int
stepped es t = case takeWhile (\(t', _) -> t' < t) es of 
                    [] -> 0 
                    xs -> snd (last xs)</haskell>
For once this is actually runnable code. If we invoke it as <hask>stepped [(10,1),(20,1),(30,1)] 2</hask> the result is 0, if we invoke it as <hask>stepped [(10,1),(20,1),(30,1)] 12</hask> the result is 1, as expected.

Stepped sounds a lot like stepper and we can create that function by making a few small adjustments.

<haskell>type Time = Int
stepper :: a -> [(Time, a)] -> (Time -> a)
stepper d es = \t -> case takeWhile (\(t', _) -> t' < t) es of
                        [] -> d
                        xs -> snd (last xs)</haskell>
If you understand this bit, why behaviors and events can be expressed by making time explicit you have a good intuition of what FRP is.

== Making the example runnable ==

After I wrote this page I got questions about how to actually run the reactive-banana examples. Here's a big block of code that can be pasted into a file and run:

<haskell>module Main where

import Data.Char (toUpper)
import Control.Monad (forever)
import System.IO (BufferMode(..), hSetEcho, hSetBuffering, stdin)
import Reactive.Banana
import Reactive.Banana.Frameworks.AddHandler
import Reactive.Banana.Frameworks

type Octave = Int

data Pitch = PA | PB | PC | PD | PE | PF | PG
    deriving (Eq, Enum)

-- Mapping between pitch and the char responsible for it.
pitchChars :: [(Pitch, Char)]
pitchChars = [(p, toEnum $ fromEnum 'a' + fromEnum p) |
              p <- [PA .. PG]]

-- Reverse of pitchChars
charPitches :: [(Char, Pitch)]
charPitches = [(b, a) | (a, b) <- pitchChars]

data Note = Note Octave Pitch

instance Show Pitch where
    show p = case lookup p pitchChars of
        Nothing -> error "cannot happen"
        Just c  -> [toUpper c]

instance Show Note where
    show (Note o p) = show p ++ show o

-- Filter and transform events at the same time.
filterMapJust :: (a -> Maybe b) -> Event t a -> Event t b
filterMapJust f = filterJust . fmap f

-- Change the original octave by adding a number of octaves, taking
-- care to limit the resulting octave to the 0..10 range.
changeOctave :: Int -> Octave -> Octave
changeOctave d = max 0 . min 10 . (d+)

-- Get the octave change for the '+' and '-' chars.
getOctaveChange :: Char -> Maybe Int
getOctaveChange c = case c of
    '+' -> Just 1
    '-' -> Just (-1)
    _ -> Nothing

makeNetworkDescription :: Frameworks t
                       => AddHandler Char
                       -> Moment t ()
makeNetworkDescription addKeyEvent = do
    eKey <- fromAddHandler addKeyEvent
    let
        eOctaveChange = filterMapJust getOctaveChange eKey
        bOctave = accumB 3 (changeOctave <$> eOctaveChange)
        ePitch = filterMapJust (`lookup` charPitches) eKey
        bPitch = stepper PC ePitch
        bNote = Note <$> bOctave <*> bPitch
    eNoteChanged <- changes bNote
    reactimate' $ fmap (\n -> putStrLn ("Now playing " ++ show n))
               <$> eNoteChanged

main :: IO ()
main = do
    (addKeyEvent, fireKey) <- newAddHandler
    network <- compile (makeNetworkDescription addKeyEvent)
    actuate network
    hSetEcho stdin False
    hSetBuffering stdin NoBuffering
    forever (getChar >>= fireKey)</haskell>
If you compare this to the previous example you'll notice some changes in the events and behaviors. This version is more real-world, there are bounds checks and some abstraction (<hask>filterMapJust</hask>).

The parts answering the question &ldquo;how to run it?&rdquo; are all in <hask>makeNetworkDescription</hask> and <hask>main</hask>. In reactive-banana you first create a description of an event network, then compile that network, enable it and call your normal Haskell event loop. At least, that's the case when you don't use a GUI framework with reactive-banana integration, if you use the wx integration for reactive-banana the event loop is already written for you and some other details are different. See the [http://www.haskell.org/haskellwiki/Reactive-banana/Examples examples].

All the events and behaviors live in what reactive-banana calls an event network. It's not possible to use behaviors outside this network, you can't for example see inside a behavior from IO code. You can use events though and that's how you couple the FRP stuff inside the event network to the outside world.

To create an event that you can fire from outside the event network use <hask>newAddHandler</hask> in the IO monad. It gives you two things, an <hask>AddHandler</hask> value and an IO action that takes a value and fires an event with that value. By passing the <hask>AddHandler</hask> value to <hask>fromAddHandler</hask> (inside the <hask>NetworkDescription</hask> monad) you'll get an event stream which you can use in a normal fashion.

To handle output events use <hask>reactimate</hask>, pass it an event stream containing IO actions and whenever an event from that stream occurs the action is executed. You'll pretty much always want to use <hask>reactimate</hask> with (<hask><$></hask>)/<hask>fmap</hask> to generate those IO actions.

Once the network description is complete you can compile it. This gives you back an <hask>EventNetwork</hask> value. You can start the <hask>EventNetwork</hask> with <hask>actuate</hask>. This sets things up so that events can actually be received.

In our roll-your-own program we'll use <hask>getChar</hask> (after turning off echo and buffering on the standard input stream) to receive characters. When a character is received the ''bNote'' is updated and a message is printed with the new value (actually playing a tone appears to involve more code than I'd like to include here).

Wait? Didn't I say we can't actually observe the value of a behavior? So how do we know which note to play? Turns out reactive-banana has a nice little function called <hask>changes</hask>. When used on a behavior it returns an event stream which contains the new values whenever the behavior is updated. This event stream is passed to <hask>reactimate</hask> to trigger the prints.

== A broader view of FRP ==

FRP is a field which is currently in active development, many different approach are being tried and no real standard has been found yet. The [http://hackage.haskell.org/packages/archive/pkg-list.html#cat:frp FRP category on hackage] has a lot of different packages with varying approaches to implementing FRP. Some focus on applicative functors, some on monads and others on arrows.

Semantics can be subtly or not-so-sublty different between FRP libraries and sometimes naming is different as well (for example signal instead of event).

In this page I've tried to explain FRP using one specific library (reactive-banana). While this makes things simpler for getting an idea of FRP it can give some wrong impressions due to conflating the limitations of reactive-banana and that of FRP in general.

[[Category:FRP]] [[Category:Tutorials]]