Curso de Lit

Cómo usar Lit para el desarrollo de web components Javascript estándar
Material disponible
Intermedio
25 Clases 32 h
Lit es una librería para el desarrollo de web components, micro en peso (5KB) pero muy potente en su funcionalidad. Lit permite crear elementos personalizados que se pueden usar en cualquier proyecto frontend, aportando numerosas utilidades encima del estándar Javascript, lo que facilita el desarrollo de los componentes.

Usar Lit equivale a usar el estándar Web Components de Javascript, por lo que tus componentes se podrán utilizar en todas las aplicaciones web frontend. Con Lit puedes desarrollar aplicaciones completas, pero también componentes que podrás integrar de manera transversal en todos los frameworks, como Angular o Vue, así como en librerías como React.

Qué aprenderé en el Curso de Lit

  • Crear web components estándar
  • Crear componentes mediante la librería Lit
  • Bindeo de datos para componentes reactivos
  • Interoperabilidad y composición de componentes
  • Usar componentes de Lit en proyectos frontend diversos
  • Entender y dominar las herramientas del ecosistema Lit y Web Components
  • Organización de repositorios de componentes

Objetivos del curso

  • Ofrecer a los estudiantes todas las guías necesarias para desarrollar componentes usando la librería Lit.dev.
  • Explicar cómo crear web components estándar que usaremos luego en cualquier aplicación donde se requieran.
  • Mostrar cómo compartir componentes y publicarlos en npm para que se puedan usar dentro de cualquier proyecto. - Organización de los componentes en un monorepositorio para crear sistemas de diseño o componentes de utilidad diversa que podamos reutilizar fácilmente.

Por qué debes aprender Lit

Los componentes de uso genérico deberían desarrollarse siempre con Web Components, lo que nos asegura que los podrás reutilizar en todos los contextos: sitios tradicionales, aplicaciones Javascript nativas, aplicaciones React, Angular, Vue, etc. Gracias a crear tus componentes basados en el estándar Javascript, podrás aplicarlos de manera transversal allá donde los necesites.

Para desarrollar Web Components puedes usar simplemente Javascript, pero acabarías teniendo una serie de necesidades repetitivas en todos tus componentes, como el bindeo de datos, traspasar datos de atributos a propiedades, gestionar mensajes entre componentes, usar sistemas de templates, etc. Todo eso es lo que te aporta Lit, evitando que pierdas tiempo o tengas que reinventar la rueda.

Además, Lit ocupa aproximadamente 5KB de tamaño, por lo que tienes toda una serie de utilidades que mejorarán tu experiencia de desarrollo y productividad, en menos peso de lo que sería una pequeña imagen. Por si fuera poco, está fuertemente pegado al estándar, por lo que desarrollar con Lit es especialmente próximo al desarrollo nativo con Javascript.

Además, con este curso te llevarás un extra de conocimiento y buenas prácticas para la organización de proyectos de bibliotecas de componentes, para que puedas crear y distribuir sistemas de diseño de una manera optimizada y fácilmente mantenible.

Qué tengo que saber

Para el máximo aprovechamiento del curso de Lit se recomienda conocimientos de HTML, CSS así como de Javascript a nivel medio. Usaremos Javascript con las novedades de ES6, que también daremos por sabidas

Clases y contenidos

Primeros pasos en el desarrollo con Lit

Vídeos pre-grabados sobre Lit, que abordan aspectos básicos del desarrollo de componentes (custom elements) sencillos.

Primeros pasos para desarrollar con Lit Gratis

En este vídeo vamos a aclarar conceptos básicos como Web Components, Custom Elements y veremos qué nos ofrece Lit. Luego realizaremos una introducción muy práctica al desarrollo de componentes con Lit, donde veremos cómo hacer un componente y qué son las propiedades de los componentes.

Primeros pasos con Lit usando Vite como herramienta de desarrollo Gratis

