react in native apps - meetup react - 20150409
TRANSCRIPT
Warren Seineaerys
@warrenseine
2015/04/09
École 42
React.js Paris
React in native apps
Your 3D models. Everywhere.
Network drive, web or native apps
Versioning
Access control & encryptionUpload to the cloud
Optimize
100% automated
50+ supported formats
Optimize for mobile, web…
Stream
Up to 200x faster delivery
Progressive level of detail
Enterprise-ready
Visualize & Collaborate
Mobile, web & desktop
Instant share
Web embeds
3D Annotations
Formatted text & links
Audio, photos & videos
Web / iframes
3D Annotations
Integrated Word-like editor
100% real-time & collaborative
Software Development Kit
100% x-platform native code
Free & open source
Open source 3D file format
Web, desktop, mobile & server
Business-ready
3D 2D
Bridge
Why React?
Platform-specific DOM wrap
Two-way sendMessage()
Safe eval()
Let’s see some code
How do we place annotations over the 3D model?
0. Stack
Meteor (to sync data)
Reflux (for data flow/store)
React (for UI rendering)
Minko (for 3D rendering and bridge)
1. Retrieving data (JS)
AnnotationStore subscribes to Meteor
Meteor sends data in JSON (id, node, position)
AnnotationStore receives annotations
AnnotationStore forwards « addAnnotations » to Minko
2. Updating data (C++)
AnnotationsScript listens to the overlay
AnnotationsScript receives a message « addAnnotations »
AnnotationsScript updates the local list
Annotations are projected on screen space if changed Discarding if out of viewport
Minko sends a message to the overlay « annotationUpdatePositions »
3. Positionning annotations (JS)
React components listens to Reflux stores
AnnotationStore listens to « annotationUpdatePositions »
AnnotationStore updates positions Triggering only if changed
Annotation listens to AnnotationStore
Updating state (React magic!)
4. Ordering annotations (JS)
Re-ordering annotations in Z Triggering if changed (rare)
Annotations sorts DOM tree No z-index
Sorting does not imply re-rendering the annotation Components have unique React keys
So that’s why.
