DIY Split Proof-of-Concept (Javascript Edition)
In this tutorial, you will create your first feature flags. In the next, you will configure Dynamic Config, and conduct an AA experiment.
To be successful, you need to be a Javascript programmer and have access to a Split account, which can be obtained for free at https://www.split.io/signup/
Create an HTML page
You can create or edit any HTML page you like. The example below has a call to action and an image, very similar to what is often found in applications. Two buttons urge users to donate or adopt a dog.
<html>
<head>
<title>Basic HTML Page</title>
<style>
.body {
color: 'white';
}
.foo {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
text-align: center;
font-size: 50;
background-color: rgba(64, 128, 0);
color: rgb(200, 200, 200);
width: 800;
height: 600;
}
</style>
<script>
function donateHandler() {
alert('donate!');
}
function adoptHandler() {
alert('adopt!');
}
</script>
</head>
<body>
<div>
<div id="mainDiv" class="foo">
<img id="banner" src="http://www.cortazar-split.com/dog_origin.jpeg"/>
<p id="call2Action">Adopt a Dog</p>
</div>
<div style="text-align: center; padding: 25px">
<button onClick="donateHandler()">DONATE</button>
<button onClick="adoptHandler()">ADOPT</button>
</div>
</div>
</body>
</html>
Include Split
Visit help.split.io
On the left edge navigation bar, you’ll see Browser SDK. Copy the full build from near the top of the page. In my case, the include looked like this:
<script src="//cdn.split.io/sdk/split-browser-0.9.1.full.min.js"></script>
Put this in the head of your HTML page. It doesn’t have to be near the top.
This page is filled with helpful information about using and configuring Split. It is worth a bookmark.
Create a Feature Flag
Feature flags are simply called “splits”.
Login to Split. On the left edge navbar, click Splits. A new bar comes into focus. Click the “Create split” button at the top.
Give your split a name. You can’t change the name later, so you might want to think about it carefully now. Choose the “user” traffic type. Accept the rest of the defaults by clicking “Create”.
Your split isn’t ready for action yet. You have to give it a definition in at least one environment. Your default environment is shown near the top of the screen. You can change it with the dropdown. Change to the environment where you want to test the split.
Once you are in the right environment, click the “Add Rules” button in the middle of the screen. This gives you the go dark rules. Your split will not be visible to anyone.
In the upper right corner, click “Review changes” and then the “Save” button at the bottom of the screen.
Congratulations, you have created your first feature flag with Split!
Reference the Feature Flag in HTML
In the split editor, there is a big, red “KILL” button in the upper right. Next to it is a menu designated “. . .” Open the menu and select “Syntax”. From the dropdown, choose “Javascript”. Copy and paste the generated code into a
I show a sample of mine below. Edit where indicated if you use my example (the generated code should already be complete).
<script>
var factory = splitio({
core: {
authorizationKey: <your split client api key>,
key: <user_id> // unique identifier for your user
}
});
var client = factory.client();
client.on(client.Event.SDK_READY, function() {
var treatment = client.getTreatment(<your split name>);
if (treatment === 'on') {
// insert on code here
} else if (treatment === 'off') {
// insert off code here
} else {
// insert control code here
}
});
</script>
For now, you can use a placeholder string for key, but eventually you’ll want it to be a unique user id or similar. The syntax generator should generate the right client-side API key, but if it doesn’t you can find one by choosing the upper-left corner of the Split console and selecting “Admin settings”. Then choose “API keys” and click the “Create API key” blue button in the upper right. Use an existing client-side API key, or create a new one.
Don’t forget to put the name of the split you created in the getTreatment call.
What is going on?
Split needs the API key in order to download the right feature flag data, i.e. the split you just created. Split needs an instant to download the flag data, so there is a callback function.
client.on(client.Event.SDK_READY, function() { ... }
We must do our feature flag evaluation in this callback to be sure we’re getting the right response. Later, you can implement a similar callback to initialize from cache, receive PUSH notifications about flag changes, or even handle a network timeout.
Evaluate your Feature Flag
For simplicity, we’ll just print the treatment we receive to the console.
client.on(client.Event.SDK_READY, function() {
var treatment = client.getTreatment('tutorial');
console.log(treatment);
});
I deleted the if-then-else statement to just print the treatment instead. If you’ve made it soundly, your browser’s JS console should print:
off
That’s because your split is off by default. If you want to go change the default rule to “on” in the Split console (under “Targeting rules”), you can come back and reload to see the treatment change.
To see a change happen without a refresh, you need to implement SDK_UPDATE, which is the subject of another tutorial.
Sky’s the limit!
What can you do with your feature flag? How about something like altering the text of your call to action?
client.on(client.Event.SDK_READY, function() {
var treatment = client.getTreatment(<your split name>);
console.log(treatment);
const call2Action = document.getElementById("call2Action");
if(treatment === "on") {
call2Action.innerHTML = "ACT NOW";
} else if (treatment === "off") {
call2Action.innerHTML = "WE NEED YOU";
} else if (treatment === "control") {
call2Action.innerHTML = "WE NEED YOU";
}
});
In this example, the call to action div has its text dynamically assigned by the feature flag. The “on” treatment declares “ACT NOW”, while the “off” treatment says, “WE NEED YOU”
The “control” treatment will happen if you misspell the name of your Split or if the Split SDK cannot reach the Split cloud. It’s a fallback mechanism to ensure your code is in a steady state even if the feature flagging infrastructure is temporarily unavailable.
Tying it all up…
I this lesson, you created a simple HTML page and included Split. Then you created a new feature flag and used Split’s syntax generator to create the right code to put into your HTML page. Finally, you had a chance to experiment with changing elements of the page.
In the next lesson, you’ll learn about Dynamic Config – passing rich JSON payloads to the application instead of just strings – and using the track() call to send events to Split. We’ll finish the lesson with an AA test.
Written with StackEdit.
To Have and Have Not 
Leave a comment