HTML5 Zone is brought to you in partnership with:

I am an experienced software enthusiast with over 10 years of experience in software industry. My experience includes successful team leadership combined with understanding complex business domains and delivering them into practice. I have been building enterprise architectures, designing software and programming. I’m fan of pair programming and study new technologies constantly. Learning new stuff is part of my nature. Although I spend part of my time among software design and architectures, I love hunting hard to find bugs. Also refactoring just makes me happy! Jari is a DZone MVB and is not an employee of DZone and has posted 3 posts at DZone. You can read more from them at their website. View Full User Profile

Bacon.js for Functional Reactive Programming

05.07.2013
| 4370 views |
  • submit to reddit

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

<html>
<head>
    <title>Bacon.js example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="https://raw.github.com/raimohanska/bacon.js/master/dist/Bacon.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/raimohanska/Bacon.UI.js/master/Bacon.UI.js"></script>
    <script type="text/javascript">
        function nonEmpty(s) { return s.length > 0 }
        $(function(){
            var nameEntered = Bacon.UI.textFieldValue($("#name input")).map(nonEmpty);
            var ageEntered = Bacon.UI.textFieldValue($("#age input")).map(nonEmpty);
            var buttonEnabled = nameEntered.and(ageEntered);
            buttonEnabled.not().assign($("#submitButton button"), "attr", "disabled");
        })
    </script>
</head>
<body>
    <span id="yourname"></span>
    <div id="name">
        <input type="text">
    </div>
    <div id="age">
        <input type="text">
    </div>
    <div id="submitButton"><button>Submit</button></div>
</body>
</html>

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 and Bacon.UI.js. Bacon.UI.js is a helper library that uses Bacon.js. It’s just nice and handy cellofan to keep all easy for programmer.

After that we define one method: nonEmpty. No need to explain more.

Bacon.js takes two input field values with Bacon.UI.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 attrmethod with parameter disabled. There’s alsonot, 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.

Summary

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

Published at DZone with permission of Jari Timonen, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)