Using Flag Dependencies to Coordinate Releases

Rolling out a change involving both the backend and frontend can be a challenging task. Fortunately, some tools can help make the process smoother and less risky. In this article, we’ll take a look at how to use the Split SDK and flag dependencies to roll out a change using Typescript with React and Express.

The Split SDK

Split is a feature management platform that allows you to manage feature flags and rollouts at scale. It allows you to release new features safely by controlling their availability to your users. The Split SDK is a library that you can use to integrate feature flags into your application. It’s available in multiple languages, including Typescript, which we’ll be using in this example.

Setting Up Split

First, we need to set up Split. If you don’t already have a Split account, you can sign up for a free trial. Once you’ve signed up, you’ll need to create a new Split workspace for your project. This workspace will contain all of your feature flags and metrics.

You’ll also need to set up API Keys to use with your client-side and server-side SDKs by following these instructions. You should have one of each before proceeding.

Next, we’ll need to install the Split SDK in both your React and Express projects. 

Integrating the Split SDK in Your React Application

Let’s start by installing the Split React SDK using npm:

npm install @splitsoftware/splitio-react

Once the SDK is installed, we’ll need to initialize it with our client-side Split API key.

// The npm package exposes the different components and functions of the library as named exports. 
import { SplitFactory, withSplitFactory } from '@splitsoftware/splitio-react';




// Create the config for the SDK factory. 
const sdkConfig: SplitIO.IBrowserSettings = { 
  core: { 
    authorizationKey: '<your client-side api key>', 
    key: '<your user key>'
  } 
};
Code language: JavaScript (javascript)

The authorizationKey is your client-side Split API key, which you can find in the Split dashboard. The key is a unique identifier for the current user. For applications where your users are authenticated, this is often the user ID, however, this can be anything you choose. We’ll use this later to determine which feature flags the user should see.

Now we need to make Split available to your application. If you prefer to use the SplitFactory component, you can wrap your App like this:

const App: React.ComponentType  = () => ( <SplitFactory config={sdkConfig} >
    <MyApp />
  </SplitFactory> );
Code language: JavaScript (javascript)

If you prefer, however, to use the SplitFactory HOC, the alternative would look like this:

const App: React.ComponentType = withSplitFactory(sdkConfig)(MyApp);
Code language: Arduino (arduino)

Integrating the Split SDK in Your Express Application

Now we can do the same for our Express application. We can start by installing the Split SDK using npm:

npm install @splitsoftware/splitio
Code language: CSS (css)

Once the SDK is installed, we’ll need to initialize it with our server-side Split API key.

import SplitFactory from '@splitsoftware/splitio';

