©2022 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Curso de Lit
Cómo usar Lit para el desarrollo de web components Javascript estándar
Material disponible
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.
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.
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.
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.
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.
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.
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.
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.
En esta clase presentaremos la librería Lit para el desarrollo de Web Components, sus ventajas y ejemplos sencillos de componentes.
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.
Veremos cómo hacer composición de componentes, de modo que unos se apoyan en otros para resolver problemas mayores
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.
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.
Cómo crear un flujo de trabajo para el desarrollo de componentes e integrar las herramientas más comunes.
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.
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.
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.
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.
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.
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.
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.
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
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 190 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.