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.
-
CursoWeb Components
Web Components es una tecnología propuesta por la W3C para la elaboración de componentes reusables e independientes en las aplicaciones web. Es una alternativa a React, Vue o Angular, que permite crear componentes donde todo el runtime está en el navegador, aprovechando la plataforma y permitiendo usar vanilla JS. -
Lección 📈 En tendenciaSlots de Shadow DOM
Con slots, se puede disponer de un sistema para preparar placeholders en un template HTML insertado en un Custom Element, para poder especificar declarativamente el contenido de esa etiqueta usando únicamente lenguaje de marcado. -
Lección 📈 En tendenciaCustom Elements usando HTML Templates
Ahora que hemos visto en qué consisten las templates de HTML5, podemos ver cómo integrar una template y extraer su contenido, para incorporarla en un Custom Element. -
Lección 📈 En tendencia¿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ón 📈 En tendenciaCreando 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 📈 En tendenciaShadow DOM
Shadow DOM es una API para encapsular el DOM de un componente, con el objetivo de que no se pueda alterar su presentación o sus eventos DOM desde fuera. -
Lección 📈 En tendencia✱ Asterisco: Microframeworks y JSX
Un pequeño inciso para hablar acerca de los microframeworks, las microlibrerías y otras maneras de obtener usando vanilla JS un comportamiento similar al de JSX. -
Lección 📈 En tendencia¿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... -
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...