Feature Flags en JavaScript: cómo activar funciones sin hacer deploy

Feature Flags en JavaScript: Cómo activar funciones sin riesgo ni deploy

Imagine: ha escrito una nueva función genial — una búsqueda inteligente con autocompletado. El código está listo, las pruebas pasaron, pero tiene miedo de lanzarlo a todos los usuarios de inmediato. ¿Y si hay un error? ¿Y si a alguien no le gusta? Antes, se quedaría hasta la noche haciendo deploy y luego revertiría versiones. Hoy existe una solución elegante: feature flags (o feature toggles).

Los feature flags son banderas en el código que permiten activar o desactivar funcionalidades sin necesidad de un nuevo deploy. Simplemente cambia el valor en la configuración o en el panel de administración, y la función aparece o desaparece. En este artículo, analizaremos cómo usarlos en JavaScript, mostraremos ejemplos de código reales y daremos una lista de verificación para su implementación.

¿Qué son los feature flags y por qué se necesitan en JS?

Los feature flags (también conocidos como feature toggles o banderas de funciones) son construcciones condicionales simples que controlan si se muestra una nueva función al usuario o no. Funcionan a nivel de código: en lugar de eliminar código antiguo, envuelve el nuevo en una verificación de bandera.

¿Por qué se necesitan en proyectos JavaScript?

\n
• Canary release (lanzamiento canario) — lanza la función al 5% de los usuarios, monitorea errores y luego la expande.
\n
• Pruebas A/B — muestra diferentes versiones de la interfaz a distintos grupos y compara métricas.
\n
• Desactivación instantánea — si la función rompe la producción, simplemente desactiva la bandera sin hacer deploy.
\n
• Desarrollo sin ramas (trunk-based development) — se puede fusionar código incompleto oculto detrás de una bandera.
\n

Feature flag simple en JavaScript: ejemplo

Empecemos con la opción más básica: una bandera en la configuración. Supongamos que tenemos una función de búsqueda y queremos activar el autocompletado solo para los testers.

// config.js\nconst featureFlags = {\n  enableAutocomplete: false, // desactivado por defecto\n  enableDarkMode: true\n};\n\n// search.js\nfunction initSearch() {\n  if (featureFlags.enableAutocomplete) {\n    console.log('Autocompletado activado');\n    loadAutocompleteModule();\n  } else {\n    console.log('Autocompletado desactivado');\n    loadBasicSearch();\n  }\n}\n

Cambia enableAutocomplete a true en la configuración y la función se activa. ¿Sencillo? Sí. Pero esto es solo el comienzo. Para producción se necesita más: banderas dinámicas, gestión a través de API, pruebas A/B.

Enfoque avanzado: bibliotecas para feature flags

Se pueden crear soluciones caseras para las banderas, pero es mejor usar bibliotecas probadas. Aquí están las 3 principales para JavaScript:

\n
• LaunchDarkly — estándar empresarial. Tiene SDK para React, Vue, Node.js. Soporta pruebas A/B, segmentación y rollout porcentual.
\n
• Flagsmith — alternativa de código abierto. Admite autoalojamiento y nube. Funciona con cualquier framework.
\n
• Unleash — biblioteca ligera de código abierto. Ideal para proyectos pequeños.
\n

Ejemplo con Unleash:

// Instalación: npm install unleash-client\nconst { initialize } = require('unleash-client');\n\nconst unleash = initialize({\n  url: 'https://your-unleash-instance.com/api',\n  appName: 'my-js-app',\n  environment: 'production',\n  customHeaders: { Authorization: 'API-TOKEN' }\n});\n\n// Verificación de bandera\nconst isEnabled = unleash.isEnabled('new-checkout-flow');\nif (isEnabled) {\n  renderNewCheckout();\n} else {\n  renderOldCheckout();\n}\n

Estas bibliotecas se sincronizan con el servidor en tiempo real. Si cambia la bandera en el panel, el cliente la recoge en unos segundos (normalmente 30-60 segundos, configurable).

Feature flags en React: Hooks y contexto

En aplicaciones React, es conveniente usar contexto y hooks personalizados. Aquí hay un ejemplo de arquitectura:

                
                

                    

                        Blogs                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
@selector() en Swift: Guía completa para compatibilidad con ObjC
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Inyección de Dependencias en C++ en la práctica: ejemplos y patrones
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Expression<Func<T>> vs Func<T>: el secreto de la optimización en C#
                                
                            
                                            
                

                
                

                    

                        Book Recommendations                    
                    

                                                    
                                

                                    

                                        
                                    
                                    
Entrevista de C++: 200 preguntas y respuestas
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Concurrencia en Java: Multihilo, paralelismo y asincronía en la práctica
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Concurrencia en Go (Golang): desde lo básico hasta patrones avanzados
                                
                            
                                                    
                                

                                    

                                        
                                    
                                    
Cloud Native Go: Creación de aplicaciones cloud y microservicios en Go
                                
                            
                                            
                
            
    

  
Leer también
  

                
                  
                 Cómo conseguir trabajo como desarrollador C#: consejos y currículum en la práctica
      
                
                  
                 Manejo de errores en PHP: try/catch y más — guía completa
      
                
                  
                 Introducción a C++ en 2025: por dónde empezar en la práctica
      
                
                  
                 PHP en 2025: nuevas funciones y mejoras
      
                
                  
                 Principios SOLID en C++: teoría y práctica de nivel avanzado