©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
Inscripciones abiertas
Inicio del curso
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
En esta clase presentaremos la librería Lit para el desarrollo de Web Components, sus ventajas y ejemplos sencillos de componentes.
Explicaremos 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
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.
Mostraremos cómo organizar varios web components juntos en un monorepositorio que realizaremos con Lerna.
¿Conoces nuestra tarifa plana?
Toda la formación de EscuelaIT, con más de 170 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.