Using feature flags in JavaScript

Feature flags are a technique used in software development to enable or disable certain features of an application. They allow developers to control the release of new features or modifications to existing features, providing a way to gradually roll out new functionality or experiment with different versions of a feature. Feature flags also enable developers to quickly turn off features if something goes wrong or if a feature needs to be temporarily disabled. This can help reduce the risk of deploying new code, increase agility, and improve the overall quality of the software.

In this tutorial, we show how to use AppFlags to implement feature flags in your JavaScript application.

Add the AppFlags SDK to your project

Install the appflags dependency in your project.

For example, if you are using npm:

npm install appflags

Initialize AppFlags in your app

Initialize the AppFlags client as soon as your application launches for the best performance. The client initialization is async and will not block your application from loading.

import AppFlags from "appflags";

const user = {
    key: "UNIQUE_USER_KEY" // some string unique to the user
}
AppFlags.initialize("YOUR_CLIENT_KEY", user);

Retrieve a feature flag

Use the getFlag function to retrieve a feature flag.

AppFlags.getFlag("flag_key", flag => {
    const value = flag.value;
});

The AppFlags client takes up to 100ms to initialize on page load. The getFlag hook will return async once the client is initialized. Once initialized, getFlag returns the flag immediately. This is fast enough to be imperceptible to your users.

Use the onFlagChanged function to subscribe to a feature flag. This will return immediately with the current flag and be invoked again whenever your feature flag changes.

AppFlags.onFlagChanged("flag_key", flag => {
    const value = flag.value;
});

Using data payloads

In addition to boolean values, feature flags can contain data payloads (strings, numbers, or JSON) that you can use to configure your app.

As a simple example, you could have a feature flag named button_text to set the text for a button.

AppFlags.getFlag("button_text", flag => {
    const buttonText = flag.value;
});

Example project

An example project for using AppFlags in JavaScript can be found here: https://github.com/AppFlags/example-javascript-web

React SDK

If you are using React, you can use the React specific SDK.

You can read more here: Using feature flags in React

Conclusion

As you can see in these examples, feature flags are a simple yet powerful tool that you can use to control the release of new features or modifications to existing features in your JavaScript application.

If you’re interested in trying feature flags in your JavaScript application, you can sign up for AppFlags for free.

Using feature flags in JavaScript