🎚 Power to the toggles 🚦

> github.com/tdeekens/flopflip

> Embracing real-time feature toggling in your React application

how feature flags liberate your development workflow

Feature toggling

A technique to provide an alternative to maintaining multiple source-code branches

A feature can be tested even before it is completed

A developer anybody can enable a feature for testing and disable it for other users

What is a toggle

A boolean or a variation

Not hard coded, magic button or query parameters

Configured externally, value is not part of your source code

Why to toggle

Targeted rollouts: by user group, percentage based buckets, stage or cloud region

Reverting is a lot more difficult than turning a feature off again.

Deploying often, means smaller changes,
means less breakage

In action

💨 ...in realtime 🏎

multiple adapters:

in-memory, localstorage,
launchdarkly, splitio

Before

After

Code or didn't happen

<ToggleFeature flag="featureFlagName">
  <Link to="url/to/new/feature" />
</ToggleFeature>

<ToggleFeature flag="featureFlagName">
  {({ isFeatureEnabled }) => (
    <button disabled={!isFeatureEnabled} onClick={this.handleClick}>
      Try out feature
    </button>
  )}
</ToggleFeature>

function ComponentWithFeatureToggle(props) {
   const isFeatureEnabled = useFeatureToggle('myFeatureToggle');

   return (
     <h3>{props.title}<h3>
     <p>
       The feature is {isFeatureEnabled ? 'enabled' : 'disabled'}
     </p>
   );
}