FlexFlag JavaScript SDK Documentation

Welcome to the FlexFlag JavaScript SDK documentation. This SDK provides high-performance feature flag evaluation for JavaScript and TypeScript applications with advanced caching, offline support, and framework integrations.

🚀 Quick Start

npm install flexflag-client

import { FlexFlagClient } from 'flexflag-client';

const client = new FlexFlagClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://your-flexflag-server.com',
  environment: 'production'
});

await client.waitForReady();
const isEnabled = await client.evaluate('new-feature', false);

📚 Documentation

Getting Started

Getting Started - Installation, basic usage, and configuration
API Reference - Complete API documentation

Framework Integrations

React Integration - Hooks, components, and React patterns
Vue Integration - Composables, components, and Vue patterns

Advanced Topics

Advanced Usage - Batch evaluation, metrics, custom cache providers
Performance Guide - Optimization tips and best practices
Migration Guide - Upgrading from older versions

✨ Key Features

🚀 High Performance: Sub-millisecond flag evaluation with intelligent caching
🔄 Real-time Updates: WebSocket/SSE support for instant flag updates
📱 Offline Support: Works offline with cached flags and localStorage persistence
⚛️ React Integration: Hooks and components for seamless React integration
🔧 Vue Integration: Composables and components for Vue 3 applications
📊 Performance Metrics: Built-in analytics and performance monitoring
🎯 Advanced Targeting: User segments, rollouts, and A/B testing support
🛡️ TypeScript Support: Full type definitions included
🔧 Configurable: Extensive configuration options for all use cases

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐
│   Your App      │    │  FlexFlag SDK   │
│                 │    │                 │
│  ┌─────────────┐│    │ ┌─────────────┐ │
│  │ React/Vue   ││◄──►│ │   Client    │ │
│  │ Components  ││    │ │             │ │
│  └─────────────┘│    │ └─────────────┘ │
│                 │    │         │       │
│                 │    │ ┌─────────────┐ │
│                 │    │ │    Cache    │ │
│                 │    │ │   Provider  │ │
│                 │    │ └─────────────┘ │
└─────────────────┘    └─────────────────┘
                                │
                                ▼
                    ┌─────────────────────┐
                    │   FlexFlag Server   │
                    │                     │
                    │  WebSocket/HTTP     │
                    │     API             │
                    └─────────────────────┘

🎯 Use Cases

A/B Testing

const variant = await client.getVariation('checkout-flow', context);
if (variant === 'new') {
  showNewCheckout();
} else {
  showOldCheckout();
}

Feature Rollouts

const isEnabled = await client.evaluate('beta-feature', false, {
  userId: user.id,
  attributes: { plan: user.plan }
});

Configuration Management

const config = await client.evaluate('app-config', {
  theme: 'light',
  maxItems: 10
});

Kill Switches

const allowPayments = await client.evaluate('payments-enabled', true);
if (!allowPayments) {
  showMaintenanceMessage();
  return;
}

🛠️ Installation & Setup

NPM

npm install flexflag-client

Yarn

yarn add flexflag-client

CDN

<script src="https://cdn.jsdelivr.net/npm/flexflag-client@latest/dist/index.js"></script>

⚙️ Configuration Examples

Basic Configuration

const client = new FlexFlagClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://api.yourapp.com',
  environment: 'production'
});

Advanced Configuration

const client = new FlexFlagClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://api.yourapp.com',
  environment: 'production',
  
  cache: {
    storage: 'localStorage',
    ttl: 300000,
    maxSize: 1000
  },
  
  connection: {
    mode: 'streaming',
    retryAttempts: 3
  },
  
  offline: {
    enabled: true,
    defaultFlags: {
      'feature-1': true,
      'feature-2': false
    }
  },
  
  logging: {
    level: 'warn'
  }
});

📊 Performance Benchmarks

Cache Hit: ~0.1ms average response time
Cache Miss: ~2-5ms average response time
Batch Evaluation: ~0.5ms per flag
Memory Usage: <1MB baseline
Bundle Size: ~28KB gzipped

🔗 Links

NPM Package: npmjs.com/package/flexflag-client
GitHub Repository: github.com/flexflag/flexflag
Issues & Support: github.com/flexflag/flexflag/issues
FlexFlag Server: github.com/flexflag/flexflag

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

Need help?