Coding Katas

Coding Katas

El encerar, pulir de aprender cosas nuevas en programación

• Por Daniel Zavala y Hugo Marin

En el último RbR (Release before Ready), Hugo Marín me preguntó cómo evolucionar su app de JiuJitsu. En el evento anterior había aprendido Next.js, ahora quería agregar una base de datos y una versión móvil. "¿PostgreSQL o MongoDB?", me preguntó.

Esa conversación no solo inspiró este post, sino que al compartírselo para revisión, Hugo me devolvió una reflexión profunda sobre el verdadero significado de la práctica sistemática que encontrarás al final.

Le sugerí a Hugo crear una app de notas. No porque necesite otra app de notas, sino para entender qué es MVC en Next.js:

  • ¿Qué es una Vista?
  • ¿Qué es un Controlador?
  • ¿Cómo funciona el modelo de datos?

Esa conversación me recordó algo fundamental: las Coding Katas.


¿Qué son las Coding Katas?

Las Coding Katas son aplicaciones que construyes para aprender, no para lanzar. Como en Karate Kid, repites movimientos básicos hasta que se vuelven instinto.

Una vez que dominas estos conceptos, puedes repetir la misma app cambiando solo el ORM y la base de datos. Así descubres las ventajas reales de PostgreSQL vs MongoDB, no solo lo que dice Stack Overflow o materiales de marketing.


6 de mis Katas favoritas por nivel

Cada vez que quiero aprender un nuevo lenguaje de programación, framework o base de datos Practicó las siguientes Katas. Las he practicado muchas veces en los últimos 15 años. Sí, he hecho tal vez unos 30 To-Do lists. Al dedicarle un Coding Kata a una nueva tecnología con un problema familiar me siento más cómodo usándola y reduce la curva de aprendizaje.

Yo empecé mi carrera como webmaster, después pase a Frontend, regresé a backend y he trabajado como DevOps. Estas Katas representan un poco ese crecimiento profesional.

1.- Frontend: Nivel básico: TodoMVC

Historia de usuario: "Como usuario, quiero poder gestionar mis tareas diarias para no olvidar nada importante"

Requerimientos:

  • Puedo escribir una tarea nueva y agregarla con Enter
  • Veo todas mis tareas en una lista
  • Puedo marcar tareas como completadas con un checkbox
  • Puedo filtrar para ver: todas/activas/completadas
  • Veo cuántas tareas me quedan pendientes
  • Puedo borrar todas las completadas de un click

Durante años, TodoMVC fue la biblia para entender frameworks de JavaScript. Hoy, una app de blog con markdown es perfecta para probar frameworks modernos con SSR.

2.- Nivel intermedio: YouTube Player

Historia de usuario: "Como creador de contenido, quiero un player personalizado para mis videos que permita a mis usuarios saltar a las secciones que les interesan"

Requerimientos:

  • Los usuarios ven el video de YouTube embebido
  • Hay botones para saltar directo a: Intro (0:00), Contenido principal (1:30), Conclusión (8:45)
  • Una lista de capítulos muestra todos los temas del video
  • Al hacer click en un capítulo, el video salta a ese momento
  • La barra de progreso muestra visualmente en qué capítulo estás
  • El video no se recarga cuando interactúas con los controles

Te obliga a:

  • Manejar el iframe de YouTube fuera del framework y mantener su referencia
  • Integrar eventos del DOM con eventos del framework
  • Diseñar UI/UX donde el video domina la pantalla sin sacrificar controles

3-. Nivel experto: E-commerce simplificado

Historia de usuario: "Como comprador, quiero poder explorar productos, agregarlos a mi carrito y completar mi compra sin perder mi selección si cierro la página por error"

Requerimientos:

  • Puedo buscar y filtrar productos por categoría y precio
  • Veo fotos del producto en una galería al hacer click
  • Mi carrito se mantiene aunque cierre el navegador
  • El checkout me guía paso a paso: dirección → pago → confirmación
  • Veo si quedan pocas unidades de un producto
  • Puedo guardar productos en favoritos para comprar después
  • Si abro el sitio en otra pestaña, veo el mismo carrito

