Статьи

Bacon.js для функционально-реактивного программирования

Июль 7, 2018

Bacon.js — это библиотека FRP / Functional Reactive Programming для JavaScript. Bacon.js решает причудливые RX-JS горячие и холодные наблюдаемые. FRP представляет более чистый способ создания потоков событий из разных источников, комбинируя их со средствами функционального программирования.

Решение проблем реального мира

Я довольно новичок в парадигме функционального программирования. Я программировал с  Erlang , Haskel  и  Scala в  основном в свободное время. Позвольте мне получить это прямо. Мне не нравится, когда люди хотят использовать FP из-за математической теории. Я также ненавижу, когда люди не хотят что-то кодировать, потому что язык элегантен или красив.

Они не являются проблемами реального мира и не решают их.

Я думаю, что я наконец нашел библиотеку, которая решает реальную проблему средствами функционального программирования. Это  Bacon.js . FRP — это парадигма, которая решает проблему с зависимостями между различными компонентами и их связью. Это мой взгляд на это. Я не большой поклонник обработки элементов DOM и их взаимодействия с нативным JavaScript. Я как бы ненавижу это.

Позвольте мне привести простой пример файла Bacon.js и его решения: 

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

В этом примере есть два поля ввода. Оба должны иметь значение в кнопку заказа, чтобы быть включенным. Простая и очень распространенная вещь.

Прохождение кода JavaScript

Сначала мы включаем библиотеки. JQuery, Bacon.js и Bacon.UI.js. Bacon.UI.js — это вспомогательная библиотека, которая использует Bacon.js. Это просто хороший и удобный cellofan, чтобы все было легко для программиста.

После этого мы определяем один метод:  nonEmpty . Не нужно больше объяснять.

Bacon.js принимает два значения поля ввода с  помощью вспомогательной функции Bacon.UI.textFieldValue  .

После этого  карта -функция дается  непустая  функция , которая вычисляется.  Истинные / ложные  значения передаются в  переменные nameEntered  и  ageEntered  .

После этого  и  используется функция, чтобы убедиться, что оба поля введены, следовательно, 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

39
Share: