Curso de Web Components con LitElement

FrontEnd

El curso de LitElement te enseñará a crear Web Components estándar, apoyado por la librería de Google

Intermedio Medio (de 8 a 20 horas)

El Curso de Web Components con LitElement te enseña a usar el estándar Javascript para la creación de elementos personalizados, encapsulados, interactivos y reutilizables, con los que expandir las posibilidades de los navegadores.

Qué aprenderás en el curso de LitElement

 ๏ Conocer el estándar Javascript Web Components.

 ๏ Aprender a aplicar Web Components en el desarrollo frontend 

 ๏ Desarrollar elementos personalizados, usando LitElement como clase base

 ๏ Sacar partido a las posibilidades de Lit-HTML para el desarrollo de templates

 ๏ Dominar las características del desarrollo de componentes con LitElement

 ๏ Diseñar componentes que se apoyan en otros para resolver problemas más complejos

 ๏ Aprovechar las características nativas de los navegadores para crear componentes de alto rendimiento

 ๏ Aprender a distribuir y documentar componentes para uso público

Por qué Web Components y LitElement

Web Components es el estándar Javascript para el desarrollo de componentes personalizados, que puedes usar en cualquier tipo de proyecto web, compatibles con proyectos donde se usa Javascript nativo y frameworks y librerías modernas como Angular, React, Vue, etc.

LitElement es una clase base desarrollada por el equipo de Polymer (Google) para el desarrollo de componentes, que ofrece a los programadores una nutrida cantidad de utilidades enfocadas en la productividad y en proporcionar una agradable experiencia de desarrollo. LitElement se apoya a su vez en Lit-HTML, una librería ultra rápida para la creación de templates Javascript.

Todo lo que necesitas para beneficiarte de las ventajas de LitElement ocupa tan solo 6 KB, gzipeado, por lo que resulta muy ligero y apropiado para cualquier tipo de proyecto. Esto es gracias a que LitElement usa todas las características nativas del estándar de Web Components y las novedades más recientes del lenguaje Javascript.

Con LitElement y Web Components tienes un completo set de herramientas que además de ofrecerte numerosas facilidades en el desarrollo, permiten crear componentes con un elevado rendimiento, comparativamente mayor que con cualquier otra librería popular existente en la actualidad.

Clases del curso de Web Components con LitElement

Las clases del curso de LitElement tendrán un alto contenido práctico. A lo largo de las clases del curso desarrollaremos decenas de componentes con los que aprender los distintos puntos del temario.

Clase 1: Introducción a Web Components y 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

Clase 2: Templates con LitElement

- 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

Clase 3: Estilos en componentes LitElement

- 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

Clase 4: Eventos y ciclo de vida de componentes

- Cómo definir manejadores de eventos

- Disparar y capturar eventos personalizados

- Envío de datos de hijos a padres mediante eventos

Clase 5: Propiedades y ciclo de vida de componentes

- Propiedades vs Atributos

- Métodos del ciclo de vida nativos (Web Components)

- Métodos del ciclo de vida de componentes Lit Element

- Ejemplos prácticos de los métodos del ciclo de vida

Clase 6: Render en Light DOM

- Qué es Light DOM

- Qué posibilidades nos ofrece usarlo en vez de Shadow DOM.

Clase 7: Composición y arquitecturas

- Interoperabilidad de componentes. Patrón mediador

- Patrón mediador Vs Redux

- Extensión de componentes

- Compartir código por medio de Mixins e imports

Clase 8: Publicar componentes

- Cómo hacer público un package de componente web vía npm

- Cómo documentar un componente

- Publicar el WebComponents.org

Clase 9: Práctica LitElement

- Desarrollo de la práctica propuesta en el curso, la creación de un "todo list".

- Desarrollar e implementar componentes 

- Interoperabilidad basada en el patrón mediador. 

- Templates de aplicaciones Open-WC.

- Filtrados y ordenación de listas de elementos

Clase 10: Firebase y LitElement

- Qué es Firebase

- Conociendo Cloud Firestore

- Realización de operaciones CRUD contra Firebase

 Clase 11: Webpack como entorno de desarrollo

- Qué es Webpack

- Cómo usar Webpack para implementar live-reload

- Producir bundles con Webpack

Clase 12: Redux en LitElement

- Introducción a Redux

- Creación de componentes Redux (store, actions, reducers)

- Aplicación del mixin connect de los PWA-Helpers

Clase 13: Desarrollo de componentes con animación

- Animación con CSS

- Uso de mixin para facilitar animación slide down/up

- Creación de componentes de ejemplo 

Case 14: Práctica para la obtención del certificado

- Cómo presentar la práctica

- Cómo usar Storybook para la creación de las páginas de demo

- Crear las páginas de demo en Netlify

- Publicación en NPM y WebComponents.org

En resumen, con este curso podrás aprender a usar LitElement, para sacar el mejor partido al estándar Web Components, con el que potenciar tus habilidades en el desarrollo frontend. LitElement te permitirá aprovechar las características nativas de los navegadores y desarrollar de manera más ágil componentes, para realizar cualquier necesidad en el ámbito de la web. A la vez te beneficiarás de uno de los motores de vistas más rápido de la actualidad, superior en rendimiento a todas las librerías y frameworks populares.

CONTENIDO

Primeros pasos con Web Components y LitElement

Gratis !
Miguel Angel Alvarez
1:57:20

Templates con LitElement

Miguel Angel Alvarez
2:11:52

Estilos en componentes LitElement

Miguel Angel Alvarez
2:00:27
2:03:43
2:01:47

Render en light DOM

Miguel Angel Alvarez
18:32

Composición y aquitecturas

Miguel Angel Alvarez
1:38:13

Publicar componentes

Miguel Angel Alvarez
2:05:41
2:17:18
2:08:34
1:14:48
1:06:03

CONTENIDO

Primeros pasos con Web Components y LitElement

Gratis !
Miguel Angel Alvarez
1:57:20

Templates con LitElement

Miguel Angel Alvarez
2:11:52

Estilos en componentes LitElement

Miguel Angel Alvarez
2:00:27
2:03:43
2:01:47

Render en light DOM

Miguel Angel Alvarez
18:32

Composición y aquitecturas

Miguel Angel Alvarez
1:38:13

Publicar componentes

Miguel Angel Alvarez
2:05:41
2:17:18
2:08:34
1:14:48
1:06:03