Name		Name	Last commit message	Last commit date
Latest commit History 87 Commits
.vscode		.vscode
assets/images		assets/images
packages		packages
schemas		schemas
scripts		scripts
.dockerignore		.dockerignore
.editorconfig		.editorconfig
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
babel.config.json		babel.config.json
flags.json.example		flags.json.example
jest.config.js		jest.config.js
jest.preset.js		jest.preset.js
nx.json		nx.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.base.json		tsconfig.base.json
workspace.json		workspace.json

Repository files navigation

OpenFeature Playground: Demo and API and SDK Experimentation

The purpose of this repository is to demonstrate and experiment with existing and proposed functions of OpenFeature. These experiments were written in TypeScript and focus on NodeJS, but the basic concepts translate to most implementation languages.

Introductory Demo

If you're new to OpenFeature, or feature-flags in general, we recommend you start by running the demo UI, along with the JSON-file provider. A guided tour will walk you through some basic concepts. To run the demo:

Run npm ci
Run the JSON-file provider: npm run json-demo
In a new terminal session run the UI: npm run ui
Open localhost:4200 in your browser!

You can also run the demo with any provider of your choice, by running that provider instead of the JSON-file provider (see demo providers). You can also generate scaffolding to create your own custom provider.

A video recording of the demo flow is available:

Application Author API

These are the APIs and interfaces that Application Author (who doesn't particularly care about the underlying feature flag implementation) uses OpenFeature to control "pivot points" in their code.

// initialize OpenFeature and create a client
openfeature.registerProvider(
  new MyFeatureFlagSystemProvider({ apiKey: 'my-secret-api-key' })
);
const client = openfeature.getClient();

// evaluate a boolean flag
const myFlagEnabled = await client.isEnabled('my-boolean-flag-key', false); // false is the default enabled state

// get a string flag value
const myStringFlagValue = await client.getStringValue(
  'my-string-flag-key',
  'hello world!' //default value
);

// get a numeric flag value
const myNumericFlagValue = await client.getNumberValue(
  'my-numeric-flag-key',
  1337 // 1337 is the default value
);

// get a object flag value
const myObject = await client.getObjectValue<MyObject>(
  'my-object-flag-key',
  new MyObject() // MyObject instance is the default value
);

// provide additional attributes to flag evaluation
const requestData = {
  ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress,
};
const myStringFlagValue = await client.getStringValue(
  'my-string-flag-key',
  'hello world!',
  requestData
);

// get the details of a flag evaluation
const { flagKey, value, variant, reason, errorCode, executedHooks } =
  await client.getStringDetails('my-string-flag-key', 'hello world!');

// attach additional handlers to the flag evaluation lifecycle (can also be attached globally and on client, to impact all evaluations)
const myStringFlagValue = await client.getStringValue(
  'my-string-flag-key',
  'hello world!',
  requestData,
  {
    hooks: [
      {
        name: 'log',
        // "before" can be used for logging, telemetry configuration, and manipulating attributes
        before: (hookContext) => {
          console.log('before');
        },
        // "after" can be used for logging, telemetry cleanup, and even validating and manipulating the returned value
        after: (
          hookContext,
          evaluationDetails: FlagEvaluationDetails<string>
        ) => {
          console.log('after');
        },
      },
    ],
  }
);

Getting started with the SDK experimentation project

To run the demo scenarios described on this page, please make sure you have the following prerequisites configured on your system.

Git
NodeJS 14 or later
Docker

You can then clone the repo and install the dependencies.

clone the repo: git clone https://github.com/open-feature/playground.git
Install dependencies: npm ci

Available demos:

No-op
Environment Variable Provider
JSON-file Provider Demo
Split Provider
CloudBees Feature Management Provider
LaunchDarkly Provider Demo
Flagsmith Provider Demo
GO Feature Flag Demo
OpenTelemetry and Zipkin

Create a new provider

Providers are an important part of OpenFeature. They're responsible for performing the flag evaluation and must adhere to the feature flag API. To get started, run the following command:

npm run provider-generator

You'll need to provide a name for the generator. After that, the output will contain the path to the new provider class and a start command.

Simple API

A core design principle of OpenFeature is a simple, understandable API. OpenFeature's API needs to be flexible enough to handle all the common use cases of feature flags while being easy to work with. In order to support this, a common API needs to be defined that's capable of supporting core feature flagging use cases. The method names and signatures still need to be agreed upon by the community, but a basic implementation can be found here.

Global Singleton

Inspired by OpenTelemetry, this experimental SDK registers itself globally. Typically doing this is discouraged but, in this case, it provides interesting flexibility. It allows library maintainers to include OpenFeature in their project, even if they're running a different, but compatible version of OpenFeature. An example of how this could be used can be found in the Fibonacci library.

Provider Registration

OpenFeature allows developers to register a provider. Providers are responsible for using the flag identity and context to determine the state of the feature. If no providers are registered, the flags will no-op and return the default value.

Demo Providers

No-op Demo

To see this in action, we'll run the API app found here. Notice that we're using OpenFeature but not registering a provider. Let's run the app and see what happens.

Run npm run no-op-demo
Open http://localhost:3000/message, http://localhost:3000/hex-color/markup, or http://localhost:3000/calculate?num=40 in your browser
Optionally, run the UI as described in the introductory demo

That's it! You should see Welcome to the api!. Unfortunately, that's all you can do without registering a provider. Thankfully, as we'll see in the next section, that part is easy.

Compatibility

Another key design principle of OpenFeature is compatibility with existing open source and commercial feature flag offerings. It should be possible to register a feature flag provider that's responsible for handling the flag evaluation. Only a single provider can be registered at a time and not providing one will cause flag evaluations to return the default value. This can be tested by running the application without registering a provider.

NOTE: You may notice that the demos below don't register providers directly in the app. This is done before the main app starts using the -r node cli argument. The config can be found here.

Environment Variable Provider Demo

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 provider could be implemented.