Thanks
Denver Dev Day!
#DenverDevDay
@saltnburnem
#DenverDevDay | #DeveloperCommunity
#DeveloperCommunity
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Chris DeMars
Senior Developer Advocate
@saltnburnem
@saltnburnem
#DenverDevDay | #DeveloperCommunity
- International Speaker
- Love spooky stuff
- Tattoo collector
- Competitive Paintball Player
- Competitve Bass Angler
About Me
@saltnburnem
#DenverDevDay | #DeveloperCommunity
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Contest
- Follow me and @digitalocean on Twitter
- Scan QR Code
- Sign Up to try DO
- Take a screen shot of the confirmation email
- Tweet that picture and tag me (@saltnburnem and @digitalocean) saying, "I signed up Chris!"
@saltnburnem
#DenverDevDay | #DeveloperCommunity
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Contest
- Follow me and @digitalocean on Twitter
- Scan QR Code
- Sign Up to try DO
- Take a screen shot of the confirmation email
- Tweet that picture and tag me (@saltnburnem and @digitalocean) saying, "I signed up!"
Building Flexible UIs with Feature Flags
💪
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Flex that UI muscle!
CSS is fun!
@saltnburnem
#DenverDevDay | #DeveloperCommunity
What is A/B testing?
@saltnburnem
#DenverDevDay | #DeveloperCommunity
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
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Username
Password
Login
provider
Create Account
A
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Why?
@saltnburnem
#DenverDevDay | #DeveloperCommunity
⬇️ Answers ⬇️
- Awesome user experience
- Increase revenue
- Data correlation for better business decisions
- Fine grained control of code exposure
@saltnburnem
#DenverDevDay | #DeveloperCommunity
How?
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Well set up an experiment of course!
@saltnburnem
#DenverDevDay | #DeveloperCommunity
That is what we call a moron.
That is not an experiment.
@saltnburnem
#DenverDevDay | #DeveloperCommunity
First
@saltnburnem
#DenverDevDay | #DeveloperCommunity
First
Gather that data!
@saltnburnem
#DenverDevDay | #DeveloperCommunity
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Scientific Method
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Scientific Method
- Ask a question
- Do research
- Construct a hypothesis
- Experiment
- Draw conclusion
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Scientific Method
- Construct a hypothesis
- Experiment
@saltnburnem
#DenverDevDay | #DeveloperCommunity
If we ship this new button, our retention will increase by 20%.
Hypothesis
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Experiment time!
@saltnburnem
#DenverDevDay | #DeveloperCommunity
First
@saltnburnem
#DenverDevDay | #DeveloperCommunity
First
❗️ Baseline before experiment! ❗️
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
Control
Treatment
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Feature Flags
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Segment Users
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Username
Password
Login
provider
Create Account
Username
Password
Login
provider
Create
A
B
Control
Treatment
50%
50%
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Demo
@saltnburnem
#DenverDevDay | #DeveloperCommunity
// 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')
})
}
}); @saltnburnem
#DenverDevDay | #DeveloperCommunity
GET TO THE CHOPPA!!!
Resources
https://bit.ly/css-feature-flags
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Chris DeMars
@saltnburnem
@saltnburnem
#DenverDevDay | #DeveloperCommunity
Building Flexible UI's with Feature Flags
By Chris DeMars
