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.

Chain React 2018 - The state of React Native

648 views

Published on

Presentation about the internals of React Native, and the new architecture.

Delivered at Chain React 2018

Published in: Engineering
  • Be the first to comment

Chain React 2018 - The state of React Native

  1. 1. The state of React Native
  2. 2. `
  3. 3. `
  4. 4. `
  5. 5. `
  6. 6. `
  7. 7. `
  8. 8. 800M+ Monthly Users
  9. 9. 800M+ Monthly Users 100+ screens
  10. 10. Bridge Start Loading Network Content Tap
  11. 11. Bridge Start Loading Network Content Tap
  12. 12. Bridge Start Loading Network Content Tap
  13. 13. Bridge Start Loading Network Content Tap
  14. 14. Bridge Start Loading Network Content Tap
  15. 15. Bridge Start Loading Network Content Tap
  16. 16. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 />
  17. 17. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 />
  18. 18. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View>
  19. 19. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10])
  20. 20. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10]) onScroll = render([0..10])
  21. 21. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10]) onScroll = render([0..10]) onScroll = render([12..22])
  22. 22. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10]) onScroll = render([0..10]) onScroll = render([12..22]) onScroll = render([18..28])
  23. 23. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10]) onScroll = render([0..10]) onScroll = render([12..22]) onScroll = render([18..28])
  24. 24. <FlatList data={data} renderItem={i=><Text>{i}</Text>} 
 /> render({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> onScroll = (i) => render([i, i+10]) onScroll = render([0..10]) onScroll = render([12..22]) onScroll = render([18..28]) native [Sync] => react-native [Async]
  25. 25. const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View>
  26. 26. <App data={[0]}/> const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View>
  27. 27. <App data={[0]}/> const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App> <Text> 0 <View>
  28. 28. <App data={[0]}/> const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App> <Text> 0 <View> , 42]}/>
  29. 29. <App> <Text> 0 <View> const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App data={[0]}/>, 42]}/>
  30. 30. <App> <Text> 0 <View> <Text> 42 const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App data={[0]}/>, 42]}/>
  31. 31. <App> <Text> 0 <View> <Text> 42 const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App data={[0]}/>, 42]}/>, 21, 42]}/>
  32. 32. <App> <Text> 0 <View> <Text> 42 const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App data={[0]}/>, 42]}/>, 21, 42]}/>
  33. 33. <App> <Text> 0 <View> <Text> 42 <Text> 21 const App = ({data}) => 
 <View> 
 {data.map(i => 
 <Text key={i}>{i}</Text>) 
 } 
 </View> <App data={[0]}/>, 42]}/>, 21, 42]}/>
  34. 34. 0 21 42 <App> <Text> 0 <View> <Text> 42 <Text> 21
  35. 35. 0 21 42 <App> <Text> 0 <View> <Text> 42 <Text> 21
  36. 36. 0 21 42 JavaScript VM <App> <Text> 0 <View> <Text> 42 <Text> 21
  37. 37. 0 21 42 Android JavaScript VM <App> <Text> 0 <View> <Text> 42 <Text> 21
  38. 38. 0 21 42 Android JavaScript VM <App> <Text> 0 <View> <Text> 42 <Text> 21
  39. 39. 0 Android JavaScript VM <Text> 0 <App> <View>
  40. 40. 0 Android JavaScript VM <Text> 0 (1) Root <App> <View>
  41. 41. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText (1) Root <App> <View>
  42. 42. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) (3) RCTText (1) Root <App> <View>
  43. 43. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText (1) Root <App> <View>
  44. 44. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText (1) Root <App> <View>
  45. 45. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText (1) Root <App> <View> 3
  46. 46. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText (1) Root <App> <View> 4 1 3
  47. 47. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText (1) Root <App> <View> 4 1 3
  48. 48. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText createView(4, RCTView, ...) (4) RCTView (1) Root <App> <View> 4 1 3
  49. 49. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText createView(4, RCTView, ...) setChildren(4, [3]) (4) RCTView (1) Root <App> <View> 4 1 3
  50. 50. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText createView(4, RCTView, ...) setChildren(4, [3]) setChildren(5, [4]) (4) RCTView (1) Root <App> <View> 4 1 3
  51. 51. 0 Android JavaScript VM <Text> 0 createView(2, RCTRawText, ...) (2) RCTRawText createView(3, RCTText, ...) setChildren(3, [2]) (3) RCTText createView(4, RCTView, ...) setChildren(4, [3]) setChildren(5, [4]) ... (4) RCTView (1) Root <App> <View> 4 1 3
  52. 52. 0 42 Android JavaScript VM <Text> 0 (2) RCTRawText (3) RCTText (4) RCTView <App> <View> 4 1 3 (1) Root
  53. 53. 0 42 Android JavaScript VM <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  54. 54. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) (2) RCTRawText (3) RCTText (6) RCTRawText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  55. 55. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  56. 56. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) setChildren(7, [6]) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  57. 57. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) setChildren(7, [6]) manageChildren(4, {add:7 @ 1}) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  58. 58. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) setChildren(7, [6]) manageChildren(4, {add:7 @ 1}) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  59. 59. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) setChildren(7, [6]) manageChildren(4, {add:7 @ 1}) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root
  60. 60. 0 42 Android JavaScript VM <Text> 0 <Text> 42 createView(6, RCTRawText, ...) createView(7, RCTText, ...) setChildren(7, [6]) manageChildren(4, {add:7 @ 1}) (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText (4) RCTView <App> <View> 4 1 3 7 (1) Root UI Thread
  61. 61. 0 42 <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <View> (1) Root 4 1 3 7 (4) RCTView Shadow Tree JavaScript VM
  62. 62. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <View> (1) Root 4 1 3 7 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 JavaScript VM
  63. 63. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 JavaScript VM
  64. 64. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) JavaScript VM
  65. 65. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  66. 66. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  67. 67. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 CSS createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  68. 68. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  69. 69. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  70. 70. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  71. 71. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  72. 72. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) JavaScript VM
  73. 73. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) setChildren(9, [8]) JavaScript VM
  74. 74. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) setChildren(9, [8]) manageChildren(4, {add:9 @ 1}) + JavaScript VM
  75. 75. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) setChildren(9, [8]) manageChildren(4, {add:9 @ 1}) + JavaScript VM
  76. 76. 0 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (7) ReactTextView text=42 (9) createView(8, RCTRawText, ...) createView(9, RCTText, ...) setChildren(9, [8]) manageChildren(4, {add:9 @ 1}) + JavaScript VM
  77. 77. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  78. 78. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  79. 79. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  80. 80. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  81. 81. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  82. 82. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  83. 83. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  84. 84. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  85. 85. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  86. 86. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  87. 87. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  88. 88. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  89. 89. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  90. 90. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 dispatchUpdates() JavaScript VM
  91. 91. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  92. 92. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  93. 93. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  94. 94. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  95. 95. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  96. 96. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  97. 97. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  98. 98. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  99. 99. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  100. 100. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  101. 101. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Threads JavaScript VM
  102. 102. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  103. 103. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 JavaScript VM
  104. 104. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  105. 105. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  106. 106. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  107. 107. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  108. 108. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable Serialized Async JavaScript VM
  109. 109. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable Serialized Async JavaScript VM
  110. 110. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  111. 111. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  112. 112. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  113. 113. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  114. 114. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  115. 115. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM
  116. 116. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable Java JavaScript VM
  117. 117. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable C++Java JavaScript VM
  118. 118. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable C++Java JavaScript VM Yoga (C++)
  119. 119. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable C++Java JavaScript VM Yoga (C++) C++
  120. 120. 0 21 42 (1) Root View <App> UI Thread <Text> 0 <Text> 42 (2) RCTRawText (3) RCTText (6) RCTRawText (7) RCTText <Text> 21 <View> (8) RCTRawText (9) RCTText (1) Root 4 1 3 79 (4) RCTView Shadow Tree (3) ReactTextView text=0 (9) ReactTextView text=21 (7) ReactTextView text=42 Immutable JavaScript VM Yoga (C++)
  121. 121. <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> OLD
  122. 122. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> OLD
  123. 123. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R OLD
  124. 124. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') OLD
  125. 125. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') state.text ='R' OLD
  126. 126. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') state.text ='R' OLD
  127. 127. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') state.text ='R' OLD
  128. 128. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') E state.text ='R' OLD
  129. 129. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') E onChangeText('RE') state.text ='R' OLD
  130. 130. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') setValue('R') E onChangeText('RE') setValue('RE') state.text ='R' state.text ='RE' OLD
  131. 131. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') setValue('RE') state.text ='R' state.text ='RE' OLD
  132. 132. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') setValue('RE') state.text ='R' state.text ='RE' OLD
  133. 133. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') RE setValue('RE') state.text ='R' state.text ='RE' OLD
  134. 134. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') RE setValue('RE') E state.text ='R' state.text ='RE' OLD
  135. 135. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') RE setValue('RE') E state.text ='R' state.text ='RE' debounce by 100 OLD
  136. 136. <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> NEW
  137. 137. <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> NEW
  138. 138. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> NEW
  139. 139. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R NEW
  140. 140. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') NEW
  141. 141. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') state.text ='R' NEW
  142. 142. R <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') state.text ='R' NEW
  143. 143. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') state.text ='R' NEW
  144. 144. RE <TextInput 
 onChangeText={(text) => this.setState({text})} 
 value={this.state.text} 
 /> R onChangeText('R') R setValue('R') E onChangeText('RE') RE setValue('RE') E state.text ='R' state.text ='RE' NEW
  145. 145. in Native UI
  146. 146. in Native UI Embedding React Native Views
  147. 147. in Native UI Embedding React Native Views
  148. 148. in Native UI Embedding React Native Views
  149. 149. (New)in Native UI Embedding React Native Views
  150. 150. React Native Goal: No change™ to the way React Native apps are written
  151. 151. React Native Goal: No change™ to the way React Native apps are written
  152. 152. @nparashuram
  153. 153. @nparashuram
  154. 154. Community
  155. 155. Community • Slimmer JavaScript, integrates better with brownfield apps
  156. 156. Community • Slimmer JavaScript, integrates better with brownfield apps • Swappable Packager/Bundler and JavaScript VM
  157. 157. Community • Slimmer JavaScript, integrates better with brownfield apps • Swappable Packager/Bundler and JavaScript VM • Better documentation
  158. 158. Community • Slimmer JavaScript, integrates better with brownfield apps • Swappable Packager/Bundler and JavaScript VM • Better documentation • Fewer breaking releases, easy to upgrade
  159. 159. Community • Slimmer JavaScript, integrates better with brownfield apps • Swappable Packager/Bundler and JavaScript VM • Better documentation • Fewer breaking releases, easy to upgrade • Monthly technical meetings with top contributors

×