При создании программного обеспечения быстро выпускать новые функции, ничего не нарушая, может быть непросто. Флаги функций упрощают эту задачу. Прочитав о SDK Feature Flag SDK от Vercel, я подумал, что было бы полезно узнать больше о флагах функций и объяснить, что они собой представляют, как они работают и как их можно создать самостоятельно.

Что такое флаги функций?

Флаги функций (также называемые переключателями функций) позволяют разработчикам включать и отключать функции без необходимости изменять код или повторно развертывать приложение. Это означает, что вы можете:

• Выпускайте функции постепенно: позвольте только некоторым пользователям видеть новую функцию и постепенно распространяйте ее для всех.
• Протестируйте новые функции в рабочей версии: вы можете включить эту функцию для себя или небольшой группы тестировщиков, не делая ее доступной для всех пользователей.
• Быстрый откат функции: если новая функция вызывает проблемы, вы можете отключить ее без повторного развертывания.

С помощью флагов функций вы контролируете, когда пользователи могут получить доступ к функциям, отдельно от времени развертывания кода.

Зачем использовать флаги функций?

1. Непрерывная доставка

   Флаги функций помогают командам чаще выпускать код. Вы можете объединить незавершенную работу с основной базой кода, скрыть ее за флагом и развернуть, не затрагивая пользователей.

2. A/B-тестирование

   Вы можете протестировать две версии функции с разными группами пользователей, чтобы увидеть, какая из них работает лучше. Это помогает улучшить пользовательский опыт на основе реальных данных.

3. Контролируемое внедрение

   Вы можете предоставить функцию небольшой группе пользователей, отслеживать ее производительность, а затем предоставить ее всем остальным.

4. Быстрый откат

   Если что-то пойдет не так, отключить флаг функции можно гораздо быстрее, чем отменить изменения кода, что поможет сохранить стабильность приложения.

Использование флагов функций в Next.js с помощью Vercel Flags SDK

flags.ts (серверная часть)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

Функция решения определяет значение флага, которое может быть предоставлено из различных источников, таких как:

• Переменные среды
• Другие поставщики флагов функций
• Vercel's Edge Config (хранилище конфигураций данных)
• Базы данных и т. д.

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

Поскольку флаги являются функциями, мы можем легко изменить реализацию, не изменяя ничего на вызывающей стороне. Такая гибкость позволяет вашему приложению адаптироваться к новым требованиям без необходимости изменения базовой структуры логики флагов.

Как создать собственную систему флагов функций

Давайте создадим простую систему пометок функций, которую вы сможете со временем улучшать.

Шаг 1. Создайте собственный хук для получения флагов функций

Этот шаг включает в себя создание пользовательского хука, который позволит вам динамически получать флаги функций. Вы можете легко повторно использовать этот хук в любой части вашего приложения React, чтобы проверить, включена или отключена какая-либо функция.

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

Шаг 2: Реагирующий компонент

Затем создайте компонент, который использует пользовательский хук для рендеринга различных функций в зависимости от того, включен или отключен флаг. Это позволит вашему приложению плавно переключаться между старыми и новыми функциями, не нарушая работу пользователя.

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

Другие решения для флагов функций на рынке

Создание собственной системы пометок функций полезно для небольших проектов, но если вы работаете с более крупными командами или вам нужен более расширенный контроль, несколько инструментов предлагают пометку функций как услугу:

1. Флаги функций Vercel

   Vercel предлагает флаги функций, интегрированные в их платформу, что позволяет в режиме реального времени контролировать, какие функции видят пользователи.

2. ЗапускDarkly

   LaunchDarkly — популярный инструмент для масштабного управления флагами функций. Он поддерживает сложные развертывания, ориентируясь на пользователей на основе таких атрибутов, как местоположение или поведение.

3. Оптимизировать

   Optimize фокусируется на экспериментах и ​​A/B-тестировании, используя флаги функций для тестирования различных функций и улучшения пользовательского опыта.

4. Split.io

   Split.io позволяет командам распределять трафик между различными версиями функций и отслеживать показатели производительности в режиме реального времени.

5. Гипертюн

Hypertune — новейший игрок в области пометки функций, специализирующийся на высокопроизводительных экспериментах и ​​переключении функций. Это позволяет командам проводить сложные эксперименты с минимальной задержкой, обеспечивая анализ производительности в режиме реального времени. Уникальный подход Hypertune объединяет флаги функций с моделями машинного обучения, что позволяет принимать более разумные решения с точки зрения развертывания функций и ориентации на пользователей.

Заключение

Флаги функций — отличный способ безопасно выпускать функции, тестировать их в рабочей среде и вносить быстрые изменения без повторного развертывания кода. Вы можете создать простую систему пометок функций с помощью JavaScript или использовать более продвинутые инструменты, такие как Vercel, LaunchDarkly или Optimizely, для более крупных проектов.

Использование флагов функций сделает процесс разработки более гибким и эффективным, позволяя быстрее и увереннее предоставлять новые функции.

Спасибо за чтение. Делитесь своими комментариями!