Configuración de Feature Flags con React

Y una vez que el back-end esté listo y quiero que mis usuarios puedan ver el botón de eliminar, entonces simplemente haré un commit con el booleano igual a verdadero. Y lo genial de esto es que si hay errores con la API del back-end, es relativamente fácil para mí revertir temporalmente esta implementación. Así que lo que hemos creado aquí es solo un ejemplo muy básico de una bandera de características. Implementación de código a partir de la implementación de características. Y acabamos de ver un ejemplo de cómo queremos usar esto, pero hay muchas otras formas de usar las banderas de características, por lo que podemos usarlas para probar en producción, podemos usarlas como un interruptor de apagado para desactivar características en producción que no funcionan. Puedes usarlas para migrar tus microservicios de forma segura. Si tienes un monolito, puedes usar esto para migrar tus microservicios a microservicios. Y luego puedes usar esto para pruebas AB, gestión de suscripciones, lanzamientos de canarios y experimentación. Y ¿por qué nos importan estos casos de uso? Es porque las banderas de características mejoran tu capacidad para desarrollar, probar y entregar nuevas características mientras se minimizan los riesgos en todo el proceso. Y así es como mides el impacto de tus cambios. Entonces, el uso de banderas de características te permite correlacionar directamente el impacto de tus cambios al enviar información sobre las banderas de características a tu sistema analítico interno. Y al usar una aplicación de gestión de banderas de características, puedes establecer quién puede ver qué características sin tener que hacer nuevos commits de código. Y esto es realmente genial para los propietarios de productos y personas no técnicas porque pueden controlar la experiencia del usuario sin tener que pedir a los desarrolladores que hagan nuevos commits de código.

Y así, una vez más, quiero implementar esta funcionalidad de eliminación de forma controlada utilizando banderas de características. Y así, la cosa básica de la bandera de características que tenía antes, esa declaración if-else, estaba bien, pero si uso un sistema de banderas de características, obtengo mucho más control y no tengo que modificar el código fuente. Además, puedo dirigirme a usuarios específicos o tipos de usuarios en Split. Y así, estos posibles estados de lo que el usuario puede ver se llaman tratamientos. Y así, para esta aplicación de demostración, el tratamiento controla quién puede eliminar tareas. En nuestro caso, cuando el tratamiento está activado, el usuario podrá eliminar tareas, y cuando el tratamiento está desactivado, el usuario no podrá eliminar tareas. Y esto es cómo se ve en cada caso.

Y así, una vez más, lo que tenía antes, esto es una forma realmente chapucera de hacer esto porque estoy codificando si el usuario puede eliminar o no. Esta es la forma correcta de hacerlo en React donde, dependiendo del valor de la propiedad, mostrarás o no el botón de eliminar. Y así, lo que vamos a hacer hoy es crear una bandera de características, instalar las dependencias, e instanciar y utilizar el SDK.

Entonces, para crear una bandera de características, simplemente iniciarás sesión en Split. Así que lo único que tienes que hacer es ir a Split.io, hacer clic en crear cuenta de desarrollador gratuita y seguir ese proceso. Y luego verás en el panel izquierdo, verás un botón que dice crear split. Y un split es solo otro nombre para una bandera de características, así que querrás darle un nombre, algo que sea identificable de manera única. Y luego en mi ejemplo, estoy diciendo que quiero que yo y los desarrolladores podamos eliminar, así que todos los demás obtienen el comportamiento predeterminado existente de solo poder agregar tareas.

A continuación, voy a instalar mis dependencias y configurar mi aplicación React. Así que después de crear mi aplicación React con create React app, lo único que voy a hacer es instalar la siguiente dependencia en mi carpeta raíz. Y luego voy a instanciar y utilizar el SDK. Lo primero que voy a hacer es importar el SDK de JavaScript. Así que en la parte superior de mi componente, voy a importar los tratamientos de split y la fábrica de split. Así que los tratamientos de split es un componente de React que realiza la evaluación de características, y lo vamos a usar en nuestra función de renderizado. Y luego el componente de fábrica de split se utiliza para envolver el componente de lista de tareas cuando lo exporto. Y luego divido mi función de renderizado en dos. Y en la primera, devuelvo el tratamiento y la configuración de los tratamientos de split. Y en la prop names, paso el nombre de la bandera de características que creé desde la interfaz de usuario. En la segunda función de renderizado, creo una variable llamada allow delete que diferencia entre el tratamiento activado y desactivado. Si los tratamientos están activados, se mostrará la opción de eliminar tareas y si el tratamiento está desactivado, no habrá opción de eliminar. Y luego tengo una función llamada create tasks que se llama en mi función de renderizado y renderiza condicionalmente el botón de eliminar. Si la variable allow delete está configurada en true. Después de las funciones de renderizado, está la configuración que vas a utilizar para configurar tu instancia de split. Entonces, lo que hace es inicializar con la fábrica de split, que es el punto de entrada de la biblioteca. Cada usuario tendrá su propia clave de autenticación y puedes encontrar la tuya en la interfaz de usuario. Entonces, el parámetro key le está diciendo a split quién es el usuario actual. Así que en este caso, cuando ejecutes npm start, verás los botones de eliminar porque estás dirigido en la bandera de características. Cuando estableces debug en true, puedes ver todos los registros de split en la consola del navegador. Debes prestar atención a dos cosas aquí. Una es que puedes ver claramente que soy la persona que está recibiendo el tratamiento. La segunda es que puedes ver que el tratamiento está activado para mí. Ahora observa qué sucede cuando cambias la clave a un usuario de prueba que no está en el split. Los botones de eliminar desaparecen porque el usuario no está dirigido. Recuerda que solo los desarrolladores y yo lo estamos. Observa en los registros de la consola que claramente veo que el tratamiento está desactivado y ahora estoy obteniendo el comportamiento predeterminado o existente porque no he iniciado sesión. Estoy iniciado sesión como alguien que no está dirigido. Espero que este ejemplo haya sido una forma clara de ver el valor de las banderas de características. Así que las banderas de características, si tienes más preguntas, dirígete a split.io y consulta algunos de nuestros blogs y publicaciones. ¡Gracias chicos!