instrumentation talk
DESCRIPTION
Slides from my presentation about Instrumentation in React components at Yahoo!TRANSCRIPT
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"}
?
ClicksPageViews
Context & Structure
PageViews
PageViews
Toolbar
PageViews
Menu
PageViewsMain
PageViewsSidebar
PageViewsMain
PageViewsFeatured
PageViews
Tabs
PageViews
PageViews
Toolbar MainMenu
Page
Sidebar
Search Link Featured TabsLink
Link Link
Link
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
Clicks
1st link
2nd news
1st tab
Tabs
Main
Clicks
1st link
2nd news
1st tab
Tabs
Main
Event Beacon
Data + state
1st link
2nd news
1st tab
Tabs
Main
Event Beacon
Data + state
Data + state
Data + state
Data + state
Data + state
1st link
2nd news
Tabs
Main
Event Beacon
Data + state
Data + state
Data + state
1st tab {title: "All News"}
React Props
DOM Tree
i13n Tree2 31
Strategies
DOM Tree1
Strategies
Dom Tree
nav
body
div
a
span b
div
a
span b
div
div div div
a aa
Dom Tree
nav
body
div
a
span b
div
a
span b
div
div div div
a aa
• Query & Traverse DOM is slow
• DOM vs React Virtual DOM
• Write i13n data to DOM
Dom Tree
React Props
DOM Tree
i13n Tree2 3
Strategies
React Props2
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="2" />
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" />
React Props
media object
• Repetition in all components
• Error prone
• Visual / non-instrumented components
React Props
React Props
DOM Tree
i13n Tree3
Strategies
i13n Tree3
Strategies
i13n node
i13n node
i13n node
i13n node
i13n node
i13n node
children
i13n node
i13n node
i13n node
i13n node
childrenparent
Data + state
1st link
2nd news
1st tab
Tabs
Main
Event Beacon
Data + state
Data + state
Data + state
Data + state
i13n node
i13n node
i13n node
i13n node
childrenparent
i13n node
i13n node
i13n node
i13n node
childrenparent
i13n node
i13n node
i13n node
i13n node
childrenparent
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)
App i13nNode
i13n Root
App App i13nNode
i13n Root
i13n Root
App i13nNode
Menu
App
i13n Root
App i13nNode
Menu
appI13nNode.append(this)
App
i13n Root
App i13nNode
Menu
appI13nNode.append(this)
Menu i13nNode
App
i13n Root
App i13nNode
Menu Menu i13nNodeMain
App
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1
menuI13nNode.append(this)
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1 Link1 i13nNode
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1 Link1 i13nNodeLink2 Link2
i13nNode
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1 Link1 i13nNodeLink2 Link2
i13nNode
i13n Root
App i13nNode
Menu Menu i13nNodeMain Main
i13nNode
App
Link1 Link1 i13nNodeLink2 Link2
i13nNodeLink3 Link3 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
News
Media Object
Image1 Link1
Media Object
Image2 Link2
News
Image1 Link1 Image2 Link2
Components Tree i13n Tree
• Automatic tree from mixin
• Lightweight objects. Fast to traverse
• Components customize the beacon
• Visual / non-instrumented components
I13n Tree
Mixin +
Contexti13n Tree
Questions?