App state handlingwith Morearty and React
Alexander Savin@karismafilms
this.state this.props
callback: ->@set-state c: it
render: ->…component-b do
prop-a: @state.aprop-b: @state.bprop-c: @callback
Component A
on-change: ->@prop-c value
render: ->div class-name: ‘my-input’,
@transfer-props-to input doplaceholder: @props.prop-aon-change: @on-change
Component B
State tree
Flux
Dispatcher
Store A
Component A Component B Component C
App state in Om
Root atomComponent A Component Bcursor cursor
shouldComponentUpdate?
By default always returns true
Immutable state
https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/react
Immutability
Immutability
Immutable objects
● Easier to reason with
● Thread safe
● Better security
● References instead of copies
Persistent data structures
● Always preserves the previous version of itself
● Yields a new structure on modify
Persistent data structures
● Partially persistent
● Fully persistent
● Confluently persistent
● Ephemeral
Performance
Vector
Vectors support efficient addition at the end. They also support efficient random access.
hash_map
hash_map
Unlike JavaScript objects Mori PersistentHashMap support complex keys.
It's recommended that you only use immutable values for your keys - numbers, strings or a Mori collection.
http://swannodette.github.io/mori/
Morearty
Morearty
● Single app context
● Persistent data structures
● JavaScript
Morearty hash_map
Morearty vector
Morearty Binding object
● Contains app state
● Allows creation of sub-bindings
● Listeners
Morearty Context
● Central module
● Access to utils, binding, history, data
structures
Context
Context in LiveScript
App
App in LiveScript
App components
https://github.com/Tvaroh/todomvc-moreartyjs/blob/master/js/app.js
Morearty future development
● RRB trees for vectors
● Better documentation
● Community feedback wanted
https://github.com/Tvaroh/moreartyjs
Further reading
RRB Trees: http://infoscience.epfl.ch/record/169879/files/RMTrees.pdf
Morearty intro (in russian):http://habrahabr.ru/post/229537/