Application state handling with ReactJS and Morearty

30 %
70 %
Information about Application state handling with ReactJS and Morearty
Technology

Published on July 24, 2014

Author: alexsavin

Source: slideshare.net

Description

Presented on London React User Group meetup on 23.7.2014

App state handling with Morearty and React Alexander Savin @karismafilms

this.state this.props

callback: -> @set-state c: it render: -> … component-b do prop-a: @state.a prop-b: @state.b prop-c: @callback Component A on-change: -> @prop-c value render: -> div class-name: ‘my-input’, @transfer-props-to input do placeholder: @props.prop-a on-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 B cursor 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/

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...