Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React in Native Apps - Meetup React - 20150409

28,154 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
  • Be the first to comment

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

×