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 Native - Fabric review-2018-07-25

2,926 views

Published on

React Native Review for the new architecture.

Video at https://www.facebook.com/hramos/videos/10101317533036249/

Published in: Technology
  • Login to see the comments

React Native - Fabric review-2018-07-25

  1. 1. July 25, 2018 React Fabric Kevin Gozali - React Native at Facebook
  2. 2. AGENDA Background Solution Setup Plans Some Details
  3. 3. BACKGROUND How does React Native work today?
  4. 4. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  5. 5. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  6. 6. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  7. 7. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  8. 8. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  9. 9. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  10. 10. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  11. 11. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  12. 12. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  13. 13. BACKGROUND SHADOW THREADMAIN THREAD JS THREAD
  14. 14. BACKGROUND What types of native interoperability exist today?
  15. 15. NATIVE INTEROPERABILITY Application Logic (NativeModule) Alert PushNotification
  16. 16. NATIVE INTEROPERABILITY UIKit & Android Views (ViewManager) <View> <Text> <Image> <ScrollView> <TextInput> ...
  17. 17. NATIVE INTEROPERABILITY ComponentKit & Litho within React Native
  18. 18. NATIVE INTEROPERABILITY React Native Embedded within Native RCTSurface
 Native Navigation
  19. 19. BACKGROUND What is the problem with React Native?
  20. 20. THREADING MODEL Cannot reliably block on the JavaScript Main Thread Gesture Responder System Case Study Back Button Case Study
  21. 21. THREADING MODEL Layout must be computed on the shadow thread. Cannot synchronize layout between frameworks.
  22. 22. HEAVY BRIDGE Lifecycle of each NativeModule is tied to the bridge.
  23. 23. HEAVY BRIDGE JavaScript execution is blocked on native initialization of NativeModule, ViewManager, etc.
  24. 24. HEAVY BRIDGE All bridge traffic is serialized and copied.
  25. 25. AGENDA Background Solution Setup Plans Some Details
  26. 26. FABRIC Switch to React async mode to interrupt work. Switch to immutable shadow nodes. Memoization with shouldComponentUpdate. Enable recomputing layout on any thread.
  27. 27. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  28. 28. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  29. 29. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  30. 30. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  31. 31. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  32. 32. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  33. 33. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  34. 34. FABRIC SHADOW THREADMAIN THREAD JS THREAD
  35. 35. FABRIC MAIN THREAD JS THREADSHADOW THREAD
  36. 36. FABRIC (H2 2018) MAIN THREAD JS THREADANY THREAD
  37. 37. LIGHTER Lifecycle of NativeClass tied to JavaScript references. Initialization of NativeClass instances are lazy. Code generation replaces runtime initialization. Reduce serializing and copying of data.
  38. 38. AGENDA Background Solution Setup Plans Some Details
  39. 39. FABRIC SETUP Enable toggling Fabric per surface. Pull in ReactFabricRenderer from React Core.
  40. 40. H1 2018 - SINGLE THREADED FABRIC Implement ReactFabric APIs. Core Components (View, Text, Image, ScrollView) Reconciliation & Diffing Mounting Layer to Native UI Views Event System (Layout, Touches, Scrolling)
  41. 41. EVALUATION PLAN Time to Interaction (TTI) Crash Rate Memory usage for immutable shadow nodes
  42. 42. C++ Core H1 2018: Evolve Android. Rewrite iOS. H2 2018: C++ Core in Android, Parity, Perf.
  43. 43. AGENDA Background Solution Setup Plans Some Details
  44. 44. NEXT STEPS Feature parity for core components. Test of Fabric on more surfaces. Enable multi-threaded rendering.
  45. 45. LONG TERM PLANS Completely replace existing React Native framework. Interop with other UI framework's scheduler. Open source compatibility.
  46. 46. AGENDA Background Solution Setup Plans Some Details
  47. 47. RUNTIME SETUP React Fabric Renderer (JS) FabricUIManager (JS, C++) ComponentDescriptor (C++) Platform-specific Component Impl (ObjC++, Java) RCTSurface (ObjC++, Java)
  48. 48. FLEXIBLE ASYNC FIBER (WORK) PRIORITIES Sync Sync Batched (Work) Async (Interactive) Async Batched (Deferred)
  49. 49. TENTATIVE AREAS OF CHANGES Debugger & Synchronous Calls to Native ViewManager Native Code
  50. 50. CURRENT FOCUS: PARITY C++ Core in Android TextInput setNativeProps() Animation Migration

×