React in Native Apps - Meetup React - 20150409

24,093 views

Published on

Minko is a platform to display, share and interact with 3D content from anywhere, whether you're on a web browser, a workstation, or a device that fits in your pocket. In order to reach those targets with the team we have, we had to go with a cross-platform, hybrid solution that would enable fast UI development with native 3D performances. So we built one, on top of many open source projects, using C++. This talk will discuss our approach for building cross-platform HTML5 interfaces, with a C++/JS bridge to bind DOM APIs, and the tricks we use to make them responsive (spoiler: React is one of them).

Published in: Software
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
24,093
On SlideShare
0
From Embeds
0
Number of Embeds
19,180
Actions
Shares
0
Downloads
30
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • AnnotationStore.jsx:326
    AnnotationStore.jsx:480
    AnnotationStore.jsx:581
  • AnnotationsScript.cpp:81
    AnnotationsScript.cpp:143
    AnnotationsScript.cpp:216
    AnnotationsScript.cpp:346
    AnnotationsScript.cpp:353
    AnnotationsScript.cpp:408
  • AnnotationStore.jsx:42
    AnnotationStore.jsx:706
    Annotation.jsx:22
    Annotation.jsx:37
    Annotation.jsx:48
  • AnnotationStore.jsx:746
    AnnotationStore.jsx:749
    Annotations.jsx:59
    Annotations.jsx:111

  • React in Native Apps - Meetup React - 20150409

    1. 1. Warren Seine aerys warren@aerys.in @warrenseine 2015/04/09 École 42 React.js Paris React in native apps
    2. 2. Your 3D models. Everywhere.
    3. 3.  Network drive, web or native apps  Versioning  Access control & encryption Upload to the cloud
    4. 4. Optimize  100% automated  50+ supported formats  Optimize for mobile, web…
    5. 5. Stream  Up to 200x faster delivery  Progressive level of detail  Enterprise-ready
    6. 6. Visualize & Collaborate  Mobile, web & desktop  Instant share  Web embeds
    7. 7. 3D Annotations  Formatted text & links  Audio, photos & videos  PDF  Web / iframes
    8. 8. 3D Annotations  IntegratedWord-like editor  100% real-time & collaborative
    9. 9. Software Development Kit  100% x-platform native code  Free & open source  Open source 3D file format  Web, desktop, mobile & server  Business-ready
    10. 10. 3D 2D
    11. 11. Bridge Why React?
    12. 12.  Platform-specific DOM wrap  Two-way sendMessage()  Safe eval()
    13. 13. Let’s see some code  How do we place annotations over the 3D model?
    14. 14. 0. Stack  Meteor (to sync data)  Reflux (for data flow/store)  React (for UI rendering)  Minko (for 3D rendering and bridge)
    15. 15. 1. Retrieving data (JS)  AnnotationStore subscribes to Meteor  Meteor sends data in JSON (id, node, position)  AnnotationStore receives annotations  AnnotationStore forwards « addAnnotations » to Minko
    16. 16. 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 »
    17. 17. 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!)
    18. 18. 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
    19. 19. So that’s why.
    20. 20. Questions ?!  warren@aerys.in  @warrenseine

    ×