LaunchDarkly SDK: Feature Flag Implementation Guide

Overview

LaunchDarkly is a feature management platform that enables teams to control feature rollouts, A/B testing, and gradual deployments without code changes. The SDK provides real-time feature flag evaluation.

Core Concepts

Feature Flags

• Boolean Flags: Simple on/off toggles
• Multivariate Flags: Multiple variations (strings, numbers, JSON objects)
• Targeting Rules: Segment users based on attributes
• Rollout Percentages: Gradual user exposure

Key Components

1. SDK Client: Initializes connection to LaunchDarkly
2. User Context: Identifies and attributes users
3. Flag Evaluation: Retrieves flag values for users
4. Event Tracking: Sends analytics to LaunchDarkly

Implementation Steps

1. Installation

npm install launchdarkly-js-client-sdk
# or
yarn add launchdarkly-js-client-sdk

2. Initialize SDK

import * as LDClient from 'launchdarkly-js-client-sdk';

const client = LDClient.initialize('YOUR_CLIENT_SIDE_ID', {
  user: {
    key: 'user-123',
    name: 'John Doe',
    email: 'john@example.com',
    custom: {
      plan: 'premium',
      region: 'us-west'
    }
  }
});

// Wait for SDK to be ready
await client.waitForInitialization();

3. Evaluate Flags

// Boolean flag
const showNewFeature = client.variation('new-feature-flag', false);

// Multivariate flag
const uiTheme = client.variation('ui-theme', 'light');

// With details
const flagDetail = client.variationDetail('feature-flag', false);
console.log(flagDetail.value);
console.log(flagDetail.reason); // Why this value was returned

4. Listen for Changes

client.on('change:feature-flag', (newValue, oldValue) => {
  console.log(`Flag changed from ${oldValue} to ${newValue}`);
  // Update UI reactively
});

client.on('change', () => {
  console.log('Any flag changed');
});

5. Update User Context

await client.identify({
  key: 'user-456',
  name: 'Jane Smith',
  custom: {
    plan: 'enterprise'
  }
});

React Integration Example

import { useFlags, useLDClient } from 'launchdarkly-react-client-sdk';

function App() {
  const { newFeature, betaUI } = useFlags();
  const ldClient = useLDClient();

  return (
    <div>
      {newFeature && <NewFeatureComponent />}
      {betaUI ? <BetaUI /> : <StandardUI />}

      <button onClick={() => ldClient.track('user-action')}>
        Track Event
      </button>
    </div>
  );
}

Advanced Features

Targeting Rules

// In LaunchDarkly dashboard, create rules like:
// - Target specific users
// - Target by custom attributes (plan, region, etc.)
// - Percentage rollouts
// - Scheduled rollouts

A/B Testing

const variant = client.variation('ab-test-flag', 'control');

if (variant === 'treatment') {
  // Show treatment version
} else {
  // Show control version
}

// Track conversion
client.track('purchase', { value: 99.99 });

Custom Events

client.track('feature-used', {
  featureName: 'new-dashboard',
  timestamp: Date.now()
});

client.track('conversion', { revenue: 150 }, 150);

Best Practices

1. Initialize Early: Set up SDK before rendering UI
2. Handle Offline: Provide sensible defaults
3. Segment Users: Use custom attributes for targeting
4. Track Events: Monitor feature adoption
5. Clean Up: Remove listeners when components unmount
6. Cache Flags: Store evaluated flags for performance
7. Error Handling: Implement fallbacks for SDK failures

Common Patterns

Feature Rollout

// Start with 0%, gradually increase to 100%
// LaunchDarkly handles percentage-based targeting
const isEnabled = client.variation('gradual-rollout', false);

Kill Switch

const isServiceDown = client.variation('kill-switch', false);
if (isServiceDown) {
  return <MaintenancePage />;
}

Experimentation

const experiment = client.variation('experiment-flag', 'control');
trackExperimentEvent(experiment);

Troubleshooting

Resources

• LaunchDarkly Documentation
• SDK Reference
• Best Practices Guide

This implementation enables powerful feature management with minimal code changes and maximum control over deployments.