Skip to content

Instantly share code, notes, and snippets.

@dannycoates

dannycoates/demo.sh

Last active August 29, 2015 14:13
Show Gist options
  • Save dannycoates/9b28cc859de4fc8b89ac to your computer and use it in GitHub Desktop.
Save dannycoates/9b28cc859de4fc8b89ac to your computer and use it in GitHub Desktop.
Download ZIP
Able demo
Raw
demo.sh
#!/usr/bin/env bash
echo "able demo"
echo -e "\n\n"
echo "Get all subject attribute names"
echo "###############################"
curl -v https://dcoates.dev.lcip.org/ab/v1/fxa_content_server/attributes
echo -e "\n\n"
echo "Get all variables (unauthenticated)"
echo "###################################"
curl -v -XPOST \
-H"Content-Type: application/json" \
https://dcoates.dev.lcip.org/ab/v1/fxa_content_server/variables \
-d '{"subject": {"email":"[email protected]", "sessionId":"abcdef"}}'
echo -e "\n\n"
echo "Get one variable (unauthenticated)"
echo "###################################"
curl -v -XPOST \
-H"Content-Type: application/json" \
https://dcoates.dev.lcip.org/ab/v1/fxa_content_server/variables/avatarLinkVisible \
-d '{"subject": {"email":"[email protected]"}}'
echo -e "\n"
echo "tada!"
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
.dark {
background-color: #000
}
.light {
background-color: #eee
}
</style>
<script src="https://dcoates.dev.lcip.org/ab/v1/demo/experiments.bundle.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Able demo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form id="login" class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a id="ok1" class="btn btn-primary btn-lg" href="#" role="button">ok</a></p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2014</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
// set subject attributes
able.subject.name = Math.random()
// choose independent variables
var theme = able.choose('theme')
$('.jumbotron').addClass(theme)
var thingEnabled = able.choose('thingEnabled')
$('#login').css('display', thingEnabled ? 'block' : 'none')
var buttonText = able.choose('buttonText')
$('#ok1').text(buttonText)
// log choices
console.log('theme:', theme)
console.log('thingEnabled:', thingEnabled)
console.log('buttonText:', buttonText)
console.log('enrolled:', able.ab.enrolled.names())
console.log('report:', JSON.stringify(able.report()))
</script>
</body>
</html>
Raw
info.md

Links

Goals

  • remotely control application parameters via experiments
  • manage the lifecycle of experiments, including releasing results
  • provide adaquate data for analysing experiments without scary tracking
  • allow concurrent experiments without conflicts
  • provide as consistent of a user experience as possible

Terminology

Subject

Also known as "test subject", is the object or person we'd like to perform an experiment on. An end user is the most common subject. User and subject can often be used interchangably.

Subject Attributes

Experiments often require specific information about a subject in order to make a decision about how to group them. For example a particular experiment that tests button text variations may only be applicable to subjects with the en-CA locale.

Subject attributes are the input to experiments provided by the application.

Experiments declare which attributes are important to them with the subjectAttributes array of strings.

Examples

  • userId
  • userAgent
  • locale
  • ipAddress
  • email
  • sessionId
  • favoriteAdventureTimeCharacter

Independent Variables

These are the entities an experiment may set a value for. Applications usually just call them options or configuration parameters.

Independent variables are the output from an experiment provided to the application.

Experiments declare what variables they affect with the independentVariables array of strings.

Eligibility

Experiments may set specific criteria on the subjects that are allowed to participate. A subject that meets those criteria is eligible.

Conflict

Multiple experiments may affect the same independent variables. When this occurs those experiments are in conflict. Experiments that conflict must not involve the same subjects.

Defaults

The values of independent variables when they are not set by any experiments.

Control Group

The group of subjects participating in an experiment that are receiving the defaults for those independent variables.

Experimental Group

The group of subjects participating in an experiment that are receiving non-default independent variables.

@dannycoates
Copy link
Author

http://jsfiddle.net/zkr833g4/2/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment