Collections libraries in JavaScript

Thick Clients

 

Map

 

function sqr(x) {
    return x * x;
}
[1, 2, 3].map(sqr) // => [1, 4, 9]

Reduce

 

filter

some, every

groupBy

sort

...

Underscore/Lo-dash

Lo-dash

Lazy.js

Ramda

Ramda

var addFourNumbers = function(a, b, c, d) {
  return a + b + c + d;
};

var curriedAddFourNumbers = R.curry(addFourNumbers);
var f = curriedAddFourNumbers(1, 2);
var g = f(3);
g(4); //=> 10

currying

Ramda

composition

var double = function(x) { return x * 2; };
var square = function(x) { return x * x; };
var squareThenDouble = R.compose(double, square);
var doubleThenSquare = R.compose(square, double);


squareThenDouble(5); //=> 50 == double(square(5))
doubleThenSquare(5); //=> 100 == square(double(5))
/* [
    { 
        username: 'Mike',
        complete: false,
        dueDate: '1/22/2015',
        title: 'Bla-bla.',
        effort: 'mid',
        priority: 'mid'
 }, 
    ...
] */

underscore/lo-dash/lazy.js

results = _(tasks).where({complete: false});

Filter

ramda

Filter

var incomplete = R.filter(R.where({complete: false}));
// R.where: ({}, {}) => Boolean
// R.filter (f: (a) => Boolean, [a]) => [a]

results = incomplete(tasks);
otherResults = incomplete(otherTasks);
moreResults = incomplete(moreTasks);

underscore/lo-dash/lazy.js

 results =_.chain(tasks)
	.where({complete: false})
	.groupBy('username')
        .value();

Filter, Group

ramda

Filter, Group

var incomplete = R.filter(R.where({complete: false}));
var groupByUser = R.groupBy(R.prop('username'));
//R.groupBy: (f: (a) => String, [a]) => {String: [a]}
var activeByUser = R.compose(groupByUser, incomplete);

results = activeByUser (tasks);

Filter, Group

/*{
    Martha: [{
        username: 'Martha',
        complete: false,
        dueDate: '7/10/2015',
        title: 'Important title',
        effort: 'low',
        priority: 'mid'
      },
      ...
    ],
    ...
}*/

underscore/lo-dash/lazy.js

results = _.chain(tasks)
    .where({complete: false})
    .groupBy('username')
    .mapObject(function(tasks) {
	return _.sortBy(tasks, "dueDate")
     })
    .value();

//.mapObject(_.partial(_.sortBy, _, "dueDate"))

Filter, Group, Sort

ramda

Filter, Group, Sort

var activeByUser = R.compose(groupByUser, incomplete);

var sortByDate = R.sortBy(R.prop("dueDate"));
var sortUserTasks = R.compose(R.mapObj(sortByDate), 
    activeByUser);

results = sortUserTasks(tasks);

underscore/lo-dash/lazy.js

results = _.chain(tasks)
  .where({complete: false})
  .groupBy('username')
  .mapObject(function(tasks) {
    return _.chain(tasks)
      .sortBy(tasks, "dueDate")
      .reverse()
      .value();
   })
  .value();

Filter, Group, Sort

ramda

Filter, Group, Sort

var sortByDateDescend = R.compose(
    R.reverse, sortByDate
);
var sortUserTasksDescend = R.compose(
    R.mapObj(sortByDateDescend), activeByUser
);
results = sortUserTasksDescend(tasks);

underscore/lo-dash/lazy.js

results = _.chain(tasks)
  .where({complete: false})
  .groupBy('username')
  .mapObject(function(tasks) {
    return _.chain(tasks)
      .sortBy("dueDate")
      .map(_.partial(
          _.pick, _, ['title', 'dueDate'])
      )
      .take(5)
      .value()
   })
  .value();

Filter, Group, Sort

ramda

Filter, Group, Sort

var sortUserTasks = R.compose(R.mapObj(sortByDate), 
    activeByUser);

var topFiveUserTasks = R.compose(
    R.mapObj(R.take(5)), sortUserTasks
);
var importantFields = R.project(
    ['title', 'dueDate']
);
var topDataAllUsers = R.compose(
    R.mapObj(importantFields), topFiveUserTasks
);
results = topDataAllUsers(tasks);

results

Filter, Group, Sort

{
    Martha: [{
        title: 'Oli ar fonid zu rupum vuwuidu mu racbam sa naliuf ralik zulde tac cijde tezgu ogu.',
        dueDate: '7/10/2015'
    }, {
        title: 'Bet fuvnotpo wofizrak gonen ko hoj vijnurcu vafdose bip doffuphil tado fooj bapvaz nizsibak.',
        dueDate: '7/18/2015'
    }, {
        title: 'Fat ge se arhohza tiomtah etacaw ikeutoji kacaz tibe odovahat vac sop inheri.',
        dueDate: '8/18/2015'
    }],
    //   ....
}
var formList = R.compose(
    importantFields, R.take(5), sortByDateDescend
);
var byUser = R.useWith(R.filter, R.propEq("username"));
var topData = R.compose(formList, incomplete);
var topDataAllUsers = R.compose(
    R.mapObj(formList), activeByUser
);

var myTasks = topData(byUser('me', tasks));
var allTasks = topData(tasks);

Perfomance

deck

By sashqa

deck

  • 2,407