Curso de Web Components con LitElement
A lo largo de este curso aprenderás a desarrollar fácilmente componentes web, siguiendo el estándar Web Component, gracias al uso de la librería LitElement, sucesora de Polymer.
Impartido por:
Lo que aprenderás en este curso:
- Especificaciones del estándar Web Component
- Crear componentes reutilizables con LitElement
- Comunicar diferentes componentes entre sí.
- Construir y publicar componentes siguiendo las especificaciones de Open-WC
Requisitos del curso
Para realizar este curso se debe tener una base en HTML, CSS y Javascript, preferiblemente de la versión ES6 en adelante, o conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así recomiendo realizar el curso de ECMAScript 6 que tenemos disponible en la plataforma.
Valoraciones de estudiantes:
Contenido del curso:
-
-
Presentación3m
-
¿Qué son Web Components?6m
-
¿Qué es LitElement?4m
-
-
-
Requisitos previos2m
-
Versiones, Starter Kit y Open WC7m
-
Creando el primer componente10m
-
-
-
Lit-HTML: Motor de templates usado por LitElement5m
-
Usando propiedades en el template3m
-
Bucles3m
-
Render condicional3m
-
Bindeo de propiedades en elementos6m
-
Slots7m
-
Composición de plantillas4m
-
Directivas de Lit-HTML4m
-
-
-
Propiedad Styles7m
-
Reutilizar y compartir estilos4m
-
Estilos y Shadow DOM5m
-
Usando variables CSS con Shadow DOM6m
-
-
-
Declaración e inicialización de propiedades9m
-
Tipado y conversión de tipos6m
-
-
-
EventListeners5m
-
DispatchEvent y CustomEvent7m
-
-
-
Ciclos de vida del estándar Web Component7m
-
Ciclos de vida propios de LitElement5m
-
Render3m
-
FirstUpdated4m
-
-
-
Publicar un componente5m
-
Usar componentes4m
-
Construcción de un componente con Rollup4m
-
-
-
Creación del scaffolding del componente5m
-
Definiendo el template5m
-
Aplicando estilos5m
-
Agregando una imagen5m
-
Botón de acción7m
-
Testear un componente9m
-
Te dejamos una selección de cursos, carreras y artículos
Curso de Fundamentos de Service Workers
Aprende con el curso de fundamentos de Service Workers qué son y cómo programarlos para utilizarlos en nuestras aplicaciones web.
Web Components con StencilJS
En este taller conoceremos los fundamentos básicos de los Web Components y su utilidad, así como hacer uso de la herramienta StencilJS para crear nuestro …
Dudas frecuentes
¿Cuándo comienza la formación?
En OpenWebinars las formaciones no tienen fecha de inicio y de final.
Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.
¿Cuál es el precio?
En OpenWebinars no vendemos formaciones.
Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todas las formaciones de la plataforma y a las nuevas que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).
¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.
¿Puedo obtener un diploma que acredite mis conocimientos?
Efectivamente, una vez superada cada formación, podrás descargarte el diploma acreditativo de cada una de ellas. Añádelas a tu CV y mejora tu perfil para las empresas.
También podrás obtener un diploma de nivel superior al superar todas las formaciones de la carrera.
Los alumnos objetivo de este curso son aquellos desarrolladores web que estén interesados en conocer el estándar Web Component y aprender a crear componentes fácilmente utilizando la librería LitElement.
Para realizar este curso es imprescindible tener una buena base en HTML, CSS y JavaScript, preferiblemente de la versión ES6 en adelante, o, en su lugar, conocer cualquier otro framework o librería que permita un desarrollo por componentes (Angular, React, Vue...). Si no fuera así, es recomendable realizar el Curso de ECMAScript 6 que tenemos disponible en la plataforma.
Iniciamos este curso de LitElement realizando una introducción tanto al profesor que lo imparte como al temario que se verá a lo largo del mismo. Además, se explicará qué son los Web Components, sus características y sus pilares fundamentales (Custom Elements, Shadow Dom, HTML Templates, ES Modules), así como qué es LitElement y qué nos aporta al desarrollo con Web Components.
Finalizada la introducción pasamos al bloque dedicado a comenzar a trabajar con LitElement, en el que conocerás los requisitos necesarios para ello. Posteriormente se explicarán las diferentes versiones existentes de esta librería, además de los diferentes Starter-Kits existentes y qué es Open-WC, que utilizaremos de forma conjunta. Para acabar este bloque crearemos, de forma práctica, nuestro primer componente paso a paso.
En el segmento posterior continuamos desarrollando nuestro componente con LitElement, centrándonos en todo lo que tiene que ver con templates y slots. Sobre templates aprenderás cómo utilizar el motor de templates Lit-HTML, además de usar en el template propiedades, bucles, render condicional y cómo bindear propiedades en elementos. En cuanto a slots, además de aprender qué son y qué funcionalidades aportan en el desarrollo de componentes. Y para acabar esta parte, aprenderás cómo trabajar con composición de plantillas y las directivas que nos ofrece Lit-HTML.
Seguimos avanzando al siguiente apartado dedicado a los estilos, en el que se explicará todo lo referente a la propiedad Styles, además de cómo reutilizar y compartir estilos entre diferentes componentes. También se explicarán las particularidades de los estilos y Shadow DOM, así como del uso de variables CSS con Shadow DOM.
En los posteriores apartados del curso veremos cómo trabajar con propiedades y eventos. Sobre las primeras aprenderás a declarar e inicializar las propiedades en LitElement, además de su tipado y conversión de tipos. Dentro de los eventos te mostraremos cómo utilizar los mismos dentro de LitElement, a través del uso de EventListeners, DispatchEvent y CustomEvent.
A continuación, pasamos a desarrollar la teoría sobre los ciclos de vida, explicando los ciclos de vida que ofrece el estándar Web Components, así como los ciclos de vida que nos ofrece LitElement. Dentro de este apartado también profundizaremos un poco más en el ciclo render y el ciclo FirstUpdated.
La penúltima sección del curso servirá para aprender sobre la construcción y publicación de componentes. En las clases en las que se divide la misma, se explicará cómo publicar un componente, cómo usar otros componentes propios o de terceros, además de cómo construir un componente con la aplicación Rollup.
El cierre del curso de LitElement llega con el apartado enfocado en la creación de un componente, pero de forma práctica, en la que se hará un completo repaso de todo lo anterior, pero aplicando toda la teoría, lo que te permitirá ver de forma más visual todo lo explicado por el profesor en las diferentes secciones del curso.
Al finalizar este completo curso, que te permitirá aprender de una forma teórica en combinación con la práctica, habrás aprendido las especificaciones del estándar Web Component, a crear componentes reutilizables con LitElement, a comunicar diferentes componentes entre sí y también a construir y publicar componentes siguiendo las especificaciones de Open-WC.