Curso de Web Components con LitElement
El curso de LitElement te enseñará a crear Web Components estándar, apoyado por la librería de Google
Material disponible
Intermedio
15 Clases 23 h
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é en el 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.

  • 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é debes aprender Web Components con 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 y contenidos

Primeros pasos con Web Components y LitElement Gratis
  • 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
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
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
Eventos y ciclo de vida de componentes
  • Cómo definir manejadores de eventos
  • Disparar y capturar eventos personalizados
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
Render en light DOM

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

Composición y aquitecturas
  • 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
Publicar componentes
  • Cómo hacer público el componente vía npm
  • Transpilar componentes
  • Cómo documentar un componente
  • Publicar el WebComponents.org
Resolución de práctica LitElement

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
Usando Firebase en una aplicación LitElement

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.

Configuración de Webpack como entorno de desarrollo LitElement

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.

Introducción práctica a Redux en LitElement

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.

Desarrollo de componentes con animaciones CSS

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.

Práctica del curso y publicación con demos Storybook

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.

Estilos dinámicos en función de las propiedades del componente

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.

Valoraciones

alberto diarian sancho

Manuel Alfonso Rios Medellin

César Osvaldo Martínez Cantú

Alejandro Rodriguez Sorni

Muy buen curso para adentrarse en el desarrollo de Web Components. Los ejemplos paso a paso me han parecido un gran aporte, ya que te ayuda a entender todo mejor.

Maria Sánchez Reñones

Gaby

Jose Antonio Martinez Martinez

Vicente Soriano

El curso su puede seguir bien y los ejemplos son interesantes. Conozco a Miguel desde hace tiempo y se sigue esforzando igual que siempre para explicar hasta los conceptos oscuros que siempre los hay en programación. Hacer fácil aquello que no lo es tiene un gran mérito ;-)

Joel Coll

Fernando Vegas Salamanca

José Carlos Domínguez Bermúdez

Muy completo y con clases extras muy interesantes

dobleklik

Genial el curso...y muchas gracias por añadir nuevos contenidos!

Arturo Miguel Núñez

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 130 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete