Fully functional Central state is a great fit for React

React looks great!How do I build an application?

What is missing?• Routing

• Data management

State

Viktor Charypar @charypar github.com/charypar

Tiago Azevedo @tabazevedo

github.com/tabazevedo

State

Flux

Action Dispatcher Stores Views

Action

Just one of the options!

Om

Central immutable state

Data UI Components DOM

ExampleMessages

{ selectedConversation: 0, conversations: [ { title: "..." messages: [ { user: {...} text: "..." }, {...} ] }, {...}, ... ] }

Example

Messages

{ selectedConversation: 0, conversations: [ { title: "..." messages: [

State

State updates

T

2 3 4

A B C

X Y

1

42

Solution: a cursorc1 = cursor(T) c2 = c1.get(3) c3 = c2.get(A) v3 = c3.deref() # => “A” c3.update(“42”) c4 = c2.get(A) v4 = c4.deref() # => “42” v3 # => “A”

Cursor• Reference into a data structure

• Lightweight: reference + path

• Dereferencing gives local copy

• Updates replace entire backing data

• Persistent data structures make it efficient

Persistent data structuresT

2 3 4

A B C

X Y

1

T

3

42

T

2 3 4

A B C

X Y

1

App State

Central immutable state

UI

render

update

Where does the business logic go?

App State

Cursors are observable

UIObserver

Observer

Observer

Cursors are observable

UIObserver

Observer

Observer

T

2 3 4

A B C

X Y

1

Central state

App State UIObservers

Web API

Central state• Advanced features: Persistence, Undo / Redo

• Isomorphism

• Easy testing and debugging

• Simplicity

Things you want• Immutable modular observable central state

• Routing, Isomorphism

• Quick and easy setup

• Toys: CLI, generators, server, hot-loading, …

to build a React application

Arch

Arch• Full application framework for React

• Observable cursor implementation

• LiveScript

• Client-first: Routing, Isomorphic rendering, Isomorphic form processing alpha

• CLI, Node.js server, Webpack bundler (incl. component hot loading)

Demo

Arch 0.1

• Used internally at Red Badger

• All feedback welcome

github.com/redbadger/arch

Viktor Charypar @charypar github.com/charypar

Tiago Azevedo @tabazevedo

github.com/tabazevedo