Instrumentation and React Architecture

•

9 gostaram•4,098 visualizações

This document discusses instrumentation and React for tracking user interactions on web pages. It proposes using React components with a mixin that automatically generates an instrumentation tree mirroring the component tree. Each component can customize the data sent on user interactions. This avoids issues like repetition in manually defining instrumentation properties and allows tracking interactions with visual/non-instrumented components.

Engenharia

Rafael Martins
Software Engineer
http://thesn.it @snit_ram

Snit
Software Engineer
http://thesn.it @snit_ram

Click
{
link: "Mail",
source: "toolbar"
}

Click
{
link: "Monitoring your credit...",
source: "all news"
}

PageViews
Page
Toolbar Menu Main
Sidebar
Search
Link Link Featured Tabs
Link Link
Link

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 + state

Data + state
Main
Tabs
1st tab {title: "All News"}
2nd news
1st link
Event
Beacon
Data + state
Data + state
Data + state

React
Props
Strategies
DOM
Tree
i13n
Tree
1 2 3

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 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
<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
• Repetition in all components
• Error prone
• Visual / non-instrumented components

React
Props
DOM
Tree
i13n
3
Tree
Strategies

i13n
node
i13n
node
i13n
node
i13n
node
children

i13n
node
i13n
node
i13n
node
i13n
node
children
parent

i13n
node
i13n
node
i13n
node
i13n
node
children
parent
React
Component
React
Component

App
i13nRoot.append(this)
i13n
Root
App
i13nNode

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
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
Link3
Link3
i13nNode

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 Link1 Image2 Link2

I13n Tree
• Automatic tree from mixin
• Lightweight objects. Fast to traverse
• Components customize the beacon
• Visual / non-instrumented components

Mais conteúdo relacionado

Semelhante a Instrumentation and React Architecture

eStudio34 presents London Search Love 2015 | Practical tips for the future o...William Renedo

SearchLove London 2015 | Will Critchlow | Practical Tips for the Future of ...Distilled

10 tricks to get more app downloadsJavier Berlana

Logs & Visualizations at TwitterKrist Wongsuphasawat

Using Visualizations to Monitor Changes and Harvest Insights from a Global-sc...Krist Wongsuphasawat

User Tracking with Google Analytics and how it survives the break of the Glo...Rafael Biriba

Me and my importersDonny Wals

Linked in family doctor appNandkishor Dhekane

Introduction to Using Apptivo CRM - An End-User GuideTodd Miner

Hidden Speed Bumps on the Road to "Continuous"Sonatype

Create a Profitable News App using Ionic 4 and Angular Shelly Megan

Tech Development: How It All Fits Together w/ Alex De SimoneStanford Venture Studio

SplunkLive! Paris 2018: Intro to Security Analytics MethodsSplunk

Deep linking at App Promotion SummitAlexandre Jubien

SoftwareÄĥŸäń Pegason

Splunk Discovery: Warsaw 2018 - Intro to Security Analytics MethodsSplunk

ThesisMattia Palla

Watch power user manual 20160301Augusto SANCHEZ MILLA

Invading the home screenMatteo Bonifazi

Semelhante a Instrumentation and React Architecture (20)

eStudio34 presents London Search Love 2015 | Practical tips for the future o...

SearchLove London 2015 | Will Critchlow | Practical Tips for the Future of ...

10 tricks to get more app downloads

Logs & Visualizations at Twitter

Using Visualizations to Monitor Changes and Harvest Insights from a Global-sc...

User Tracking with Google Analytics and how it survives the break of the Glo...

Me and my importers

Linked in family doctor app

Introduction to Using Apptivo CRM - An End-User Guide

Hidden Speed Bumps on the Road to "Continuous"

Create a Profitable News App using Ionic 4 and Angular

Tech Development: How It All Fits Together w/ Alex De Simone

SplunkLive! Paris 2018: Intro to Security Analytics Methods

Deep linking at App Promotion Summit

Software

Splunk Discovery: Warsaw 2018 - Intro to Security Analytics Methods

Thesis

Watch power user manual 20160301

Invading the home screen

Último

Coefficient of Thermal Expansion and their Importance.pptxAsutosh Ranjan

