Taller de Svelte para visualizaciones interactivas

Este repositorio contiene el material para un taller introductorio a Svelte, centrado en su aplicación para el desarrollo de gráficos y visualizaciones de datos interactivas.

¿Qué es Svelte?

Svelte es un enfoque radicalmente nuevo para construir interfaces de usuario. Mientras que los frameworks tradicionales como React y Vue hacen la mayor parte de su trabajo en el navegador, Svelte traslada ese trabajo a un paso de compilación que ocurre cuando construyes tu aplicación.

En lugar de utilizar técnicas como el DOM virtual, Svelte escribe código que actualiza quirúrgicamente el DOM cuando el estado de tu aplicación cambia. Esto resulta en un rendimiento excelente y aplicaciones más pequeñas.

Poco a poco va cogiendo fuerza en el mundo del desarrollo web, usado por empresas como IKEA, y en de los gráficos interactivos, siendo usado en medios como Civio, El País, Der Spiegel, The Pudding, o NYTimes.

¿Por qué Svelte para visualizaciones?

Svelte es una herramienta fantástica para crear visualizaciones de datos por varias razones:

• Rendimiento: Al no tener una capa de abstracción en tiempo de ejecución, las interacciones son increíblemente rápidas, lo cual es crucial para visualizaciones complejas y fluidas.
• Reactividad sencilla: La reactividad está integrada en el lenguaje, lo que hace que la actualización de los gráficos en respuesta a los cambios de datos sea intuitiva y directa.
• Menos código: La sintaxis de Svelte es muy concisa, lo que permite crear componentes complejos con menos código, facilitando el mantenimiento.
• Animaciones y transiciones integradas: Svelte incluye un potente sistema de animaciones y transiciones que hace que dar vida a tus gráficos sea trivial.

Contenido del taller

En este taller, cubriremos los siguientes conceptos fundamentales de Svelte, aplicándolos a la creación de gráficos:

1. Estructura de un componente: Cómo se organizan los archivos .svelte (script, template, style).
2. Sintaxis básica: Aprenderemos a usar bloques lógicos como {#if}, {#each} y {#await} para renderizar contenido dinámicamente.
3. Reactividad: Entenderemos el sistema de reactividad de Svelte 5 con $state, $derived y $effect.
4. Bindings: Veremos cómo vincular variables a atributos de elementos HTML con bind:.
5. Eventos: Manejaremos interacciones del usuario con on:.
6. Motion: Exploraremos las funciones de svelte/motion (tweened, spring) para crear animaciones suaves y naturales.
7. Transiciones y animaciones: Usaremos los módulos svelte/transition y svelte/animate para añadir transiciones declarativas a nuestros elementos.
8. Integración con D3: Aprenderemos a combinar el poder de Svelte con librerías de visualización como D3.js para crear un gráfico de barras y un mapa interactivo.

Cómo empezar

Para ejecutar el proyecto en tu máquina local, sigue estos pasos:

1. Clona el repositorio.
2. Asegúrate de tener instalada la versión de Node.js especificada en el archivo .nvmrc. Puedes usar nvm use si tienes nvm instalado.
3. Instala las dependencias: npm install
4. Inicia el servidor de desarrollo: npm run dev

¡Y ya está! Abre tu navegador en la dirección que te indique la terminal y estarás listo para empezar.

Otros recursos para aprender Svelte

• Aprende Svelte -> Blog en profundidad de Svelte
• Tutorial de Svelte
• Cómo hacer gráficos interactivos con Svelte y D3
• GitHub de The Pudding
• GitHub de Der Spiegel

Ejemplos con versiones antiguas de Svelte:

• Videotutoriales de cómo hacer gráficos con Svelte
• Haciendo gráficos con Svelte y D3