48
Approaches to wrapping React Thursday 3 September 15
Approaches to wrapping React
Thursday 3 September 15
OmReagent
Quiescentetc.
Thursday 3 September 15
Thursday 3 September 15
One bigupdate method
Call it whenanything changes
Thursday 3 September 15
AppLogic
In-memoryDB
Thursday 3 September 15
AdvantagesDoesn’t touch the networkDoesn’t touch disk
i.e. fast
DisadvantagesDoesn’t touch the networkDoesn’t touch disk
i.e. not durable
Thursday 3 September 15
AppLogic
In-memoryDB
“Real” DB
Replication protocol
Thursday 3 September 15
AppLogic
In-memoryUI
Thursday 3 September 15
AdvantagesDoesn’t touch the graphics hardwareDoesn’t push pixels
i.e. fast
DisadvantagesDoesn’t touch the graphics hardwareDoesn’t push pixels
i.e. don’t see anything
Thursday 3 September 15
In-memoryUI
AppLogic
In-memoryUI
“Real” UI
DOM mutation
Thursday 3 September 15
One bigupdate method
Call it whenanything changes
Thursday 3 September 15
Retained mode graphics
Internally “retains” a data structure of added objects,
called a scene graph.
Examples include DOM, other UI toolkits, graphics toolkits.
Thursday 3 September 15
Immediate mode graphics
Lower-level. Directly (or “immediately”) draw on the abstraction provided.
Examples include the HTML5 Canvas.
Thursday 3 September 15
In-memoryUI
AppLogic
In-memoryUI
“Real” UI
DOM mutationObjective-C callsOpenGL commands
Immediate mode adapter on a retained mode back-end
Thursday 3 September 15
In fact, it’s more general than that.
http://engineering.flipboard.com/2015/02/mobile-web/
react-canvas
Thursday 3 September 15
In-memoryUI
AppLogic
In-memoryUI
“Real” UI
Thursday 3 September 15
Functional UI
Thursday 3 September 15
JSX
Built-in
User-defined
Thursday 3 September 15
Thursday 3 September 15
React Native
Thursday 3 September 15
react-canvas
Thursday 3 September 15
“Learn once, write anywhere”
Thursday 3 September 15
Thursday 3 September 15
Component data
Props • immutable • attribute-syntax in JSX to pass in values
State • mutable • initialised in the component
Thursday 3 September 15
Component Lifecycle
componentWillMountcomponentDidMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdatecomponentWillUnmount
Thursday 3 September 15
shouldComponentUpdate
Thursday 3 September 15
Structure sharing
Thursday 3 September 15
$ git clone https://github.com/rails/rails.gitCloning into rails...remote: Counting objects: 342901, done.remote: Compressing objects: 100% (85986/85986), done.remote: Total 342901 (delta 266209), reused 328871 (delta 253782)Receiving objects: 100% (342901/342901), 51.19 MiB | 3.95 MiB/s, done.Resolving deltas: 100% (266209/266209), done.
$ cd rails$ git rev-‐list -‐-‐all | wc -‐l 41283
Thursday 3 September 15
$ git clone -‐-‐depth=1 https://github.com/rails/rails.gitCloning into rails...remote: Counting objects: 41028, done.remote: Compressing objects: 100% (24551/24551), done.remote: Total 41028 (delta 29623), reused 23024 (delta 14791)Receiving objects: 100% (41028/41028), 16.81 MiB | 1.82 MiB/s, done.Resolving deltas: 100% (29623/29623), done.
51.19 / 16.81 = 3.0452
Thursday 3 September 15
Recommended structure
Stateful “controller view”
StatelessLocalstate?
Thursday 3 September 15
Flux Architecture
Thursday 3 September 15
Flux Architecture
Thursday 3 September 15
Missing piece: Data fetching
Thursday 3 September 15
Data fetching and the three bears(or the issue with dedicated endpoints)
• under-fetching • over-fetching • “just right”
Also “data shaping” is an issue
Thursday 3 September 15
GraphiQL
http://graphql-swapi.parseapp.com/graphiql/
Thursday 3 September 15
New lifecycle: Relay
Thursday 3 September 15
Don’t choke the browser
Thursday 3 September 15
Batching strategy (a.k.a. flushing strategy)
Om and Reagent have an asynchronous rendering loop on requestAnimationFrame
Quiescent doesn’t address flushing. So you put the following in your application code:
Thursday 3 September 15
Reagent
Very simple and elegant
Central idea is reactive atom (r-atom)
Can have potentially many r-atoms
Thursday 3 September 15
Reagent
Thursday 3 September 15
Quiescent
Does not address application state
No such thing as component-local state
Very functional
Thursday 3 September 15
Quiescent
Thursday 3 September 15
Quiescent
Thursday 3 September 15
Om
Thursday 3 September 15
Om
Protocols intended to enable components to be adaptable (not just reusable).
They’re going in Om Next.
Thursday 3 September 15
Om
Thursday 3 September 15
Om
Single state tree (good conceptual fit for Clojure)
But raises the question of modularity.
Undo, optimistic update, etc.
Thursday 3 September 15
Om
Cursors: a triple of • sub-view of data • path to that sub-view • reference to overall state atom
They’re going in Om Next.
They were added to Reagent 0.5 in March.
Thursday 3 September 15