(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat

247267395-1-Symmetric-and-distributed-shared-memory-architectures-ppt (1).pptssuser5c9d4b1

Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Christo Ananth

(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat

UNIT-V FMM.HYDRAULIC TURBINE - Construction and workingrknatarajan

VIP Call Girls Service Kondapur Hyderabad Call +91-8250192130Suhani Kapoor

IMPLICATIONS OF THE ABOVE HOLISTIC UNDERSTANDING OF HARMONY ON PROFESSIONAL E...RajaP95

UNIT-II FMM-Flow Through Circular Conduitsrknatarajan

UNIT - IV - Air Compressors and its Performancesivaprakash250

(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...ranjana rawat

VIP Call Girls Service Hitech City Hyderabad Call +91-8250192130Suhani Kapoor

(RIA) Call Girls Bhosari ( 7001035870 ) HI-Fi Pune Escorts Serviceranjana rawat

Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur High Profile

Extrusion Processes and Their Limitations120cr0395

Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Dr.Costas Sachpazis

College Call Girls Nashik Nehal 7001305949 Independent Escort Service NashikCall Girls in Nagpur High Profile

Introduction to IEEE STANDARDS and its different types.pptxupamatechverse

Software Development Life Cycle By Team Orange (Dept. of Pharmacy)Suman Mia

Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Call Girls in Nagpur High Profile

Instrumentation and React Architecture

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

8. Click { link: "Mail", source: "toolbar" }

10.

11. Click { link: "Monitoring your credit...", source: "all news" }

12. Click { link: "Monitoring your credit...", source: "all news" } ?

13.

14. PageViews Clicks Context & Structure

15. PageViews

16. PageViews Toolbar

17. PageViews Menu

18. PageViews Main

19. PageViews Sidebar

20. PageViews Main

21. PageViews Featured

22. PageViews Tabs

23. PageViews

24. PageViews Page Toolbar Menu Main Sidebar Search Link Link Featured Tabs Link Link Link

25. Clicks

26. Clicks

27. Clicks 1st link

28. Clicks 1st link 2nd news

29. Clicks 1st link 2nd news 1st tab

30. Clicks 1st link 2nd news 1st tab Tabs

31. Clicks 1st link 2nd news 1st tab Tabs Main

32. Clicks 1st link 2nd news 1st tab Tabs Main

33. Main Tabs 1st tab 2nd news 1st link Clicks

34. Main Tabs 1st tab 2nd news 1st link Event Beacon

35. Data + state Main Tabs 1st tab 2nd news 1st link Event Beacon Data + state Data + state Data + state Data + state

36. Data + state Main Tabs 1st tab {title: "All News"} 2nd news 1st link Event Beacon Data + state Data + state Data + state

37. React Props Strategies DOM Tree i13n Tree 1 2 3

38. DOM 1 Tree Strategies

39. Dom Tree nav body div a span b div a span b div div div div a a a

40. Dom Tree nav body div a span b div a span b div div div div a a a

41. Dom Tree • Query & Traverse DOM is slow • DOM vs React Virtual DOM • Write i13n data to DOM

42. React Props DOM Tree i13n Tree 2 3 Strategies

43. React 2 Props Strategies

44. React Props Menu App Link Link Main Featured Tabs Link Link ...

45. React Props Menu Link Link Tabs Link ... App Main Featured Link

46. React Props App Main Featured Link

47. React Props App Main Featured Link <App />

48. React Props App Main Featured Link <App /> <Main level="1" pos="2" />

49. React Props App Main Featured Link <App /> <Main level="1" pos="2" /> <Featured level="2" pos="1" l1="Main" l1Pos="2" />

50. 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" />

51. React Props media object

52. React Props • Repetition in all components • Error prone • Visual / non-instrumented components

53. React Props DOM Tree i13n 3 Tree Strategies

54. i13n 3 Tree Strategies

55. i13n node

56. i13n node

57. i13n node i13n node i13n node i13n node children

58. i13n node i13n node i13n node i13n node children parent

59. Data + state Main Tabs 1st tab 2nd news 1st link Event Beacon Data + state Data + state Data + state Data + state

60. i13n node i13n node i13n node i13n node children parent

61. i13n node i13n node i13n node i13n node children parent

62. i13n node i13n node i13n node i13n node children parent React Component React Component

63.

64. Mixin + Context

65.

66. Menu App Link1 Link2 Main Link3

67. i13n Root

68. App i13n Root

69. App i13n Root

70. App i13n Root i13nRoot.append(this)

71. App i13nRoot.append(this) i13n Root App i13nNode

72. App i13n Root App i13nNode

73. i13n Root App i13nNode App Menu

74. i13n Root App i13nNode App Menu appI13nNode.append(this)

75. i13n Root App i13nNode Menu appI13nNode.append(this) Menu i13nNode App

76. i13n Root App i13nNode Menu Menu i13nNode Main App

77. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App

78. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App

79. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1

80. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 menuI13nNode.append(this)

81. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode

82. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode

83. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode

84. i13n Root App i13nNode Menu Menu i13nNode Main Main i13nNode App Link1 Link1 i13nNode Link2 Link2 i13nNode Link3 Link3 i13nNode

85. Visual components media object

86. Visual components News Media Object Image1 Link1 Media Object Image2 Link2

87. Visual components News Media Object Image1 Link1 Media Object Image2 Link2

88. Visual components Components Tree i13n Tree News Media Object Image1 Link1 Media Object Image2 Link2 News Image1 Link1 Image2 Link2

89. I13n Tree • Automatic tree from mixin • Lightweight objects. Fast to traverse • Components customize the beacon • Visual / non-instrumented components

90.

91.

92.

93.

94.

95.

96. Mixin + Context i13n Tree

97. Questions?

Instrumentation and React Architecture

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Instrumentation and React Architecture

Semelhante a Instrumentation and React Architecture (20)

Último

Último (20)

Instrumentation and React Architecture