En esta introducción a la librería Lit vamos a mostrar las cosas básicas para crear un proyecto donde usaremos Vite como herramienta de desarrollo frontend.

Usando componentes Lit en proyectos HTML Gratis

Esta es una introducción práctica del uso de componentes Lit en proyectos para la web. La idea es mostrar la experiencia de desarrollo de un proyecto HTML normal, en el que usamos custom elements (componentes estándar) desarrollados con Lit, lo que nos permite realizar con rapidez interfaces con avanzados comportamientos dinámicos.

Configuración de propiedades Lit

En este vídeo vamos a ver cuáles son las configuraciones disponibles para las propiedades de los componentes. Estudiaremos con más detalle la configuración type, attribute, state y haremos un ejemplo de uso de reflect.

Composición de templates en Lit

En este vídeo vamos a aprender lo que sería la composición de templates con Lit. Veremos algunas cosas interesantes del método render y la función "html" para construir los templates y luego cómo dividir el contenido de los elementos en varios templates, e incluso apoyarnos en otros módulos y componentes para conseguir modularizar templates más complejos.

Condicionales en templates de Lit

Ahora vamos a aprender a crear estructuras condicionales en los templates de Lit. Veremos diversas maneras de crear lógica condicional, algunas básicas y otras un poco más complejas, que nos llevaremos a métodos.

Repeticiones en templates de Lit

En este vídeo vamos a ver cómo realizar repeticiones en templates, para recorrer arrays y mostrar los diversos elementos del array en una lista, usando el método map de los arrays de Javascript.

Contenido completo del curso de Lit

A continuación encuentras la grabación de todas las clases en vivo impartidas para durante el curso de Lit, que abordan el uso de la librería para desarrollar con Web Components, desde cero, así como diversas herramientas para desarrollar con Lit y crear catálogos de componentes y sitios de documentación.

Introducción a Lit Gratis

En esta clase presentaremos la librería Lit para el desarrollo de Web Components, sus ventajas y ejemplos sencillos de componentes.

Propiedades y desarrollo de templates y estilos en Lit

Veremos algunas características de las propiedades en Lit, además estudiaremos cómo funcionan los templates de componentes en Lit, la sintaxis para bindear datos, eventos, recorridos y cómo definir el CSS.

Composición e interoperabilidad entre componentes

Veremos cómo hacer composición de componentes, de modo que unos se apoyan en otros para resolver problemas mayores

Taller de creación de componentes

En esta clase vamos a realizar prácticas de desarrollo de nuevos componentes, que nos permitirán reforzar conocimiento y encontrar nuevas técnicas para desarrollar componentes de interfaz gráfica de uso general.

Directivas, herencia y mixins

En esta clase vamos a ver diversos temas pendientes que tenemos, para completar el conocimiento del desarrollo de componentes con Lit. Veremos el final de los métodos de ciclo de vida, directivas de lit-html y haremos algunas prácticas de herencia estándar y vía mixins.

Herramientas de desarrollo y flujos con Lit

Cómo crear un flujo de trabajo para el desarrollo de componentes e integrar las herramientas más comunes.

Publicación de componentes e interoperabilidad en frameworks

Realizaremos una práctica completa de desarrollo de un componente y su publicación en npm, para que se pueda usar en cualquier proyecto frontend. Integración de componentes web en Angular.

Práctica de componentes con comunicaciones Ajax e integración de Lit en Laravel

En esta clase vamos a realizar una serie de componentes que trabajarán con Ajax. Además vamos a incorporar Lit en un proyecto de Laravel.

Documentar catálogos de componentes con Rocket

En esta clase vamos a estudiar Rocket, un Static Site Generator del equipo de Open Web Components creado especialmente para hacer sitios para documentación de librerías, catálogos de componentes o design systems.

Componentes para realización de un Crud basado en Ajax con Lit

En esta clase vamos a terminar los ejemplos de componentes que comenzamos en la clase anterior para realizar un crud usando Web Components y Ajax.

Organizar un monorepo para mantener un catálogo de componentes

