Un Marco para Gestionar la Deuda Técnica

Spanish audio is available in the player settings
Rate this content
Bookmark
Slides

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.



FAQ

JS Heroes es una comunidad local fundada por Alex que organiza encuentros y conferencias en Cluj, Rumania. La conferencia JS Heroes se celebra cada primavera, centrada en temas relevantes para la comunidad de desarrollo.

Alex trató el tema de un marco para gestionar la profundidad técnica, enfocándose específicamente en la cultura de la refactorización y cómo los equipos pueden manejar mejor la deuda técnica a través de un enfoque estructurado.

Los tres pilares de la refactorización que Alex menciona son prácticas, inventario y proceso. Estos pilares ayudan a establecer objetivos claros, identificar brechas y deudas técnicas, y planificar acciones para mejorar la base de código.

En CodeSandbox, la refactorización se maneja documentando y siendo transparentes sobre la deuda técnica, celebrando éxitos de refactorización, y manteniendo procesos resilientes que permiten continuar con el desarrollo del producto mientras se atiende la deuda técnica.

Alex sugiere hacer la refactorización visible y gratificante para el equipo, documentar y priorizar la deuda técnica, y mantener la refactorización como parte integral del proceso de desarrollo, asegurando la participación y propiedad del equipo.

Alex recomienda utilizar datos y métricas para mostrar cómo la deuda técnica afecta la velocidad y calidad del desarrollo, y destacar la necesidad de una buena experiencia de desarrollo para mantener la productividad y la calidad del producto.

El método Marie Kondo en CodeSandbox es una práctica donde el equipo se reúne periódicamente para revisar y eliminar código que no aporta valor, similar a cómo Marie Kondo sugiere organizar y deshacerse de objetos que no 'traen alegría'.

Alex Moldovan
Alex Moldovan
35 min
09 Mar, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy discute la importancia de gestionar la deuda técnica a través de prácticas de refactorización, priorización y planificación. La refactorización exitosa requiere establecer directrices, mantener un inventario e implementar un proceso. Celebrar el éxito y garantizar la resiliencia son clave para construir una fuerte cultura de refactorización. La visibilidad, el apoyo y la comunicación transparente son cruciales para abordar eficazmente la deuda técnica. Las responsabilidades del equipo, el estilo de operación y la disponibilidad deben ser transparentes para los gerentes de producto.

1. Introducción a la Refactorización y la Profundidad Técnica

Short description:

Mi nombre es Alex y me uno desde Rumania, desde una ciudad llamada Cluj. El tema de hoy es un marco para gestionar la profundidad técnica. Quiero hablar sobre la cultura de refactorización y los tres pilares de la refactorización.

Hola a todos, gracias por unirse a esta sesión. Mi nombre es Alex y me uno desde Rumania, desde una ciudad llamada Cluj, que está en el hermoso corazón de Transilvania, donde trabajo como ingeniero frontend en CodeSandbox y, por otro lado, soy también el fundador de JS Heroes, nuestra comunidad local que organiza los encuentros locales aquí en Cluj y también la conferencia JS Heroes que se celebra cada primavera. También puedes encontrarme en Twitter en alexandmodovan y el tema de hoy es un marco para gestionar la profundidad técnica.

Y quería hablar sobre la profundidad técnica desde hace un tiempo y básicamente esta charla también no es solo sobre la profundidad técnica, que es inevitable para todos los proyectos, para todos los equipos de ingeniería, sino que también se trata de la refactorización. Y no necesariamente voy a hablar contigo sobre cómo refactorizar código o aquí hay algunos patrones para hacer realmente la refactorización. Estoy aquí para hablar un poco más sobre la capa meta, si quieres, y quiero hablar sobre la cultura de la refactorización, porque he estado trabajando durante los últimos cinco a seis años con diferentes equipos de productos, diferentes equipos de ingeniería, equipos verticales, equipos horizontales, equipos de plataforma, y siempre me pareció extraño que nunca lográramos hacer bien la refactorización. Como industria todavía tenemos este problema mucho.

En realidad, pocas personas hablan de esto en general, así que pensé en explorar algunas cosas. Desde que empecé a pensar más en esto, empecé a desarrollar este marco, o estructura, o más bien, ¿cómo construyes la estructura correcta alrededor de los procesos de refactorización? Esto es a lo que me refiero como una cultura de refactorización. El detonante para esta charla en particular llegó hace unos buenos meses. Cuando estábamos trabajando en Code Samples, estábamos trabajando en esto, digamos, pequeño experimento de refactorización donde introdujimos una nueva forma de comunicarnos con nuestro backend. Tenemos este backend de nuestro editor de código, al que llamamos imagen, que maneja todos los primitivos de bajo nivel de lo que puedes considerar un editor de código. Como el acceso al sistema de archivos o tareas o procesos y cosas así. Así que se nos ocurrió esta nueva forma de hacerlo. Y ahora básicamente tenemos dos formas de hacer lo mismo en la aplicación.

