The OpenFeature playground is a great place to familiarize with the core concepts and features available in OpenFeature. If you're brand new to feature flagging, consider reviewing the What are feature flags? section in our documentation before running the demo.
- Pre-requisites
- How to run the demo
- What's in the demo?
- Available providers
- Experimenting beyond the demo
- Troubleshooting
In order to run the demo, you'll need the following tools available on your system.
-
Clone the repo
git clone https://github.com/open-feature/playground.git
-
Navigate to the playground folder
cd playground
-
Copy
.env.example
to.env
cp .env.example .env
-
Optionally, add feature flag vendors to the
.env
. See below for more information. -
Start the demo
docker compose up
-
Open your favorite browser and navigate to http://localhost:30000/
The demo consists of three different scenarios where feature flags are used. They help the fictional company Fib3r safely test and release new features.
As we all know, naming is hard! In this scenario, the team at Fib3r is in the process of rebranding from FaaS
to Fib3r
. This may seem like a situation where a feature flag is unnecessary. However, may times a rebranding needs to correspond with a press release or blog post. Of course, you could time a deployment moments before the announcement but that's potentially risky and may require coordination across multiple teams. Using a feature flag would allow you to deploy when it's convent, tests in production by enabled the feature for a subset of users, and then enable the feature instantly for everyone.
For the rebranding effort, we're only interested in being able to toggle the new welcome message on and off. A boolean value is exactly what we need! That can be accomplished in OpenFeature like this.
The team at Fib3r has a hypothesis. They feel that the reason Fib3r hasn't achieved unicorn status is because the current color of the landing page is responsible for high bounce rates. This is a great opportunity to use feature flags for experimentation. With feature flags, it's possible to measure the impact a change has on the metrics that are important to your business.
Diving into the code, you may notice that an after
hook has been defined. Hooks are a powerful feature that can be used to extend OpenFeature capabilities. In this case, the code is expecting a valid css hex color value. However, the person configuring the feature flag in a remote feature flag management tool may not be aware of this requirement. That's where a validation hook could be used to ensure only valid CSS values are returned. In this hook, the evaluated value is tested against a regular expression. If it doesn't match, a warning messaged is logged and the hook throws an error. OpenFeature will catch the error and return the default value.
Fib3r is on a mission to help the world calculate the nth digit a Fibonacci more efficiently. According to a Stack Overflow article the team recently found, it's possible to use the Binet's Formula to calculate Fibonacci more efficiently. While the initial tests look promising, changing the underlying algorithm Fib3r has used for years is risky. The team decided that it would be safer put the new feature behind a context-dependant feature flag so that only employees could use it, initially. If the test goes well, the feature could be slowly rolled out to everyone or quickly revert if an issue is discovered.
Let's see how this could be done using OpenFeature. Here is where the Fib3r team add a feature flag that returns the name of the algorithm to run. Looking closely at the getStringValue
method, you'll notice evaluation context is not being defined. Evaluation context is commonly used in feature flagging to dynamically determine the flag value. For example, the Fib3r team may want to test the binet
algorithm on employees only. This can be done by setting the user's email address as evaluation context and defining a rule that returns binet
only when the email address ends with @faas.com
. Simple enough, but remember that evaluation context wasn't explicitly set during the flag evaluation linked above. That's because OpenFeature allows developers to set evaluation context at various points in their application. In this case, evaluation context is set on each transaction and automatically used during flag evaluation.
The following providers can be used in the demo. Locate the provider you're interested in using to learn more.
The environment variable provider is a simple demo showing how environment variables could be used make flag evaluations. Its purpose is to show how a basic provider could be implemented.
To get started, follow the instructions in the How to run the demo section. Once in the demo app, select env
from the dropdown located at the bottom-right of the screen. To change a flag value, open the .env
file in your favorite text editor. Update the flag values based on the options defined as comments above the flag key. When you're ready, save the file and restart the demo.
Using environment variables like this can be a good way to get started with feature flagging. However, the approach only support basic use cases and is quite cumbersome.
FlagD is a OpenFeature compliant flag evaluation daemon. Following the unix philosophy, it provides one component of a full feature flagging solution: a service for storing and evaluating flags. It supports the ability to define flag configurations in various locations include a local file, a HTTP service, or in the case you're using Kubernetes, directly from the Kubernetes API.
In this demo, FlagD starts automatically as part of the Docker Compose file. It's configured to watch a local file /config/flagd/flags.json
for flag configurations. Feel free to modify this file and see how it affects the demo. Valid configurations changes should be reflected almost immediately.
Flag Configuration in FlagD
A FlagD configuration is represented as a JSON object. Feature flag configurations can be found under flags
and each item within flags
represents a flag key (the unique identifier for a flag) and its corresponding configuration.
Valid flag configuration options include:
state
is required property. Validate states are "ENABLED" or "DISABLED". When the state is set to "DISABLED", FlagD will behave like the flag doesn't exist.
Example:
"state": "ENABLED"
variants
is a required property. It is an object containing the possible variations supported by the flag. All the values of the object must but the same type (e.g. boolean, numbers, string, JSON). The type used as the variant value will correspond directly affects how the flag is accessed in OpenFeature. For example, to use a flag configured with boolean values the getBooleanValue
or getBooleanDetails
methods should be used. If another method such as getStringValue
is called, a type mismatch occurred and the default value is returned.
Example:
"variants": {
"red": "c05543",
"green": "2f5230",
"blue": "0d507b"
}
Example:
"variants": {
"on": true,
"off": false
}
Example of an invalid configuration:
"variants": {
"on": true,
"off": "false"
}
defaultVariant
is a required property. The value must match the name of one of the variants defined above. The default variant is always used unless a targeting rule explicitly overrides it.
Example:
"variants": {
"on": true,
"off": false
},
"defaultVariant": "off"
Example:
"variants": {
"red": "c05543",
"green": "2f5230",
"blue": "0d507b"
},
"defaultVariant": "red"
Example of an invalid configuration:
"variants": {
"red": "c05543",
"green": "2f5230",
"blue": "0d507b"
},
"defaultVariant": "purple"
targeting
is an optional property. A targeting rule must be valid JSON. FlagD uses a modified version of JSON Logic, as well as some custom pre-processing, to evaluate these rules. The output of the targeting rule must match the name of one of the variants defined above. If an invalid or null value is is returned by the targeting rule, the defaultVariant
value is used.
The JSON Logic playground is a great way to experiment with new targeting rules. The following example shows how a rule could be configured to return binet
when the email (which comes from evaluation context) contains @faas.com
. If the email wasn't included in the evaluation context or doesn't contain @faas.com
, null is returned and the defaultVariant
is used instead. Let's see how this targeting rule would look in the JSON Logic playground.
- Open the JSON Logic playground in your favorite browser
- Add the follow JSON as the
Rule
:
{
"if": [
{
"in": [
"@faas.com",
{
"var": ["email"]
}
]
},
"binet",
null
]
}
- Add the following JSON as the
Data
:
{
"email": "[email protected]"
}
- Click
Compute
- confirm the output show
"binet"
- Optionally, experiment with different rules and data
Go Feature Flag is a open source feature flagging solution. It provides the ability to define flag configurations in various locations (HTTP, S3, GitHub, file, Google Cloud Storage, Kubernetes). OpenFeature is able to integrate with Go Feature Flag by using the Go Feature Flag Relay Proxy.
In this demo, Go Feature Flag starts automatically as part of the Docker Compose file. It's configured to watch a local file /config/go-feature-flag/flags.yaml
for flag configurations. Feel free to modify this file and see how it affects the demo. Valid configurations changes should be reflected almost immediately. Documentation on how to configure a flag can be found here.
CloudBees Feature Management is an advanced feature flagging solution that lets your development teams quickly build and deploy applications without compromising on safety. By providing a gradual release mechanism and a simple way to define target audiences, CloudBees Feature Management allows developers and product managers to optimize feature releases and customize the user experience. CloudBees Feature Management gives teams control over features that are in staging, production, or any environment in the deployment pipeline.
Follow these steps to setup CloudBees for the demo:
-
Sign-in to your CloudBees Feature Management account. If you don't already have an account, you can use the free community edition.
-
Within the CloudBees Feature Management UI, add a new application called
OpenFeature playground
. You can keep the default environment ofproduction
. -
In
App Settings
add a new custom STRING property calledemail
as shown below. This is used in thefib-algo
configuration to control the flag value via the email of the user logging into the playground application. -
Create a new boolean flag called
new-welcome-message
. -
Create a new flag called
hex-color
with the values:c05543
,2f5230
, and0d507b
. -
Create a new flag called
fib-algo
with the values:recursive
,memo
,loop
,binet
, anddefault
. -
For the
fib-algo
flag, add a configuration. This can be a combination of theemail
regEx of.*faas.com$
and setrecursive
in the else section. -
Ensure for each flag, the configuration switch is set to ON as shown below
-
Ensure the completed list of flags look as follows
-
Copy the production environment key found under
App settings
>Environments
-
Open the
.env
file and make the value ofCLOUDBEES_APP_KEY
the key copied above
Now that everything is configured, you should be able to start the demo. Once it's started, select cloudbees
from the provider list located at the bottom right of your screen. You should now be able to control the demo app via CloudBees!
Split is a unified feature flagging and experimentation platform enabling product and engineering teams to reduce cycle times, mitigate release risk, and maximize business impact throughout the Feature Delivery Lifecycle.
Follow these steps to setup Split for the demo:
-
Sign-in to your Split account. If you don't already have an account, you can use the Split Free Edition.
-
Create a new split called
new-welcome-message
and use the default treatments. -
Create a new split called
hex-color
with the treatments:c05543
,2f5230
, and0d507b
. -
Create a split called
fib-algo
with the values:recursive
,memo
,loop
,binet
, anddefault
. -
For the
fib-algo
flag, add a targeting rule that servesbinet
if the emails email address ends with@faas.com
. -
Create a new server-side API key. This can be done by navigating to
Admin settings
>API keys
>Create API key
-
Open the
.env
file and make the value ofSPLIT_KEY
the key copied above
Now that everything is configured, you should be able to start the demo. Once it's started, select split
from the provider list located at the bottom right of your screen. You should now be able to control the demo app via Split!
Harness Feature Flags is a new approach to feature management that empowers teams to move faster and have more control at the same time. Templatize feature rollouts, automate release workflows, build using GitOps and config as code, and get complete control over what gets released and when, without sacrificing velocity.
Follow these steps to setup Harness for the demo:
-
Sign-in to your Harness account. If you don't already have an account, you can use the free plan.
-
Use an existing organization and project or create a new one.
-
Create a new boolean feature flag called
new-welcome-message
and confirm the ID isnewwelcomemessage
. -
Create a new multivariate feature flag called
hex-color
and confirm the ID ishexcolor
. Add three variants with the following names and values: red -c05543
, green -2f5230
, and blue -0d507b
. -
Create a new multivariate feature flag called
fib-algo
and confirm the ID isfibalgo
. Add these variants to both the name and value:recursive
,memo
,loop
,binet
, anddefault
. -
Add a new targeting group called
Fib3r Employees
by going toTarget Management
>Target Groups
>New Target Group
. -
Add a targeting condition that looks for the
Identifier
to end with@faas.com
. -
Add the fib-algo flag and set the variation to
binet
. -
Create a new server-side SDK key. This can be done by navigating to
Environments
>Development
>New SDK Key
-
Open the
.env
file and make the value ofHARNESS_KEY
the key copied above
Now that everything is configured, you should be able to start the demo. Once it's started, select harness
from the provider list located at the bottom right of your screen. You should now be able to control the demo app via Harness!
LaunchDarkly unleashes developer productivity for the software-powered world by fundamentally changing how you deliver software to your customers. With LaunchDarkly's feature management platform, empowered developers can empower the business to release new features faster and more efficiently than ever.
Follow these steps to setup LaunchDarkly for the demo:
-
Sign-in to your LaunchDarkly account. If you don't already have an account, you can sign up for a free trial.
-
Create a new feature flag with the key
new-welcome-message
using the default boolean flag variation. -
Create a new feature flag with the key
hex-color
. Set the flag variations tostring
and add three variations with the following variation and name:c05543
- red,2f5230
- green, and0d507b
- blue. -
Create a new feature flag with the key
fib-algo
. Set the flag variations tostring
and add these variants to both the variation and name:recursive
,memo
,loop
,binet
, anddefault
. -
Select the
fib-algo
flag and add a targeting rule that looks for theemail
to end with@faas.com
and servesbinet
. -
Navigate to
Account settings
>Environments
and copy the SDK Key associated with the environment you would like to use. -
Open the
.env
file and make the value ofLD_KEY
the key copied above.
Now that everything is configured, you should be able to start the demo. Once it's started, select launchdarkly
from the provider list located at the bottom right of your screen. You should now be able to control the demo app via LaunchDarkly!
Flagsmith is an open source, fully featured, Feature Flag and Remote Config service. They support a low latency hosted Edge API, deployment to your own private cloud, or running on-premise. Flagsmith makes it easy to create and manage features across web, mobile, and server side applications.
Follow these steps to setup Flagsmith for the demo:
-
Sign-in to your Flagsmith account. If you don't already have an account, you can sign up for the free plan.
-
Navigate to
Environment
>Development
>Features
. -
Create a new feature with the id
new-welcome-message
. Enabled the feature and add atrue
andfalse
variation values. Confirm thattrue
is the control value and set to 100%. -
Create a new feature with the id
hex-color
. Enabled the feature and add ac05543
,2f5230
and0d507b
variation values. Confirm thatc05543
is the control value and set to 100%. -
Create a new feature with the id
fib-algo
. Enabled the feature and add arecursive
,memo
,loop
,binet
, anddefault
variation values. Confirm thatrecursive
is the control value and set to 100%. -
Create a new segment called
fib3r_employees
and add a rule that checks if email traitemail
contains@faas.com
. -
Select the
fib-algo
feature under the development environment and add a segment override. Select thefib3r_employees
override, enable the override, and confirm the control is set tobinet
. -
Navigate to
Environments
>Development
>Settings
and create a new server-side environment key. -
Open the
.env
file and make the value ofFLAGSMITH_ENV_KEY
the key copied above.
Now that everything is configured, you should be able to start the demo. Once it's started, select flagsmith
from the provider list located at the bottom right of your screen. You should now be able to control the demo app via Flagsmith!
The follow evaluation context is available during flag evaluation. That means any of these properties can be used when defining rule in the feature flag manager of your choosing.
Name | Description |
---|---|
ip | The IP address sent from the browser. This comes from the x-forwarded-for header. |
The email address of the logged in user. Returns anonymous if the user is logged out |
|
targetingKey | Same as email |
method | The HTTP method used (e.g. GET, POST, PUT) |
path | The HTTP path of the request (e.g. /hex-color) |
ts | The current time in milliseconds |
Confirm that the follow ports are available 30000
and 16686
.
To add a vendor to the demo, follow the vendor specific section in the documentation. An SDK key must be added to the appropriate property in the .env
file and the demo needs to be restarted.