Split flags, feature flags, or toggles are a powerful technique to allow teams to modify system behavior without changing code. Implementing Split flags as a pattern is a way to manage code complexity and deliver new features to users using CI/CD (continuous integration/continuous delivery) pipelines, reducing the time to value and decreasing the risk of deploying buggy, error-ridden code to production.
Split flags are used as a part of deploying software updates via CI/CD pipelines without disrupting existing functionality. There are different ways to implement feature flags in your React app. We’ll review three of them:
You need to create a React project using the create-react-app command or following the commands:
Once you have your project created the first step will be to create a splitFlag.js file with an array of JSON objects where we specify the following format
Each Split/feature flag must have a unique name that refers to the feature name, usually in camelCase format, a short description of the functionality, and an active property to determine whether the toggle is on or off.
We can use localStorage in order to store the split/feature flags. Define a function to initialize the Split Flags, called initFeatures. Then call this function in the startup logic we use to start the application. In this case, the startup logic is the App function as shown in the code snippet below:
We need to create a High Order Component (HOC) to use the Split/Feature flags in our app. This HOC will receive two props: name and children.
The name will be our Split/Feature flag name.
The children will be the component we want to render.
In this new HOC, the first thing we need to do is to get the Split/Feature Flags from our localStore. Using the name we passed via Props, we can check whether or not the Flag is active.
If the flag is active (it means the active property is set to true) we render the children otherwise we render null:$cod
Once we have our Feature Component in place we can use it by importing it in the file we want and passing the name of the component using our Split/Feature flag pattern, like the following code snippet:
There are several open-source libraries you can use to implement the Split/Feature flag. These can be found on the npm website by searching for the term: “feature flag.” This will lead you to different open-source packages that have their own readme that show you how to use them. Here are a few examples of these packages:
The advantages of using open-source libraries are they are free and easy to use, and quick to set up. You will need to consume the libraries into your application, and call the functions created, passing and return variables to understand the state of your feature flag.
However, there are also disadvantages of open-source feature flag libraries, such as the fact that maintenance and improvements are not guaranteed. Additionally, the libraries might not suit your needs completely. So you might end up needing to refactor to add features specific to your application.
There are cloud-based solutions that allow you to implement the Feature/Split flag pattern in your React application, such as split.io, which is a service that provides React integration. Please review this video to implement it in your project.
The advantage of using a cloud-based solution is that we have a user interface that provides an easy way to manage our Feature flag, we can turn it on/off remotely and the changes will be reflected in the application without creating a new version of it.
On the other hand, we have to adapt our codebase to consume the Cloud Service Solution. This service is also not free.
Feature toggling is a powerful technique that allows features within a frontend to be integrated often and early already during development. It reduces the risk of big releases and embraces customer feedback. However, like anything else, it is not a silver bullet and requires discipline and lightweight processes across all parts of the organization. Knowing when and how to apply feature toggles is crucial. We recommend you consider adopting feature toggling with your team.
We’d love to learn more about your project.
Engagements start at $75,000.