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.

10 min
25 Mar, 2022

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.

Available in English

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í.

3. Beneficios de la Implementación Gradual y Mitigación de Problemas

Short description:

Al utilizar procesos de implementación gradual con Feature Flags, puedes implementar funcionalidades para un porcentaje de usuarios y obtener comentarios tempranos en el proceso de lanzamiento. Esto permite detectar problemas inesperados y garantizar una mayor calidad. Además, las Feature Flags brindan la capacidad de desactivar rápidamente las funcionalidades si surgen problemas, evitando el pánico y permitiendo continuar con las pruebas. Prueba las Feature Flags para experimentar sus beneficios que cambiarán tu vida.

Ahora, si inicio sesión como Emily, Emily no verá esto. Sin embargo, si inicio sesión como George, George sí lo verá. Así que el 50% de las personas lo ven, el 50% no. Genial. Ahora puedo realizar este proceso de implementación gradual. En lugar de hacerlo al 50%, puedo hacerlo al 5% o al 1%, y puedo obtener comentarios. ¿Estoy haciendo algo inesperado? ¿Estoy sobrecargando las bases de datos, por ejemplo? Y puedo detectarlo temprano en este proceso de lanzamiento.

No solo estoy acelerando el proceso de desarrollo con una mayor calidad al implementar constantemente y testing en producción, sino que también puedo aumentar la calidad al implementar gradualmente a mis usuarios. Genial. Ahora decidimos que hemos terminado. Listos para lanzarlo. Y luego recibimos una llamada del soporte al cliente diciendo, si haces ciertas cosas aquí, explota. Si estuviera siguiendo el proceso de desarrollo tradicional, ahora entraría en pánico, pero como estoy utilizando Feature Flags, no entro en pánico, simplemente digo, ok, tenemos un problema. Desactivemos esto. Simplemente voy a desactivar estas Feature Flags, lo que significa apagarlo inmediatamente. Vuelvo aquí. Si inicio sesión como George, no veo la nueva funcionalidad. Si inicio sesión como yo, no veo la nueva funcionalidad. Observa que solo tomó segundos apagar esto. En realidad, no tuve que hacer una implementación. Simplemente apagué la funcionalidad.

Esto a su vez alivia un tercer problema, que es el pánico. Con las Feature Flags, el gran problema en producción no es un pánico cultural. Simplemente deshaces la Feature Flag. Eso puede tomar segundos, y estás listo para luego continuar haciendo testing por tu cuenta. Gracias por escuchar. Espero que hayas encontrado esto útil. Prueba las Feature Flags. Cambiarán tu vida. ♪♪

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit 2023React Summit 2023
26 min
Principles for Scaling Frontend Application Development
After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.

Workshops on related topic

DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.