Desarrollo Frontend · FRO-140

Svelte y SvelteKit

Un compilador en lugar de un runtime: menos código en el navegador y aplicaciones con SvelteKit.

Próximamente Intermedio 7 módulos · 34 clases

Formato asíncrono Desarrollo Svelte

DESARROLLO

Lo que aprenderás

Declarar estado y derivaciones con runes y entender qué genera el compilador
Escribir componentes con props, snippets y eventos sin capa de reactividad en tiempo de ejecución
Compartir estado entre componentes con stores y contexto de componente
Definir rutas basadas en el sistema de ficheros con layouts y rutas dinámicas en SvelteKit
Cargar datos en servidor y en cliente con funciones load y manejar sus errores
Procesar formularios con acciones de servidor y mejora progresiva que funciona sin JavaScript
Elegir adaptador de despliegue y comparar renderizado en servidor, estático e hidratación

Contenido del curso

7 módulos · 34 clases en vídeo · práctica guiada en cada módulo

Módulo 1 · Presentación y entorno 4 clases

Compilador frente a runtime: qué cambia de verdad
Crear un proyecto y recorrer su estructura
Anatomía de un componente Svelte
Inspeccionar el código generado por el compilador

Módulo 2 · Reactividad con runes 5 clases

Estado con state y actualizaciones
Valores derivados y efectos
Props y valores enlazados en dos sentidos
Bloques each, if y await en la plantilla
Ejercicio: lista filtrable con estado derivado

Módulo 3 · Componentes y composición 5 clases

Snippets y contenido proyectado
Eventos y callbacks entre componentes
Contexto de componente para datos compartidos
Transiciones y animaciones integradas
Estilos con ámbito y variables CSS

Módulo 4 · Estado compartido 5 clases

Stores: writable, readable y derived
Suscripción automática con el prefijo dólar
Estado global frente a contexto: criterios
Persistencia en almacenamiento local
Ejercicio: carrito compartido entre vistas

Módulo 5 · SvelteKit: rutas y datos 5 clases

Rutas basadas en el sistema de ficheros
Layouts anidados y rutas dinámicas
Funciones load en servidor y en cliente
Páginas de error y estados de carga
Endpoints de API dentro del propio proyecto

Módulo 6 · Formularios y despliegue 5 clases

Acciones de formulario en el servidor
Mejora progresiva y validación en ambos lados
Cookies, sesión y datos por petición
Adaptadores de despliegue y sus diferencias
Renderizado en servidor, prerenderizado y modo estático

Módulo 7 · Proyecto de cierre 5 clases

Aplicación de catálogo con panel de edición
Carga de datos y paginación en servidor
Formulario de alta con acciones y validación
Medir el JavaScript enviado al navegador
Despliegue final y repaso

Requisitos

JavaScript moderno y manejo de HTML y CSS
Haber trabajado antes con algún marco de componentes o con aplicaciones de una sola página
Node.js instalado en local

Descripción

Los marcos que envían su propio motor de reactividad al navegador cobran un peaje en cada carga: más JavaScript que descargar, analizar y ejecutar antes de que la página responda. En interfaces públicas, en dispositivos modestos o en conexiones lentas ese peaje se nota. Svelte lo evita moviendo el trabajo al momento de compilar.

El curso empieza por los componentes y las runes, mostrando el código que genera el compilador para que la reactividad deje de ser una caja negra. Después se pasa a SvelteKit y se construye una aplicación con rutas por sistema de ficheros, carga de datos en servidor, formularios con acciones y mejora progresiva, hasta desplegarla con el adaptador correspondiente.

El resultado es una aplicación que sigue funcionando incluso con JavaScript limitado o deshabilitado y que envía bastante menos código al navegador que su equivalente en otros marcos. Sirve para proyectos donde el rendimiento percibido y la accesibilidad importan, y prepara para trabajar con renderizado en servidor, generación estática y despliegue en plataformas de borde.

¿Para quién es este curso?

Desarrolladores frontend que buscan reducir el JavaScript enviado en interfaces públicas
Perfiles que construyen aplicaciones pequeñas y medianas y quieren menos ceremonia que en marcos mayores
Personas con experiencia en React o Vue que evalúan SvelteKit para un proyecto nuevo