instrumentation talk

Download Instrumentation talk

Post on 29-Nov-2014

1.343 views

Category:

Engineering

0 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. Rafael Martins Software Engineer http://thesn.it @snit_ram
  • 2. Snit Software Engineer http://thesn.it @snit_ram
  • 3. Instrumentation and React
  • 4. Learn Build Measure
  • 5. Learn Build Measure
  • 6. Click { link: "Mail", source: "toolbar" }
  • 7. Click { link: "Monitoring your credit...", source: "all news" }
  • 8. Click { link: "Monitoring your credit...", source: "all news" } ?
  • 9. PageViews Clicks Context & Structure
  • 10. PageViews
  • 11. PageViews Toolbar
  • 12. PageViews Menu
  • 13. PageViews Main
  • 14. PageViews Sidebar
  • 15. PageViews Main
  • 16. PageViews Featured
  • 17. PageViews Tabs
  • 18. PageViews
  • 19. PageViews Page Toolbar Menu Main Sidebar Search Link Link Featured Tabs Link Link Link
  • 20. Clicks
  • 21. Clicks
  • 22. Clicks 1st link
  • 23. Clicks 1st link 2nd news
  • 24. Clicks 1st link 2nd news 1st tab
  • 25. Clicks 1st link 2nd news 1st tab Tabs
  • 26. Clicks 1st link 2nd news 1st tab Tabs Main
  • 27. Clicks 1st link 2nd news 1st tab Tabs Main
  • 28. Main Tabs 1st tab 2nd news 1st link Clicks
  • 29. Main Tabs 1st tab 2nd news 1st link Event Beacon
  • 30. Data + state Main Tabs 1st tab 2nd news 1st link Event Beacon Data + state Data + state Data + state Data + state
  • 31. Data + state Main Tabs 1st tab {title: "All News"} 2nd news 1st link Event Beacon Data + state Data + state Data + state
  • 32. React Props Strategies DOM Tree i13n Tree 1 2 3
  • 33. DOM 1 Tree Strategies
  • 34. Dom Tree nav body div a span b div a span b div div div div a a a
  • 35. Dom Tree nav body div a span b div a span b div div div div a a a
  • 36. Dom Tree Query & Traverse DOM is slow DOM vs React Virtual DOM Write i13n data to DOM
  • 37. React Props DOM Tree i13n Tree 2 3 Strategies
  • 38. React 2 Props Strategies
  • 39. React Props Menu App Link Link Main Featured Tabs Link Link ...
  • 40. React Props Menu Link Link Tabs Link ... App Main Featured Link
  • 41. React Props App Main Featured Link
  • 42. React Props App Main Featured Link
  • 43. React Props App Main Featured Link
  • 44. React Props App Main Featured Link
  • 45. React Props App Main Featured Link
  • 46. React Props media object
  • 47. React Props Repetition in all components Error prone Visual / non-instrumented components
  • 48. React Props DOM Tree i13n 3 Tree Strategies
  • 49. i13n 3 Tree Strategies
  • 50. i13n node
  • 51. i13n node

Recommended

View more >