a simple example of bacon.js

[nagyv]

hi,

To learn bacon.js I've implemented the "wallet war" of http://alfredodinapoli.wordpress.com/2011/12/24/functional-reactive-programming-kick-starter-guide with bacon.js

http://jsfiddle.net/bika/wGDp8/

but there is one thing I don't like, and would find a better way to handle it

walletChange.onValue(function(ev){
    $fatherWallet.val(ev.target.valueAsNumber+10);
})

eventClick.onValue(function(val){
    $sonWallet.val(parseFloat($sonWallet.val())+val);
    $sonWallet.change()
})

As I trigger walletChange.onValue using $sonWallet.change, the jquery event is passed on, instead of the value of $sonWallet.

I'm not sure whether this can be overcome on the side of jQuery or Bacon, but would like to hear your idea on how to get the value of $sonWallet to be passed into walletChange.onValue.

Otherwise, I'm sending this issue in order to provide a very simple example for bacon.js. Especially having it compared with the corresponding Haskell code, the bacon.js implementation is much easier to grasp (I think).

[al6x]

Would be also nice to see http://addyosmani.github.com/todomvc/ implemented with bacon.js and compare it with backbone.js for example.

[raimohanska]

If you use Properties, you'll get

http://jsfiddle.net/EeJgZ/

I think the main problem with your approach is that you trigger jQuery events instead of composing Streams and Properties.

[raimohanska]

Bacon+Backbone version of TodoMVC exists:

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

[nagyv]

in the meantime I rewrote my fiddle just you did to use properties, thanks

[raimohanska]

Closing. Ok?

[al6x]

Hmm, still don't understand - from that example it looks like it's not a replacement for frameworks like Backbone?

I meant - the main complexity of building applications with backbone - not in micro-management within a view (how to update html or register a listener, it's boring and repetitive but still pretty simple).

The main problem - it's the macro-management - how to wire lots of views together in a simple and robust way (there are lots of problems like synchronizing multiple views, releasing listeners after destroying the view and so on). And it seems that bacon.js not really helps with that problem (i.e. it don't replaces the MVC with something more simple, it just changes a little the way how events from HTML/DOM are delivered to JS handlers).

[nagyv]

I was thinking a bit about this Backbone - Bacon connection, and as far as I see it, another MVC could be written using Bacon. In this case your models would be properties of a sort, and handling their current status, connecting events to them might become simpler, but bacon has a totally different approach to programming than usual e.g. Backbone does.

Backbone approaches the problem from the DOM's side and using the tools the DOM provides, like events and event listeners. On the other hand Bacon is totally independent of the DOM as it provides eventSources (that can be attached to the DOM) and Properties (like a model, totally unrelated from anything on a page).

These are fundamentally different approaches to programming, and you can't simply write a bacon-style implentation that uses backbone, but you would need to rewrite at least parts of backbone itself. (At least its event handling mechanism.)

[al6x]

but bacon has a totally different approach to programming than usual e.g. Backbone

Yes, I also was thinking so by reading its documentation but get confused after examining the TodoMVC (when bacon works with backbone).

I originally expected that TodoMVC would be implemented somehow different, without the backbone.js.

[raimohanska]

Alexei, you're right. It's not a replacement for frameworks. It's a tool. Think of it as the underscore.js for events.

On the other hand, you can use FRP on a larger scale too, to help you in wiring your components together in a loosely coupled way. The way FRP libs like Bacon.js and RxJs help you on the larger scale is a topic that's not covered in any documentation I've seen, so there's a lot of uncharted area there.

Personally I'm working on a commercial web application project (for a customer) where we build our UI in MVC fashion, but without a framework. The UI consists of Controllers that take care of a certain portion of the UI, and use jQuery and Handlebars for the views. The Controllers expose EventStreams and Properties that are used to bind the whole thing together. I really feel that FRP is the way to go at least in our case, but I certainly am not making statements on its general suitability as a replacement for $your_framework. I readily admit that my experience in FRP and frontend development in general is quite limited at the time.