Te enseña:

  • State management complejo entre componentes distantes
  • Persistencia local y sincronización
  • Optimización de renders con miles de productos
  • Manejo de race conditions

4.- El siguiente nivel: Agregar persistencia

Todas las katas de frontend se pueden hacer primero como puro UI, sin base de datos. Es el approach que recomiendo: domina el UI/UX primero.

Como paso extra, agrégales:

  • Sistema de usuarios con autenticación
  • Base de datos para persistir estado
  • API REST o GraphQL
  • Sincronización en tiempo real entre usuarios

Esto te obliga a pensar en:

  • Separación frontend/backend
  • Manejo de sesiones
  • Validación en cliente y servidor
  • Optimistic updates

5.- Backend Nivel expert: Proxy con logs

Historia de usuario: "Como DevOps, necesito monitorear y controlar todo el tráfico HTTP de mis servicios para debuggear problemas y prevenir abusos"

Requerimientos:

  • Todo request que pase por mi servidor debe quedar registrado
  • Necesito poder modificar headers antes de reenviar el request
  • Si un IP hace más de 100 requests por minuto, debe ser bloqueado temporalmente
  • Las respuestas frecuentes deben cachearse por 5 minutos
  • Los archivos grandes (videos, zips) deben transmitirse sin saturar la memoria del servidor
  • Puedo buscar en los logs por IP, endpoint o código de respuesta

Mi kata favorita para lenguajes nuevos. Te obliga a:

  • Procesar streams sin cargar todo en memoria
  • Entender el event loop del lenguaje
  • Identificar bottlenecks reales de performance
  • Manejar backpressure correctamente

6.- DevOps: Nivel experto: Deploy multi-cloud

Historia de usuario: "Como developer, quiero entender las diferencias reales entre plataformas cloud para tomar decisiones informadas sobre dónde hostear mis proyectos"

Ahora que tienes varias apps de tus katas anteriores, es momento de la kata más reveladora: deployarlas todas.

El experimento:

  • Toma tu TODO app y despliégala en: Vercel, Netlify, GitHub Pages
  • Tu app con base de datos súbela a: Railway, Render, Fly.io
  • El proxy con logs llévalo a: AWS EC2, Google Cloud Run, DigitalOcean

Lo que descubrirás:

  • Vercel es gratis para el TODO, pero agregar una DB puede costar $20/mes
  • Railway es generoso al principio, pero escala caro
  • Fly.io es barato pero requiere más configuración
  • AWS es complejo pero predecible en costos
  • Algunos cobran por requests, otros por tiempo de cómputo
  • El mismo código puede costar $0 o $200/mes según dónde lo subas

Esta kata te salvará miles de dólares en el futuro. Mejor pagar $5 en pruebas que descubrir en producción que tu app viral te costará $500/mes.


Katas para la era del AI

Cada día sale una herramienta de AI nueva. Ya sean editores de imágenes, IDEs o builders como v0, Replit y Lovable. Mis katas para evaluarlas:

  1. Landing desde imagen: Les pido crear una landing page desde un screenshot. Veo qué tan bien interpretan diseño.
  2. App de notas: Reviso cómo estructuran el código y qué decisiones toman sobre la base de datos.
  3. Crawler con jobs: El verdadero test. Requiere background jobs y manejo de errores.

Cómo empezar tu práctica

Paso 1: Define tu territorio

¿Eres más backend, frontend o fullstack? ¿Prefieres web, móvil o CLI? Identifica qué tipo de aplicaciones te interesan y busca qué stacks usan.

Paso 2: Identifica los patrones críticos

Si tu app maneja usuarios, aprende autenticación desde cero. Sí, en producción usarás NextAuth o AWS Cognito, pero necesitas entender qué problemas resuelven.

En mi caso, me gustan las apps que agregan información de varios sitios. Eso significa:

  • Crawlers
  • Background jobs
  • Extracción de datos
  • Generación de resúmenes

