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.
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.
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.
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 🙂
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 also provides a lazy
Seq, allowing efficient chaining of collection methods like
filter without creating intermediate representations. Create some