How I implemented my First A/B
experiment in REACT
Saaheel Majethia
Slide 2
Slide 2 text
About Me
● Engineer at Shaadi.com
● Follow me @saaheelm
Slide 3
Slide 3 text
3Ws of A/B experiment
1. What is A/B experiment?
2. Why to do A/B experiment?
3. What we get by doing A/B experiment?
Slide 4
Slide 4 text
What is A/B experiment?
User A
User B
Slide 5
Slide 5 text
Why to do A/B experiment?
User A Cart User B Cart
Slide 6
Slide 6 text
What do we get doing A/B experiment?
● Improve content
● Increased Sales & Revenue
● Improve user Engagement
● Analyse Customer behavior
● Acceptance of App by customer
Slide 7
Slide 7 text
Traditional Approaches for A/B experiment
● Decide the buckets on server side and render respective
view
● Writing multiple if...else condition for experiments
● Modifying multiple files to implement the experiments
● Keep track of files and clean up once experiments are
done
Slide 8
Slide 8 text
Pros & Cons of Traditional Approach
Pros
● Server side computation
● Simple and dumb code writing
if...else
Cons
● Modify multiple files with multiple
if...else conditions
● Less readability and accessibility
● Difficult to maintain the code
● Need to plan Clean up activity
Slide 9
Slide 9 text
A/B experiment in REACT?
REACT being Front end you can do A/B on:-
● Simple elements like button, icons, input fields, etc
● Complete Component
● Action based on experiments
● Tracking of user action and views
Slide 10
Slide 10 text
Initial Research
● react-ab : https://github.com/olahol/react-ab
A A/B testing component for React
A vertically integrated React component
Slide 11
Slide 11 text
Initial Research (cont...)
● react-ab-experiment : https://www.npmjs.com/package/react-ab-experiment
Variant 1
Variant 2
Slide 12
Slide 12 text
Problems & Thought on Solutions
Drawbacks what I felt initially:-
● Having single file to do Variant experiment and mostly
Components level experiments possible
● No idea how to do A/B on Actions and/or with individual
elements
Slide 13
Slide 13 text
Problems & Thought on Solutions (cont..)
Few things I considered when I planned to do
A/B experiment on REACT
● No duplication of code
● Cleaner code base
● High level of readability and accessibility of components
● Easy code clean up provision
Slide 14
Slide 14 text
Approaches I took to do AB experiment
● Fetch value for A/B experiment bucket from server once on
App launch and save in Redux which can be used in
complete App
● Create separate Variant components and render
components dynamically based on props.
● Minimal use of if...else when needed