Paso 3: Aísla y práctica

Dedica un par de horas a cada componente crítico. Entiéndelo en aislamiento antes de integrarlo. Hoy con Cursor crearlos es mucho más fácil que nunca.


El momento perfecto para las Katas

Hoy crear apps es más fácil que nunca. El problema es que los LLMs te dirán que todo es buena idea y que todo código funciona "perfectamente".

Por eso las Katas son más importantes que nunca. Te dan el criterio para distinguir entre código que funciona y código que escala.

Pídele a Claude que haga deep research sobre los patrones críticos de tu tipo de app favorita. Aquí un ejemplo. Elige una que suene retadora, investiga sus partes críticas, y constrúyelas una por una.


La kata como filosofía

Este mismo proceso existe en casi todas las disciplinas. Yo estoy aplicando Katas para escribir: este blog post es mi kata para crear contenido.

Hugo está aplicando Katas para construir: de Product Manager a builder, iterando en cada RbR.

Hugo ya está en su siguiente iteración: está probando v0 para generar el UI de su app de JiuJitsu y conectándolo con su backend de Next.js. De Product Manager pasó a builder, una kata a la vez.

¿Cuál será tu primera kata?


Nos vemos en los próximos RbR para crear y perfeccionar nuestro craft en comunidad. Tenemos eventos próximos en CDMX, Bogotá y Guadalajara.

Consigue tus boletos aquí


Compartir este post con Hugo antes de publicarlo resultó en algo inesperado. En lugar de feedback técnico, me devolvió una reflexión profunda sobre por qué las katas funcionan, vista desde su experiencia en artes marciales:


La filosofía detrás de la práctica: Do, Jutsu y Bunkai por Hugo

Dani, en artes marciales existen dos conceptos básicos: el Do y Jutsu. Do es el camino y refleja el aspecto de aprendizaje interno, es el aspecto más espiritual y filosófico de las artes marciales. Ese Do es lo que hace referencia en Karate Do, Judo, y Aikido.

Pero existe otro concepto igual de importante que es el Jutsu. El Jutsu es el concepto que se enfoca en la eficiencia y los resultados, en el desarrollo técnico de cara a los resultados.

Las Katas o sus variaciones de nombres, como ya sabes, son formas que se repiten para mejorar el aprendizaje y es una manera de transmitir el conocimiento.

Pero lo importante de la Kata personalmente es que crea una conexión entre el Do y Jutsu. El valor de la Kata es también un valor mental y espiritual porque genera disciplina y la disciplina crea ritmo, así como atención y concentración.

Pero también frente al Jutsu crea una memoria muscular que aumenta la eficiencia de la práctica, asimismo te muestra de forma concreta cómo obtener resultados específicos.

Pero la Kata se debe acompañar de un cuarto concepto que es Bunkai. Bunkai significa análisis y su función es descomponer cada movimiento y descubrir en la práctica para qué sirve y cuál es su aplicación. Así se le devuelve o se mantiene el espíritu de la Kata, para que no se convierta en una coreografía sin sentido.

Hago esta reflexión porque quizás te ayude explorar tu idea de Coding Kata desde otros puntos de vista para enriquecer tu idea original. Asimismo veo que ves el código tanto como Jutsu como Do. Como expresas en el manifiesto RbR, también es un espacio para honrar el Craft y el hacer, sin necesidad de una aplicación práctica sino como una búsqueda interior.

Personalmente y siendo sincero, cuando me propusiste la idea de la Kata no me gustó porque sentí que me desenfocaba, en ese momento estaba hiperenfocado en lograr una cosa específica. Sin embargo, durante la semana pude reflexionar la idea y comenzar a abrirme a la necesidad de explorar los proyectos desde otro punto de vista y desde la curiosidad entender mejor qué está sucediendo.

La IA es una gran herramienta pero podemos caer en uso excesivo hacia los resultados, un Jutsu extremo que ignora el Bunkai y el Do.