Filosofía y visión pedagógica: El Tao Developer
BorradorURL: https://ruvebal.github.io/web-atelier-udit/lessons/es/react/modern-fe-intro/
📋 Tabla de contenidos
- 🎯 Objetivos de aprendizaje
- 🔑 Conocimientos previos
- 🗓️ Flujo de sesión en atelier (Semana 1)
- Filosofía y visión pedagógica
- Los cinco pilares del Tao Developer
- La IA como tu pair programmer, no como tu muleta
“El Tao que puede expresarse no es el Tao eterno.” — Lao Tzu
“El código que puede copiarse sin comprender no es el código eterno.” — The Tao of Programming (adaptación)
🎯 Objetivos de aprendizaje
Al finalizar esta lección, serás capaz de:
- Articular la metodología atelier y contrastarla con modelos tradicionales de enseñanza (Bloom: Analizar)
- Mapear los cinco pilares del Tao Developer a comportamientos concretos en tu propia práctica (Bloom: Aplicar)
- Explicar cómo integrar IA de forma ética mediante la metodología Docs-First (Bloom: Evaluar)
- Trazar paralelismos entre arquitecturas clásicas (MVC/MVVM) y el paradigma de componentes de React (Bloom: Comprender)
- Redactar un plan de semestre que equilibre intención filosófica, hitos técnicos y práctica reflexiva (Bloom: Crear)
🔑 Conocimientos previos
| Concepto | Dónde se cubre | Por qué importa aquí |
|---|---|---|
| Metodología Docs-First | /methodology/en/ai-assisted-development-foundations/ |
Es necesaria para comprender los protocolos de IA introducidos en esta lección |
| Panorama del frontend moderno | /lessons/es/react/frameworks-comparative/ |
Aporta contexto para la evolución histórica (MVC → MVVM → React) |
🗓️ Flujo de sesión en atelier (Semana 1)
| Día | Enfoque | Actividades | Output |
|---|---|---|---|
| Día 1 – Filosofía | ¿Por qué atelier? | Diálogo socrático, comparar pilares, criticar cursos tradicionales | Entrada de diario de reflexión |
| Día 2 – Laboratorio de ética IA | Metodología Docs-First | Borrador de plan.md, crear prompts, revisión por pares de workflows |
docs/plan.md v1 + librería de prompts |
| Día 3 – Arquitectura (deep dive) | MVC → MVVM → React | Ejercicio “flechas” en pizarra, identificar pitfalls, commit de notas | /notes/data-flow.md + entrada en README |
Cada día termina con un retro de 3 preguntas: ¿Qué observé? ¿Qué cuestioné? ¿Qué voy a probar después?
Filosofía y visión pedagógica
El modelo atelier: programar como oficio
Este curso funciona como un atelier (taller/estudio) donde no eres simplemente alumnado consumiendo conocimiento, sino aprendices construyéndolo mediante práctica deliberada.
Aula tradicional El atelier
────────────────────── ─────────────
Profesor → Estudiante Profesor ↔ Aprendiz
Lección → Apuntes Diálogo → Descubrimiento
Examen → Nota Oficio → Portfolio
Recepción pasiva Creación activa
Nuestro lema: “Critical Coding for a Better Living”
Esto no va solo de construir apps. Va de construir apps que importen: con intención, con ética y con una comprensión de cómo la tecnología moldea la experiencia humana.
🔗 Navegación de la lección
| Anterior | Actual | Siguiente |
|---|---|---|
| — | Filosofía y visión pedagógica | Fundamentos de frameworks |
Qué hace diferente a este curso
| Curso dev tradicional | Este curso |
|---|---|
| “Así se usa React” | “¿Por qué React podría ser adecuado—o no—para esto?” |
| “Copia este patrón” | “¿Qué patrón emerge de este problema?” |
| “La IA es hacer trampas” | “La IA es una colaboradora que debes aprender a liderar” |
| “Entrega la feature” | “Entrega la feature y entiende sus consecuencias” |
| “Aprende frameworks” | “Aprende a aprender frameworks” |
🧭 Fundamentos filosóficos
-
Constructivismo: construyes conocimiento haciendo, no escuchando. Tu app es tu tesis.
-
Pedagogía crítica: cuestiona todo. ¿Por qué React? ¿Por qué no Vue? ¿Por qué componentes? ¿Por qué estado? El “por qué” importa más que el “cómo”.
-
Práctica reflexiva: cada semana examinarás tus decisiones, tus fricciones y tu crecimiento. El código no examinado no merece ser entregado.
-
Autonomía con responsabilidad: eliges tu proyecto, tus herramientas y tu enfoque. Pero debes defender esas elecciones con razón y evidencia.
💭 Prompt de reflexión Al empezar este camino, pregúntate: ¿Qué quiero de verdad crear? ¿Qué problema del mundo quiero abordar? ¿Cómo puede ser el código mi instrumento de cambio?
Los cinco pilares del Tao Developer
El Tao Developer no es solo una persona que programa. Es una artesana, una filósofa y una tecnóloga responsable. Estos cinco pilares guían nuestra práctica.
🏛️ Pilar I: maestría mediante comprensión
// La persona novata copia
const result = someLibrary.doMagicThing(data);
// El Tao Developer comprende
const result = data
.filter(item => item.isValid) // ¿Por qué filtrar primero?
.map(item => transform(item)) // ¿Qué hace transform?
.reduce((acc, val) => acc + val, 0); // ¿Por qué reduce? ¿Por qué no un bucle?
Principio: no uses código que no puedas explicar. La IA puede generar; tú debes comprender.
🏛️ Pilar II: autonomía en la era de la asistencia
En una era donde la IA puede escribir código, tu valor no está en la velocidad de tecleo: está en el juicio, la arquitectura y la visión.
La IA puede generar ──────► Tú debes validar
La IA puede sugerir ──────► Tú debes decidir
La IA puede optimizar ────► Tú debes entender los trade-offs
La IA puede escribir ─────► Tú debes asumir la autoría
Principio: la IA es tu pincel; tú eres la artista.
🏛️ Pilar III: la ética como arquitectura
Cada decisión técnica es una decisión ética:
- Elegir localStorage → decides dónde vive la información del usuario
- Elegir infinite scroll → modelas atención y tiempo
- Elegir dark patterns → explotas psicología
- Elegir accesibilidad → incluyes o excluyes a personas
Principio: el código es ley. Escribe leyes que liberen, no leyes que opriman.
🏛️ Pilar IV: simplicidad como sofisticación
“Un programa bien escrito es su propio Cielo; un programa mal escrito es su propio Infierno.” — The Tao of Programming
// Complejo (la persona junior)
const getUserDisplayName = (user) => {
if (user !== null && user !== undefined) {
if (user.firstName !== null && user.firstName !== undefined) {
if (user.lastName !== null && user.lastName !== undefined) {
return user.firstName + ' ' + user.lastName;
} else {
return user.firstName;
}
} else {
return 'Anonymous';
}
} else {
return 'Anonymous';
}
};
// Simple (el Tao Developer)
const getUserDisplayName = (user) =>
[user?.firstName, user?.lastName].filter(Boolean).join(' ') || 'Anonymous';
Principio: la complejidad es fácil. La simplicidad es difícil. Persigue lo difícil.
🏛️ Pilar V: el código como conversación con el futuro
“Aunque un programa tenga solo tres líneas, algún día habrá que mantenerlo.” — The Tao of Programming
No escribes código para hoy. Escribes un mensaje a:
- Tu yo del futuro (que lo habrá olvidado todo)
- Tus compañeras del futuro (que no estuvieron cuando decidiste)
- Quienes mantengan el proyecto (que quizá arreglen bugs a las 3 AM)
Principio: escribe como si quien mantenga tu código fuera una versión sin dormir de ti misma que sabe dónde vives.
🎯 Checkpoint de autoevaluación Puntúate del 1 al 5 en cada pilar. ¿Cuál es tu fortaleza? ¿Cuál necesita crecimiento? Vuelve a esta evaluación al final del semestre.
La IA como tu pair programmer, no como tu muleta
La nueva realidad del desarrollo de software
Estamos en un punto de inflexión en la historia de la programación. Asistentes de IA como GitHub Copilot, Claude, ChatGPT y Cursor no están por llegar: ya están aquí.
Este curso no prohíbe la IA. Te enseña a usarla con maestría.
El espectro de colaboración con IA
🔴 USO DAÑINO 🟡 USO BÁSICO 🟢 USO TAO
─────────────── ───────────── ─────────
"Genera la app entera" "Escribe esta función" "Critica este enfoque"
"Arregla este error que no "Explícame este error" "¿Qué se me escapa?"
entiendo"
"Hazme los deberes" "Muéstrame un ejemplo" "¿Cuáles son los trade-offs?"
Copiar → Pegar → Desplegar Copiar → Entender → Adaptar Colaborar → Aprender → Crecer
Flujos de trabajo prácticos con IA
1. IA como explicadora
PROMPT: "Explica este array de dependencias de useEffect. ¿Por qué podría causar bucles infinitos?"
useEffect(() => {
setData(fetchData(query));
}, [query, data]); // ← Explica esto
2. IA como pato de goma
PROMPT: "Estoy intentando implementar optimistic updates en mi app de tareas.
Actualizo la UI inmediatamente y luego llamo a la API.
Pero cuando la API falla, mi estado queda mal.
Guíame por el modelo mental correcto."
3. IA como revisora de código
PROMPT: "Revisa este componente en busca de:
1. Problemas de rendimiento
2. Problemas de accesibilidad
3. Vulnerabilidades de seguridad
4. Oportunidades de simplificación"
4. IA como generadora de tests
PROMPT: "Genera tests de casos límite para esta función de formateo de fechas.
Piensa en: zonas horarias, locales, inputs inválidos, null/undefined."
🚨 Protocolo ético de IA
Cuando uses IA en este curso, debes seguir la metodología Docs-First:
┌─────────────────────────────────────────────────────────┐
│ FLUJO DOCS-FIRST │
├─────────────────────────────────────────────────────────┤
│ │
│ 1. CREA EL PLAN (docs/plan.md) │
│ └── Plan de implementación estilo Confluence │
│ └── Fases, resultados, criterios de éxito │
│ │
│ 2. GENERA PROMPTS (uno por fase) │
│ └── Cada fase tiene un prompt acotado │
│ └── Incluye contexto, restricciones y output esperado │
│ │
│ 3. EJECUTA CON INFORMES │
│ └── La IA genera implementación │
│ └── La IA genera un INFORME de implementación │
│ └── La persona revisa, aprueba y commitea │
│ │
│ 4. ITERA Y DOCUMENTA │
│ └── Actualiza el plan con aprendizajes │
│ └── Construye base de conocimiento para futuro │
│ │
└─────────────────────────────────────────────────────────┘
| Requisito | Cómo cumplirlo |
|---|---|
| Plan antes de prompt | Crea docs/plan.md con fases antes de cualquier interacción con IA |
| Un prompt por fase | Mantén el contexto focalizado y acotado |
| Exigir informes de implementación | Cada respuesta debe incluir qué se hizo y por qué |
| Entender cada línea | Si no puedes explicarlo línea a línea, no lo commitees |
| Documentar el uso de IA | Comentario: // AI-assisted: Claude sugirió esto, verificado con docs |
| No pegar secretos | No API keys, contraseñas ni datos personales en prompts |
| Citar en la monografía | Incluye una sección explicando cómo se usó la IA y qué aprendiste |
📖 Guía completa: ver
ai-practical-guide.mdpara workflows, plantillas de prompt, configuración MCP y formato de informe.
⚠️ Advertencia: la trampa de la brecha de habilidades
Hoy: La IA escribe código → Tú entregas features → ¡Todo funciona!
6 meses: La IA falla → Tú depuras → No puedes leer tu propio codebase
2 años: Entrevista → "Explica cómo funciona" → 😰
El Tao Developer lo invierte:
Hoy: Tú entiendes → La IA acelera → Tú entregas más rápido
6 meses: La IA falla → Tú depuras → Tú lo resuelves
2 años: Entrevista → "Explica cómo funciona" → Lo explicas brillantemente
Futuro: Lideras equipos, diseñas sistemas, mentorías a otras personas
💭 Prompt de reflexión Cuando uses IA esta semana, detente antes de aceptar cada sugerencia. Pregunta: “¿De verdad entiendo por qué esto funciona? ¿Podría escribirlo yo ahora?”