🇺🇦 Слава Україні! Consulta cómo puedes ayudar a Ucrania desde España u otros países en supportukrainenow.org.
Svelte es un framework orientado a componentes que nos permite crear aplicaciones web que utilizan JavaScript de forma reactiva y modular.
Svelte es un framework reactivo para hacer aplicaciones web con JavaScript, con el que podemos hacer aplicaciones web sencillas pero potentes, interactivas y ricas. En este primer episodio del curso os explico qué es un framework web reactivo, el diseño orientado a componentes y una descripción de en qué consiste Svelte.
Veamos cómo ejecutar el comando para descargar un repositorio plantilla de Svelte con el que podemos empezar a trabajar, y cómo entender las distintas carpetas de las que se compone un proyecto de Svelte. También vemos el comando para lanzar un servidor web.
Escribir componentes en Svelte resulta muy sencillo. En este capítulo veremos cómo crear un archivo .svelte, que es un archivo que contiene el código HTML, JavaScript y CSS de un componente. Luego estos componentes podrán ser organizados y jerarquizados, y les podremos meter comportamientos avanzados.
A los componentes les podemos asignar datos dinámicos, que son como variables que pueden ser luego interpoladas en la capa presentacional HTML. Además, las props son atributos especiales cuyos valores iniciales se pasan desde fuera del componente, creando una forma de distribuir información entre unos componentes y otros.
Centrémonos un momento en el propósito de anidar componentes y de meter unos componentes dentro de otros. Svelte está pensado como un framework orientado a componentes, por lo que la idea es fabricar componentes independientes que hagan una cosa, como un botón, una casilla de verificación, o un buscador, y luego fabricar componentes superiores que vayan agrupando para fabricar secciones completos de la interfaz.
Un componente no sería nada si no tuviese eventos, que permite capturar acciones del mundo exterior, como clicks hechos en un botón, pulsaciones de teclas, o incluso eventos propios generados internamente, para reaccionar a él y producir algún tipo de consecuencia.
Los eventos habilitan una característica muy interesante de este tipo de frameworks: la reactividad. Con la reactividad se puede hacer que automáticamente los componentes actualicen su presentación en el momento en el que se producen modificaciones, por ejemplo, cuando un evento de teclado o de ratón se dispara.
El lenguaje de marcado empleado en los archivos de Svelte incluye una serie de directivas extra que podemos utilizar en los componentes para distintos propósitos. Hoy evaluamos uno de ellos, que nos va a permitir renderizar condicionalmente parte del marcado de un componente en función de si una condición se está cumpliendo o no.
Con los bucles podemos insertar directivas en nuestros componentes Svelte para repetir parte de un marcado un número de veces en función del número de elementos que haya en una colección que vamos a ir recorriendo. Además, no te olvides que también tiene else para establecer el marcado en caso de que no haya elementos sobre los que iterar.
await es una interesante directiva que podemos insertar en el marcado de un componente de Svelte para que se resuelva una promesa sobre la marcha, renderizando un marcado u otro en función de en qué etapa de la promesa se encuentra: resolviendo, completada o fallida.
Con bind tenemos una forma de asociar bidireccionalmente un atributo de un elemento con una variable. Por ejemplo, si le asociamos un bind a un input box, podemos hacer que se actualice cada vez que cambia el valor de una variable, y que simultáneamente actualice la variable cuando cambie el contenido del input.
bind:this es una interesante evolución de bind donde podemos directamente asociar todo un nodo DOM o un nodo Svelte a una variable de la que iría en la sección script de un componente, para poder interactuar con ese nodo desde código. Esto es algo que debería ser usado únicamente en situaciones en las que de otro modo no sería posible.
Los eventos, aparte de para reaccionar a cambios en los elementos o clicks en botones, también nos permiten generar un flujo de información inverso para que unos componentes notifiquen a otros de acciones que han ocurrido, como la actualización de valores, o la activación de modos especiales.
createEventDispatcher es la función principal que nos va a permitir crear despachadores, que es lo que podemos usar para propagar hacia arriba un evento personalizado cuando estamos en un componente Svelte.
Los eventos que fabriquemos con un event dispatcher también nos permiten agregarle información extra que puede ser capturada en el listener de los eventos, lo que nos va a permitir enviar información extra cuando hagamos fluir eventos de un sitio a otro.
Para terminar con el tema eventos, es posible repropagar eventos hacia arriba en la jerarquía de un componente significativo de Svelte si simplemente utilizamos el atributo on, pero no le damos ningún valor. Un ejemplo será mejor que mil palabras.
En los próximos dos episodios haremos una pequeña demo creando un formulario complejo con Svelte para demostrar las capacidades a la hora de crear eventos. En esta primera parte creamos el esqueleto de la aplicación y los componentes más sencillos.
En la segunda parte del ejemplo vamos a crear los componentes que quedan, que requieren un poco más de caso, antes de considerar este ejemplo como completado. Veremos cómo crear eventos propios y cómo propagar hacia arriba mediante binds.
Aparentemente no hablé acerca de esto antes. Los modificadores de eventos permiten declarar aspectos adicionales sobre un evento. La lista completá está en la documentación de Svelte, pero los que creo que vais a encontrar más útiles son el modificador preventDefault, para añadirle automáticamente un preventDefault a cualquier evento, y el once, para que un evento sólo se dispare una vez. Lista completa: https://svelte.dev/tutorial/event-modifiers
Comenzamos el módulo de CSS hablando de lo más simple: cómo haríamos para incorporar estilos a una aplicación de Svelte. El resultado probablemente no te sorprenda: dentro de la etiqueta style de cada componente de Svelte se pueden insertar estilos CSS y usarlos localmente en el componente como se ha hecho toda la vida.
Las clases condicionales permiten utilizar en función de una determinada condición una clase u otra, y es un recurso muy práctico, por ejemplo, para señalar clases cuando un estado es inválido o en general para hacer que el aspecto de un componente dependa en sus propiedades.
Con los estilos en línea se puede meter pequeños cambios a estilo usando directamente la etiqueta style. Svelte soporta el atributo style estandar de HTML, pero también alguna sorpresilla más.
Cómo aprovechar los estilos globales para que unos componentes puedan crear estilos que no tengan modificadores locales y así ser funcionales en toda la aplicación, un recurso que podemos usar para definir el look and feel global de la aplicación, como pueda ser tipografía y colores principales.
Cuando todo vaya a ser global, será más eficiente tener una hoja de estilos externa que importemos desde JavaScript. Esta técnica también la podemos usar para importar hojas de estilo procedentes de npm, que se ponen en el bloque script, por raro que parezca.
El operador $ (dolar o peso) sirve para declarar secciones que tienen que re-evaluarse cuando un componente se actualice y se repinte. Esto es necesario cuando tenemos propiedades en un componente que no se actualizan directamente, pero que son derivadas de otras propiedades que sí se van a actualizar.
Los slots son huecos que tienen los componentes y que pueden ser rellenados por los componentes descendientes. La idea es permitir crear componentes más reusables, o componentes de alto nivel, donde se pueden proporcionar a un componente ya no solo atributos, sino también todo un nodo DOM descendiente.
Un componente de Svelte no tiene por qué tener un único slot para introducir descendencia, sino que podremos fabricar componentes donde haya varios slots, aunque en ese caso existen algunas restricciones a tener en cuenta: que cada slot tenga un nombre único, y que cada slot vaya asociado con un nodo DOM diferente. También en este vídeo, la noción de los fragmentos.
Los componentes svelte:window, svelte:head y svelte:body son unas directivas que nos permiten importar en un componente, de forma respectiva, la ventana, la cabeza y el cuerpo del documento HTML, con el objetivo de poder inyectar eventos sobre estos elementos, así como agregar etiquetas DOM a la cabeza de la página.
En este vídeo os cuento los pasos que habría que dar para actualizar un proyecto de Rollbar a Vite. También se puede actualizar de Vite 2 a Vite 3, pero la lista de cambios será menor, por lo que no habrá mucho que hacer. 00:00 Introducción 01:41 Actualizar las dependencias del package.json npm i --save-dev vite @sveltejs/vite-plugin-svelte "build": "vite build", "dev": "vite dev", "preview": "vite preview" 03:45 Cambiar el rollbar.config.js por vite.config.js import { defineConfig } from "vite" import { svelte } from "@sveltejs/vite-plugin-svelte" export default defineConfig({ plugins: [svelte()], }) 05:55 Mover el archivo index.html y tocar sus styles y scripts 08:07 Importar el CSS global desde JavaScript 09:20 Despliegue en subcarpetas
Svelte tiene la capacidad de exportar un proyecto usando WebComponents, algo que puede venir bien si lo que queremos fabricar es una biblioteca de componentes reusables, porque se pueden usar con otros frameworks. Sin embargo, es necesario entender las restricciones que tiene usar Web Components, y también comprender de qué modo se debe configurar el proyecto de Svelte para poder usar Web Components.
Con svelte-preprocess podemos integrar otro tipo de tecnologías a un proyecto de Svelte, para escribir nuestros componentes usando cosas que no son CSS o JavaScript, como SCSS, Less, TypeScript, CoffeeScript, Pug...
Ponemos aquí punto y final a esta temporada listando las cosas que se han quedado fuera de la temporada 1 y por las que recomendaría profundizar si se quiere mirar más todavía sobre Svelte. Son cosas que tal vez si hago una segunda temporada de este curso explique.
