This document introduces Arch, a framework for building React applications that uses an immutable central state managed by cursors. It provides routing, isomorphism, and tools to set up a React app quickly with hot reloading and a Node.js server. The presenters explain how Arch implements an observable cursor to manage state, generates UIs from that state, and allows business logic through observers.

1. Fully functional
Central state is a great fit for React

2. React looks great!
How do I build an application?

3. What is missing?
• Routing
• Data management

4. State

5. Viktor Charypar
@charypar
github.com/charypar
Tiago Azevedo
@tabazevedo
github.com/tabazevedo

6. State

7. Flux
Action Dispatcher Stores Views
Action
Just one of the options!

8. Om

9. Central immutable state
Data UI Components DOM

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

11. Example
Messages
{
selectedConversation: 0,
conversations: [
{
title: "..."

12. State

13. State updates

14. T
2 3 4
A B C
X Y
1
42
Solution: a cursor
c1 = 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”

15. Cursor
• Reference into a data structure
• Lightweight: reference + path
• Dereferencing gives local copy
• Updates replace entire backing data
• Persistent data structures make it efficient

16. Persistent data structures
T
2 3 4
A B C
X Y
1
T
3
42
T
2 3 4
A B C
X Y
1

17. App State
Central immutable state
UI
render
update
Where does the business logic go?

18. App State
Cursors are observable
UIObserver
Observer
Observer

19. Cursors are observable
UIObserver
Observer
Observer
T
2 3 4
A B C
X Y
1

20. Central state
App State UIObservers
Web API

21. Central state
• Advanced features: Persistence, Undo / Redo
• Isomorphism
• Easy testing and debugging
• Simplicity

22. 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

23. Arch

24. 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)

25. Demo

26. Arch 0.1
• Used internally at Red Badger
• All feedback welcome
github.com/redbadger/arch

27. Viktor Charypar
@charypar
github.com/charypar
Tiago Azevedo
@tabazevedo
github.com/tabazevedo