Web Components
Web Components es una tecnología nativa en los navegadores web que permite definir etiquetas nuevas HTML que se comportan como componentes web. Se trata de un conjunto de estándares que permite que los navegadores puedan reconocer esas nuevas etiquetas y dotarle de comportamiento interactivo. Algunos frameworks web como Svelte hoy en día tienen la capacidad de compilar una aplicación para que sea compatible con este estandar, haciendo innecesario distribuir el framework con la propia aplicación porque el navegador se ocupa del resto.
-
Lección¿Cómo crear un proyecto de 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. -
LecciónBloques await
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. -
LecciónBucles
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... -
LecciónAtributos condicionales e IF
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... -
LecciónEventos y reactividad
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. -
LecciónCapturando eventos
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. -
LecciónAnidando componentes
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... -
LecciónDatos dinámicos y props
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. -
LecciónCreando nuestro primer componente
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. -
Lección¿Qué es Svelte?
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...