Lanzamiento más rápido de aplicaciones JavaScript con Feature Flags

Rate this content
Bookmark

¿Quieres lanzar tus aplicaciones más rápidamente con menor riesgo? Los Feature Flags hacen esto posible. Esta masterclass demostrará concretamente que esto es posible y fácilmente alcanzable.

FAQ

Una Feature Flag es una herramienta que permite alternar la activación y desactivación de ciertas funcionalidades de un software sin necesidad de realizar un despliegue completo. Se utiliza para realizar pruebas y cambios en el ambiente de producción de manera controlada.

Los principales problemas incluyen el tedio de mantener múltiples ramas de características actualizadas, la burocracia alrededor de las aprobaciones y procesos de QA antes de despliegues, y el pánico que puede surgir cuando algo falla en producción, lo cual puede requerir acciones rápidas como rollbacks.

Las Feature Flags ayudan a simplificar el mantenimiento de código al eliminar la necesidad de ramas de características prolongadas, permiten despliegues de bajo riesgo con menos procesos y facilitan pruebas en producción sin afectar a todos los usuarios.

Permite probar nuevas funcionalidades en el ambiente de producción de manera controlada, limitando el acceso a ciertos usuarios y realizando pruebas incrementales antes de un lanzamiento más amplio.

Si se encuentra un error en una funcionalidad que está detrás de una Feature Flag, se puede desactivar rápidamente esta funcionalidad sin necesidad de revertir toda la implementación, lo que minimiza el impacto y el tiempo de inactividad.

Se crea una Feature Flag en el código que controla la activación de la funcionalidad deseada. El desarrollador puede agregar reglas para definir quién puede ver la funcionalidad activada, como por ejemplo activarla solo para ciertos usuarios, y luego continuar con el desarrollo y pruebas necesarias.

David Burrowes
David Burrowes
10 min
25 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Bienvenido a la masterclass de Lanzamiento más rápido de aplicaciones React con Feature Flags. Los Feature Flags alivian los problemas en el proceso de desarrollo al permitir la creación de flags en lugar de ramas. Al utilizar Feature Flags, las versiones incompletas pueden ser desplegadas, revisadas, aprobadas, fusionadas y desplegadas sin errores para los clientes. Los Feature Flags también permiten despliegues de bajo riesgo, pruebas en producción, procesos de lanzamiento gradual y la capacidad de desactivar rápidamente las características si surgen problemas.

1. Introducción a las Feature Flags

Short description:

Bienvenido a la charla Releasing React Apps Faster with Feature Flags. Si estás utilizando un proceso de desarrollo normal, te encuentras con al menos tres obstáculos. Primero, al crear una nueva funcionalidad, creas una rama de características, lo cual puede volverse tedioso al tener que fusionar constantemente con la rama principal y resolver conflictos. Segundo, implementar en producción implica un alto riesgo y muchos procesos. Por último, cuando surgen problemas en producción, puede generar pánico. Las Feature Flags pueden aliviar estos problemas. En una nueva funcionalidad con Feature Flags, en lugar de crear una rama, creas una Feature Flag. Luego puedes acceder a la información de la Feature Flag en tu código y tomar decisiones basadas en ella. Al utilizar Feature Flags, puedes implementar versiones incompletas, obtener revisiones, aprobaciones, fusionar con la rama principal e implementar sin causar errores para los clientes.

Mi nombre es David Burrows y soy un ingeniero de software en Split Software. Si estás utilizando un proceso de desarrollo normal, te encuentras con al menos tres obstáculos.

En primer lugar, al crear una nueva funcionalidad, probablemente creas una rama de características, lo cual significa que a medida que agregas código, también necesitas mantener tu rama actualizada con la rama principal. Esto puede volverse bastante tedioso y rápido al fusionar constantemente con la rama principal y resolver el conflicto.

El segundo problema surge al implementar, te encontrarás con todo tipo de preguntas sobre el proceso ¿ha sido aprobado por QA, se ha realizado toda la testing necesaria, ¿las etapas de prueba y producción son similares? ¿Estás seguro de que todo estará bien, etc.? Esto se debe a que poner algo en producción conlleva un alto riesgo. Por lo tanto, es necesario seguir muchos procesos para asegurarse de no afectar al negocio.

El siguiente problema surge cuando ocurre algo, entonces necesitas decidir qué hacer. ¿Haces un rollback? ¿Haces un roll forward? ¿Te tomas el tiempo para solucionar el error? ¿O no lo haces? Esto es un problema. Cuando hay un problema en producción, tiendes a entrar en pánico. Entonces, lo que el proceso tradicional te trae son tres problemas: tedio, burocracia y pánico. Las Feature Flags pueden aliviar o eliminar todos estos problemas, y voy a explicar eso ahora.

