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