@saltnburnem

Thanks!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

@saltnburnem

#MIDevFest2023

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

#DeveloperCommunity

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Chris DeMars

Senior Developer Advocate

@saltnburnem

@saltnburnem

Free Agent!

#DeveloperCommunity | #MIDevFest2023

  • International Speaker
  • Love spooky stuff
  • Tattoo collector

About Me

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

@saltnburnem

! CAVEAT !

I NO LONGER WORK FOR SPLIT!

#DeveloperCommunity | #MIDevFest2023

@saltnburnem

Looking for a gig!

#DeveloperCommunity | #MIDevFest2023

https://www.twitch.tv/saltnburnem313

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Demystifying The Dreaded A/B Test

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

It's not that scary

trust me...

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

What is A/B testing?

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

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

#DeveloperCommunity | #MIDevFest2023

Username

Password

Login

provider

Create Account

A

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Username

Password

Login

provider

Create Account

Username

Password

Login

provider

Create

A

B

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Why?

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

⬇️ Answers ⬇️

  • Awesome user experience
  • Increase revenue
  • Data correlation for better business decisions
  • Fine grained control of code exposure

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

How?

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Well set up an experiment of course!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

That is what we call a moron.

That is not an experiement.

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

First

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

First

Gather that data!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

❗️ Baseline before experiment! ❗️

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Scientific Method

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Scientific Method

  1. Ask a question
  2. Do research
  3. Construct a hypothesis
  4. Experiment
  5. Draw conclusion

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Scientific Method

  1. Construct a hypothesis
  2. Experiment

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

If we ship this new button, our retention will increase by 20%.

Hypothesis

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Experiment time!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Username

Password

Login

provider

Create Account

Username

Password

Login

provider

Create

A

B

Control

Treatment

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Feature Flags

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Segment Users

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Username

Password

Login

provider

Create Account

Username

Password

Login

provider

Create

A

B

Control

Treatment

50%

50%

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

Flex that UI muscle!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

You can be a CSS dev and use feature flags!

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

CSS...like CSS

IYKYK

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

// 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

#DeveloperCommunity | #MIDevFest2023

Demo

@saltnburnem

#DeveloperCommunity | #MIDevFest2023

It's a happy cry!

Go Forth and Test in Production!

Chris DeMars

@saltnburnem

@saltnburnem

Resources

https://bit.ly/css-feature-flags

#DeveloperCommunity | #MIDevFest2023