lemonhall / f.js

Dead simple library for functional and reactive programming in JavaScript

F.js

F.js is a collection of helper methods used for functional and reactive programming in JavaScript. It provides methods for transforming, filtering, reducing and other operations which work on arrays, HTMLCollections, ES6 generators (and almost all other indexables) and streams of events.

Installing

With bower

bower install f.js --save-dev

And include the main script file into your project:

<script src="bower_components/f.js/dist/F.min.js"></script>

With NPM

npm install f-js --save-dev

And require the f-js module into your files:

var Fjs = require("f-js"),
  F = Fjs.F,
  P = Fjs.P;

Manually downloading the zip file

curl "https://codeload.github.com/colin-dumitru/F.js/zip/"`curl https://github.com/colin-dumitru/F.js/releases/latest| grep -o 'href=".*"' | cut -d / -f 8 | tr -d '"'` > F.js.zip
unzip F.js.zip

And include the main script file into your project:

<script src="F.js-0.4.5/dist/F.min.js"></script>

Documentation

• Introduction
• Functional Methods
• Predicates
• Streams

Samples

F.js works with regular Arrays (RUN)

var people = [
  { name: "John", age: 31},
  { name: "Colin", age: 25},
  { name: "Dave", age: 13},
  { name: "Vic", age: 52}
];

var result = F(people)
  .filter(function(person) {
    return person.age < 50;
  })
  .property("name")
  .drop(1)
  .zip(["first", "second"])
  .toArray();

document.write(JSON.stringify(result));

HTML collections (RUN)

var links = document.getElementsByTagName("a"),
    titles = document.getElementsByTagName("h5");

var result = F(links)
  .property("href")
  .dropWhile(function(val) {
    return val.indexOf("http") == -1;
  })
  .zip(
    F(titles)
      .property("innerText")
  )
  .toMap();

document.write(JSON.stringify(result));

And even ES6 generators (RUN)

function *gen() {
  for (var i = 0; i < 10; i++) {
    yield i;
  }
}

var result = F(gen())
  .fold((l, r) => l + r);

document.write(result);

So at it's core, F.js is just another functional library. But the real power comes when you combine reactive programming with streams.

Streams are nothing more than promises which can resolve multiple times. You can either push or consume values from a stream, all done asynchronously. This enables you to write more modular async code, by passing values through streams and not callbacks.

This next example takes a search query from an input element and displays a list of images which match the given query, all done using streams.

Stream example (RUN)

var input = $("#search_query"),
    keyStream = F.eventStream(input, "keydown"),
    wordStream = F.stream(),
    imageStream = F.stream();

F(keyStream)
  .property("keyCode")
  .accumulateUntil(P.equalTo(13)) /* Enter */
  .map(function() {
    return input.val();
  })
  .feedStream(wordStream)
  .pullStream(keyStream);

F(wordStream)
  .each(text =>
        $.ajax({
                url: url + text,
                dataType: 'jsonp',
                jsonp: 'jsonFlickrApi',
                jsonpCallback: 'jsonFlickrApi'
            })
          .then(imageStream.push.bind(imageStream)))
  .pullStream(wordStream);

F(imageStream)
  .each(reset)
  .property("photos", "photo")
  .each(images =>
       F(images)
        .map(render)
        .foreach(display))
  .pullStream(imageStream);

Got you interested? Visit our wiki pages for more examples and info.