Tag Archives: Immutable

Boost the Performance of an AngularJS Application Using Immutable Data

via Boost the Performance of an AngularJS Application Using Immutable Data – Minko Gechev’s blog.

I have affinity to functional programming since my first year in college. During my initial contact with a purely functional programming language (Haskell in my case) I didn’t really understand all the advantages it provides, everything was reduced to just writing a cool recursive functions and solving algorithmic problems.

Later, when my code was used in production, I started appreciating things like high-order functions, closures, currying, etc. I even wrote a blog post on topic “Functional programming with JavaScript”.

Last couple of years I had the hard task to write a complex UI. A lot of user inputs, which can change the model from different places and potentially lead to inconsistent state of the application, a lot of bugs, which are hard to debug and find. Later ReactJS was released and I noticed the concept of the “pure functions” in their UI components. A react component gets rendered the same way when it receives the same input parameters and it has the same state (if you implement it properly). React even provides the PureRenderMixin, which can make the “pure component” rendering even faster!

React is awesome, there are no two opinions. I’m also huge AngularJS fan. A few years ago I wrote the firstAngularJS Style Guide, “AngularJS in Patterns”, AngularAOP and a few other AngularJS modules/components/examples, which got popular. So I started wondering whether I can use the same idea of immutability of the model in AngularJS, at least for accelerating the data-binding watchers.

Video: Immutable Data and React

Immutable data unlocks powerful memoization techniques and prohibits accidental coupling via shared mutable state. It’s no accident that these are the the same benefits provided by React.

Persistent data structures provide the benefits of immutability while maintaining high performance reads and writes and present a familiar API.

Learn about how persistent immutable data structures work, and techniques for using them in your React applications with Immutable.js, a library of fully persistent immutable data structures.

A JSON editor with React and Immutable data

via A JSON editor with React and Immutable data – arqex.

There is a big hype about immutable data and React.js after the first react conference hold in SF, but it is not easy to find examples on how to use them together to get a great development experience. Today we are going to build a JSON editor using them to show all the benefits they provide.

Our JSON editor will be simple, it will let us:

  • Adding, removing and editing attributes from our JSON object.
  • It will store arrays, hashes and strings.
  • It will highlight modified nodes.
  • It will be ugly, no time for styling, sorry 🙂

Immutable Data Collections

Immutable Data Collections

Converting to v3 from v2? Check out the upgrade guide.

Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization techniques.

Immutable provides List, Stack, Map, OrderedMap, and Set by using persistenthash maps tries and vector tries as popularized by Clojure and Scala. They achieve efficiency on modern JavaScript VMs by using structural sharing and minimizing the need to copy or cache data.

Immutable also provides a lazy Seq, allowing efficient chaining of collection methods like map and filter without creating intermediate representations. Create some Seqwith Range and Repeat.