application state handling with reactjs and morearty

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/