Svelte es un framework frontend que adopta un enfoque radicalmente diferente al de React, Vue o Angular: en lugar de ejecutar un runtime en el navegador que gestiona un virtual DOM, Svelte compila los componentes en JavaScript vanilla altamente optimizado durante el proceso de build. El resultado son aplicaciones más ligeras, más rápidas y con menos código repetitivo, ya que la reactividad se resuelve en tiempo de compilación sin necesidad de APIs complejas ni abstracciones adicionales.
Con el sistema de runes ya estable ($state, $derived, $effect, $props, $bindable), Svelte 5 ofrece reactividad granular basada en señales con destructuración tipada de props, binding bidireccional explícito y soporte mejorado para shadow DOM. Los snippets declarados con {#snippet} y renderizados con {@render} sustituyen a los slots heredados y permiten componer interfaces parametrizadas sin jerarquías de componentes adicionales. SvelteKit 2+, el meta-framework oficial, aporta enrutado basado en archivos, server-side rendering, carga de datos en el servidor con +page.server.ts, form actions con progressive enhancement, API routes con +server.ts y un sistema de adaptadores que permite desplegar desde servidores Node.js hasta edge functions en Vercel, Netlify o Cloudflare. El ecosistema incluye además un Svelte Kit MCP server que expone la documentación oficial al IDE para asistencia contextual durante el desarrollo.
Este curso te guiará desde los fundamentos de la sintaxis y la reactividad de Svelte hasta la construcción de aplicaciones full-stack completas con SvelteKit. Aprenderás a crear componentes eficientes con runes, gestionar el estado con stores y Context API, implementar enrutado y carga de datos del servidor, validar formularios con Superforms y Valibot, diseñar transiciones y animaciones fluidas, y desplegar tus aplicaciones en producción con el adaptador adecuado para tu infraestructura.
Qué incluye este itinerario
- Introducción: qué es Svelte, enfoque de compilación, comparativa con React/Vue/Angular y ecosistema actual.
- Instalación y entorno: crear proyecto con SvelteKit, estructura del proyecto, Vite y configuración de TypeScript.
- Sintaxis y reactividad: runes estables de Svelte 5 ($state con proxy profundo, $derived, $effect), asignaciones reactivas, plantillas y bloques lógicos.
- Componentes: creación, $props con destructuración tipada, $bindable, eventos como callbacks, snippets con {#snippet}/{@render} y ciclo de vida.
- Stores: writable, readable, derived, auto-suscripción, custom stores, Context API y runes compartidas en módulos .svelte.ts.
- SvelteKit routing: enrutado basado en archivos, layouts, parámetros, grupos de rutas y páginas de error.
- SvelteKit data: load functions, datos del servidor, form actions, API routes y progressive enhancement.
- Estilos y animaciones: CSS scoped, variables CSS, transiciones, animaciones con motion y easing.
- Testing y despliegue: Vitest, Playwright, adaptadores (Node, Vercel, Cloudflare, static) y modos SSR/SSG/SPA.
Público objetivo
- Desarrolladores frontend que buscan un framework moderno con mejor rendimiento y menos código repetitivo que React o Vue.
- Desarrolladores React, Vue o Angular que quieren explorar el enfoque compilado de Svelte y ampliar su stack tecnológico.
- Desarrolladores full-stack que necesitan un meta-framework con SSR, API routes y carga de datos del servidor.
- Estudiantes de desarrollo web que desean aprender un framework con una curva de aprendizaje suave y sintaxis intuitiva.
- Equipos de producto que buscan maximizar el rendimiento web con bundles mínimos y tiempos de carga reducidos.
Prerrequisitos: conocimientos de HTML, CSS y JavaScript. Se recomienda familiaridad con TypeScript y conceptos básicos de frameworks frontend (componentes, estado, routing), aunque no es estrictamente necesario.