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

Básico Corto (hasta 8 horas) Precio en promoción 89€ 65€

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

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

Clase 6: 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 7: Publicar componentes

Cómo hacer público el componente vía npm

Transpilar componentes

Cómo documentar un componente

Publicar el WebComponents.org

Clase 8: Práctica LitElement

- 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. 

- Conoceremos los templates de aplicaciones simples que nos propone la Open-WC.

- Realizaremos filtrados y ordenamientos en los listados de las tareas

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