

Functional Reactive Programming with Bacon.js - trevoro
http://blog.flowdock.com/2013/01/22/functional-reactive-programming-with-bacon-js/

======
asolove
I am not an FRP expert but I've played around with both Elm [1] and Flapjax
[2]. With both libraries, I ran into a basic mismatch with what I wanted to
do. They both make it very easy to have static controls create dynamic
behavior. You create the controls, observe them, and then combine their
signals to output whatever dynamic output the program has.

But most interesting web UIs are not static->dynamic; they instead involve
dynamic and circular dependencies. Pressing the "add new todo" control doesn't
just dynamically affect the display, it also creates new controls that need to
get added into the set of observable things that affect the display. This
idea, of modifying existing observables to include new observables, is
somewhat problematic. In examples I've seen, it ends up leading back to code
just as unfortunate as imperative callbacks.

If you can use Bacon to create an entry for TodoMVC [3] showing how to have
dynamic->dynamic dependencies, I'll be sold.

[1] <http://elm-lang.org/>

[2] <http://www.flapjax-lang.org/>

[3] <http://addyosmani.github.com/todomvc/>

~~~
japsu
Have a look at pyykkis' implementation of TodoMVC using Bacon.js, Transparency
and Backbone Models. I think he accomplishes just that.

[https://github.com/pyykkis/todomvc/blob/bacon-
transparency-r...](https://github.com/pyykkis/todomvc/blob/bacon-transparency-
require/labs/dependency-examples/bacon_transparency_require/src/app.coffee)

~~~
RoboTeddy
It looks like events from newly added controls are captured here using
asEventStream with jquery's event delegation.

More about event delegation here: <http://api.jquery.com/on/>

$('#container').asEventStream('click', '.someclass')

If an element with someclass is ever added as a child of #container, clicks on
it will fire events. This is true even if the someclass element is added after
the asEventStream call.

------
danabramov
TL;DR: Reactive Programming ≈ Sequence Comprehensions + Futures.

This looks pretty similar to a .NET library called Rx (Reactive Extensions).
We're using it in a MonoTouch iOS app and I found it to solve some problems in
a very convenient way. If you used functional style in your code, you know it
shines in mapping/filtering/aggregating/reducing sequences of data. In .NET
LINQ sequences have type of IEnumerable. You can think of Rx's IObservable as
of IEnumerable's odd twin brother. The main difference is you IEnumerable is
“cold” by its nature: it produces new items when you ask for them by calling
MoveNext(). It doesn't do anything by its own. It's also synchronous.

IObservables, however, can both be cold and hot, i.e. they can yield items
without being asked to. It's like IEnumerable but with “don't call me—I'll
call you” approach. Because of this, it doesn't have to be synchronous. Long
processes that emit one item at a time, which may later be transformed,
processed in batches, throttled, etc, benefit from being expressed via
IObservable. The benefit I found is you can easily switch between different
asynchronous data source implementations.

For example, it's trivial to write an IObservable wrapper around iOS Photo
Library that will yield one item at a time. Then you can write a function that
compares cached items in array with new items that arrive from photo library,
and return IObservable of “differences” between cached and new data. Then you
group those differences using built-in methods into batches—and feed them to
UICollectionView so it can _animate the updates as the application receives
them from system API_.

Then you just write another IObservable implementation for getting photos from
Facebook, and wrap it in a function that will pre-fetch their thumbnails
before yielding them. It is also an IObservable. You already implemented
updating collection view, so you just plug in your new asynchronous data
source and that's it.

Need to implement a Dropbox file picker? You already implemented collection
view logic, diff logic and prefetching images, so you just need to wrap
Dropbox folder fetch API in an IObservable, and merge IObservable-s from
nested folders.

On top of that, you can add some caching, and magically it will work for any
data source.

~~~
RoboTeddy
Yep! It's super similar because Bacon.js is a descendant:

\- Microsoft creates Rx (Erik Meijer, one of the haskell developers)

\- Microsoft releases RxJS, a js implementation of Rx

\- Juha Paananen gets fed up with some RxJs wtfs
([http://nullzzz.blogspot.com/2012/01/things-you-should-
know-a...](http://nullzzz.blogspot.com/2012/01/things-you-should-know-about-
rx.html)) and makes Bacon.js

~~~
danabramov
I did not know that! Thanks for sharing this.

------
stu_k
Anyone who's interested in this should also take a look at Functional Reactive
Bindings: <http://documentup.com/montagejs/frb/>

Boasts of realtime, 2-way bindings between any JS object.

~~~
nullzzz
That's interesting! Do you have an idea how they implemented bindings between
arbitrary JS objects? Polling?

~~~
stu_k
It uses ES5 getters and setters to replace the property and react to changes.
This is what makes it realtime, after the set all bound properties will have
their new values.

------
msutherl
It really disappoints me when good projects are given names that trigger bad
mental associations.

Sure, everybody loves bacon – except vegans, vegetarians, Jews, and other
swine-shunning cultures – but I really don't want to be thinking about bacon
when I'm programming. Nor do I want to evoke the smell, taste, and
unhealthiness of bacon, nor the dirtiness of pigs, in the minds of people I
talk to about Bacon.

Largely for this reason I will probably not try, use, or try to get my friends
to use Bacon. Please consider changing the name, perhaps to something that
evokes the conceptual spirit of the project, because I'd like to see more
people adopting FRP techniques.

~~~
dribnet
Sad to see you downvoted. Apparently responsible naming is a valid HN topic
only when the library has titillating name with gender bias like upskirt [1]
or pantyshot [2].

Maybe a better name would be pigfucker.js so as to more equitably offend
everyone. But that's probably not necessary since I bet bacon.js was named
after Francis Bacon anyway - right nullzzz? :-)

[1] <http://news.ycombinator.com/item?id=2729320>

[2] <http://news.ycombinator.com/item?id=2748669>

~~~
nullzzz
Choosing a name is hard if you consider coolness, pronounceableness,
googleableness, politically-correctness and so on. Also at the time I was
choosing a name for a hobby project, not an Enterprise Framework. Feel free to
make a veggie fork :)

------
robertfw
Does anyone know of anything similar to this in python? I did a quick look
around but came up empty

~~~
davvid
Trellis comes to mind. There's also Twisted if you're interested in event-
driven programming.

------
batgaijin
I think this is related but not sure:
<http://www.cs.umd.edu/projects/PL/arrowlets/>

------
frankus
It strikes me that this would lend itself well to a graphical programming
interface (a la Quartz Composer).

------
ilaksh
Have you guys seen LiveScript?

~~~
maxcan
I have and I love it although it's fairly orthogonal to bacon.js. The problem
with livescript is that although its absolutely beautiful to a haskeller like
me, almost no one uses it so the tooling is weak and building a big project in
it is a massive risk.

