Hacker News new | past | comments | ask | show | jobs | submit login

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/




This is where "event switching" comes in. Unfortunately, I have not used Elm or FlapJax, so I am not sure if the terminology is the same there.

Traditional FRP has two main concepts: behaviors, which are values that can change continually, and stream of events. Scanning over this blog post, these ideas correspond roughly to Properties and EventStreams respectively in Bacon.js.

Event switching is just having an event stream that itself contains behaviors. There's a great blog post[1] about this using Reactive Banana and Haskell.

[1]: http://apfelmus.nfshost.com/blog/2012/09/03-frp-dynamic-even...

Most of the post is fairly Haskell-specific, talking about the type system, but the basic idea should be applicable here as well.

The running example is a bar tab. You want to be able to create new entries in the tab, which are just text entries that give you a price. So you would create something like

    entries :: Event [Behavior Price]
That is, you have a stream of events that contains behaviors corresponding to each text entry widget you've added. This makes calculating things like the sum of all the widgets relatively easy.

I'm not sure how other libraries support this dynamic event switching though. My understanding is that it is somewhat tricky to implement efficiently.


FWIW, Bacon.js implements switching with flatMap and flatMapLatest

Helpful diagrams: https://github.com/raimohanska/bacon.js/wiki


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...


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.


Thanks! That one file is really instructive.


We're pragmatic about FRP and also rely heavily on Backbone. For some cases, the MVC approach seems better, for others Bacon is a better fit.

In Flowdock, there is a form that automatically validates parts of the data in JS while needs to confirm other parts with server. During server-side validation, a loading indicator is shown and success enables the submit button. Using Bacon, it has been easier to focus on the logic instead of handling state. But the logic is quickly quite hairy, indeed.

Japsu pointed out that there is a TodoMVC implementation with Bacon and Backbone, but it'd certainly be interesting to see/do a pure-FRP implementation.


I'm interested to see if using FRP principles in conjunction with Backbone makes sense. I love Backbone, but I feel like there are times I'm worrying too much about the DOM because I don't feel like abstracting out yet another subset of data into a model. If it was as quick and simple as calling a few functions (binding callbacks to existing view functions), then I feel like it would really clean up my code.


Our functional reactive web framework is specific for the R language but supports what you're describing (if I understand you correctly).

http://rstudio.github.com/shiny/tutorial/#dynamic-ui (scroll down to reactiveUI)

An example: http://glimmer.rstudio.com/winston/dynamic_ui/ https://gist.github.com/4211337




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: