Frontend Patterns

Pattern

Feature Toggle

Enable or disable features conditionally without code deployments.

Feature Toggle

Problem

Deploying incomplete features to production is risky, but keeping long-running feature branches creates merge conflicts and integration headaches. You want to merge code frequently, but you need to control when features become visible to users. Tying feature releases to code deployments makes rollbacks slow and prevents testing features with specific user segments.

Solution

Control feature availability through configuration rather than code deployment, enabling gradual rollouts and quick rollbacks. This decouples feature releases from deployments and allows testing in production with limited exposure.

Example

This example demonstrates a feature flag system that conditionally enables features based on environment configuration without code deployment.

// Simple feature flag system to control feature availability
class FeatureFlags {
  constructor() {
    // Define feature flags from environment variables or defaults
    this.flags = {
      newCheckout: process.env.FEATURE_NEW_CHECKOUT === 'true',  // From env var
      darkMode: true                                              // Hardcoded enabled
    };
  }

  // Check if a feature is enabled
  isEnabled(feature) {
    return this.flags[feature] ?? false;  // Default to disabled if not defined
  }
}

const features = new FeatureFlags();

// Usage: Conditionally render based on feature flag
function renderCheckout() {
  // Show new checkout if flag is enabled, otherwise show old version
  if (features.isEnabled('newCheckout')) {
    return createNewCheckout();
  }
  return createOldCheckout();
}

Benefits

  • Enables gradual feature rollouts to specific user segments
  • Allows quick feature disabling without code deployment
  • Supports A/B testing and experimentation
  • Reduces risk by limiting feature exposure
  • Facilitates trunk-based development without long-lived branches

Tradeoffs

  • Accumulates technical debt if old toggles aren’t removed
  • Creates code complexity with conditional branching everywhere
  • Can lead to combinatorial explosion of feature combinations
  • Requires infrastructure for toggle management
  • May impact performance with many toggle checks
Stay Updated

Get New Patterns
in Your Inbox

Join thousands of developers receiving weekly insights on frontend architecture patterns

No spam. Unsubscribe anytime.