Así que tenemos un proveedor de imágenes heredado, que estaba en la cima de todo. Y luego dentro de él, tenemos algo llamado proveedor de imágenes. Y solo mirando este código al principio, solo mirando el PR que estaba introduciendo este cambio, me hizo gritar, como, oh, no, esto no está bien. Estamos arruinando el código, vamos a vivir con esto para siempre. Y esto es solo una mala práctica. Pero luego lentamente empecé a entender que, en realidad, esto está bien, ¿verdad? En aquel entonces no había forma posible para nosotros de simplemente hacer la transición de toda la base de código de la noche a la mañana, y simplemente usar la nueva forma de consumir datos. Así que tuvimos que soportar estas dos formas alternativas. Y esto es lo que me hizo darme cuenta de que, está bien, siempre y cuando tengamos un método para esto, siempre y cuando tengamos una comprensión clara, ya sabes, en todo el equipo de que así es como estamos manejando este proceso, esto está bien, ¿verdad? Esto es más como manejar todo este problema, ahora tenemos esta deuda técnica, somos conscientes de ella, pero la estamos gestionando al mismo tiempo. No estamos, ya sabes, deteniendo todo el desarrollo para centrarnos solo en esto. Estamos avanzando con todo nuestro desarrollo de características. Y al mismo tiempo, tenemos un plan para mitigar este problema. Así que prácticamente este es el quid de la cuestión, como lo que quiero decir con esta charla, como, está bien, en lugar de luchar, ya sabes, contra la deuda técnica, en lugar de estar en este proceso donde cada vez que algo surge, cada vez que algo está mal, cada vez que, ya sabes, la base de código no refleja la calidad que queremos que tenga, detenemos todo el desarrollo del producto y decimos, ya sabes, a tus gerentes de producto decimos, oh, necesitamos resolver esto porque es de mayor prioridad. Eso claramente acaba convirtiéndose en un problema y una lucha para el desarrollo del producto porque ya no tienes, ya sabes, una forma confiable de simplemente enviar en un ciclo base. Y al mismo tiempo, en lugar de hacer eso, ¿verdad? en lugar de decir, está bien, quiero erradicar toda la deuda técnica tan pronto como surja, estoy pensando en un marco para gestionar esto, ¿verdad? Para no ser paralizado por ello, para que no tengas que caer en el otro extremo donde, oh, ya no estamos haciendo ninguna refactorización, solo nos estamos centrando en las características y luego las cosas simplemente se acumulan, pero al mismo tiempo no ser muy reactivo a esto, como cada vez que algo surge, intentamos solucionarlo inmediatamente. Así que este marco intenta poner en su lugar todas estas cosas, ¿verdad? Y esto es lo que llamo los tres pilares de la refactorización, porque obviamente hay tres pilares, y vamos a repasarlos en un momento.

2. Prácticas de Refactorización e Inventario

Short description:

El primer pilar son las prácticas, que implican establecer metas y directrices para el equipo. Es importante documentar estas prácticas y tomar decisiones juntos. El siguiente paso es evaluar el estado actual de la base de código e identificar la deuda técnica. Esto se puede hacer documentando las áreas que necesitan mejora y priorizando las tareas. Por ejemplo, crear nuevos componentes o deprecating los obsoletos. Es crucial tener un documento separado para rastrear la deuda técnica y no depender únicamente del backlog. Al hacer esto, puedes construir prioridades y abordar la deuda técnica de manera efectiva.

Entonces, el primero, o lo primero que haces es, o el primer pilar son las prácticas. El siguiente es el inventario, y el tercero es el proceso. Ahora, pueden sonar un poco abstractos, pero una vez que pase por todos ellos, espero que tengan sentido para todos.

Así que vamos a tomarlos uno a la vez. ¿De qué se trata las prácticas? Las prácticas son básicamente establecer ese objetivo con el equipo, sentarse juntos y decir, en este equipo, en este equipo de ingeniería, así es como queremos hacer las cosas para este proyecto en particular, así es como queremos abordar, esta es la architecture, estos son los patterns, estas son las guidelines. Así que tienes, de nuevo, todas estas cosas, patterns y todo, tienes tu architecture.

