Mind Bending JavaScript

Tonight I discovered Flapjax - which is functional reactive programming brought to your web browser.

I've dabbled with FRP before with FrTime, but because the examples seemed more desktop application oriented, I didn't think I'd actually get a chance to use it. But, with Flapjax, you can have the features of FRP right in the comfort of your own browser. Now this could get useful.

OK, so what the heck is FRP? It's probably best shown with an example:

<p>
The time is {! timer_b(100) !}.
</p>

You should be thinking, oh that's nothing special. That's simply invoking the function timer_b, whatever that is. And you would be right. Except, here's the cool thing, as the time changes, the screen automagically updates. In other words, you write code as though you were dealing with a frozen time, yet the system continues to update as time passes. I know, it's funky stuff. Try out the running code to see what I mean.

This gets really impressive when you see how they mixed in code with CSS:

<div id="themouse"
  style={! {color: '#FFFFFF', 
            backgroundColor: '#000000',
            position: 'absolute',
            left: mouseLeft_b(document),
            top: mouseTop_b(document),
            padding: '10px'} !}>
the mouse
</div>

Most of the above example is basic HTML. But, check out the values of top and left. They are based on the value of mouseLeft_b and mouseTop_b.

As you move the mouse around, these values automatically update and the position of the HTML block changes. As I said, impressive stuff. Check out the running demo here.

And what does this all have to with JavaScript? As you can guess, Flapjax is actually implemented in terms of JavaScript and can even be written completely in JavaScript.

The thing that boggles my mind is just how little code needed to be written to express these relatively complex actions. And anything I can do to write less code is worth investigating.