Tengo aquí una aplicación simple y voy a comenzar a agregarle funcionalidades. Ahora, si estoy haciendo una nueva funcionalidad con Feature Flags, lo primero que hago no es crear una nueva rama de características. En su lugar, creo una Feature Flag. En este caso, queremos agregar una funcionalidad que permita a las personas obtener una lista de emojis. Así que voy a llamar a mi Feature Flag Emoji y la crearé. Y agregaré algunas reglas aquí, que ahora guardaré. Y lo que esto dice ahora es que tengo una versión activada y una versión desactivada de esta Feature Flag, y de forma predeterminada está desactivada.

Ahora puedo ir a mi código. Y aquí, puedes ver que he agregado un componente React que crea la biblioteca de Feature Flags y la coloca en el contexto. Por lo tanto, puedo acceder a ella en cualquier lugar debajo de este componente en el árbol de componentes. Luego tengo mi componente real aquí donde voy a obtener la información sobre mi Feature Flag, específicamente, voy a obtener el tratamiento actual para esta Feature Flag. Si este tratamiento está activado, mostraré un enlace a la página de emojis y, de lo contrario, no lo mostraré. Lo último que haré aquí es agregar la página de emojis a mi código. Esta es una versión incompleta de la página de emojis. Pero está bien. Ahora puedo tomar mi cambio, solicitar una revisión, obtener la aprobación, fusionar directamente con la rama principal e implementar. Ahora podrías estar pensando, espera un momento, ¿qué estás haciendo implementando una versión incompleta de tu código en producción? Eso es bastante aterrador. Vamos a recibir errores de los clientes.

2. Beneficios de las Feature Flags y Pruebas en Producción

Short description:

Al utilizar Feature Flags, puedes implementar versiones incompletas, obtener revisiones, aprobaciones, fusionar con la rama principal e implementar sin causar errores para los clientes. Esto permite un tiempo de desarrollo más rápido y reduce la necesidad de mantener múltiples ramas. Además, las Feature Flags permiten implementaciones de bajo riesgo y la capacidad de probar funcionalidades en un entorno de producción. Las pruebas en producción permiten una validación exhaustiva en cada paso del proceso de desarrollo, asegurando un resultado final de mayor calidad. Por último, las Feature Flags brindan la flexibilidad de adaptar el proceso de lanzamiento y lanzar funcionalidades selectivamente a diferentes grupos de usuarios.

¿Estás loco? Pero puedo acceder a la aplicación, iniciar sesión y aún no veo un enlace a emojis. Esto se debe a que, por defecto, la Feature Flag está desactivada. He configurado mi código para que si el tratamiento está activado, se muestre esto. Por lo tanto, no muestro esto. Esto alivia al menos uno y medio de los problemas que mencionamos anteriormente.

Lo primero es que no necesito tener una rama de características. En su lugar, puedo hacer un cambio en una solicitud de extracción, solicitar una revisión, fusionar con la rama principal e implementar en producción. No tengo una rama duradera. Esto acelerará mi tiempo de desarrollo porque no estoy tratando de mantener dos ramas en paralelo.

Lo segundo es que, debido a que todos estos nuevos cambios están detrás de una Feature Flag, poner fragmentos en producción es de muy bajo riesgo. Necesitas mucho menos proceso, lo que significa que podrías ir a producción varias veces al día. Pero podrías estar pensando, bueno, esto es genial, estoy poniendo mis fragmentos en producción, ¿y qué? Bueno, parte de la respuesta es que ya lo hemos mencionado, hemos suavizado nuestro proceso. Pero hay un beneficio más allá de eso, porque mi proceso de lanzamiento ya no es todo o nada. Ahora puede ser altamente personalizado.

En este caso, voy a crear una regla que dice que cuando el ID de usuario actual sea David, es decir, yo, se muestre la versión activada. Así que puedo volver a la aplicación, actualizarla, iniciar sesión como yo y verás que obtengo los emojis. Ahora está incompleto, pero puedo verlo. En cambio, si inicio sesión como Emily, Emily no lo ve. Ahora he obtenido otra funcionalidad que ni siquiera sabía que me faltaba antes cuando estaba haciendo el desarrollo tradicional, que es poder hacer pruebas en producción. Con esto no me refiero a poner la funcionalidad y dejar que mis clientes la prueben. Lo que quiero decir es que puedo poner la funcionalidad en el entorno de producción y puedo probarla, mi equipo de control de calidad puede probarla, mi automatización puede probarla, mi equipo de ingeniería, mi empresa puede probarla. Puedo validar completamente esto en cada paso del proceso de desarrollo, cada solicitud de extracción que hago, alguien puede probarlo en producción y asegurarse de que esté bien, para que cuando finalmente lleguemos al punto de hacer el lanzamiento, ya hayamos estado probando esto durante semanas o meses, el tiempo que llevó construir esta funcionalidad.