Idealmente, también los tienes documentados, así que una buena práctica para hacer un seguimiento de estas prácticas es básicamente documentarlas. Puedes tener, ya sabes, formas en las que quieres estructurar tus archivos y tus carpetas, ¿quieres estructurar por funciones, estructurar por característica, todas estas cosas, cómo quieres componer componentes, cómo quieres crear componentes. De hecho, en Code Sandbox, tenemos este documento para lo que llamamos las guidelines generales de codificación. Estas son cosas que no, realmente no puedes automatizar, ¿verdad? Son decisiones que simplemente surgen. Puedes imaginar que tienes un PR en algún momento y alguien se da cuenta, hey, hemos estado haciendo esta clase de lógica, así es como abordamos las cosas para este tipo de problema. Vamos a documentar esto como una práctica para que otros puedan leerlo y volver más tarde, podemos hacer referencia cruzada en otros PRs y decir, hey, decidimos hace tres meses que vamos a nombrar las cosas así o que vamos a usar esta abstracción particular de esta manera o como si tuvieras esto, deberías extraerlo en un componente separado. Todas estas cosas que realmente no pueden ser automatizadas y no siempre son como blanco y negro. Son más como, hay diferencias sutiles y hay cosas en las que tu equipo necesita decidir.

Así que la práctica es como establecer esta estrella del norte de dónde quieres que esté tu architecture, dónde quieres que estén tus patterns, cuál es el estado deseado en el que la base de code debería estar o cuál es tu objetivo como equipo de ingeniería? Y luego el siguiente paso es, en mi mente es súper importante como el que la mayoría de las cosas son, creo que faltan, es como hacer un poco de casi como introspección en la base de code o investigación y averiguar qué nos falta, ¿verdad? ¿Cuál es la brecha a este ideal o a estas prácticas que tenemos en mente? Esto es lo que queremos conseguir, pero ¿dónde estamos ahora? Como, este es el inventario, tratando de averiguar qué falta, aquí es donde documentas, ¿cuál es tu deuda técnica? Ya sabes, ¿cuáles son las partes de la aplicación que necesitan ser actualizadas? Ya sabes, todas las cosas que necesitas, todos los pasos que necesitas hacer para llegar a ese escenario ideal. Así que, podrías tener cosas en tu backlog, por ejemplo, empiezas a documentar, hey, tenemos tareas específicas para actualizar algo, para cambiar una antigua forma de hacer las cosas por una nueva forma de hacer las cosas. Crear un nuevo componente, extraer un nuevo componente, deprecate un componente, deprecate un sistema, lo que sea, puedes tener eso documentado en algún lugar. Algunos equipos prefieren el backlog. Nos dimos cuenta de que los backlogs no son los escenarios ideales para esto porque los elementos tienden a pudrirse en el backlog, especialmente si los pones en baja prioridad. Así que, terminamos con un documento separado, por ejemplo, y animo a todos a hacer esto, tratar de averiguar, okay, ¿cuáles son los aspectos clave de mi base de code que tienen esa creciente deuda técnica? Pueden ser cosas muy bajas, muy pequeñas, o pueden ser cosas más grandes. En este caso, empezamos a documentar incluso las cosas más pequeñas en este documento llamado contabilidad de deuda técnica. Siempre que introduces alguna deuda técnica o simplemente encuentras algo que de repente, te das cuenta, hey, esta es deuda técnica que no habíamos descubierto, la documentas en algún lugar. Y no solo vive en la cabeza de alguien que, hey, hay algún documento técnico allí. En realidad, está documentado en un lugar. Y una vez que llegas a eso, empiezas a construir prioridades. Y esta es en realidad una historia divertida. Este es code de producción que todavía tenemos. Tuvimos este viernes donde implementamos algo llamado la vista previa de Markdown, básicamente tomando archivos de Markdown y renderizándolos de manera agradable, formateándolos para la vista previa cuando navegas en la base de code. Y tomamos esto como una, fue casi como una experiencia de hackathon donde simplemente dijimos, okay, vamos a construir esto.

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

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
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.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
Crear un Producto Colaborativo Similar a Notion en 2H
JSNation 2023JSNation 2023
87 min
Crear un Producto Colaborativo Similar a Notion en 2H
WorkshopFree
Witek Socha
Witek Socha
Se te ha asignado la tarea de crear una función de edición de texto colaborativa dentro del producto de tu empresa. Algo similar a Notion o Google Docs.
CK 5 es un marco de trabajo y ecosistema rico en funciones listas para usar que se enfoca en una amplia gama de casos de uso. Ofrece una infraestructura en la nube para satisfacer las necesidades del sistema de colaboración en tiempo real. Durante esta masterclass, aprenderás cómo configurar e integrar CK 5. Repasaremos los conceptos básicos de cómo incrustar el editor en una página, desde la configuración hasta la habilitación de funciones de colaboración en tiempo real. Aprendizajes clave: cómo incrustar, configurar y ajustar CK 5 para que se adapte mejor a un sistema de edición de documentos que admita colaboración en tiempo real.
Tabla de contenidos:- Introducción al ecosistema de CK 5.- Introducción a una plantilla de proyecto similar a `Notion`.- Incrustar CK 5 en una página.- Configuración básica de CK 5.- Ajustar CK 5 para un caso de uso específico.- Habilitar funciones de edición en tiempo real.