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.
Rafael Martins 
Software Engineer 
http://thesn.it @snit_ram
Snit 
Software Engineer 
http://thesn.it @snit_ram
Instrumentation 
and React
Learn 
Build 
Measure
Learn 
Build 
Measure
Click 
{ 
link: "Mail", 
source: "toolbar" 
}
Click 
{ 
link: "Monitoring your credit...", 
source: "all news" 
}
Click 
{ 
link: "Monitoring your credit...", 
source: "all news" 
} 
?
PageViews Clicks 
Context & Structure
PageViews
PageViews 
Toolbar
PageViews 
Menu
PageViews 
Main
PageViews 
Sidebar
PageViews 
Main
PageViews 
Featured
PageViews 
Tabs
PageViews
PageViews 
Page 
Toolbar Menu Main 
Sidebar 
Search 
Link Link Featured Tabs 
Link Link 
Link
Clicks
Clicks
Clicks 
1st link
Clicks 
1st link 2nd news
Clicks 
1st link 2nd news 1st tab
Clicks 
1st link 2nd news 1st tab Tabs
Clicks 
1st link 2nd news 1st tab Tabs Main
Clicks 
1st link 2nd news 1st tab Tabs Main
Main 
Tabs 
1st tab 
2nd news 
1st link 
Clicks
Main 
Tabs 
1st tab 
2nd news 
1st link 
Event 
Beacon
Data + state 
Main 
Tabs 
1st tab 
2nd news 
1st link 
Event 
Beacon 
Data + state 
Data + state 
Data + state 
Data + sta...
Data + state 
Main 
Tabs 
1st tab {title: "All News"} 
2nd news 
1st link 
Event 
Beacon 
Data + state 
Data + state 
Data...
React 
Props 
Strategies 
DOM 
Tree 
i13n 
Tree 
1 2 3
DOM 
1 
Tree 
Strategies
Dom Tree 
nav 
body 
div 
a 
span b 
div 
a 
span b 
div 
div div div 
a a a
Dom Tree 
nav 
body 
div 
a 
span b 
div 
a 
span b 
div 
div div div 
a a a
Dom Tree 
• Query & Traverse DOM is slow 
• DOM vs React Virtual DOM 
• Write i13n data to DOM
React 
Props 
DOM 
Tree 
i13n 
Tree 
2 3 
Strategies
React 
2 
Props 
Strategies
React Props 
Menu 
App 
Link Link 
Main 
Featured Tabs 
Link Link ...
React Props 
Menu 
Link Link Tabs 
Link ... 
App 
Main 
Featured 
Link
React Props 
App 
Main 
Featured 
Link
React Props 
App 
Main 
Featured 
Link 
<App />
React Props 
App 
Main 
Featured 
Link 
<App /> 
<Main level="1" pos="2" />
React Props 
App 
Main 
Featured 
Link 
<App /> 
<Main level="1" pos="2" /> 
<Featured level="2" pos="1" l1="Main" l1Pos="...
React Props 
App 
Main 
Featured 
Link 
<App /> 
<Main level="1" pos="2" /> 
<Featured level="2" pos="1" l1="Main" l1Pos="...
React Props 
media object
React Props 
• Repetition in all components 
• Error prone 
• Visual / non-instrumented components
React 
Props 
DOM 
Tree 
i13n 
3 
Tree 
Strategies
i13n 
3 
Tree 
Strategies
i13n 
node
i13n 
node
i13n 
node 
i13n 
node 
i13n 
node 
i13n 
node 
children
i13n 
node 
i13n 
node 
i13n 
node 
i13n 
node 
children 
parent
Data + state 
Main 
Tabs 
1st tab 
2nd news 
1st link 
Event 
Beacon 
Data + state 
Data + state 
Data + state 
Data + sta...
i13n 
node 
i13n 
node 
i13n 
node 
i13n 
node 
children 
parent
i13n 
node 
i13n 
node 
i13n 
node 
i13n 
node 
children 
parent
i13n 
node 
i13n 
node 
i13n 
node 
i13n 
node 
children 
parent 
React 
Component 
React 
Component
Mixin 
+ 
Context
Menu 
App 
Link1 Link2 
Main 
Link3
i13n 
Root
App 
i13n 
Root
App 
i13n 
Root
App 
i13n 
Root 
i13nRoot.append(this)
App 
i13nRoot.append(this) 
i13n 
Root 
App 
i13nNode
App 
i13n 
Root 
App 
i13nNode
i13n 
Root 
App 
i13nNode 
App 
Menu
i13n 
Root 
App 
i13nNode 
App 
Menu 
appI13nNode.append(this)
i13n 
Root 
App 
i13nNode 
Menu 
appI13nNode.append(this) 
Menu 
i13nNode 
App
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
App
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1 
menuI13nNode.append(this)
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1 
Link1 
i13nNode
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1 
Link1 
i13nNode 
Link2 
Link2 
i13nNode
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1 
Link1 
i13nNode 
Link2 
Link2 
i13nNode
i13n 
Root 
App 
i13nNode 
Menu 
Menu 
i13nNode 
Main 
Main 
i13nNode 
App 
Link1 
Link1 
i13nNode 
Link2 
Link2 
i13nNode...
Visual components 
media object
Visual components 
News 
Media 
Object 
Image1 Link1 
Media 
Object 
Image2 Link2
Visual components 
News 
Media 
Object 
Image1 Link1 
Media 
Object 
Image2 Link2
Visual components 
Components Tree i13n Tree 
News 
Media 
Object 
Image1 Link1 
Media 
Object 
Image2 Link2 
News 
Image1...
I13n Tree 
• Automatic tree from mixin 
• Lightweight objects. Fast to traverse 
• Components customize the beacon 
• Visu...
Mixin 
+ 
Context 
i13n 
Tree
Questions?
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Instrumentation talk
Próxima SlideShare
Cargando en…5
×

Instrumentation talk

3.554 visualizaciones

Publicado el

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

Publicado en: Ingeniería
  • Sé el primero en comentar

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?

×