Ahora que tengo esto, vamos a terminar esto. Ahora voy a tomar mi página de emojis y en realidad voy a agregar una página completa de emojis aquí y, nuevamente, implementar. ¿Correcto? Esto tomará un momento. Ahora puedes ver que mientras hago mi desarrollo, en realidad estoy construyendo una situación de mucha mayor calidad, porque constantemente estoy probando en producción, porque constantemente estoy poniendo cosas en producción y verificando incrementalmente que esté bien, es mucho más seguro. Así que cuando llego al punto de tener un lanzamiento, puedo ingresar aquí y probarlo, y diría que la funcionalidad se ve bien, puedo obtener algunos emojis. Ahora podemos decidir a quién lanzar esto más allá del equipo de ingeniería. Por ejemplo, puedo decidir, por defecto, dar esto al 50% de los usuarios y al 50% no. Así que voy a guardar este cambio, volver aquí.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
26 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
Después de pasar más de una década en Google, y ahora como el CTO de Vercel, Malte Ubl no es ajeno a ser responsable de la infraestructura de software de un equipo. Sin embargo, estar a cargo de definir cómo las personas escriben software, y a su vez, construir la infraestructura que están utilizando para escribir dicho software, presenta desafíos significativos. Esta presentación de Malte Ubl revelará los principios guía para liderar una gran infraestructura de software.
Luchando contra la Deuda Técnica con la Refactorización Continua
React Day Berlin 2022React Day Berlin 2022
29 min
Luchando contra la Deuda Técnica con la Refactorización Continua
Top Content
Afrontémoslo: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de Frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica. En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
Las tareas de código como linting y pruebas son partes críticas del flujo de trabajo de un desarrollador que nos ayudan a mantenernos cuerdos, como prevenir problemas de sintaxis o estilo y fortalecer nuestra lógica de negocio central. Hablaremos de cómo podemos usar GitHub Actions para automatizar estas tareas y ayudar a mantener nuestros proyectos funcionando sin problemas.
Ajustando DevOps para las Personas sobre la Perfección
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Ajustando DevOps para las Personas sobre la Perfección
Top Content
La demanda de DevOps ha aumentado en los últimos años a medida que más organizaciones adoptan tecnologías nativas de la nube. La complejidad también ha aumentado y una mentalidad de "cero a héroe" deja a muchas personas persiguiendo la perfección y FOMO. Esta sesión se centra en cambio en por qué tal vez no deberíamos adoptar una práctica tecnológica y cómo a veces los equipos pueden lograr los mismos resultados priorizando a las personas sobre la automatización y controles de operaciones. Veamos las cantidades y el ajuste fino de todo como código, solicitudes de extracción, DevSecOps, Monitoreo y más para priorizar el bienestar del desarrollador sobre la perfección de la optimización. Puede ser una decisión válida desplegar menos y dormir mejor. Y finalmente examinaremos cómo la práctica manual y la disciplina pueden ser la clave para productos y experiencias superiores.

Workshops on related topic

Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Despliegue de Aplicación MERN Stack en Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
Despliegue de Aplicación MERN Stack en Kubernetes
Workshop
Joel Lord
Joel Lord
Desplegar y gestionar aplicaciones JavaScript en Kubernetes puede volverse complicado. Especialmente cuando una base de datos también debe formar parte del despliegue. MongoDB Atlas ha facilitado mucho la vida de los desarrolladores, sin embargo, ¿cómo se integra un producto SaaS con su clúster de Kubernetes existente? Aquí es donde entra en juego el Operador de MongoDB Atlas. En este masterclass, los asistentes aprenderán cómo crear una aplicación MERN (MongoDB, Express, React, Node.js) localmente y cómo desplegar todo en un clúster de Kubernetes con el Operador de Atlas.
Azure Static Web Apps (SWA) con Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) con Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
El masterclass ofrece una perspectiva práctica de los principios clave necesarios para desarrollar, construir y mantener un conjunto de microservicios en el stack Node.js. Cubre los detalles específicos de la creación de servicios TypeScript aislados utilizando el enfoque de monorepo con lerna y yarn workspaces. El masterclass incluye una descripción general y un ejercicio en vivo para crear un entorno en la nube con el framework Pulumi y los servicios de Azure. Las sesiones están dirigidas a los mejores desarrolladores que deseen aprender y practicar técnicas de construcción e implementación utilizando el stack Azure y Pulumi para Node.js.