Setting Up Feature Flags with React

Hi, everyone. I'm Talia. We're going to talk about setting up feature flags with React today. So I want to start off by setting the stage a little bit. Let's say I am a front-end developer working on this to-do list app. And right now, users only have the ability to add tasks to the list. And I want to add the ability to delete tasks. And adding this feature requires back-end work as well because we need a new API endpoint. And I don't know if the back-end change is going to be ready in time. But here's what I've done so far. I have this conditional statement set. And by default, the user is not allowed to delete. So this is the current state. And when I'm testing this feature locally, I flip this boolean to true to test stuff out. And once the back-end is ready and I want my users to be able to see the delete button, then I'm just going to push this commit with the boolean equal to true. And right now, this is working.

And once the back-end is ready and I want my users to be able to see the delete button, then I'm just going to push this commit with the boolean equal to true. And what's great about this is that if there's bugs with the back-end API, it's relatively easy for me to temporarily roll back this release. And so what we've created here is just a super basic example of a feature flag. Code deployment from feature release. And we just saw one example of how we want to use this, but there are so many other ways to use feature flags, so we can use them to test in prod, we can use them as a kill switch to turn features off in production that aren't working. You can use them to safely migrate your micro services. If you have a monolith, you can use this to migrate your micro services to micro services. And then you can use this for AB testing, subscription management, Canary releases and experimentation. And why do we care about these use cases? It's because feature flags improve your ability to develop, test and deliver new features while minimizing risks throughout the process. And this is how you measure the impact of your changes. So feature flagging allows you to directly correlate the impact of your changes by pushing information about the feature flags to your internal analytic system. And so by using a feature flag management application, you are able to set who can see which features without ever committing new code. And this is really great for product owners and non-technical people because they can control the user experience without having to ask the developers to commit new code.

And so, again, I want to roll out this delete functionality out in a controlled way using feature flags. And so the basic feature flag thing I had previously, that if-else statement, it was fine but if I use a feature flagging system, I get way more control and I don't have to touch the source code. And so I can also, what I can do here is I can target specific users or types of users in split. And so these possible states of what your user can see are called treatments. And so for this demo app, the treatment controls who can delete tasks. And so in our case, when the treatment is on, the user will be able to delete tasks, and when the treatment is off, the user will not be able to delete tasks. And this is what it looks like in each case.

And so, again, what I had before, this is a really hacky way to do this because I'm just hard-coding whether or not the user can delete. This is actually the right way to do it in React where depending on the value of the prop, you're either going to show the delete button or not show it. And so what we're going to do today is create a feature flag, install the dependencies, and instantiate and use the SDK.

So, to create a feature flag, you're just going to log in to Split. So all you're going to do is go to Split.io, hit create free developer account, and go through that process. And then you'll see on the left pane, you'll see a button that says, create split. And a split is just another name for a feature flag, so you're going to want to name it, give it something uniquely identifiable. And then in my example, I'm saying I want myself and developers to be able to delete, so everyone else gets the default existing behavior of only being able to add tasks.

Next, I'm going to install my dependencies and configure my React app. So after I create my React app with create React app, all I'm going to do is install the following dependency in my root folder. And then I'm going to instantiate and use the SDK. So the first thing I'm going to do is import the JavaScript SDK. So at the top of my component, I'm going to import split treatments and width split factory. So split treatments is a React component that performs feature evaluation, and we're going to use this in our render function. And then the width split factory higher order component is used to wrap the to do list component when I export it. And then I split my render function into two. And the first one. I return the treatment and configuration from split treatments. And in the names prop, I pass in the name of the feature flag that I created from the UI. In the second render function, I created a variable named allow delete that differentiates between treatment on and off. If the treatments on your long laser to see to delete tasks and if the treatment is off, there's no option to delete. And then I have a function called create tasks that gets called in my render function and conditionally renders the delete button. If the allow delete variable is set to true. After the render functions into the configuration that you're going to use to configure your split instance. So what this does is it initializes with split factory, which is the entry point of the library. Each user will have their own authentication key and you can find yours in the ui. So, the key parameter is telling split who the current user is. So in this case, when you run npm start, you're going to see the delete buttons because you're targeted in the feature flag. When you set debug to true, you're able to see all the logs from split in the browser console. You should pay attention to two things here. One is that you can clearly see I'm the person who's getting the treatment. The second is that you can see that the treatment is set to on for me. Now watch what happens when you change the key to a test user who's not in the split. The delete buttons disappear because the user is not targeted. Remember only developers and myself were. Notice in the console logs I clearly see the treatment is off and I'm now getting the default or existing behavior because I am not logged in. I'm logged in as someone who is not targeted. I hope this example was a clear way to see the value of feature flagging. So feature flagging if you have more questions head to split.io and check out some of our blogs and some of our posts.