Instrumentation talk

Download Instrumentation talk

Post on 29-Nov-2014

1.341 views

Category:

Engineering

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

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