Top Content

Versión en EspañolES

Un Marco para Gestionar la Deuda Técnica

Alex Moldovan

CodeSandbox

Recording is available to Multipass and Full ticket holders only

Please login if you have one.

Get Multipass

Spanish audio is available in the player settings

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

35 min

09 Mar, 2023

Comments

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.

Available in English: A Framework for Managing Technical Debt

Video transcription and chapters available for users with access.

Available in other languages:

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 2023

24 min

Depuración de JS

Top Content

Mark Erikson

Replay.io

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.

best practices case study javascript web development debug

Construyendo un Asistente AI Activado por Voz con Javascript

JSNation 2023

21 min

Construyendo un Asistente AI Activado por Voz con Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

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.

case study artificial intelligence

Principios para Escalar el Desarrollo de Aplicaciones Frontend

React Summit 2023

25 min

Principios para Escalar el Desarrollo de Aplicaciones Frontend

Top Content

Malte Ubl

Vercel CTO

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.

best practices scalability team productivity

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

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.

react react query next.js case study react server components react 18

Solucionando Problemas de Rendimiento en React

React Advanced 2023

22 min

Solucionando Problemas de Rendimiento en React

Top Content

Josh Goldberg

Open Source enthusiast, TypeScript contributor, writing a book on Typescript

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.

react performance case study

Luchando contra la Deuda Técnica con la Refactorización Continua

React Day Berlin 2022

29 min

Luchando contra la Deuda Técnica con la Refactorización Continua

Top Content

Alex Moldovan

CodeSandbox

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.

team productivity web development developer challenges inspiration

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node

React Summit Remote Edition 2021

87 min

Construyendo una Aplicación de Shopify con React & Node

Top Content

Workshop

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.

case study e-commerce shopify shopify with react

Construye una sala de chat con Appwrite y React

JSNation 2022

41 min

Construye una sala de chat con Appwrite y React

Workshop

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!

case study web development realtime react chat app

Problemas difíciles de GraphQL en Shopify

GraphQL Galaxy 2021

164 min

Problemas difíciles de GraphQL en Shopify

Workshop

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.

case study scalability graphql

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript

Node Congress 2024

152 min

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript

Workshop

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.

case study web development graphql

De Ingeniero a Líder: Un Masterclass para Líderes Tecnológicos Primerizos

TechLead Conference 2024

144 min

De Ingeniero a Líder: Un Masterclass para Líderes Tecnológicos Primerizos

Workshop

Andrew Murphy

Transicionar de un rol de contribuidor individual a una posición de liderazgo, especialmente en la industria tecnológica de ritmo acelerado, es enormemente desafiante. La mayoría de los nuevos líderes no reciben ningún tipo de capacitación en los primeros 10 años de sus nuevas responsabilidades.Nuestro completo masterclass está diseñado para ayudar a los nuevos y emergentes líderes tecnológicos a comprender sus nuevos roles y adquirir las habilidades para convertirse en líderes seguros, felices y efectivos.

career team productivity

De 0 a Autenticación en una Hora para tu Aplicación JavaScript

JSNation 2023

57 min

De 0 a Autenticación en una Hora para tu Aplicación JavaScript

WorkshopFree

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.

case study authentication