react in native apps - meetup react - 20150409

Warren Seineaerys

warren@aerys.in

@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

PDF

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.

Questions ?!

warren@aerys.in

@warrenseine