Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React...
Transcript of Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React...
![Page 1: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/1.jpg)
Approaches to wrapping React
Thursday 3 September 15
![Page 2: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/2.jpg)
OmReagent
Quiescentetc.
Thursday 3 September 15
![Page 3: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/3.jpg)
Thursday 3 September 15
![Page 4: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/4.jpg)
One bigupdate method
Call it whenanything changes
Thursday 3 September 15
![Page 5: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/5.jpg)
AppLogic
In-memoryDB
Thursday 3 September 15
![Page 6: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/6.jpg)
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
![Page 7: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/7.jpg)
AppLogic
In-memoryDB
“Real” DB
Replication protocol
Thursday 3 September 15
![Page 8: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/8.jpg)
AppLogic
In-memoryUI
Thursday 3 September 15
![Page 9: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/9.jpg)
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
![Page 10: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/10.jpg)
In-memoryUI
AppLogic
In-memoryUI
“Real” UI
DOM mutation
Thursday 3 September 15
![Page 11: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/11.jpg)
One bigupdate method
Call it whenanything changes
Thursday 3 September 15
![Page 12: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/12.jpg)
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
![Page 13: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/13.jpg)
Immediate mode graphics
Lower-level. Directly (or “immediately”) draw on the abstraction provided.
Examples include the HTML5 Canvas.
Thursday 3 September 15
![Page 14: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/14.jpg)
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
![Page 15: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/15.jpg)
In fact, it’s more general than that.
http://engineering.flipboard.com/2015/02/mobile-web/
react-canvas
Thursday 3 September 15
![Page 16: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/16.jpg)
In-memoryUI
AppLogic
In-memoryUI
“Real” UI
Thursday 3 September 15
![Page 17: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/17.jpg)
Functional UI
Thursday 3 September 15
![Page 18: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/18.jpg)
JSX
Built-in
User-defined
Thursday 3 September 15
![Page 19: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/19.jpg)
Thursday 3 September 15
![Page 20: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/20.jpg)
React Native
Thursday 3 September 15
![Page 21: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/21.jpg)
react-canvas
Thursday 3 September 15
![Page 22: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/22.jpg)
“Learn once, write anywhere”
Thursday 3 September 15
![Page 23: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/23.jpg)
Thursday 3 September 15
![Page 24: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/24.jpg)
Component data
Props • immutable • attribute-syntax in JSX to pass in values
State • mutable • initialised in the component
Thursday 3 September 15
![Page 25: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/25.jpg)
Component Lifecycle
componentWillMountcomponentDidMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdatecomponentWillUnmount
Thursday 3 September 15
![Page 26: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/26.jpg)
shouldComponentUpdate
Thursday 3 September 15
![Page 27: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/27.jpg)
Structure sharing
Thursday 3 September 15
![Page 28: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/28.jpg)
$ 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
![Page 29: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/29.jpg)
$ 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
![Page 30: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/30.jpg)
Recommended structure
Stateful “controller view”
StatelessLocalstate?
Thursday 3 September 15
![Page 31: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/31.jpg)
Flux Architecture
Thursday 3 September 15
![Page 32: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/32.jpg)
Flux Architecture
Thursday 3 September 15
![Page 33: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/33.jpg)
Missing piece: Data fetching
Thursday 3 September 15
![Page 34: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/34.jpg)
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
![Page 35: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/35.jpg)
GraphiQL
http://graphql-swapi.parseapp.com/graphiql/
Thursday 3 September 15
![Page 36: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/36.jpg)
New lifecycle: Relay
Thursday 3 September 15
![Page 37: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/37.jpg)
Don’t choke the browser
Thursday 3 September 15
![Page 38: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/38.jpg)
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
![Page 39: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/39.jpg)
Reagent
Very simple and elegant
Central idea is reactive atom (r-atom)
Can have potentially many r-atoms
Thursday 3 September 15
![Page 40: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/40.jpg)
Reagent
Thursday 3 September 15
![Page 41: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/41.jpg)
Quiescent
Does not address application state
No such thing as component-local state
Very functional
Thursday 3 September 15
![Page 42: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/42.jpg)
Quiescent
Thursday 3 September 15
![Page 43: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/43.jpg)
Quiescent
Thursday 3 September 15
![Page 44: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/44.jpg)
Om
Thursday 3 September 15
![Page 45: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/45.jpg)
Om
Protocols intended to enable components to be adaptable (not just reusable).
They’re going in Om Next.
Thursday 3 September 15
![Page 46: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/46.jpg)
Om
Thursday 3 September 15
![Page 47: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/47.jpg)
Om
Single state tree (good conceptual fit for Clojure)
But raises the question of modularity.
Undo, optimistic update, etc.
Thursday 3 September 15
![Page 48: Approaches to wrapping React - Meetupfiles.meetup.com/10978482/Wrapping_React.pdf · wrapping React Thursday 3 September 15. Om Reagent Quiescent etc. Thursday 3 September 15. Thursday](https://reader033.fdocuments.us/reader033/viewer/2022042320/5f09b6b47e708231d428297c/html5/thumbnails/48.jpg)
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