Approaches to wrapping React. Thursday 3 September 15

Transcription

1 Approaches to wrapping React

2 Om Reagent Quiescent etc.

3

4 Call it when anything changes One big update method

5 App Logic In-memory DB

6 Advantages Doesn t touch the network i.e. fast Doesn t touch disk Disadvantages Doesn t touch the network i.e. not durable Doesn t touch disk

7 App Logic In-memory DB Real DB Replication protocol

8 App Logic In-memory UI

9 Advantages Doesn t touch the graphics hardware i.e. fast Doesn t push pixels Disadvantages Doesn t touch the graphics hardware Doesn t push pixels i.e. don t see anything

10 App Logic In-memory In-memory UI UI Real UI DOM mutation

11 Call it when anything changes One big update method

12 Retained mode graphics Internally retains a data structure of added objects, called a scene graph. Examples include DOM, other UI toolkits, graphics toolkits.

13 Immediate mode graphics Lower-level. Directly (or immediately ) draw on the abstraction provided. Examples include the HTML5 Canvas.

14 Immediate mode adapter on a retained mode back-end App Logic In-memory In-memory UI UI Real UI DOM mutation Objective-C calls OpenGL commands

15 In fact, it s more general than that. react-canvas

16 App Logic In-memory In-memory UI UI Real UI

17 Functional UI

18 JSX Built-in User-defined

19

20 React Native

21 react-canvas

22 Learn once, write anywhere

23

24 Component data Props immutable attribute-syntax in JSX to pass in values State mutable initialised in the component

25 Component Lifecycle componentwillmount componentdidmount componentwillreceiveprops shouldcomponentupdate componentwillupdate componentdidupdate componentwillunmount

26 shouldcomponentupdate

27 Structure sharing

28 $ git clone Cloning into rails... remote: Counting objects: , done. remote: Compressing objects: 100% (85986/85986), done. remote: Total (delta ), reused (delta ) Receiving objects: 100% (342901/342901), MiB 3.95 MiB/s, done. Resolving deltas: 100% (266209/266209), done. $ cd rails $ git rev- list - - all wc - l 41283

29 $ git clone - - depth=1 Cloning into rails... remote: Counting objects: 41028, done. remote: Compressing objects: 100% (24551/24551), done. remote: Total (delta 29623), reused (delta 14791) Receiving objects: 100% (41028/41028), MiB 1.82 MiB/s, done. Resolving deltas: 100% (29623/29623), done / =

30 Recommended structure Stateful controller view Local Stateless state?

31 Flux Architecture

32 Flux Architecture

33 Missing piece: Data fetching

34 Data fetching and the three bears (or the issue with dedicated endpoints) under-fetching over-fetching just right Also data shaping is an issue

35 GraphiQL

36 New lifecycle: Relay

37 Don t choke the browser

38 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:

39 Reagent Very simple and elegant Central idea is reactive atom (r-atom) Can have potentially many r-atoms

40 Reagent

41 Quiescent Does not address application state No such thing as component-local state Very functional

42 Quiescent

43 Quiescent

44 Om

45 Om Protocols intended to enable components to be adaptable (not just reusable). They re going in Om Next.

46 Om

47 Om Single state tree (good conceptual fit for Clojure) Undo, optimistic update, etc. But raises the question of modularity.

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