> Manuales > Manual de Lit

Lit es la librería más extendida para el desarrollo de componentes, basados en el estándar de Web Components. Con Lit podemos desarrollar "custom elements" o elementos personalizados, que no son más que etiquetas con las que podemos extender el HTML.

A los custom elements les llamamos habitualmente "componentes" y encapsulan un marcado, unos estilos y una funcionalidad, que se puede reutilizar todas las veces que sea necesario a lo largo de cualquier proyecto frontend. La ventaja de desarrollar custom elements del estándar de Web Components es que podemos usarlos en cualquier proyecto frontend, independientemente de si es Javascript nativo o estamos usando una librería como React, o framework como Angular.

Lit lo que permite es aportar funcionalidades adicionales encima del estándar, creando una clase base llamada LitElement, que usaremos para extender las clases que implementan los componentes. Gracias a ello conseguiremos componentes reactivos, sincronización con atributos y un ciclo de vida extra en el componente.

Las ventajas de Lit con respecto a cualquier otra librería de componentes son su mínimo peso (en torno de 5KB, por lo que podríamos considerarla una microlibrería), y que está basada en estándares, por lo que el uso de los componentes es transversal a cualquier tecnología frontend que puedas usar.

Es la evolución de LitElement, por lo que la mayoría del conocimiento que tienes de esa librería lo puedes aplicar directamente a Lit. En el Manual de Lit explicaremos las bases de esta nueva versión, aunque si tienes dudas también puedes resolverlas en el manual de LitElement. Este manual está en proceso de escritura, por lo que iremos publicando artículos poco a poco.

Manual de Lit
Artículos Descargas
  • Artículos del manual

  • Aprender Lit.dev

    Comenzamos el Manual de Lit con unos artículos introductorios en los que pretendemos explicar generalidades del desarrollo basado en componentes, con el estándar Web Components y ayudados por la librería (o micro-librería si lo prefieres) Lit. En estos artículos el objetivo no es tanto entrar al detalle, sino entender el estilo de trabajo con Web Components y las posibilidades que nos ofrece Lit para ser más ágiles y tener una mejor experiencia de desarrollo.

  • 1 Primeros pasos con Lit

    Qué es Lit y cómo comenzar a usarlo para desarrollar tus primeros componentes bajo el estándar Web Components.

  • 2 Usar componentes de Lit

    Web Components te permite no solo desarrollar tus propios componentes personalizados, sino además beneficiarte de todo un ecosistema de componentes ya creados que puedes implementar fácilmente en tus proyectos.

  • Las propiedades en Lit

    En los próximos artículos vamos a conocer una de las principales herramientas que tendremos a la hora de desarrollar custom elements con Lit, las propiedades. Mediante las propiedades podemos almacenar todo tipo de datos con los que el componente podrá trabajar. Veremos que existen diversas configuraciones de las propiedades y qué cosas nos permiten realizar, como la sincronización con los atributos, la implementación de los templates reactivos y muchas otras cosas.

  • 3 Propiedades de los componentes Lit

    Las propiedades son fundamentales en los componentes Lit, por eso vamos a estudiarlas con detalle. En este artículo aprenderás las cosas más importantes que debes conocer sobre las propiedades.

  • 4 Cambiar propiedades como respuesta a eventos en Lit

    Seguimos con unos capítulos dedicados a la introducción de características del desarrollo con Lit. En este caso veremos cómo se definen manejadores de eventos, lo que nos permitirá comprobar las propiedades reactivas de Lit.

  • 5 Propiedades reflect en Lit

    Veamos una de las configuraciones de las propiedades de los componentes lit: "reflect" que permite que los cambios en las propiedades del componente se reflejen en cambios en los atributos de la etiqueta host.

  • 6 Propiedades computadas en Lit

    No es un tipo específico de propiedad sino una técnica muy habitual mediante la cual mostramos el valor de una o más propiedades una vez realizado un cálculo, en vez del valor en crudo de las propiedades.

  • Templates de componentes en Lit

    Ahora nos vamos a centrar en el sistema de templates que nos ofrece Lit, con los que podremos definir la parte visual del componente, lo que se conoce comúnmente por "vista". Veremos diversas técnicas y utilidades para la creación de las vistas de los componentes y además podrás comprobar que los templates de Lit están basados mayormente en Javascript nativo, gracias a los "template strings" que aparecieron en ECMAScript 2015 y que están soportados por todos los navegadores. Esto es genial porque reduce la cantidad de código de Lit, consiguiendo que sea una librería tan ligera, siendo una de las claves que hacen que Lit tenga un rendimiento mayor que cualquiera de las librerías basadas en componentes, como React o Vue. Además, gracias a usar las características del propio Javascript, no necesitas aprender ningún lenguaje nuevo.

  • 7 Composición de templates en Lit

    Comenzamos la serie de artículos dedicados a estudiar los templates de Lit hablando de la composición de templates, mediante la cual podemos construir vistas del componente mediante un template principal y varios sub-templates.

  • 8 Condicionales en templates de Lit

    Comenzamos a incluir algo de lógica en nuestros templates Lit, comenzando por algo tan sencillo como introducir sentencias condicionales, que nos permitan mostrar unas cosas u otras en los componentes en función de la evaluación de una expresión.

  • Descargas

  • Libro electrónico del Manual de Lit

    Si lo prefieres, puedes acceder al contenido del Manual de Lit como libro electrónico, en formato PDF, ePub y Mobi para dispositivos Kindle. Así podrás llevar tu aprendizaje de la librería lit.dev allá donde quieras y leer cómodamente este tutorial en cualquier situación.

    Archivos disponibles: PDF, ePup, Mobi (Kindle)

    Páginas: 46 (Referencia por el archivo PDF)

    Ir a la descarga

Manuales relacionados