Herramientas para la organización de repositorios y control del estándar de codificación, donde mantener un catálogo de componentes, mediante un monorepo.

Taller de validación de formulario en un componente Lit

En este vídeo vemos un pequeño y sencillo taller de validación dentro de un componente Lit. La clase pretende dar algunas pinceladas sobre validación y cómo organizar el código, viendo diversos tipos de campos de formulario a validar, apoyándonos en otros componentes para facilitar ciertas labores, etc.

Prácticas de Lit propuestas para los estudiantes

En los siguientes vídeos veremos cuál es la práctica que se propone en el Curso de Lit para los estudiantes, que consiste en la publicación de un componente en un catálogo de componentes. Explicaremos la organización del monorepositorio que alberga al catálogo de componentes, cómo se deben publicar, documentar y temas relacionados. Mostraremos el proceso con un ejemplo, de modo que quede muy claro lo que se pide.

Cambios en la gestión de los monorepos con Lerna que impactan a la práctica

En este vídeo se muestran algunos detalles que quiero que se conozcan antes de explicar cómo se realiza la práctica. Veremos rápidamente qué cambios recientes hay en Lerna y los monorepos, junto con mención a los workspaces de npm. Veremos cómo restaurar el repo de los dile-components y cómo se crea un nuevo componente y se publican cambios con Lerna.

Workspaces de npm

Qué son los workspaces de npm, qué situaciones vienen a solucionar. Cómo trabajar con workspaces en un repositorio de software, instalar dependencias, usar unos workspaces desde otros, etc.

Publicación de componentes y documentación actualizada

En este vídeo vamos a mostrar nuevas actualizaciones realizadas en el repositorio del catálogo de componentes donde publicar las prácticas, que impactan en el procedimiento que tendréis que hacer para crear componentes, sus demos y la documentación.

Práctica para obtener el certificado del curso de Lit

En este vídeo se describe la práctica propuesta para obtener el certificado de realización del Curso de Lit. Te lo explicamos todo, con una guía paso a paso de cómo queremos que se publiquen los componentes.

Notas dile-components y Rocket para la práctica

Cambios en repositorio dile-components, de los componentes realizados por la comunidad, donde os hemos planteado la realización de la práctica del Curso de Lit. Básicamente tenemos ya la documentación usando el Static Site Generator Rocket, por lo que ahora los componentes presentados se deben documentar creando una página nueva en el sitio de dile-components, en lugar del Readme como se hacía antes.

Extra: Single Page Application con Lit

En este vídeo se muestra de manera breve cómo Lit podría ser usado para hacer una aplicación completa, del modelo de SPA. No es un objetivo de este curso en el que nos hemos centrado más en la creación de componentes, pero sirve de prólogo a lo que veremos en el próximo curso de Lit en EscuelaIT.

Montar una SPA con Lit

En esta clase vamos a ver cómo podemos montar una Single Page Application con Lit en pocos minutos a partir de un proyecto de SPA que nos puede servir de Boilerplate.

Valoraciones

Francisco Matamoros

Muy interesante la clase Mik, la verdad es que Lit desprende sencillez por todas partes. Seguiré las clases para ir viendo posibilidades de cara a futuro, ahora estoy centrado en el Master MPDS. Además, muy bien explicado todo.

Zacarias de Prado Habela

Bien explicado. Claro y conciso. Muy practico y muchos ejemplos

Maria García Huertas

Excelente si quieres aprender a desarrollar con Web Components y Lit. Resulta sencillo de seguir las explicaciones y poner en práctica.

Roberto Marzoa

Brais Daniel Duarte Simoes

Maria Paula Herrero

Me gusto mucho el curso, se aprende practicando y eso esta muy bien

Luis Terrasa

leonardo duca

Santiago Cogollo del Toro

Buen curso para iniciarse en Lit o reforzar conocimientos

José Navarro

Muy útil y práctico, aún tengo dudas pero me queda medio curso por delante.

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 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