Curso de Web Components con LitElement

• Qué es Web Components, LitElement y Lit-HTML
• Primeros pasos con LitElement
• Crear componentes (custom elements)
• Declaración e inicialización de propiedades de componentes
• Usar componentes propios y de terceros

• Cómo definir templates
• Bindear propiedades, eventos hacia elementos HTML o hacia otros componentes
• Aprender a realizar condicionales y bucles
• Usar Slots para renderizar light DOM

• Cómo aplicar estilos de distintos modos
• Usar Constructable Stylesheets para aumento del rendimiento
• Cómo hacer estilos dinámicos en función de propiedades del componente
• CSS custom properties para permitir la personalización de estilos

• Cómo definir manejadores de eventos
• Disparar y capturar eventos personalizados

• Propiedades vs Atributos
• Métodos del ciclo de vida nativos (Web Components)
• Métodos del ciclo de vida de componentes Lit Element

Ejemplo práctico donde repasar la utilidad del Render en light DOM

• Distintos tipos de recursos que tenemos para hacer composición de elementos
• Interoperabilidad de componentes. Patrón mediador
• Patrón mediador Vs Redux
• Compartir código por medio de Mixins e imports

• Cómo hacer público el componente vía npm
• Transpilar componentes
• Cómo documentar un componente
• Publicar el WebComponents.org

En esta clase extra realizaremos el desarrollo de la práctica propuesta en el curso, la creación de un "todo list". Implementaremos varios componentes realizados durante el curso, y otros que desarrollaremos en esta clase, haciendo posible su interoperabilidad basada en el patrón mediador. Además en la clase tocamos otros puntos importantes no tratados hasta el momento en el curso:

• Conoceremos los templates de aplicaciones simples que nos propone la Open-WC.
• Realizaremos filtrados y ordenamientos en los listados de las tareas

En esta clase exploramos uno de los servicios de Firebase, el conocido como "Cloud Firestore", que no es más que una base de datos en tiempo real que se puede usar directamente desde Javascript. Durante la clase se crean un montón de componentes LitElement, creando una estructura de aplicación con una arquitectura de datos basada en el patrón mediador, que es lo que hemos conocido durante el curso. Aprenderemos a consultar datos de la base de datos, hacer modificaciones, borrados e inserciones, lo que se conoce generalmente como CRUD.

En este vídeo veremos cómo podemos tener Webpack como entorno de desarrollo para componentes y aplicaciones con LitElement. Es una configuración básica, con LiveReload y otras utilidades interesantes. Recordar que en el curso de Webpack para Polymer 3 se encuentra mucho más ampliada esta información con numerosas utilidades extra.

En este vídeo tratamos Redux en el marco del desarrollo de aplicaciones con LitElement. Presentamos qué es Redux de una manera rápida y luego abordamos su implementación en un proyecto. Realizamos todo el conjunto de módulos para trabajar con Redux, Store, reducers y action creators y luego creamos componentes que están conectados al store y reciben cambios cuando se produce cualquier alteración en el estado de la aplicación. Hacemos componentes que están desconectados del store, pero que aún así pueden acceder a partes del estado, por medio de binding. Hacemos componentes que despachan acciones para la manipulación del estado, en varios puntos del árbol de componentes.

En esta clase abordamos de manera muy práctica el desarrollo de componentes que implementan animaciones en sus comportamientos. Realizamos dos tipos de animación, de opacidad y de cortinilla (slide-up / slide-down), y además con enfoques de trabajo distintos. Presentamos diversos componentes que hemos publicado como ejemplo para resolver dudas originadas por los estudiantes durante el curso.

Para la práctica proponemos la realización de un componente. En esta sesión se muestra el paso a paso de la práctica con un componente sencillo, que se crea en un proyecto y para el que se van añadiendo piezas para su correcta publicación como software libre. Además, se muestra una parte nueva en este curso, que es la publicación de demos por medio de Storybook, una especie de framework para desplegar componentes y realizar demos interactivos diversos.

En este vídeo vamos a crear un nuevo componente con LitElement, en el que vamos a aplicar estilos dinámicos en función de las propiedades del componente.

Lo haremos apoyándonos en clases, que es la manera más habitual, ordenada y mantenible de generar estilos para que el componente cambie su aspecto. Luego con binding colocaremos distintas clases en el elemento para que los estilos cambien.

Además trabajaremos con una directiva de Lit-HTML que no habíamos visto en el curso, classMap(), que nos permite colocar clases de una manera más directa, por medio de un objeto con el que podemos mapear nombres de clases, para que se apliquen o no a un elemento.

Cómo usar componentes desarrollados con LitElement en una aplicación frontend creada con el framework Angular.

Cómo trabajar con Lerna, un sistema de mono-repositorio que nos permite mantener en un mismo repositorio de Git cualquier número de packages npm, para integrar en un monorepo todos los componentes de un sistema de diseño.