Using LaunchDarkly's Feature Flags with React to Display Real Time Information

Have you ever needed to update information on a web page on short notice but found the whole process complicated, slow and error prone? Editing the code, re deploying...wouldn't it be great if you could do that in a simple admin console without changing any code?
Well you can with LaunchDarkly!

LaunchDarkly is a service that allows users to easily implement feature flags in their projects. Feature flags can be used to modify user defined features in a running app through the LaunchDarkly admin console.

This is incredibly powerful in cases where you would like to add a feature to a product but want to control it after deployment, avoiding the need for a re-deploy if you discover things don't go as planned.

Feature flags can also be used to roll out features to a specified percentage of users or users that meet certain requirements, allowing for super simple canary launches.

Aside from devops and feature rollouts there are many other real world use cases for LaunchDarkly.
In this post we’ll cover how you could use LaunchDarkly to display the results of a certain well-known sporting event (who shall not be explicitly named, but it's related to something Super 🏈) where there is no available API and the information needs to be manually updated.

LaunchDarkly helps you decouple deployment from release and also provides a mechanism for non-technical people to manage the behaviour of your running service.

So grab a drink and sit down with me as we explore the power of feature flags.
This example uses Create React App to spin up an empty project and Netlify for hosting. ❤️

Let's start with the quickstart tutorial. This takes you through the first steps of creating a feature flag.

First create a feature flag and choose a name. Then choose which application language you plan to use and select the environment it will be used for.

As this example is using React, I chose to use an integration which supports the use of LaunchDarkly with React LD-React.
It follows idiomatic React patterns and uses the websocket LaunchDarkly API so feature flag changes will be pushed to client without the need for a page refresh.

Note

Something to note with the use of the client side SDK is that you MUST manually enable feature flags for use client-side by checking a box in the settings section within the LaunchDarkly admin console. see below Otherwise you may find yourself scratching your head for a while asking yourself 'but whyyyyy?. Well, that's why.

The code snippet below shows a flag that is a simple boolean variable called showCountDown. It toggles a countdown React component on and off.

{
  this.props.flags.showCountDown ? (
    <H1Title>
      <Countdown date={"Sun, 03 Feb 2019"} />
    </H1Title>
  ) : (
    <div />
  );
}

This second flag is called a multivariate flag. It allows a user to define a number of variations which return a string value rather than a bool.
It has eight variations to represent all the teams competing in the sports event this example was based on. Go the Gliders!

Something you may notice when you have your first flag working is the page information is updated without reloading the page. This is great in the event of someone waiting for a page to update without refreshing it regularly. It ensures they will have the correct information immediately.

Aside from feature flags, LaunchDarkly also provides support for A/B testing and tracking goals.
Being able to display certain info/features for specific groups and then getting analytics on user interactions is very useful.

So go ahead and implement those flags! I would love to hear about how you're using feature flags in your applications.

For a closer look at the project check out the repo here or visit the live version.

Happy hacking.

Comments

[MahmoudJbor]

Nice article, feature flagging are great, the only issue with these flags, is that in case you have really big features, it will add overhead to manage the code, it will increase the tech dept, because if you release a feature to all customers it will be meatless to have to versions of the same feature and one of them isn't called at all!

[Roseanna Mcfarlane]

Thank you :) Yes it's true that it comes down to a cost benefit analysis. Ie, Is the use of feature flags worth the added code and overhead. It will be a case by case basis for sure and dependent on the project scope etc.

[Chris Joy]

Good read. Btw I think LaunchDarkly uses Server-Sent Events (not WebSockets)

[Zachary Davis]

I can't believe you have to manually enable it for client-side usage. Thank you so much!

[Lev Lazinskiy]

Hey Zachary, just FYI you can change this in the project setting to make flags available to the client-side by default.

In practice, we see that most users have significantly more backend flags than frontend flags. The main benefit of not sending these to the frontend are it lowers the payload size which makes everything faster.

[Lev Lazinskiy]

Thanks for this great overview of LD!