How Immutable.JS is Changing the Game of Mobile App Development?

Functional programming has been on the rise in the last few years. Languages such as Clojure, Scala and Haskell have brought to the eyes of imperative programmers interesting techniques that can provide significant benefits in certain use cases. Mutating data is the source of never-ending headaches in software systems, and JavaScript code is no exception.

Most developers emphasize immutability when dealing with functional programming. Code written in functional style is testable, because the functions operate on data treated as immutable. In practice though, I see this principle violated from time to time. I will present one way to force yourself to eliminate side effects in your code: using immutable.js.

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data.

Immutable.js provides us the data structures and utilities that we need to start introducing this powerful concept of immutability into our applications.

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

These data structures are highly efficient on modern JavaScript VMs by using structural sharing via hash maps tries and vector tries as popularized by Clojure and Scala, minimizing the need to copy or cache data.

Example:

The following example demos how the standard JavaScript behaves on an array versus an immutable array.

Standard JavaScript:

// Standard mutating JavaScript Array push
const flower = ['Rose'];
flower.push('Lily');

// Output:
Flower;
---------------------
Output:
Array [
"Rose",
"Lily",
]

Immutable equivalent:

// Immutable.js non-mutating List.push
const flower = Immutable.List.of('Rose');
flower.push('Lily');

// Output:
Flower;

The output this is,
Array [
"Rose",
]

This solves a lot of complexities in everyday programming. But there are situations where we need to change these JavaScript objects. We solve this by copying the JavaScript object to a new variable and update it. You can see it below.

// Immutable.js non-mutating List.push
const flower = Immutable.List.of(Rose);
const newFlower = flower.push(Lily);
​
// Output:
newFlower;
---------------------
Array [
  "Rose",
  “Lily”
]

Immutable JS in Action:

Immutable.js works really well along with Redux. Life of Immutable.js with Redux is often showcased as a perfect example of Immutable.js implementation. I believe that its best to explain Immutable.js with Redux integration with a small example.

Typically, we use the following piece of code in a standard Redux method.

const reducer = (state, action) => {
  switch (action.type) {
    case 'USERENTRY':
      return { ...state, inmates: state.inmates + 1 };
    case 'USEREXIT':
      return { ...state, inmates: state.inmates - 1 };
    default:
      return state;
    }
};
 
const store = createTeam(reducer, { inmates: 0 });

Below is a representation of the above snippet of code using Immutable.js.

Const firstMembers = Immutable.Map({ inmates: 0 });
 
const reducer = (state, action) => {
  switch (action.type) {
    case 'USERENTRY':
      return state.set('inmates', state.get('inmates') + 1);
    case 'USEREXIT':
      return state.set('inmates', state.get('inmates') - 1);
    default:
      return state;
    }
};
 
const store = createTeam(reducer, firstMembers);

As you can see, We initially defined a new variable – firstMembers. We then assigned the Immutable.Map structure to the variable, firstMembers. We have also initialised it by the object with the inmates property set to 0. If you look at the last line of the example, we passed it to the createTeam method so now, the state uses the Immutable.js Map object. Summary: Immutable.js is a cool library by Facebook providing immutable data structures. It solves the gaps shown by underscore.js, like those operations of different data structures were forced on JavaScript arrays and objects, and losing immutability, mixing the concept of data types. The name immutable.js really well reflects the behavior of the library. It cements the fact that we need to deal with immutable data structures as a necessary condition for exercising pure functional programming. The emphasis on using the best-suited data structures results in increased maintainability of your code.

Summary

Immutable.js is a cool library by Facebook providing immutable data structures. It solves the gaps shown by underscore.js, like those operations of different data structures were forced on JavaScript arrays and objects, and losing immutability, mixing the concept of data types. The name immutable.js really well reflects the behaviour of the library. It cements the fact that we need to deal with immutable data structures as a necessary condition for exercising pure functional programming. The emphasis on using the best suited data structures results in increased maintainability of your code.