Setting Up Feature Flags with React

Talia Nassi: [0:00] Hi, guys. Today, we're going to set up feature flags with React. I think this skill is really important for developers. Let's get started. I'm Talia, I am a dev advocate at Split. This is my Twitter handle and my email address, in case you guys have questions.

[0:20] Let's talk about feature flags. A feature flag is a piece of conditional code that allows a software development team to separate code deployment from feature release.

[0:31] There are so many different use cases when using feature flags. You can use them to test your features in production to ensure proper functionality. You can also use them to perform A/B testing to figure out which version of a feature gives us a higher conversion rate.

[0:48] You can also use them as a kill switch, which allows you to turn off a feature for everyone, in case something goes wrong and you need to hide your feature.

[0:58] You can also use feature flagging for subscription management, to manage permissions for specific user groups. You can also use a feature flagging system to migrate your monolith to microservices. By taking advantages of a feature flagging framework, you can make this transition safe and do it in a controlled manner.

[1:16] There's a lot more use cases here. There's a lot more benefits, but we don't have time to go through everything. Let's talk about feature flags and React. Today, what we're going to do is create a feature flag, install the dependencies, and configure your React app and then add the feature flag to our code.

[1:39] The first thing we're going to do is create our feature flag and we're going to go step by step through this. It's super intuitive, super easy. The app that I will be adding feature flags to in this example is just a basic to-do list app.

[1:53] Right now, everyone has the ability to add tasks, and I want to add the ability to control whether the current user can delete tasks. I want to roll out this functionality in a controlled way using feature flags. In Split, it's possible to have different treatments like on or off and these possible states of feature flags are called treatments.

[2:16] 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. Here's what it's going to look like in each case, now let's go through how to create your feature flag in the split UI.

[2:32] You'll see a button that says, "Create your Split." This is just another word for creating your feature flag. Once you click on that, you'll be able to enter some more details about the flag. You'll get this prompt, and the first thing you need to do is name your flag and include this name in your code.

[2:53] You should select a name that's really descriptive of what the feature flag is doing. Think about what you're releasing, the name of the team that owns it, and maybe even include the ticket number that's linked to your Scrum board.

[3:06] I have another video where I go into a ton more detail on feature flag maintenance and best practices, and you're welcome to look that up. I can also link it at the end of this video. Then, the next thing you need to do is decide the traffic type.

[3:21] Traffic type defines what differentiates the people, who see your feature and the people who don't see your feature. This can be user-based. It can be location-based. It can be device-based, whatever you decide, and then it's a good idea to include a description.

[3:37] The most important thing here is the targeting rule. After you create your feature flag, you need to have those targeting rules in place where you'll define, who will be targeted inside of your feature flag.

[3:50] Here, I'm putting myself and the developers, and be sure to keep the default rule off. This means that only the people targeted in the feature flag will be able to see the delete button. The next thing we're going to do is install dependencies and configure our React app.

[4:07] After you create your React app with create React app, there's just one dependency that you need to install in your root folder, and that's this NPM install command and just go ahead and install that, and that's it. Now, we're going to add the feature flag to our code.

[4:26] At the top of your component, you're going to import Split treatments with Split Factory from Split. Split treatment is a React component that performs feature evaluation and we're going to use this in our render function.

[4:40] The word 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 in two. In the first one, I returned the treatment and configuration from Split treatments and then in the names prop, I pass in the name as my feature flag that I created from the UI.

[5:02] Note that this must exactly match the name that you inputted when creating your Split. In the second render function, I created a variable named allow delete that differentiates between treatment on and off. If the treatment is on, you're allowing the user to delete tasks and if the treatment is off, then there is no option to delete.

[5:24] After the render functions, enter the configuration that you'll use to configure your split instance. This initializes with Split factory, which is the entry point of the library.

[5:35] Each user will have their own authorization key, and you can find yours in the UI. The key parameter is telling Split who the current user is. In this case, when you run NPM start, you'll see the delete buttons because you're targeted in the feature flag.

[5:51] 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. The first is that you can clearly see that I'm the person who's getting the treatment.

[6:04] 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 was not in the Split. The delete buttons disappear. Why?

[6:18] Because this user is not targeted. Remember that only developers and myself are in the feature flag. Notice the console logs, I clearly see that the treatment is off and I'm now getting the default or existing behavior because I'm logged in as someone who's not targeted.

[6:36] All of that was in my to do list higher order component and then, in my to do items component, I have a function called create tasks that gets called in my render function and conditionally renders the delete button, if the allowed delete variable is set to true.

[6:54] That's it, you've implemented feature flags with React. In the future, I can use this feature flag configuration to deploy all of my changes in a controlled fashion. I could also deploy to production while keeping the flag off by default, and testing the feature in production to ensure functionality.

[7:15] Once I know it's working in prod, then I could release incrementally to users or all at once without any code changes. Here's some links that I'm giving you guys. The first one is a video on feature flag maintenance that I recorded, that really goes into a lot more detail on best practices of feature flags.

[7:35] The second is where to create a free Split account. If you want to mess around with feature flags, that's a great place to start. Then, the third is the link to the repo that has all of this code in it and that's it.

[7:51] Again, this is my contact info. You can email me, you can tweet me if you have questions, and let me know what you think about this tutorial. Have a great day, guys.