Regarding TodoMVC, I (or you) should take a stab at implementing it with just jQuery and Bacon.js to see how it works.

[al6x]

Understood now, thanks for explanation.

P.S. Also working on commercial web app, we are using backbone.js. I personally feel that maybe it's not the most compact way to built a web app - but it's very simple and easy to tune - it gives You freedom to bend it as You wish and safety - if something goes wrong I can at any moment rewrite practically any part of it and fix it or tune as we need.

Still the development speed is slower than I'd like it to be, so I'm hoping that there are better and easier ways to go and keeping a look on alternative approaches :)

[RoboTeddy]

It might be helpful to have templates that automatically recompute whenever
the Bacon properties they depend on change.

Spark, the live page update engine from Meteor, can actually stand alone (
https://github.com/meteor/meteor/wiki/Spark). It's smart -- for example, it
can avoid clobbering text entered in input elements even as the surrounding
document updates.

I have an experimental function that takes a template fn and a hash of
bacon observables, and returns a live-updating Spark document fragment. If
anyone is interested, I can try to clean it up and post about it. Or
perhaps I should try to implement TodoMVC with it!

Ted

On Sat, Jan 26, 2013 at 1:47 PM, Juha Paananen notifications@github.comwrote:

Alexei, you're right. It's not a replacement for frameworks. It's a tool.
Think of it as the underscore.js for events.

On the other hand, you can use FRP on a larger scale too, to help you in
wiring your components together in a loosely coupled way. The way FRP libs
like Bacon.js and RxJs help you on the larger scale is a topic that's not
covered in any documentation I've seen, so there's a lot of uncharted area
there.

Personally I'm working on a commercial project where we build our UI in
MVC fashion, but without a framework. The UI consists of Controllers that
take care of a certain portion of the UI, and use jQuery and Handlebars for
the views. The Controllers expose EventStreams and Properties that are used
to bind the whole thing together. I really feel that FRP is the way to go
at least in our case, but I certainly am not making statements on its
general suitability as a replacement for $your_framework. I readily admit
that my experience in FRP and frontend development in general is quite
limited at the time.

Regarding TodoMVC, I (or you) should take a stab at implementing it with
just jQuery and Bacon.js to see how it works.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/51#issuecomment-12742939.

[raimohanska]

This Issue has turned into a chat room:) And I'm fine with that!

Ted, that's quite interesting! I've been thinking about how cool it would be to be able to have "live templates" that would update when Properties change. So, put it on GitHub, polish it a bit, write some docs or a blog posting, make a live demo. Thumbs up!

[nagyv]

+1

[bjartwolf]

Sorry to just stepping into a discussion without having properly read the thread and being part of the dev of this or anything... But from what I can see, it seems you are much closer to writing a MVVM-type framework than backbone. There are a few out there, I've used http://knockoutjs.com/ quite a lot. That is a pub-sub style UI framework that is used quite heavily, also by Microsoft. There are versions that rely on Rx too, but I've only seen them for .NET ( http://www.reactiveui.net/)

In my experience, a few things on the top of my head that are important are: Easy of binding to DOM elements (like knockout's data-bind) and throttling of events (knockout can do this), otherwise anything but a trivial application will easily cause the UI to be overloaded.

Anyway, just wanted to throw the links in here in case. I think it would be very cool to see how something built on bacon would work! Curious to see how this plays out!

[thenikso]

Ok so I was working on a Backbone.js replacement made from scratch and based on Bacon.
I wanted to arrive at a point where it would be useful before pushing it on GitHub; but given that there seems to be people interested, have a look and let me know that you think!

Eggs.js

Keep in mind that it's really in an early stage.

[RoboTeddy]

Experimental live templates with Bacon and Spark: https://github.com/RoboTeddy/rendactive.js

Demo: http://roboteddy.github.com/rendactive.js/example.html
Demo source: https://github.com/RoboTeddy/rendactive.js/blob/master/src/example.coffee

I am definitely enjoying this chat room, but maybe Bacon needs a mailing list :D