Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Graph Theory Behind ImmutableJS

Graph Theory Behind ImmutableJS

ImmutableJS is a library from Facebook which provides us a set of immutable data, such as Stack, List Map and others. With this you can build predictable and reliable state models on top of your application, doing easy to handle state.

These structures are highly efficient on modern Javascript VMS by using structural sharing via hash maps tries and vector tries. But how they do this?

The point is: there is a lot of graph and algorithm theory behind this. Direct Acyclic graphs and complexity of algorithms.

There is a difference between implementation and interface. On this talk we will have these two visions.

At the end of this talk, you should understand how the things really works behind the scenes!

Franzé Jr.

June 04, 2016
Tweet

More Decks by Franzé Jr.

Other Decks in Programming

Transcript

  1. GRAPH THEORY BEHIND IMMUTABLE.JS CONTENT ▸ Immutable.js ▸ Graphs ▸

    Graph ▸ Trees ▸ Tries ▸ Data Structures ▸ Analysis of algorithms ▸ HOW ▸ WHY ▸ Benefits
  2. “GOOD DEVELOPERS KNOW HOW THINGS WORK. GREAT DEVELOPERS KNOW WHY

    THINGS WORK.” Steve Souders,(O’Reilly Media, 2013). GRAPH THEORY BEHIND IMMUTABLE.JS
  3. GRAPH THEORY BEHIND IMMUTABLE.JS Data structures are highly efficient on

    modern JS VMs Concepts of Functional Programming Facebook is behind it Immutability makes certain things easier. Good theory behind it! :)
  4. MODEL MANY TYPES OF RELATIONS AND PROCESSES IN PHYSICAL, BIOLOGICAL,

    SOCIAL AND INFORMATION SYSTEMS. MANY PRACTICAL PROBLEMS CAN BE REPRESENTED BY GRAPHS.
  5. import { List } from "immutable" var list = List([1,2,3])

    var list2 = list.push(4) list // [1,2,3] list2 === list // false
  6. var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3});

    var map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50
  7. GRAPH THEORY BEHIND IMMUTABLE.JS Simple Data Structure Lookup very fast

    O(m), where m is the average word size Elements are in Order Can replace some data structures Simple and straightforward
  8. So, Immutable data structures provides you a cheap and less

    verbose way to track changes on objects, which is all we need to implement shouldComponentUpdate. Therefore, if we model props and state attributes using the abstractions provided by immutable-js we'll be able to use PureRenderMixin and get a nice boost in perf.
  9. "MUTABLE SHARED STATE IS THE ROOT OF ALL EVIL IN

    CONCURRENT SYSTEMS. THE HISTORY OF CONCURRENT COMPUTATION IS A BASICALLY THE STORY OF APPROACHES TO MANAGING MUTABLE SHARED STATE. THE THREAD MODEL, WHICH HAS LONG HELD THE DOMINANT POSITION, LEADS TO INTRACTABLE COMPLEXITY" E. Lee. The Problem with Threads, Computer, v.39 n.5, p.33-42, May 2006. GRAPH THEORY BEHIND IMMUTABLE.JS
  10. IF IMMUTABLE IS SO GOOD AND IT SOLVES THE ROOT

    OF ALL EVIL, WHY PEOPLE KEEP USING MUTABLE DATA?
  11. GRAPH THEORY BEHIND IMMUTABLE.JS Stockholm Syndrome Mutability is the default

    in imperative languages. Inertia of mind, a.k.a., resistance to change Most developers of today have been trained well before immutability (and the containing paradigm, functional programming) became "trendy" in their sphere of influence, and don't keep their knowledge up to date about new tools and methods of our trade.
  12. GRAPH THEORY BEHIND IMMUTABLE.JS REFERENCES ▸ http://ejohn.org/blog/javascript-trie-performance-analysis/ ▸ https://en.wikipedia.org/wiki/Trie ▸

    http://www.stoimen.com/blog/wp-content/uploads/2012/08/3.-Weithened- Graph.png ▸ https://auth0.com/blog/2016/03/23/intro-to-immutable-js/ ▸ https://facebook.github.io/immutable-js/ ▸ https://www.toptal.com/java/the-trie-a-neglected-data-structure ▸ http://hypirion.com/musings/understanding-persistent-vector-pt-1 ▸ This talk was totally inspired on Lee Byron Talk from: https://www.youtube.com/ watch?v=YFP8lbdZ0cs&index=6&list=PLfbGQgpcGXI-Ecf77nxzUKuJnZ2XOpNZc