const sdkConfig: SplitIO.IServerSettings = { 
  core: { 
    authorizationKey: '<your server-side api key>', 
  };

const factory: SplitIO.ISDK = SplitFactory(sdkConfig); 

const splitClient: SplitIO.IClient = factory.client();
Code language: JavaScript (javascript)

The authorizationKey is your server-side Split API key, which you can find in the Split dashboard.

Creating a Feature Flag

Now that we have Split set up, let’s create a feature flag. In this example, we’ll create a feature flag that controls the visibility of a new button on our website. We’ll call this flag newButton.

To create the flag, go to your Split dashboard and click on “New Split.” Give your split a name (e.g., “New Button”) and a description (e.g., “Show a new button on the homepage”). Next, click on “Add Treatment” and create two treatments: “on” and “off.”

Now, we can use the Split SDK to determine whether to show the button to the user. 

Here’s an example of how we could do this in our React app:

import { useSplit } from '@splitsoftware/splitio-react';

function HomePage(): ReactElement { 
  const { isReady, treatments } = useSplit('newButton'); 
  if (!isReady) { // Split SDK is not yet ready
    return null;
  }
  const showNewButton: boolean = treatments.newButton === 'on';
  return (
    <div> {
        /* Existing content */
      }
      {showNewButton && <button>New Button</button>}
    </div>
  );
}
Code language: JavaScript (javascript)

The useSplit hook from the @splitsoftware/splitio-react library allows us to retrieve the newButton treatment for the current user. We can then use this to determine whether to show the new button.

Since you haven’t set any targeting rules to return the “on” treatment, the button should not display. We’ll update this once we set up the backend flag.

Rolling Out the Change

Now that we have our feature flag set up, we can use it to roll out our frontend changes. But, in this example, we’re making a change that requires updates to both the backend (Express) and frontend (React) code. We want to make sure that the new feature is fully functional and tested before rolling it out to all users. We’ll use flag dependencies to help us achieve this.

Flag dependencies allow us to specify that one flag should be dependent on another flag. In this case, we’ll create a new flag called newButtonBackend that controls the availability of the new button on the backend. We’ll then create a flag dependency that ensures that the newButton flag is only available to users if the newButtonBackend flag is also available.

To create the newButtonBackend flag, follow the same steps as before to create a new split in your Split dashboard. For the description, you could use something like “Enable the new button on the backend”. For the treatments, create an “on” treatment with a 100% rollout and an “off” treatment with a 0% rollout.

Once you’ve created the newButtonBackend flag, you can set up the flag dependency by going to the “Targeting Rules” section in your newButton split and using the dependency matcher. Select “is in Split” from the matchers drop-down, newButtonBackend as the dependent flag, and “on” as the dependent treatment. You can now set the rule to serve 100% “on.”

You’ve now ensured that your newButton flag cannot return “on” unless your newButtonBackend flag also returns “on”!

Updating the Backend Code

Next, we need to update the backend code to make sure that the newButtonBackend flag is being used to control the availability of the new button logic. Here’s an example of how we could do this in our Express app:

import { Request, Response } from 'express';


app.get('/', (req: Request, res: Response) => {
  const userId: String = req.query.userId as string;
  const showNewButton: boolean =  splitClient.getTreatment(userId, 'newButtonBackend').treatment === 'on'; 


if (showNewButton) {
  // logic for when new button is to be shown
}

res.render('home');
Code language: C# (cs)

The getTreatment method from the Split SDK allows us to retrieve the newButtonBackend treatment for the current user. We can then use this to determine whether to execute logic for the new button on the backend.

Note: We’ve made the assumption that you’re using userId as the key for the Split and that it’s being passed as a request parameter to the Express application. This must be the same key that is used to initialize the Split React SDK.

Conclusion

In this example, we walked through how to use the Split SDK and flag dependencies to roll out a change involving both backend and frontend development in React and Express. We created a new feature flag, set up a flag dependency, and updated the backend and frontend code to ensure that the new feature is only available to users when all the necessary dependencies are in place.

Of course, this is just one example of how you could use feature flags and flag dependencies in your own projects. Depending on your needs, you may need to customize these solutions to fit your specific use case. But hopefully, this example gives you a good starting point for implementing feature flags in your projects.

Remember, using feature flags is not a silver bullet solution to all development challenges. It can add complexity to your codebase and requires careful planning and testing to be successful. However, if implemented correctly, feature flags can be a powerful tool to help you build better software and deliver value to your users.

Want to Dive Deeper?

DORA Metrics & How Feature Flags Help You Measure Up

DORA metrics are the benchmark all software teams should use to measure their success. Feature flags can help you raise them.

How We Use Autoscaling to Save Money With Kubernetes 

Find out how autoscaling can save you money with Kubernetes.

How We Introduced Guardrail Metrics for Our Continuous Integration Pipeline

Find out what guardrail metrics can do for your CI pipeline.

Deliver Features That Matter, Faster with Split

Split is a feature management platform that attributes insightful data to everything you release. Whether your team is looking to test in production, perform gradual rollouts, or experiment with new features–Split ensures your efforts are safe, visible, and highly impactful. What a Release. Get going with a free account today, Schedule a demo to learn more, or contact us for further questions and support.