As developers, we release features daily – but how do you ensure those features are working properly in production before you release them to all your users? If you ask me, the answer is feature flags! Feature flags are beneficial because they allow you to test your code in production, perform canary releases, and even conduct A/B testing. The power of React makes it easy to implement these flags. We will walk through how to easily create a feature flag in the UI, install dependencies with npm, and implement your feature flag in your react app.
Setting Up Feature Flags with React
AI Generated Video Summary
This Talk discusses setting up feature flags with React, which allows for controlled rollouts of new features. Feature flags provide more control without touching the source code and can target specific users or types of users. In React, feature flags can be created and configured using Split.io. Different treatments can be applied to determine if a feature should be shown. Feature flagging provides control and flexibility in development.
1. Setting up feature flags with React
We're going to talk about setting up feature flags with React today. 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.
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.
2. Using Feature Flags for Controlled Rollouts
Once the back-end is ready, I can push a commit to enable the delete button. Feature flags have various use cases, including testing in prod, kill switches, microservices migration, AB testing, subscription management, Canary releases, and experimentation. Feature flags improve development, testing, and delivery of new features while minimizing risks. They also allow for measuring the impact of changes and providing control over the user experience without code commits.
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.
3. Implementing Controlled Feature Flags
I want to roll out this delete functionality in a controlled way using feature flags. With a feature flagging system, I get more control without touching the source code. I can target specific users or types of users. The treatment controls who can delete tasks. When the treatment is on, the user can delete tasks, and when it's off, they can't.
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.
4. Creating and Configuring Feature Flags in React
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.