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.

Instrumentation talk

3,550 views

Published on

Slides from my presentation about Instrumentation in React components at Yahoo!

Published in: Engineering

Instrumentation talk

  1. 1. Rafael Martins Software Engineer http://thesn.it @snit_ram
  2. 2. Snit Software Engineer http://thesn.it @snit_ram
  3. 3. Instrumentation and React
  4. 4. Learn Build Measure
  5. 5. Learn Build Measure
  6. 6. Click { link: "Mail", source: "toolbar" }
  7. 7. Click { link: "Monitoring your credit...", source: "all news" }
  8. 8. Click { link: "Monitoring your credit...", source: "all news" } ?
  9. 9. PageViews Clicks Context & Structure
  10. 10. PageViews
  11. 11. PageViews Toolbar
  12. 12. PageViews Menu
  13. 13. PageViews Main
  14. 14. PageViews Sidebar
  15. 15. PageViews Main
  16. 16. PageViews Featured
  17. 17. PageViews Tabs
  18. 18. PageViews
  19. 19. PageViews Page Toolbar Menu Main Sidebar Search Link Link Featured Tabs Link Link Link
  20. 20. Clicks
  21. 21. Clicks
  22. 22. Clicks 1st link
  23. 23. Clicks 1st link 2nd news
  24. 24. Clicks 1st link 2nd news 1st tab
  25. 25. Clicks 1st link 2nd news 1st tab Tabs
  26. 26. Clicks 1st link 2nd news 1st tab Tabs Main
  27. 27. Clicks 1st link 2nd news 1st tab Tabs Main
  28. 28. Main Tabs 1st tab 2nd news 1st link Clicks
  29. 29. Main Tabs 1st tab 2nd news 1st link Event Beacon
  30. 30. Data + state Main Tabs 1st tab 2nd news 1st link Event Beacon Data + state Data + state Data + state Data + state
  31. 31. Data + state Main Tabs 1st tab {title: "All News"} 2nd news 1st link Event Beacon Data + state Data + state Data + state
  32. 32. React Props Strategies DOM Tree i13n Tree 1 2 3
  33. 33. DOM 1 Tree Strategies
  34. 34. Dom Tree nav body div a span b div a span b div div div div a a a
  35. 35. Dom Tree nav body div a span b div a span b div div div div a a a
  36. 36. Dom Tree • Query & Traverse DOM is slow • DOM vs React Virtual DOM • Write i13n data to DOM
  37. 37. React Props DOM Tree i13n Tree 2 3 Strategies
  38. 38. React 2 Props Strategies
  39. 39. React Props Menu App Link Link Main Featured Tabs Link Link ...
  40. 40. React Props Menu Link Link Tabs Link ... App Main Featured Link
  41. 41. React Props App Main Featured Link
  42. 42. React Props App Main Featured Link <App />
  43. 43. React Props App Main Featured Link <App /> <Main level="1" pos="2" />
  44. 44. React Props App Main Featured Link <App /> <Main level="1" pos="2" /> <Featured level="2" pos="1" l1="Main" l1Pos="2" />
  45. 45. React Props App Main Featured Link <App /> <Main level="1" pos="2" /> <Featured level="2" pos="1" l1="Main" l1Pos="2" /> <Link level="3" pos="1" l1="Main" l1Pos="2" l2="Featured" l2Pos="1" />
  46. 46. React Props media object
  47. 47. React Props • Repetition in all components • Error prone • Visual / non-instrumented components
  48. 48. React Props DOM Tree i13n 3 Tree Strategies
  49. 49. i13n 3 Tree Strategies
  50. 50. i13n node
  51. 51. i13n node
  52. 52. i13n node i13n node i13n node i13n node children
  53. 53. i13n node i13n node i13n node i13n node children parent
  54. 54. Data + state Main Tabs 1st tab 2nd news 1st link Event Beacon Data + state Data + state Data + state Data + state
  55. 55. i13n node i13n node i13n node i13n node children parent
  56. 56. i13n node i13n node i13n node i13n node children parent
  57. 57. i13n node i13n node i13n node i13n node children parent React Component React Component
  58. 58. Mixin + Context
  59. 59. Menu App Link1 Link2 Main Link3
  60. 60. i13n Root
  61. 61. App i13n Root
  62. 62. App i13n Root
  63. 63. App i13n Root i13nRoot.append(this)
  64. 64. App i13nRoot.append(this) i13n Root App i13nNode
  65. 65. App i13n Root App i13nNode
  66. 66. i13n Root App i13nNode App Menu
  67. 67. i13n Root App i13nNode App Menu appI13nNode.append(this)
  68. 68. i13n Root App i13nNode Menu appI13nNode.append(this) Menu i13nNode App
  69. 69. i13n Root App i13nNode Menu Menu i13nNode Main App
  70. 70. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App
  71. 71. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App
  72. 72. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1
  73. 73. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 menuI13nNode.append(this)
  74. 74. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode
  75. 75. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode
  76. 76. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode
  77. 77. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode Link3 Link3 i13nNode
  78. 78. Visual components media object
  79. 79. Visual components News Media Object Image1 Link1 Media Object Image2 Link2
  80. 80. Visual components News Media Object Image1 Link1 Media Object Image2 Link2
  81. 81. Visual components Components Tree i13n Tree News Media Object Image1 Link1 Media Object Image2 Link2 News Image1 Link1 Image2 Link2
  82. 82. I13n Tree • Automatic tree from mixin • Lightweight objects. Fast to traverse • Components customize the beacon • Visual / non-instrumented components
  83. 83. Mixin + Context i13n Tree
  84. 84. Questions?

×