Desarrollo con Feature Flags

Hay determinadas ocasiones en las que tenemos que probar nuestras feature flags en producción o en algún entorno cercano a producción (preproducción o demo). Cuando nuestra aplicación ya está madura, estamos facturando y nuestros clientes hacen uso de ella, bien sea un uso intensivo o no, no nos podemos permitir el lujo de que nuestro sistema se caiga por algún nuevo cambio.

Para evitar estos fatídicos casos, necesitamos una forma de probar en producción, pero teniendo la opción de revertir el cambio de una forma rápida y sencilla, sin que tengamos que volver a desplegar ya que en algún caso podemos tardar 30 o 45 minutos.

Cómo habilitar o deshabilitar Feature Flags (FF)

Las features flags (FF) son una práctica dentro del desarrollo de software que nos permite habilitar/deshabilitar parte de nuestro código cuando lo necesitemos. Así, podemos desplegar una nueva feature, pero sin habilitarla hasta que vayamos a probar.

La forma de habilitar o deshabilitar FF puede ser tan compleja como queramos. Si nuestra app es backend, podemos crear una tabla en nuestra base de datos que almacene información relativa a la FF (por ejemplo una columna para guardar un nombre o id, y otra para guardar un boolean que nos indique si está habilitada o no). Así, podemos llamar a alguna query, rake (en caso de Ruby), npm script (en caso de Node.js), Composer scripts (para PHP) o a alguna aplicación externa que nos permita gestionar nuestras FF mediante una integración.

Un ejemplo usando Ruby con una gema llamada Flipper

En este ejemplo, si tenemos habilitada la flag ff-111-search ejecutamos nuestro nuevo código, pero en el caso de que no está habilitada, entonces ejecutamos el que ya estaba en producción.

En el caso del frontend, podemos igualmente usar alguna integración con una aplicación de gestión externa (por ejemplo Flagsmith) o algún provider (si usamos React) como puede ser flagged.

Si elegimos flagged, la integración será bastante simple, ya que la librería nos provee de un Provider del que haremos uso en nuestro código.

De esta forma, podemos activar una FF simplemente añadiendo a nuestra url un parámetro como ?feature_flag=activate_new_footer_ui.

Cuándo debemos borrar una Feature Flags (FF)

Una de las preguntas que te planteas como desarrollador a la hora de implementar FF puede ser hasta cuándo dejarlas activas. No hay una respuesta cerrada para esto, ya que cada equipo tiene sus flujos y prefiere tomarse sus tiempos, pero sí hay que hacerse a la idea de que en algún momento hay que borrarlas para que nuestro código no se sature de estos puntos de inflexión entre elegir un flow nuevo o uno que ya no vamos a usar.

Quizás lo mejor sea tomarse un tiempo prudencial para comprobar que todo funciona correctamente y tener en cuenta en qué fecha se añadieron, para que dentro de 2 o 3 semanas (o incluso un mes) quien esté encargado de hacer soporte en el equipo (o añadir una tarea de limpieza en cada sprint) se encargue de eliminar antiguas FF.

Ejemplo

Vamos a implementar un ejemplo muy sencillo, con una app React, en el que mediante las query params, podamos dar un saludo especial si quien accede a nuestra aplicación es un Jedi, en caso de que no lo sea le daremos un saludo normal. Que conste que podemos tener varias soluciones para obtener las features flags en nuestra aplicación:

• Podemos obtenerlas mediante la integración de algún servicio como Flagsmith, Cloudbees o cualquier otro (necesitaremos implementar su SDK).
• Traerlas desde un endpoint habilitado en nuestro backend. El mismo backend nos puede habilitar otro endpoint para poder ver un listado de feature flags que ya están usándose.
• Query params. Es lo más sencillo y el ejemplo que vamos a elegir. Pasaremos mediante la URL nuestras FF y las procesaremos en nuestra app.

Estamos usando una aplicación con React 18.2.0 que hará uso de react-router-dom para poder recoger las query params.

Si abrimos nuestra app accediendo a localhost:3000 veremos lo siguiente:

Para poder usar react-router-dom tenemos que envolver nuestro componente <App /> en un <BrowserRouter>

Y en nuestro App.js:

Aqui tenemos que fijarnos en varias cosas:

• Hemos creado un array llamado FEATURE_FLAGS que es donde vamos a almacenar todas las feature flags que enviemos por URL
• Usamos el hook useSearchParams que nos habilita react-router-dom que básicamente busca en window.location.search pero que nos da una interfaz para obtener fácilmente los parámetros y no tener que hacerlo nosotros. Gracias a searchParams.get() podremos buscar el valor que estemos usando para enviar nuestras FF.
• Usando la libreria flagged podremos usar un provider con sus hooks. En este punto de la aplicación, lo único que hacemos en envolver a un componente (o en el caso de una aplicación real al componente que contenga todas las rutas), y asignar el prop features con las FF que hemos obtenido de las query params.

Ahora, si abrimos nuestra app react con una url como localhost:3000?feature-flags=jedi-greeting nuestro array FEATURE_FLAGS será ['show-jedi-greeting'].

Por ultimo, nos queda comprobar como ha quedado nuestro componente GreetingComponent.

Ahora, si accedemos a localhost:3000?feature-flags=jedi-greeting veremos lo siguiente:

Con esto estamos listos para poder usar la potencia de las FF en nuestro desarrollo, esperamos que haya resultado útil.