Curso de Lit

En este vídeo vamos a aclarar conceptos básicos como Web Components, Custom Elements y veremos qué nos ofrece Lit. Luego realizaremos una introducción muy práctica al desarrollo de componentes con Lit, donde veremos cómo hacer un componente y qué son las propiedades de los componentes.

En esta introducción a la librería Lit vamos a mostrar las cosas básicas para crear un proyecto donde usaremos Vite como herramienta de desarrollo frontend.

Esta es una introducción práctica del uso de componentes Lit en proyectos para la web. La idea es mostrar la experiencia de desarrollo de un proyecto HTML normal, en el que usamos custom elements (componentes estándar) desarrollados con Lit, lo que nos permite realizar con rapidez interfaces con avanzados comportamientos dinámicos.

En este vídeo vamos a ver cuáles son las configuraciones disponibles para las propiedades de los componentes. Estudiaremos con más detalle la configuración type, attribute, state y haremos un ejemplo de uso de reflect.

En este vídeo vamos a aprender lo que sería la composición de templates con Lit. Veremos algunas cosas interesantes del método render y la función "html" para construir los templates y luego cómo dividir el contenido de los elementos en varios templates, e incluso apoyarnos en otros módulos y componentes para conseguir modularizar templates más complejos.

Ahora vamos a aprender a crear estructuras condicionales en los templates de Lit. Veremos diversas maneras de crear lógica condicional, algunas básicas y otras un poco más complejas, que nos llevaremos a métodos.

En este vídeo vamos a ver cómo realizar repeticiones en templates, para recorrer arrays y mostrar los diversos elementos del array en una lista, usando el método map de los arrays de Javascript.

En esta clase presentaremos la librería Lit para el desarrollo de Web Components, sus ventajas y ejemplos sencillos de componentes.

Veremos algunas características de las propiedades en Lit, además estudiaremos cómo funcionan los templates de componentes en Lit, la sintaxis para bindear datos, eventos, recorridos y cómo definir el CSS.

Veremos cómo hacer composición de componentes, de modo que unos se apoyan en otros para resolver problemas mayores

En esta clase vamos a realizar prácticas de desarrollo de nuevos componentes, que nos permitirán reforzar conocimiento y encontrar nuevas técnicas para desarrollar componentes de interfaz gráfica de uso general.

En esta clase vamos a ver diversos temas pendientes que tenemos, para completar el conocimiento del desarrollo de componentes con Lit. Veremos el final de los métodos de ciclo de vida, directivas de lit-html y haremos algunas prácticas de herencia estándar y vía mixins.

Cómo crear un flujo de trabajo para el desarrollo de componentes e integrar las herramientas más comunes.

Realizaremos una práctica completa de desarrollo de un componente y su publicación en npm, para que se pueda usar en cualquier proyecto frontend. Integración de componentes web en Angular.

En esta clase vamos a realizar una serie de componentes que trabajarán con Ajax. Además vamos a incorporar Lit en un proyecto de Laravel.

En esta clase vamos a estudiar Rocket, un Static Site Generator del equipo de Open Web Components creado especialmente para hacer sitios para documentación de librerías, catálogos de componentes o design systems.

En esta clase vamos a terminar los ejemplos de componentes que comenzamos en la clase anterior para realizar un crud usando Web Components y Ajax.

Herramientas para la organización de repositorios y control del estándar de codificación, donde mantener un catálogo de componentes, mediante un monorepo.

En este vídeo vemos un pequeño y sencillo taller de validación dentro de un componente Lit. La clase pretende dar algunas pinceladas sobre validación y cómo organizar el código, viendo diversos tipos de campos de formulario a validar, apoyándonos en otros componentes para facilitar ciertas labores, etc.

Explicamos el API ElementInternals de Web Components que nos permite crear componentes que son capaces de integrarse de manera nativa con formularios, igual que hacen los campos input, checkbox o select del HTML.

En este vídeo se muestran algunos detalles que quiero que se conozcan antes de explicar cómo se realiza la práctica. Veremos rápidamente qué cambios recientes hay en Lerna y los monorepos, junto con mención a los workspaces de npm. Veremos cómo restaurar el repo de los dile-components y cómo se crea un nuevo componente y se publican cambios con Lerna.

Qué son los workspaces de npm, qué situaciones vienen a solucionar. Cómo trabajar con workspaces en un repositorio de software, instalar dependencias, usar unos workspaces desde otros, etc.

En este vídeo vamos a mostrar nuevas actualizaciones realizadas en el repositorio del catálogo de componentes donde publicar las prácticas, que impactan en el procedimiento que tendréis que hacer para crear componentes, sus demos y la documentación.

En este vídeo se describe la práctica propuesta para obtener el certificado de realización del Curso de Lit. Te lo explicamos todo, con una guía paso a paso de cómo queremos que se publiquen los componentes.

Cambios en repositorio dile-components, de los componentes realizados por la comunidad, donde os hemos planteado la realización de la práctica del Curso de Lit. Básicamente tenemos ya la documentación usando el Static Site Generator Rocket, por lo que ahora los componentes presentados se deben documentar creando una página nueva en el sitio de dile-components, en lugar del Readme como se hacía antes.

En esta clase vamos a ver cómo podemos montar una Single Page Application con Lit en pocos minutos a partir de un proyecto de SPA que nos puede servir de Boilerplate.