We talk a lot in this blog about programming frameworks and how they help developers do their jobs in various languages. It seems at times that for any given programming language there is an endless list of frameworks available. This is great for us, because it gives us an endless stream of material for the blog.
So, in the spirit of keeping the party going, here we are throwing another one at you: Immutable.js, another member of the growing family of JavaScript frameworks.
What Is Immutability? Or Mutability, for That Matter?
To understand why Immutable.js is necessary, and when, you first need to know the concepts of mutability and immutability in programming.
Caution: Somewhat esoteric developer-speak follows. If the contents make you dizzy, confused, or sleepy, discontinue reading and contact AndPlus at once to discuss how we can help you with your next JavaScript-based web application. We’ll take care of the immutability part.
In computer programming, all objects can be classified as mutable or immutable. An immutable object cannot have its value or state changed (or “mutated”) once it is created, whereas a mutable object can have its value, properties, or state changed as the program runs.
Many traditional programming languages have the notion of a constant, a named value that cannot be changed after it is first created. Immutability—not just for individual values, but for more complex data structures such as arrays and objects with multiple properties—is important for a few reasons:
- Items that are immutable maintain their state or value wherever they are referenced in a program, so different functions that reference the same immutable object get the same value for that object.
- In multi-threaded environments, an immutable object referenced in one thread can’t have its state changed in another thread (a concept known as thread-safe). This ensures consistency across threads and eliminates a potential source of bugs.
- In JavaScript in particular, an on-screen object whose state changes is automatically re-rendered, even if no property of that object has actually changed. This can result in unnecessary re-rendering, reducing application performance and efficiency. Object immutability can address this issue.
The Problem of Immutability in JavaScript, and Its Solution
JavaScript does not provide any way of enforcing immutability on objects in the document object model (DOM). There are certain techniques that developers can use to impose a sort of “immutability” on objects, but this approach has some limitations:
- It’s easy to slip up and perform actions that mutate your “immutable” object.
- In a team development environment, an object that one developer imposes “immutability” on can be mutated willy-nilly by another developer.
- JavaScript doesn’t care—there is no warning or error if your code contains commands that mutate objects you intend to be immutable.
For these reasons, the Immutable.js framework was created. The Immutable.js framework provides a library that enables developers to encapsulate data objects in a way that guarantees their immutability. Essentially, Immutable.js uses the same techniques that a developer would use to impose immutability, but ensures it is done consistently for a given object.
The Pros and Cons of Immutable.js
The Immutable.js framework has the advantages you would expect, such as guaranteeing immutability and therefore enhancing the performance of your application. There are, however, some disadvantages that developers need to be aware of and address with careful coding:
- Immutable.js imposes an additional dependency on any application that uses it, which tends to inflate the size of an application. This is an important issue for web applications, where application size can degrade download speeds.
- Other JavaScript libraries expect “plain” JavaScript objects to work with, not their Immutable.js-encapsulated counterparts, and in some applications the developers may prefer non-encapsulated (but still “immutable”) objects in certain areas of the code base.
- Some Immutable.js syntax is considered awkward and difficult to work with or for a human developer to read, understand what’s going on, and debug.
- Immutable.js is not appropriate for every situation, and may be overkill for simple data structures that contain a small number of properties or keys.
These issues can be overcome, but developers need to be well-versed in Immutable.js and how to program around its limitations—without writing a lot of extra code.
Bottom Line
Immutable.js can be a great way to enforce immutability on JavaScript objects and therefore optimize an application’s performance. It does require discipline and know-how to use properly. The JaveScript developers at AndPlus are intimately familiar with Immutable.js and how to apply it appropriately (and when not to apply it at all). If you made it this far through this article, contact AndPlus today to discuss how we can optimize your JavaScript web application.
