Tres herramientas que probablemente ya escucharon nombrar y que van a aparecer juntas durante toda la carrera.
En una frase
Las tres juntas son la base del desarrollo frontend moderno. Hoy vemos qué hace cada una y cómo encajan.
Agenda
| Tiempo | Bloque | Modalidad |
|---|---|---|
| 0:00 — 2:00 | Introducción y objetivos | Slide |
| 2:00 — 9:00 | Node.js | Explicación + terminal |
| 9:00 — 16:00 | TypeScript | Explicación + ejemplo corto |
| 16:00 — 26:00 | Vite + demo integradora | Demo en vivo |
| 26:00 — 28:00 | Bonus: pre-commit y tests | Mención breve |
| 28:00 — 30:00 | Cierre y preguntas | Conversación |
01 / runtime
El motor que hace correr JavaScript fuera del navegador, y con él, todas las herramientas con las que armamos el frontend.
Definición
Motor
V8 de Chrome
El mismo intérprete que ejecuta JS en el navegador, empaquetado para correr en el sistema operativo.
Modelo
Event-driven, non-blocking I/O
Asíncrono y orientado a eventos. Eficiente para muchas conexiones simultáneas: APIs, servicios, CLIs.
Año
2009 — Ryan Dahl
Antes de Node, JavaScript solo corría en el navegador. Hoy es la base del tooling de frontend.
Para qué nos sirve
“Aunque hagamos frontend, vamos a usar Node todo el tiempo para correr las herramientas.”
npm
2.4M+
paquetes publicados
npm viene incluido cuando instalás Node. Es una biblioteca gigante de código que otra gente escribió y que vos podés usar en tu proyecto con un solo comando.
npm install
Baja todas las dependencias declaradas en package.json a node_modules/.
npm install <paquete>
Agrega una dependencia nueva al proyecto y la guarda en package.json.
npm run <script>
Corre uno de los scripts definidos en el manifiesto (por ejemplo, npm run dev).
package.json
{ "name": "mi-proyecto", "version": "1.0.0", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1" }, "devDependencies": { "vite": "^5.4.0", "typescript": "^5.5.0" } }
Comandos esenciales
02 / lenguaje
JavaScript con tipos. El editor te avisa antes de correr el código, y la firma de cada función pasa a ser documentación viva.
Definición
Superset
Extiende JavaScript
Todo el JS válido es TS válido. Le agrega un sistema de tipos estáticos opcional sin romper lo existente.
Compila a JS
Se transpila antes de correr
El compilador tsc chequea tipos y emite JavaScript plano que corre donde corra JS.
Configuración
tsconfig.json
Le dice al compilador qué versión de JS emitir, qué nivel de strictness aplicar, y dónde están los archivos.
El problema
// JavaScript function sumar(a, b) { return a + b; } sumar("2", 3); // devuelve "23"
La solución
// TypeScript function sumar(a: number, b: number): number { return a + b; } sumar("2", 3); // ❌ Error: el editor lo marca al instante
Ventajas concretas
01
Errores antes de correr
Los ves en el editor mientras escribís, no en producción. Menos surprise bugs y menos vueltas con el debugger.
02
Autocompletado real
El editor sabe qué métodos tiene cada cosa. IntelliSense pasa de adivinar a mostrarte exactamente lo que existe.
03
Documentación viva
La firma de la función te dice qué espera y qué devuelve. No hace falta abrir la implementación para usarla.
“El tipado da trazabilidad: sabés qué espera y qué devuelve cada función sin tener que leerla entera.”
Vocabulario
// 1 · Tipos primitivos // 3 · opcional con `?` const nombre: string = "Ana"; interface Usuario { const edad: number = 30; id: number; const activo: boolean = true; email: string; apodo?: string; // 4 · type — alias y uniones } type Estado = "loading" | "ok" | "error"; // 5 · firmas: qué espera y qué devuelve function saludar(u: Usuario): string { return `Hola ${u.apodo ?? u.email}`; }
03 / build tool
El armador del proyecto. Dev server casi instantáneo, HMR ultrarrápido, y un build de producción optimizado con Rollup.
Definición
Autor
Evan You
El mismo creador de Vue. “Vite” significa “rápido” en francés — y es literal.
En desarrollo
ES modules nativos
El navegador resuelve los imports a demanda. Arranque casi instantáneo, sin bundlear todo el proyecto.
En producción
Build con Rollup
Empaqueta el código optimizado, hace tree-shaking y emite los assets listos para servir.
Comparación
Webpack · clásico
~30 s
Cada vez que arrancás el dev server, procesa todo el código fuente y todas las dependencias antes de mostrar nada en pantalla.
En cambios grandes vuelve a rebundlear. Proyectos chicos lo aguantan; proyectos medianos empiezan a sentirse lentos.
Vite · moderno
~50 ms
El navegador pide los archivos que necesita y Vite los transforma solo cuando se piden. No procesa lo que no usás.
HMR ultrarrápido: cambia un archivo y el módulo se reemplaza en caliente, sin perder el estado de la página.
Demo en vivo
index.html, src/, tsconfig.json, vite.config.ts.package.json: dev, build, preview.src/main.ts y guardar — el cambio aparece sin recargar la página. Eso es HMR.string donde espera number) — el editor lo marca y el build falla.npm run build — se genera la carpeta dist/, lista para subir.Lo que pasa al guardar
npm run dev
Cambio aplicado al instante
Hot Module Replacement: Vite reemplaza solo el módulo que tocaste. La página no se recarga, el estado se conserva.
// src/main.ts — cambiás esto… const titulo = "Hola clase"; // …guardás, y aparece en el navegador.
npm run build
TypeScript te protege antes de subir
Si hay un error de tipos, el build falla. No podés deployar código roto sin darte cuenta.
function saludar(nombre: string): string { return `Hola ${nombre}`; } saludar(42); // error TS2345: Argument of type 'number' // is not assignable to parameter 'string'.
“Con un solo comando tenemos Node corriendo el server, Vite haciendo el bundle y TypeScript validando los tipos.”
Bonus
Pre-commit hooks
husky + lint-staged
Validaciones que se corren automáticamente antes de cada commit: lint, formato, tests. Si algo falla, el commit no se hace.
Ayuda a no romper la rama principal y a mantener un estilo de código consistente entre todo el equipo.
Testing en Node
node:test · vitest
node:test viene incluido desde Node 18, sin instalar nada. vitest se integra naturalmente con Vite y comparte su configuración.
Para más adelante: empezar pequeño, una función pura con tres casos.
Cierre
Node es el motor que hace correr todo,
TypeScript es el control de calidad
que evita errores tontos,
y Vite es el armador del proyecto.
Tarea sugerida. Crear un proyecto Vite con TypeScript, escribir una función con tipos, romperla a propósito pasando algo del tipo equivocado, y ver cómo reacciona el editor y el build. Es la mejor forma de entenderlo.