Fundamentos de frameworks: una comparativa crítica

📋 Tabla de contenidos

• Visión general del curso
  • Objetivos de aprendizaje
• Sesión 1: teoría y contexto
  • 1.1 ¿Qué es un framework? (15 min)
    • El panorama
    • Evolución histórica
  • 1.2 Características clave de un framework (25 min)
    • 🧩 Arquitectura de componentes
    • ⚡ Reactividad
    • 🗺️ Routing
    • 🗃️ Gestión de estado
  • 1.3 Criterios para elegir framework (20 min)
    • Guía rápida
  • 1.4 Demo: el mismo contador, tres maneras (30 min)
    • Vanilla JavaScript
    • React
    • Vue 3
    • Comparación
  • 1.5 Introducción a Vite (15 min)
• Sesión 2: práctica comparativa
  • 2.1 Estructura de rotación por equipos (10 min)
  • 2.2 El reto: construir una To‑Do app (60 min)
    • Requisitos
    • Qué se ejercita
  • 2.3 Presentación y reflexión (15 min)
• Matriz de decisión de framework
• Ideas clave
• Referencias
• 🔗 Navegación de la lección

“Todos los codebases laten a tempos diferentes. Algunos en allegro, otros en adagio, otros en pánico.” — The Tao of Development

Visión general del curso

Objetivos de aprendizaje

Sesión 1:

• Explicar qué son los frameworks y por qué existen
• Identificar características clave (componentes, reactividad)
• Aplicar criterios de selección según el tipo de proyecto
• Configurar el entorno con Vite

Sesión 2:

• Construir la misma app en Vanilla JS, React y Vue
• Comparar la experiencia de desarrollo entre stacks
• Tomar decisiones tecnológicas informadas basadas en evidencia

Sesión 1: teoría y contexto

1.1 ¿Qué es un framework? (15 min)

Un framework de front-end aporta herramientas, patrones y convenciones para construir interfaces.

LIBRERÍA (React)              FRAMEWORK (Angular)
──────────────────            ────────────────────
Tú llamas a la librería.      El framework te llama a ti.
Tú decides la estructura.     La estructura ya viene dada.
Tú compones tu stack.         "Baterías incluidas".

El panorama

Evolución histórica

2005    jQuery: manipular el DOM fue más fácil
2013    React: modelo de componentes + Virtual DOM
2014    Vue: framework progresivo
2016    Angular 2+: TypeScript-first
2019    Svelte: reactividad en tiempo de compilación
2020+   Signals, Islands, Server Components...

1.2 Características clave de un framework (25 min)

🧩 Arquitectura de componentes

              <App>
             /     \
        <Header>   <Main>
           │       /    \
        <Nav>   <List>  <Detail>

⚡ Reactividad

Cuando los datos cambian, la UI se actualiza automáticamente—sin manipulación manual del DOM.

🗺️ Routing

Navegar sin recargar la página completa (SPA).

🗃️ Gestión de estado

1.3 Criterios para elegir framework (20 min)

Guía rápida

🧘 Koan: “Escribe código para humanos primero, para máquinas después.”

1.4 Demo: el mismo contador, tres maneras (30 min)

Vanilla JavaScript

<button id="btn">
  Contador: <span id="count">0</span>
</button>
<script>
  let count = 0;
  document.getElementById('btn').addEventListener('click', () => {
    count++;
    document.getElementById('count').textContent = count;
  });
</script>

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Contador: {count}
    </button>
  );
}

Vue 3

<template>
  <button @click="count++">Contador: 8</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Comparación

1.5 Introducción a Vite (15 min)

Vite = build tool moderno y rápido.

# Crear proyecto
npm create vite@latest my-project -- --template react
cd my-project
npm install
npm run dev

¿Por qué Vite?

• Dev server casi instantáneo (<1s vs 30s+ con Webpack)
• Hot Module Replacement
• Configuración mínima

Sesión 2: práctica comparativa

2.1 Estructura de rotación por equipos (10 min)

Equipos de 3, rotando roles:
• Implementadora: escribe código
• Integradora: revisa, testea
• Documentadora: README, notas

Sprint 1 (20 min): Vanilla JS
Sprint 2 (20 min): React
Sprint 3 (20 min): Vue

2.2 El reto: construir una To‑Do app (60 min)

Requisitos

• Añadir una tarea (input + botón)
• Mostrar lista de tareas
• Marcar tarea como completada (toggle)
• Borrar una tarea

Qué se ejercita

2.3 Presentación y reflexión (15 min)

Cada equipo presenta (3 min):

1. Demo: mostrar app funcionando
2. Reto: ¿cuál fue la parte más difícil?
3. Comparación: ¿qué stack se sintió más natural?

🧘 Koan: “La experiencia es simplemente el nombre que damos a nuestros bugs después de arreglarlos.”

Matriz de decisión de framework

Ideas clave

No existe el mejor framework: existe el framework más adecuado para tu contexto.

Referencias

• React Documentation
• Vue.js Documentation
• Vite Documentation
• MDN Web Docs

🔗 Navegación de la lección

“La maestra desarrolladora no fuerza el scroll: canaliza su flujo.”