Feature Flags

Feature flags are a powerful tool for enabling or disabling features dynamically in your application without needing to redeploy. This library, @justomx/fwf, leverages Growthbook to manage and evaluate feature flags, allowing for more flexible and controlled feature rollouts. By using feature flags, you can experiment with different functionalities, enable A/B testing, or manage gradual feature releases in production environments.

Installation

To install the library, run the following command:

Install dependency @justomx/fwf

npm install --save @justomx/fwf

Usage Example

Below is a basic example demonstrating how to use the @justomx/fwf library to evaluate feature flags based on user attributes. In this example, we iterate through five different users, each with a unique id, to check if the ab_signup feature flag is enabled for them and retrieve its value.

Code Example

import fwf from "@justomx/fwf";

async function main() {
    for (let i = 0; i < 5; i++) {
        const attributes = { id: i };
        const fwfClient = await fwf({ attributes });
        const isOn = fwfClient.isOn('ab_signup');
        const value = fwfClient.getFeatureValue('ab_signup', 'default');

        console.log(`User ${i}: Feature enabled: ${isOn}, Feature value: ${value}`);
    }
}

main();

Explanation

1. Attributes:
   In this example, the attributes object represents user-specific data (e.g., id). These attributes are passed to Growthbook to help evaluate feature flags for different users or segments.

2. fwfClient Initialization:
   The fwf function is called asynchronously to initialize a new feature flag client (fwfClient). This client is configured using the provided user attributes and is responsible for evaluating feature flags.

3. Feature Flag Evaluation:

   • isOn('ab_signup'): Checks if the feature flag ab_signup is enabled for the given user based on their attributes.
   • getFeatureValue('ab_signup', 'default'): Retrieves the value of the ab_signup feature flag. If the flag is not set or disabled, it returns a fallback value ('default' in this case).

4. Looping Through Users:
   The for loop simulates the evaluation of the feature flag for five different users, each with a unique id ranging from 0 to 4.

Output Example

When you run the code, the output will look something like this, depending on the feature flag’s configuration:

User 0: Feature enabled: true, Feature value: 'new_signup_flow'
User 1: Feature enabled: false, Feature value: 'default'
User 2: Feature enabled: true, Feature value: 'new_signup_flow'
User 3: Feature enabled: false, Feature value: 'default'
User 4: Feature enabled: true, Feature value: 'new_signup_flow'

Key Methods

• fwf({ attributes }):
  Initializes the feature flag client with user attributes. These attributes are used to evaluate the state of feature flags.

• isOn(featureName: string):
  Returns a boolean indicating whether the specified feature flag (featureName) is enabled for the given user.

• getFeatureValue(featureName: string, defaultValue: any):
  Retrieves the value of the specified feature flag. If the flag is not set or disabled, it returns the provided defaultValue.

---

Conclusion

Using @justomx/fwf with Growthbook makes it easy to manage and evaluate feature flags dynamically within your TypeScript projects. This allows you to enable or disable features in real-time based on user attributes, perform A/B testing, and control the rollout of new functionalities without disrupting the user experience or requiring new deployments.