<

Getting Started with Feature Flags in Unleash

Unleash
DevOps
Survey

Are you familiar with Feature Flags? They are a powerful tool that makes it easy to control the release of new features and conduct A/B testing. However, managing feature flags is not easy without the right management tool. In this article, we will discuss Unleash, a tool that streamlines the management of feature flags.

Unleash
Unleash

The Unleash repository is here 👉GitHub - Unleash

Challenges and Solutions of Feature Flags

Feature flags are a method of embedding a boolean switch in the code to control the activation and deactivation of new features. They are used for things like canary releases and A/B testing, to display new features only to specific users, or to test the performance of new features.

There are several ways to manage feature flags, including environment variables, definition files (CSV, YML, JSON), and databases. However, these management methods have problems such as taking time to switch flags and forgetting to delete unnecessary flags. This is where the feature flag management tool Unleash comes in.

Why Unleash?

Unleash is an open-source tool that makes managing feature flags easy. It can be used in various languages and frameworks, enabling control of new features, efficiency of testing, and concurrent work on features.

The main features of Unleash are as follows:

  • GUI-based operation: It's easy to switch flags ON/OFF, and flag management is possible even for non-engineers (like data analysts).
  • Flexible testing capabilities: Not only A/B testing, but multivariate testing is also possible.
  • Rich integration: You can share the state of flags by integrating with Slack, Datadog, etc.
  • API first: It's easy to integrate with other applications and systems.
  • Self-hosting and cloud service: You can host it yourself or use a cloud service.

With these characteristics, Unleash streamlines the management of feature flags and accelerates the development flow.

Setting Up Unleash and How to Use Feature Flags

Now, let's introduce the flow of actually using Unleash. This time, we will create a feature flag in Unleash and refer to it from React.

For setting up Unleash, refer to the official documentation's Unleash - Get started in 2 steps and try it out in your local environment first. If you want to build in a cloud environment, we recommend fly.io, where PostgreSQL is available for free.

Once the setup is complete, the Unleash screen will be displayed.

Unleash
Unleash

Let's create a feature flag. Click on New feature toggle and enter new_feature as the name.

New feature toggle
New feature toggle

Next, generate the API token necessary for the connection from React to Unleash. Select Configure > API access from the top of the Unleash screen.

API access
API access

Click New API token and create an API token.

New API token
New API token

This time, to use Unleash on the client side (React), select Client-side SDK and generate an API token. Of course, it is also possible to use Unleash from the server side. Here, set the environment to development. This allows you to set the API token for each environment. If you need an API token for production, generate it separately.

Next, set the generated API token to REACT_APP_UNLEASH_API_TOKEN and use it in the following React code.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { FlagProvider } from "@unleash/proxy-client-react";

const config = {
  url: `${process.env.REACT_APP_UNLEASH_URL}/api/frontend`,
  clientKey: `${process.env.REACT_APP_UNLEASH_API_TOKEN}`,
  refreshInterval: 1,
  appName: "default",
};

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <FlagProvider config={config}>
      <App />
    </FlagProvider>
  </React.StrictMode>
);

Here, we show an example of using the feature flag new_feature.

import React from "react";
import { useFlag } from "@unleash/proxy-client-react";

function App() {
  const flag = useFlag("new_feature");
  return <div>{flag && "new_feature"}</div>;
}

export default App;

With this setting, you can turn the feature flag ON/OFF in real time from the Unleash GUI. The changes are reflected in real time on the frontend via Unleash.

Below is a demo of the feature flag. For convenience, we are using the production environment. You can view the video by clicking on the image below.

Feature flag demo
Feature flag demo

That's the basic usage of Unleash.

Unleash Feature: Activation Strategies

In Unleash, you can set Activation Strategies to control the activation of feature flags.

Unleash - Activation Strategies

There are four Activation Strategies.

  • Gradual rollout
    • Gradually deploy to a portion of users. Also, ensure that the same experience is provided each time each user visits.
  • Standard
    • This strategy turns the feature on/off for all users.
    • However, it is recommended to use the Gradual rollout strategy.
  • IPs
    • Enable the feature for a set of specific IP addresses.
  • Hosts
    • Enable the feature for a set of specific hostnames.

The image below is the setting screen for Gradual rollout.

Gradual rollout
Gradual rollout

Gradual rollout

In particular, the Gradual Rollout strategy can also be used for AB testing.

Unleash feature: Variant

In Unleash, a feature called Variant is provided for all feature flags. This allows users to be divided into more detailed segments.

Unleash - Feature toggle variants

For example, I set up four Variants for the new_feature feature flag I created earlier, as shown in the image below. Each Variant is selected based on the set Weight.

Feature toggle variants
Feature toggle variants

Below is an example of using the Variant of new_feature. The name of the Variant set earlier is entered in variant.name. Therefore, it is possible to branch the process based on this variant.name.

import React from "react";
import { useVariant } from "@unleash/proxy-client-react";

function App() {
  const variant = useVariant("new_feature");
  if (!variant.enabled) return <>Default</>;
  switch (variant.name) {
    case "BlueButton":
      return <>BlueButton</>;
    case "GreenButton":
      return <>GreenButton</>;
    case "RedButton":
      return <>RedButton</>;
    case "YellowButton":
      return <>YellowButton</>;
  }
}

export default App;

In this way, not only AB testing but also multivariate testing can be performed.

Unleash feature: Toggle type

In Unleash, various types can be set for feature flags. Each type has a different lifetime, and feature flags whose lifetime has expired are marked. It is recommended to archive marked feature flags.

Unleash - Feature toggle types

The types of feature toggles are classified as follows.

  • Release: Enables trunk-based development of teams practicing continuous delivery. The expected lifetime is 40 days.
  • Experiment: Conducts multivariate testing or AB testing. The expected lifetime is 40 days.
  • Operational: Controls operational aspects related to system operation. The expected lifetime is 7 days.
  • Kill switch: Enables graceful degradation of system functions. (Permanent)
  • Permission: Changes the features and product experiences that specific users receive. (Permanent)

Feature flags whose lifetime has expired become technical debt. A detailed article about technical debt related to feature flags is introduced in the link below. Please take a look.

Unleash - technical-dept

In Unleash, a metric called Health is displayed. A low value indicates the accumulation of technical debt. Let's strive to properly archive feature flags.

Unleash health
Unleash health

Unleash Features: Others

Unleash is equipped with various features as described below.

  • Adding environments
  • Using the Playground
    • A Playground is available to check the behavior of feature flags.
    • Access URL: https://<UNLEASH_URL>/playground
  • Setting CORS origins
    • CORS settings can be made to allow access from the frontend to the Unleash server.
  • Setting the approval flow for feature flags

Conclusion

Unleash is highly recommended as the ideal tool for managing feature flags. By using Unleash, switching flags becomes easy, and you can manage feature flags quickly without going through the deployment flow. You can conduct a variety of tests and improve the product based on the results. The speed and quality of product development will be greatly improved, so please give it a try. Thank you for reading to the end. Please send a badge!

supported by ChatGPT

If it was helpful, support me with a ☕!

Share

Related tags

DevOps
Survey