immutable vs ramda

JavaScript performance comparison

Test case created by voodee

Preparation code

<script src='https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0-rc.12/immutable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js'></script>
<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>
<script>
window.fp = _.noConflict();
window.activeBreakpoints = ['a', 'c'];
window.activeBreakpointsImmutable = Immutable.fromJS(window.activeBreakpoints);
function makeid() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i = 0; i < 5; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

  return text;
}
window.generate = () => {
  const res = {};
  for (var i = 0; i < 99; i++) {
     res[makeid()] = {active: Math.random() > .5}
  }
  return res; 
}

window.value = { a: {active: false}, b: {active: true}, c: {active: false} }
window.valueDeep = { a1: { a2: { a3: {a: {active: true}, b: {active: false}, c: {active: true}}} } }
window.valueImmutable = Immutable.fromJS(window.generate())
window.isActive = n => n.active === true;

window.lens = get => set => ({ get, set });
window.set = lens => val => obj => lens.set(val)(obj);
window.prop = key => obj => obj[key];
window.assoc = key => val => obj => {
  return {
     ...obj,
    [key]: val
  };
};

window.lensProp = key => window.lens(window.prop(key))(window.assoc(key));


window.values = Array.from({length: 7}).map(window.generate)

</script>
    

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
vanilla-lodash
window.value = window.generate();

const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return {
            ...value,
            active: true
          }
				}
				return {
            ...value,
            active: false
          }
			}

_.mapKeys(window.value, modify);
pending…
vanilla
window.value = window.generate();

const newValue = { ...window.value };
const modify = key => {
				if ( window.activeBreakpoints.includes(key) ) {
					newValue[key] = {
            ...newValue[key],
            active: true
          }
				}
				newValue[key] = {
          ...newValue[key],
          active: false
        }
			};
Object
			.keys(newValue)
			.forEach(modify);
pending…
ramda
window.value = window.generate();
// const activeLens = R.lensProp('active');
const activeLens = window.lens(window.prop('active'))(window.assoc('active'))

const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return window.set(activeLens)(false)(value);
				}
				return window.set(activeLens)(true)(value);
			}

R.mapObjIndexed(modify, window.value);
pending…
vanilla-ramda
window.value = window.generate();

const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return {
            ...value,
            active: true
          }
				}
				return {
            ...value,
            active: false
          }
			}

R.mapObjIndexed(modify, window.value);
pending…
vanilla(reduce)
window.value = window.generate();

const modify = (accum, key) => {
    if ( window.activeBreakpoints.includes(key) ) {
      accum[key] = {
        ...window.value[key],
        active: true
      }
    } else {
        accum[key] = {
          ...window.value[key],
          active: false
        }
    }

    return accum
};

Object.keys(window.value).reduce(modify, {...window.value})
pending…
vanila(for-in)
window.value = window.generate();

const newValue = {...window.value}

for (let key in newValue) {
  if ( window.activeBreakpoints.includes(key) ) {
      newValue[key] = {
        ...newValue[key],
        active: false
      }
    } else {
        newValue[key] = {
          ...newValue[key],
          active: true
        }
    }
}
pending…
vanilla-lodash(lens)
window.value = window.generate();

const activeLens = window.lens(window.prop('active'))(window.assoc('active'))

const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return window.set(activeLens)(false)(value);
				}
				return window.set(activeLens)(true)(value);
}

_.mapKeys(window.value, modify);
pending…
ramda with lens
window.value = window.generate();
const activeLens = R.lensProp('active');


const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return R.set(activeLens, false, value);
				}
				return R.set(activeLens, true, value);
			}

R.mapObjIndexed(modify, window.value);
pending…
lodash set
window.value = window.generate();


const modify = (value, key) => {
				if ( window.activeBreakpoints.includes(key) ) {
					return window.fp.set('active', false, value);
				}
				return window.fp.set('active', true, value);
}

fp.mapKeys(window.value, modify);
pending…
vanilla(luis)
window.value = window.generate();

const newValue = { ...window.value };
Object.keys(newValue).forEach(key => {
	const has = window.activeBreakpoints.includes(key);
	if (window.value[key].active !== has) {
		newValue[key] = { ...window.value[key], active: has };
	}
});
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments