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 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 and a feature flag is a piece of conditional code that lets you separate code deployment from feature release and we just saw one example of how we'd want to use this but there's 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 microservices if you have a monolith you can you can use this to migrate your microservices to microservices and then you can use this for A-B 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 risk 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 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 and 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 and react where depending on the value of the prop you're either going to show the delay 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 into split so are you 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 right 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 up 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 what 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 you're allowing these are 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 insert 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 if you have more questions had to split IO and check out some of our blogs and some of our posts thanks guys