Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

React in Native Apps - Meetup React - 20150409

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).

  • Inicia sesión para ver los comentarios

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

×