Tag Archives: bacon.js

Bacon.js – Bus

Bacon.jsBacon.js bus is an excellent way to publish and subscribe to event streams through one unified channel. Bus helps a developer to decouple application and makes code much cleaner.

Bacon.js Bus example

This example outputs status of each validator to html page. It shows simple example of publish/subscribe with Bacon.js.

First we need some scripts – JQuery, Bacon.js and Bacon.model.js and Bacon.query.js

This the actual Javascript code. I’m going to walk you through it.

First we define keys that are used to indicate what value is moving in the Bus. Publisher adds a key to message and subscriber listens using the key.

We’re initializing new Bacon.Bus() which is used as Bus. Were defining new dynamic property ofType for bus. The property is used to filter correct messages to who ever is listening.

Then we create form validators. Beginning is the same than in previous Bacon.js post. After that we publish name, age and button event stream values to the bus. A Message is delivered constantly while user is interacting.

After that we subscribe to name and age by using our keys NAME_MESSAGE and AGE_MESSAGE. They’re handed over as a parameter to our dynamic property ofType. We also use merge which allows a user to combine two streams into one. Then we just assing value to markup.

Final step is to subscribe to button validation which tells us if whole form is valid or not. This is also written to out the markup.

Here is static HTML that we’re using in this Bacon.js example.

Bacon Bus is very easy publish/subscribe mechanism. It can be used from full blown application bus to simple form messaging.

Bacon.js for Functional Reactive Programming

Bacon.jsBacon.js is FRP / Functional Reactive Programming library for JavaScript. Bacon.js solves bizarreness of RX-JS hot and cold Observables.  FRP introduces cleaner way of creating event streams from different sources combining them with means of Functional Programming.

Solving real world problems

I’m fairly new to Function Programming paradigm. I have been coding with Erlang, Haskel and Scala mostly in my spare time. Let me get this straight. I don’t like when people want to use FP because of mathematical theory. I also hate when people wan’t to code something because language is elegant or beautiful.

They’re not real world problems nor they solve any.

I think I’ve finally found a library that solves a real world problem with means of Functional Programming.  It’s Bacon.js. FRP is a paradigm that solves a problem with dependencies between different components and their communication. This is my way of looking at it. I’m not a big fan of handling DOM elements and their interaction with native JavaScript. I kind of hate it.

Let me give you a simple example of Bacon.js and what it solves:

In this example there are two input fields. Both needs to have value in order button to be enabled. Simple and very common thing to do.

Walkthrough of the JavaScript code

First we include libraries. JQuery, Bacon.js, Bacon.model.js and Bacon.jquery.js  Latter two are nice and handy cellophane to keep all easy for programmer.

After that we define two methods. First is simple and, second is nonEmpty. No need to explain more.

Bacon.js takes two input field values with  Bacon.$.textFieldValue helper funtion.

After that, map-function is given nonEmpty function which is evaluated. True/false values streamed to nameEntered and ageEntered variables.

After that and function is used to make sure that both fields are entered, hence true.

After that we bind model to some visible action – Enablig and disabling a button.  ButtonEnabled value is assigned to attr method with parameter disabled. There’s also not, because when both fields are true, we need to enable button (disabled = false).

I’m not going to go deeper details on Bacon.js because author of this library, Juha Paananen aka Raimo Hanska, has excellent blog posts and examples.


Maybe this is the turning point that my head goes more towards FP and see what other problems I can solve with it. Mathematical?

Bacon.js just rewired a part of my brain. And it feels gooood.

ps. Some of the texts are quotes from blog of Juha Paananen. Thanks.

pps. If you did not understand a word what I wrote or you wan’t to know more, please visit:
Bacon.js Github
Bacon.js Tutorial Part I : Hacking With jQuery
Bacon.js Tutorial Part II: Get Started
Bacon.js Tutorial Part III : AJAX and Stuff