React Native Review for the new architecture. Video at https://www.facebook.com/hramos/videos/10101317533036249/

1. July 25, 2018
React Fabric
Kevin Gozali - React Native at Facebook

2. AGENDA
Background
Solution
Setup
Plans
Some Details

3. BACKGROUND
How does React Native work today?

4. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

5. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

6. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

7. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

8. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

9. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

10. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

11. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

12. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

13. BACKGROUND
SHADOW THREADMAIN THREAD JS THREAD

14. BACKGROUND
What types of native interoperability exist today?

15. NATIVE INTEROPERABILITY
Application Logic (NativeModule)
Alert
PushNotification

16. NATIVE INTEROPERABILITY
UIKit & Android Views (ViewManager)
<View> <Text> <Image>
<ScrollView> <TextInput>
...

17. NATIVE INTEROPERABILITY
ComponentKit & Litho within React Native

18. NATIVE INTEROPERABILITY
React Native Embedded within Native
RCTSurface
Native Navigation

19. BACKGROUND
What is the problem with React Native?

20. THREADING MODEL
Cannot reliably block on the JavaScript Main Thread
Gesture Responder System Case Study
Back Button Case Study

21. THREADING MODEL
Layout must be computed on the shadow thread.
Cannot synchronize layout between frameworks.

22. HEAVY BRIDGE
Lifecycle of each NativeModule is tied to the bridge.

23. HEAVY BRIDGE
JavaScript execution is blocked on native initialization
of NativeModule, ViewManager, etc.

24. HEAVY BRIDGE
All bridge traffic is serialized and copied.

25. AGENDA
Background
Solution
Setup
Plans
Some Details

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. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

28. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

29. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

30. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

31. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

32. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

33. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

34. FABRIC
SHADOW THREADMAIN THREAD JS THREAD

35. FABRIC
MAIN THREAD JS THREADSHADOW THREAD

36. FABRIC (H2 2018)
MAIN THREAD JS THREADANY THREAD

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. AGENDA
Background
Solution
Setup
Plans
Some Details

39. FABRIC SETUP
Enable toggling Fabric per surface.
Pull in ReactFabricRenderer from React Core.

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. EVALUATION PLAN
Time to Interaction (TTI)
Crash Rate
Memory usage for immutable shadow nodes

42. C++ Core
H1 2018: Evolve Android. Rewrite iOS.
H2 2018: C++ Core in Android, Parity, Perf.

43. AGENDA
Background
Solution
Setup
Plans
Some Details

44. NEXT STEPS
Feature parity for core components.
Test of Fabric on more surfaces.
Enable multi-threaded rendering.

45. LONG TERM PLANS
Completely replace existing React Native framework.
Interop with other UI framework's scheduler.
Open source compatibility.

46. AGENDA
Background
Solution
Setup
Plans
Some Details

47. RUNTIME SETUP
React Fabric Renderer (JS)
FabricUIManager (JS, C++)
ComponentDescriptor (C++)
Platform-specific Component Impl (ObjC++, Java)
RCTSurface (ObjC++, Java)

48. FLEXIBLE ASYNC FIBER (WORK) PRIORITIES
Sync
Sync Batched (Work)
Async (Interactive)
Async Batched (Deferred)

49. TENTATIVE AREAS OF CHANGES
Debugger & Synchronous Calls to Native
ViewManager Native Code

50. CURRENT FOCUS: PARITY
C++ Core in Android
TextInput
setNativeProps()
Animation
Migration