@saltnburnem
Thanks!
@saltnburnem
@saltnburnem
#OrlandoCodeCamp | #DeveloperCommunity
#DevNexus
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
#DeveloperCommunity
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Chris DeMars
Developer Advocate
@saltnburnem
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
- International Speaker
- Love spooky stuff
- Tattoo collector
About Me
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
https://www.twitch.tv/split_software
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Building Flexible UIs with Feature Flags
💪
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Flex that UI muscle!
CSS is fun!
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
What is A/B testing?
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
What is A/B testing?
A/B testing, otherwise known as split testing, is the process of testing two different versions of a web page or product feature against the original, existing version.
- Talia Nassi
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Username
Password
Login
provider
Create Account
A
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Why?
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
⬇️ Answers ⬇️
- Awesome user experience
- Increase revenue
- Data correlation for better business decisions
- Fine grained control of code exposure
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
How?
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Well set up an experiment of course!
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
That is what we call a moron.
That is not an experiment.
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
First
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
First
Gather that data!
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Scientific Method
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Scientific Method
- Ask a question
- Do research
- Construct a hypothesis
- Experiment
- Draw conclusion
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Scientific Method
- Construct a hypothesis
- Experiment
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
If we ship this new button, our retention will increase by 20%.
Hypothesis
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Experiment time!
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
First
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
First
❗️ Baseline before experiment! ❗️
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
Control
Treatment
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Feature Flags
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Segment Users
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
Control
Treatment
50%
50%
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Demo
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
// get treatment
let treatment = client.getTreatment('css_demo');
// get features to flip based upon CSS classes
const featureA = document.querySelectorAll('.a');
const featureB = document.querySelectorAll('.b');
if (treatment === 'on') {
featureB.forEach(element => {
element.classList.add('hide')
})
} else if (treatment === 'off') {
featureA.forEach(element => {
element.classList.add('hide')
})
} else {
console.error('Error connecting to Split')
// default rule here
featureA.forEach(element => {
element.classList.add('hide')
})
}
}); #OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
GET TO THE CHOPPA!!!
Resources
https://bit.ly/css-feature-flags
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Chris DeMars
@saltnburnem
#OrlandoCodeCamp | #DeveloperCommunity
@saltnburnem
Building Flexible UI's with Feature Flags
By Chris DeMars
