# Grok all the things

grok (v): to understand (something) intuitively.

# Functional Reactive Programming

🙇‍♀️  Students & Apprentices

Greetings, curious minds! Are you ready for a journey to a land where data flows like streams, code is crisp and clean, and side effects are but a distant memory? Of course you are! I'm talking about Functional Reactive Programming (FRP), one of the most fantastic and mind-bending approaches to programming. Yep, today we'll dive into the world of FRP through colorful examples, intriguing facts, and just enough magic to keep things interesting.

## A Brief History of FRP 📚🕰️

First, let us pay homage to the wizards who brought FRP into existence. The story of FRP begins in the late 1990s, when Conal Elliott and Paul Hudak introduced the concept in their paper "Functional Reactive Animation." FRP was initially conceived as a way to simplify animation programming by defining a time-varying value called a "Behavior," which is key to understanding FRP. But don't worry, we'll get to that in just a moment!

## The Essence of FRP: Behaviors and Events 🎭⚡

Picture this: Data flowing through your program like a river, where you can pluck out what you need, transform it, and send it downstream without any hiccups. That's what FRP is all about! Let me introduce you to two mind-bending concepts that make this possible: Behaviors and Events.

### Behaviors 🎭

Behaviors are time-varying values that always have a current value, like the position of a game character or the text entered in a search box. The exciting part is that Behaviors change over time, and FRP makes it easy to model these changes.

Here's an example in Haskell using the Reactive Banana library:

``````import Reactive.Banana

positionX :: Behavior t Double
positionX = fmap (\t -> cos t) time
``````

This code models the `positionX` of an object moving in a circle over time, using `cos` to calculate its x-coordinate.

### Events ⚡

Unlike Behaviors, Events aren't continuous – they occur at discrete points in time. Events can represent user input (like clicking a button), messages from a server, or any other kind of sudden occurrence.

Check out this example, again using Haskell and the Reactive Banana library:

``````import Reactive.Banana

clicks :: Event t ()
clicks = ... -- Here we would define the source of clicks.
``````

In this case, `clicks` represents an event that occurs whenever the user clicks a button.

## Building Blocks: Combinators! 🔧🧱

In FRP, you can use combinators to create new Behaviors and Events by mixing, matching, transforming, and chaining them together. It's like playing with LEGO bricks!

Here are some tantalizing examples:

### Filtering events ⚙️

``````rareClicks :: Event t ()
rareClicks = filterE (\_ -> randomRIO (0, 1) > 0.9) clicks
``````

By using `filterE`, we create a new event, `rareClicks`, which only triggers when the random value generated is greater than 0.9. So, it filters out most ordinary clicks!

### Accumulating state 📦

``````counter :: Behavior t Int
counter = accumB 0 \$ fmap (const (+1)) clicks
``````

`accumB` lets us create a Behavior that starts at 0 and increments by 1 each time a `click` event occurs. The Behavior, `counter`, will represent the number of clicks over time.

## Mixing It Up: FRP in Modern Programming 🎨🔀

Nowadays, FRP has evolved and spread its tendrils throughout the programming world! It's being used in various languages and frameworks, inspiring reactive libraries and making programming more magical. A few examples include:

• JavaScript libraries like RxJS and MobX.
• Elm, a delightful functional language that has built-in FRP concepts for web app development.
• Scala.Rx, an FRP library for the Scala language.

Here's an example in JavaScript using RxJS:

``````import { fromEvent } from "rxjs";
import { map, filter } from "rxjs/operators";

const button = document.querySelector("#myButton");
const buttonClicks = fromEvent(button, "click");

const rareClicks = buttonClicks.pipe(
filter(() => Math.random() > 0.9)
);

rareClicks.subscribe(() => console.log("Rare click detected! 🦄"));
``````

This code defines an event stream, `buttonClicks`, which listens to clicks on a button. It then filters the stream to create `rareClicks`, which only trigger when `Math.random() > 0.9`. Finally, we subscribe to `rareClicks` and log a message when a rare click is detected.

## Why FRP is Magical ✨🌟

FRP lets us describe complex, time-varying computations using elegant and simple code that focuses on the essence of the problem. By employing Behaviors and Events, we can separate concerns, reduce side effects, and illuminate our programs with the dazzling beauty of FRP!

To sum up, I hope this journey into the world of Functional Reactive Programming has enchanted you with a taste of its power, elegance, and potential. May your future programs flow like rivers, and your code be filled with the magic of FRP!

Grok.foo is a collection of articles on a variety of technology and programming articles assembled by James Padolsey. Enjoy! And please share! And if you feel like you can donate here so I can create more free content for you.