Performance Optimization

// Lazy load the SDK when entering an experience
async function initializeFanfare() {
  const { FanfareClient } = await import("@fanfare-io/fanfare-sdk-core");

  const client = new FanfareClient({
    publishableKey: "pk_live_...",
    debug: false, // Disable in production
  });

  return client;
}

// Initialize when user navigates to experience
button.addEventListener("click", async () => {
  const client = await initializeFanfare();
  await client.experiences.enter(experienceId);
});

// Preconnect to Fanfare services
<link rel="preconnect" href="https://consumer.fanfare.io" />

// Initialize SDK in page header
const fanfare = new FanfareClient({
  publishableKey: "pk_live_...",
});

// Good: Single client instance
const client = new FanfareClient({ publishableKey: "pk_live_..." });

// Use the same client throughout your application
export { client };

// Bad: Multiple client instances
function enterExperience(id: string) {
  // Creates new connections each time
  const client = new FanfareClient({ publishableKey: "pk_live_..." });
  return client.experiences.enter(id);
}

// Rate limit headers returned by the API
// X-RateLimit-Limit: Maximum requests per window
// X-RateLimit-Remaining: Remaining requests in window
// Retry-After: Seconds to wait if rate limited

// SDK handles rate limits automatically with exponential backoff
// For custom implementations, respect the Retry-After header

const experienceCache = new Map<string, { data: ExperienceDetails; timestamp: number }>();
const CACHE_TTL = 60000; // 1 minute

async function getExperience(id: string): Promise<ExperienceDetails> {
  const cached = experienceCache.get(id);

  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
    return cached.data;
  }

  const data = await client.experiences.get(id);
  experienceCache.set(id, { data, timestamp: Date.now() });

  return data;
}

// Get current session state without API call
const session = client.experiences.getActiveSession();
const isInQueue = client.queues.isInQueue(queueId);
const position = client.queues.getPosition(queueId);

// Good: Subscribe to specific events
client.on("queue:position-updated", handlePositionUpdate);
client.on("queue:access-granted", handleAccessGranted);

// Clean up when component unmounts
return () => {
  client.off("queue:position-updated", handlePositionUpdate);
  client.off("queue:access-granted", handleAccessGranted);
};

import { debounce } from "lodash";

const updatePosition = debounce((position: number) => {
  setQueuePosition(position);
}, 100); // Update UI at most every 100ms

client.on("queue:position-updated", ({ position }) => {
  updatePosition(position);
});

// Good: Import specific hooks
import { useExperienceJourney } from "@fanfare-io/fanfare-sdk-react";

// Avoid: Importing entire package if using only specific features
import * as Fanfare from "@fanfare-io/fanfare-sdk-react";

// Next.js dynamic import
const ExperienceWidget = dynamic(
  () => import("./components/ExperienceWidget"),
  {
    ssr: false,
    loading: () => <LoadingSpinner />
  }
);

// Access SDK metrics (when debug mode is enabled)
const client = new FanfareClient({
  publishableKey: "pk_live_...",
  debug: process.env.NODE_ENV === "development",
});

// SDK logs timing information for key operations
// [Fanfare] 2024-01-15T10:00:00.000Z [DEBUG] Experience entered in 45ms