Al crear software, lanzar nuevas funciones rápidamente sin romper nada puede ser complicado. Los indicadores de funciones hacen que esto sea más fácil. Después de leer sobre el SDK de indicadores de funciones de Vercel, pensé que sería útil estudiar más sobre los indicadores de funciones y explicar qué son, cómo funcionan y cómo puedes crear uno por tu cuenta.

¿Qué son los indicadores de funciones?

Los indicadores de funciones (también llamados alternancias de funciones) permiten a los desarrolladores activar o desactivar funciones sin necesidad de cambiar el código o volver a implementar la aplicación. Esto significa que puedes:

• Lanzar funciones gradualmente: permite que solo algunos usuarios vean la nueva función y la implementas lentamente para todos.
• Prueba nuevas funciones en producción: puedes habilitar la función para ti o para un pequeño grupo de evaluadores sin que esté disponible para todos los usuarios.
• Revertir rápidamente una función: si una nueva función causa problemas, puedes desactivarla sin volver a implementarla.

Con los indicadores de funciones, usted controla cuándo los usuarios pueden acceder a las funciones, independientemente de cuándo se implementa el código.

¿Por qué utilizar indicadores de funciones?

1. Entrega continua

   Las marcas de funciones ayudan a los equipos a publicar código con más frecuencia. Puedes fusionar el trabajo sin terminar en el código base principal, ocultarlo detrás de una bandera e implementarlo sin afectar a los usuarios.

2. Pruebas A/B

   Puedes probar dos versiones de una función con diferentes grupos de usuarios para ver cuál funciona mejor. Esto ayuda a mejorar la experiencia del usuario basándose en datos reales.

3. Lanzamientos controlados

   Puedes publicar una función para un pequeño grupo de usuarios, monitorear su rendimiento y luego publicarla para todos los demás.

4. Reversiones rápidas

   Si algo sale mal, desactivar la marca de función es mucho más rápido que revertir los cambios de código, lo que ayuda a mantener la aplicación estable.

Uso de indicadores de funciones en Next.js con el SDK de indicadores de Vercel

flags.ts (del lado del servidor)

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

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

La función decidir determina el valor de la bandera, que puede proporcionarse desde varias fuentes como:

• Variables de entorno
• Otros proveedores de indicadores de funciones
• Vercel's Edge Config (almacén de configuración de datos)
• Bases de datos, etc.

aplicación/página.tsx

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

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

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

Dado que las banderas son funciones, podemos cambiar fácilmente la implementación sin modificar nada en el lado de llamada. Esta flexibilidad permite que su aplicación se adapte a nuevos requisitos sin necesidad de alterar la estructura central de la lógica del indicador.

Cómo construir su propio sistema de banderas de funciones

Creemos un sistema de indicadores de funciones sencillo que puedas mejorar con el tiempo.

Paso 1: cree un enlace personalizado para recuperar indicadores de funciones

Este paso implica la creación de un enlace personalizado que le permitirá recuperar indicadores de funciones de forma dinámica. Puedes reutilizar fácilmente este enlace en cualquier parte de tu aplicación React para comprobar si una función está habilitada o deshabilitada.

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;
};

Paso 2: Reaccionar Componente

A continuación, cree un componente que utilice el enlace personalizado para representar diferentes funciones en función de si la bandera está habilitada o deshabilitada. Esto permitirá que su aplicación cambie sin problemas entre la funcionalidad antigua y la nueva sin interrumpir la experiencia del usuario.

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;

Otras soluciones de indicadores de funciones en el mercado

Crear tu propio sistema de marcado de funciones es útil para proyectos pequeños, pero si trabajas con equipos más grandes o necesitas un control más avanzado, varias herramientas ofrecen el marcado de funciones como servicio:

1. Marcas de funciones de Vercel

   Vercel ofrece indicadores de funciones integrados con su plataforma, lo que permite controlar en tiempo real qué usuarios ven qué funciones.

2. LanzarDarkly

   LaunchDarkly es una herramienta popular para gestionar indicadores de funciones a escala. Admite implementaciones complejas y se dirige a los usuarios en función de atributos como la ubicación o el comportamiento.

3. Optimizar

   Optimizely se centra en la experimentación y las pruebas A/B, utilizando indicadores de funciones para probar diferentes funciones y mejorar la experiencia del usuario.

4. Split.io

   Split.io permite a los equipos dividir el tráfico entre diferentes versiones de funciones y realizar un seguimiento de las métricas de rendimiento en tiempo real.

5. Hypertune

Hypertune es un jugador más nuevo en el espacio de marcado de funciones, que se centra en la experimentación de alto rendimiento y la alternancia de funciones. Permite a los equipos ejecutar experimentos complejos con una latencia mínima, lo que garantiza información sobre el rendimiento en tiempo real. El enfoque único de Hypertune integra indicadores de funciones con modelos de aprendizaje automático, lo que permite una toma de decisiones más inteligente en términos de implementación de funciones y orientación de usuarios.

Conclusión

Los indicadores de funciones son una excelente manera de lanzar funciones de forma segura, probarlas en producción y realizar cambios rápidos sin volver a implementar el código. Puedes crear un sistema de indicadores de funciones simple usando JavaScript o usar herramientas más avanzadas como Vercel, LaunchDarkly u Optimizely para proyectos más grandes.

El uso de indicadores de funciones hará que su proceso de desarrollo sea más flexible y eficiente, lo que le permitirá ofrecer nuevas funciones de forma más rápida y segura.

¡Gracias por leer y no dudes en compartir tus comentarios!