Seamless-immutable-cursor: Bridging Immutability and React

Martin Snyder / @MartinSnyder / Wingspan Technology, Inc.

Immutability in JavaScript - Options

Immutable.js

  • Persistent data structures
  • Low-cost writes
  • High-cost conversion to compatible structures
  • No downstream" immutability

Seamless-immutable / Deep-freeze

  • Uses ES5's Object.freeze() to lock-down existing structures
  • High-cost writes
  • zero-cost conversion to compatible structures
  • "downstream" immutability

Seamless-immutable Advantages

  • Interop with ALL existing JavaScript libraries
  • Rewrites common routines to return only immutable values (e.g. map)
  • Special cases for objects that don't respond well to being Frozen
  • Release build addresses write performance

Cursors

  • Manage immutable structures that evolve over time
  • Writable windows to subordinate structures
  • Change detection

Cursors with React

  • Trivial Flux Implementation
  • Application state exposed to react ONLY via 'props'
  • UI state ONLY exposed to react via 'state'
  • Props CANNOT be modified. Strict enforcement of a prior convention.
  • Cursors ONLY available to controllers (commands, ajax)
  • Pure React components - enables render optimizations

Demo

Other Benefits

  • Import / export state
  • Data transition history

Links

Thank You!

Martin Snyder / @MartinSnyder / Wingspan Technology, Inc.