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.