leapmotion for web with react and flux
TRANSCRIPT
![Page 1: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/1.jpg)
Controlling Computers
with React.JS!
![Page 3: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/3.jpg)
![Page 4: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/4.jpg)
![Page 5: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/5.jpg)
![Page 6: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/6.jpg)
![Page 7: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/7.jpg)
![Page 8: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/8.jpg)
![Page 9: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/9.jpg)
LeapMotion V2
![Page 10: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/10.jpg)
LeapJS : WebSocket Communication
![Page 11: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/11.jpg)
Demo:Leap-Bone-Hands
https://github.com/lauramoore/leap-bone-hand
![Page 12: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/12.jpg)
Why React?
https://facebook.github.io/react/docs/displaying-data.html
“It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.”
FrameData
ViewState DOM
![Page 13: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/13.jpg)
Data Flow with Flux
https://facebook.github.io/flux/docs/overview.html
![Page 14: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/14.jpg)
DemoLeapJs – React - Flux
https://github.com/lauramoore/leap-react-noob/
![Page 15: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/15.jpg)
OOB : Components
● React-Object-Inspector
React-Bootstrap● Well● Label● Jumbotron
https://react-bootstrap.github.io/https://github.com/xyc/react-object-inspector
![Page 16: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/16.jpg)
React Win: Inline Styles
http://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices
![Page 17: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/17.jpg)
CSS … what were we thinking?
https://speakerdeck.com/vjeux/react-css-in-js
![Page 18: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/18.jpg)
![Page 19: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/19.jpg)
Flux Question : What is Leap.Controller?
? ?
![Page 20: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/20.jpg)
Controller → Store Data
![Page 21: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/21.jpg)
Store Exported API
![Page 22: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/22.jpg)
Model → View
![Page 23: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/23.jpg)
View Displays Model
![Page 24: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/24.jpg)
Leap Challenge : Hand List
Demo : Magic Swapping Hands?
![Page 25: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/25.jpg)
Challenge Accepted : Sorted Hand List
![Page 26: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/26.jpg)
Leap Challenge : Hand List
Demo : Sorted Hands Stable Behavior
![Page 27: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/27.jpg)
Leap Challenge : Space to Screen
Demo : Sorted Hands Stable Behavior
![Page 28: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/28.jpg)
Challenge Accepted : Normalized Point
![Page 29: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/29.jpg)
Challenge Accepted: Scale to View
![Page 30: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/30.jpg)
Demo : Normalized vs Not Normalized
![Page 31: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/31.jpg)
Demo : Memory Game
![Page 32: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/32.jpg)
Flux Challenge : Ignoring Events
![Page 33: LeapMotion for Web with React and Flux](https://reader033.vdocuments.site/reader033/viewer/2022051503/58a12d5f1a28abd34f8b4c49/html5/thumbnails/33.jpg)
Challenge Accepted:Immutable Stores (TBD)