> 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.

  • 9 Repeticiones o bucles, en templates lit

    Seguimos trabajando con los templates de Lit. En esta ocasión vamos a ver cómo realizar repeticiones, mediante recorridos en arrays, para mostrar los valores que encontramos en ellos.

  • 10 Declarar manejadores de eventos en templates de componentes Lit

    Ahora vamos a conocer otra de las sintaxis habituales en los templates Lit, que nos permiten asociar de manera cómoda manejadores de eventos a los elementos del componente.

  • Binding e interoperabilidad

    El binding es la palabra anglosajona que usamos habitualmente para referirnos al enlace de datos. Mediante el binding podemos establecer la comunicación automática de los valores de una propiedad de un componente hacia la propiedad de otro componente. Esta comunicación se realiza automáticamente, de modo que cuando cambia el valor de la propiedad bindeada, se transfiere inmediatamente a todos los componentes hijos donde se encuentre enlazada. Esta es la base de la interoperabilidad de componentes desde padres a hijos, aunque también se produce comunicaciones de hijos a padres, en este caso mediante la transmisión de eventos. En los próximos artículos detallaremos todos estos mecanismos y su sintaxis en Web Components y Lit.

  • 11 Interoperabilidad entre componentes Lit

    Qué llamamos interoperabilidad, la capacidad de los componentes de apoyarse en otros componentes para realizar su trabajo. Ejemplos de interoperabilidad por medio del data binding de propiedades.

  • 12 Binding de propiedades boleanas en Lit

    Sintaxis del binding a propiedades boleanas en templates de Lit, junto con nuevos componentes de práctica de interoperabilidad entre custom elements.

  • 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: 68 (Referencia por el archivo PDF)

    Ir a la descarga

Manuales relacionados