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.



This talk has been presented at TechLead Conference 2023, check out the latest edition of this Tech Conference.

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
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
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
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Principios para Escalar el Desarrollo de Aplicaciones Frontend
React Summit 2023React Summit 2023
25 min
Principios para Escalar el Desarrollo de Aplicaciones Frontend
Top Content
This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
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
This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.