Immutable JS

View Github Repository Open presentation in a new window

loganhuskins

See all presentation from loganhuskins

Immutable JS

0 0

ImmutableJsLunchAndLearn

A brief lightning talk over Immutable JS for Advanced Visual Programming

On Github loganhuskins / ImmutableJsLunchAndLearn

Immutable JS

A Javascript Library for Immutable Data Structures

Immutable Data?

Immutable data is data that can't be changed through reassignment

                  
// mutable data
var mutableA = ['cat', 'bat', 'rat'];
console.log(mutableA); // [ 'cat', 'bat', 'rat' ]
mutableA.push('mat');
console.log(mutableA); // [ 'cat', 'bat', 'rat', 'mat' ]
                  
                
                
// immutable data
var immutableA = Immutable.List(['ran', 'fan', 'tan']);
console.log(immutableA); // List [ "ran", "fan", "tan" ]
var immutableB = immutableA.push('man');
console.log(immutableA); // List [ "ran", "fan", "tan" ]
console.log(immutableB); // List [ "ran", "fan", "tan", "man" ]

So I Can't Change My Data. Big Whoop.

Unchanging data leads to several things...

You treat data as values rather than objects.

Your code has less side effects and is easier to read and maintain.

Your data structure operations are very performant, especially copying.

Wait. How are they performant if you are making copies of everything all the time?

Good question!

References To Old Data

When you create new data based off of old data, the only new data that is created is the differences between the two data structures. Everything else is a reference to the old data structure.

From our first example... 
        
// mutable dat// immutable data
var immutableA = Immutable.List(['ran', 'fan', 'tan']);
console.log(immutableA); // List [ "ran", "fan", "tan" ]
var immutableB = immutableA.push('man');
console.log(immutableA); // List [ "ran", "fan", "tan" ]
console.log(immutableB); // List [ "ran", "fan", "tan", "man" ]

Okay, this seems nice enough. What all can we do with it?

Data Structures

Lists 

        
var list = Immutable.List(['ran', 'fan', 'tan']);
console.log(list.push('can', 'lan'));
  // List [ "ran", "fan", "tan", "can", "lan" ]
console.log(list.push('can', 'lan')
  .pop().pop());
  // List [ "ran", "fan", "tan" ]

Stacks

        
var stack = Immutable.Stack();
console.log(stack.push(1, 3, 5, 7, 9));
  // Stack [ 1, 3, 5, 7, 9 ]
console.log(stack.push(1, 3, 5, 7).push(9)
  .pop().pop()); // Stack [ 3, 5, 7 ]

Maps

        
var map = Immutable.Map();
console.log(map); // Map {}
map = Immutable.Map({
  'a': 'hello',
  'b': 'not hello'
});
console.log(map);
  // Map { "a": "hello", "b": "not hello" }
map.a = 'later';
console.log(map);
  // Map { "a": "hello", "b": "not hello" }

Ordered Maps

        
var person = Immutable.OrderedMap()
  .set('name', 'Logan').set('town', 'Edmond');
console.log(person);
  // OrderedMap { "name": "Logan", "town": "Edmond" }

var personTwo = person.set('town', 'OKC');
console.log(personTwo.last()); // OKC

Sets

        
var setOne = Immutable.Set([1, 2, 3, 4, 5]);
var setTwo = Immutable.Set([1, 1, 2, 2, 3]);
console.log(setOne.count()); // 5
console.log(setTwo.count()); // 3
console.log(setTwo); // Set { 1, 2, 3 }

Ordered Sets

        
var orderedSetOne = Immutable
  .OrderedSet([5, 4, 3, 2, 1]);
var orderedSetTwo = Immutable
  .OrderedSet([1, 3, 5, 7, 9]);

console.log(orderedSetOne.union(orderedSetTwo));
  // OrderedSet { 5, 4, 3, 2, 1, 7, 9 }
console.log(orderedSetOne.intersect(orderedSetTwo));
  // OrderedSet { 5, 3, 1 }

Records

        
var developer = Immutable
  .Record({ 'title': 'Junior Developer' });
var developerOne = new developer();
var developerTwo = new developer({
  'title': 'Senior Developer'
});
console.log(developerOne);
  // Record { "title": "Junior Developer" }
console.log(developerTwo);
  // Record { "title": "Senior Developer" }

Sequences

        
var toInfinity = Immutable.Range(1);
var firstTenOdd = toInfinity.filter(
  function (number) {
    return number % 2 === 1
  }).take(10);
console.log(firstTenOdd);
  // Seq [ 1, 3, 5, 7, 9, 11, 13, 15, 17, 19 ]

Sequences are lazily evaluated.

Any Immutable value can be turned into a sequence.

Sequences give us a way to efficiently chain methods.

And to do things that are otherwise impossible due to memory limits.

Equality

        
var testA = Immutable.List(['a', 'b', 'c', 'd']);
var testB = Immutable.List(['a', 'b', 'c', 'd']);
console.log(Immutable.is(testA, testB)); // true

var testC = [1, 2, 3, 4, 5];
var testD = [2, 3, 4, 5, 6];
var testE = [1, 2, 3, 4, 5];
console.log(testC === testD); // false
console.log(testC === testE); // false

Performance

        
var heyThere = Immutable.List(['test1', 'test2', 'test3']);
var heyThereEdited = heyThere.withMutations(function (list) {
  list.push('test4').push('test5').push('test6').pop().pop();
})
console.log(heyThere); [ "test1", "test2", "test3" ]
console.log(heyThereEdited); [ "test1", "test2", "test3", "test4" ]

When To Use

Thanks!

Immutable JS A Javascript Library for Immutable Data Structures