@saltnburnem

Thanks!

@saltnburnem

#DeveloperCommunity | #vdams26

Showotes

@saltnburnem

#DeveloperCommunity | #vdams26

@saltnburnem

#vdams26

@saltnburnem

#DeveloperCommunity | #vdams26

#DeveloperCommunity

@saltnburnem

#DeveloperCommunity | #vdams26

Chris DeMars

Senior Developer Advocate

@saltnburnem

#DeveloperCommunity | #vdams26

@chrisdemars.net

🦋

International Speaker
Love spooky stuff
Tattoo collector

About Me

@saltnburnem

#DeveloperCommunity | #vdams26

Demystifying The Dreaded A/B Test

@saltnburnem

#DeveloperCommunity | #vdams26

It's not that scary

trust me...

@saltnburnem

#DeveloperCommunity | #vdams26

What is A/B testing?

@saltnburnem

#DeveloperCommunity | #vdams26

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 | #vdams26

Username

Password

provider

Create Account

A

@saltnburnem

#DeveloperCommunity | #vdams26

Username

Password

provider

Create Account

Username

Password

provider

Create

A

B

@saltnburnem

#DeveloperCommunity | #vdams26

Why?

@saltnburnem

#DeveloperCommunity | #vdams26

⬇️ Answers ⬇️

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

@saltnburnem

#DeveloperCommunity | #vdams26

How?

@saltnburnem

#DeveloperCommunity | #vdams26

Well set up an experiment of course!

@saltnburnem

#DeveloperCommunity | #vdams26

That is what we call a moron.

That is not an experiement.

@saltnburnem

#DeveloperCommunity | #vdams26

First

@saltnburnem

#DeveloperCommunity | #vdams26

First

Gather that data!

@saltnburnem

#DeveloperCommunity | #vdams26

❗️ Baseline before experiment! ❗️

@saltnburnem

#DeveloperCommunity | #vdams26

@saltnburnem

#DeveloperCommunity | #vdams26

Scientific Method

@saltnburnem

#DeveloperCommunity | #vdams26

Scientific Method

Ask a question
Do research
Construct a hypothesis
Experiment
Draw conclusion

@saltnburnem

#DeveloperCommunity | #vdams26

Scientific Method

Construct a hypothesis
Experiment

@saltnburnem

#DeveloperCommunity | #vdams26

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

Hypothesis

@saltnburnem

#DeveloperCommunity | #vdams26

Experiment time!

@saltnburnem

#DeveloperCommunity | #vdams26

Username

Password

provider

Create Account

Username

Password

provider

Create

A

B

Control

Treatment

@saltnburnem

#DeveloperCommunity | #vdams26

Feature Flags

@saltnburnem

#DeveloperCommunity | #vdams26

Segment Users

@saltnburnem

#DeveloperCommunity | #vdams26

Username

Password

provider

Create Account

Username

Password

provider

Create

A

B

Control

Treatment

50%

@saltnburnem

#DeveloperCommunity | #vdams26

Flex that UI muscle!

@saltnburnem

#DeveloperCommunity | #vdams26

You can be a CSS dev and use feature flags!

@saltnburnem

#DeveloperCommunity | #vdams26

CSS...like CSS

IYKYK

@saltnburnem

#DeveloperCommunity | #vdams26

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

@saltnburnem

#DeveloperCommunity | #vdams26

<dependency>
  <groupId>io.harness</groupId>
  <artifactId>ff-java-server-sdk</artifactId>
  <version>1.3.1</version> </dependency>

implementation 'io.harness:ff-java-server-sdk:1.3.1'

Maven

Gradle

import io.harness.cf.client.api.*;
import io.harness.cf.client.dto.Target;

// 1. Your SDK Key from the Harness Dashboard
String apiKey = "YOUR_SDK_KEY";

// 2. Initialize the client
CfClient cfClient = new CfClient(apiKey);

Initialize the Client

Target target = Target.builder()
    .name("User_1")
    .identifier("unique_user_id_123") // Unique ID for this user
    .attribute("email", "user@example.com")
    .build();

Create a Target

// Check a boolean flag
boolean isEnabled = cfClient.boolVariation("my_feature_flag", target, false);

if (isEnabled) {
    // Run the new feature code
} else {
    // Run the old code
}

Evaluate the Flag

Demo

@saltnburnem

#DeveloperCommunity | #vdams26

Showotes

@saltnburnem

#DeveloperCommunity | #vdams26

It's a happy cry!

Go Forth and Test in Production!

Chris DeMars

@saltnburnem

Resources

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

#DeveloperCommunity | #vdams26

Voxxed Days Amsterdam (45) -Demystifying The Dreaded A/B Test v2

By Chris DeMars

Voxxed Days Amsterdam (45) -Demystifying The Dreaded A/B Test v2

Chris DeMars PRO

saltnburnem

Thanks!

Showotes

#vdams26

#DeveloperCommunity

Chris DeMars

Senior Developer Advocate

@saltnburnem

@chrisdemars.net

About Me

Demystifying The Dreaded A/B Test

It's not that scary

trust me...

What is A/B testing?

What is A/B testing?

A

A

B

Why?

⬇️ Answers ⬇️

How?

Well set up an experiment of course!

That is what we call a moron.

That is not an experiement.

First

First

Gather that data!

Scientific Method

Scientific Method

Scientific Method

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

Hypothesis

Experiment time!

A

B

Control

Treatment

Feature Flags

Segment Users

A

B

Control

Treatment

50%

50%

Flex that UI muscle!

You can be a CSS dev and use feature flags!

CSS...like CSS

IYKYK

Maven

Gradle

Initialize the Client

Create a Target

Evaluate the Flag

Demo

Showotes

It's a happy cry!

Go Forth and Test in Production!

Chris DeMars

@saltnburnem

Voxxed Days Amsterdam (45) -Demystifying The Dreaded A/B Test v2

More from Chris DeMars