Comenzamos el Manual de LitElement, una clase base para crear Custom Elements (elementos bajo el estándar de Web Components), con una serie de mejoras adicionales al propio estándar que seran realmente interesantes para cualquier desarrollador frontend.
LitElement, o lit-element si lo prefieres, está creada por el equipo de Polymer e impulsado por Google. Representa la evolución de la Librería Polymer, pero más adaptada al estándar y a las nuevas características de los navegadores y del lenguaje Javascript, ya que usa todas las características más novedosas de las tecnologías, con lo que consigue mejorar el rendimiento de las aplicaciones y ser muy ligera.
En este manual aprenderás a usar LitElement para desarrollar de una manera sencilla y ágil tus propios elementos, capaces de interoperar con cualquier tipo de proyecto, ya sea Javascript nativo o cualquier librería o framework con el que quieras trabajar. Gracias a su compatibilidad en cualquier ámbito donde se use Javascript podrás usar los componentes web creados con LitElement a lo largo de todos los proyectos donde los necesites, da igual si están basados en React, Vuejs, Angular, por poner varios ejemplos.
Usando LitElement podrás contar con una base de alto rendimiento para el desarrollo de componentes, ya que implementa un sistema de binding ultrarápido que nos ofrece LitHTML, capaz de ofrecer más rendimiento que todos sus competidores más populares, incluido por supuesto el virtual dom de React. LitHTML está también creado por el equipo de Polymer, como el propio LitElement.
En sus pocas KB de peso (6KB minimizado y comprimido) además de su sistema de templates, da soporte a diversos tipos de propiedades, que mantiene sincronizadas con los atributos de los componentes.
Aunque LitElement esté orientado a creación de componentes, también lo puedes usar para crear cualquier tipo de aplicación frontend. La experiencia de desarrollo es muy agradecida y productiva. Aprende con nosotros en el Manual de LitElement y comienza a aprovechar de verdad toda la potencia del Javascript nativo de los navegadores.
En Manual de LitElement encuentras:
Artículos del manual
-
Introducción a LitElement y LitHTML
Comenzamos el manual de LitElement con una introducción a las librerías de Google para el desarrollo de Web Components. LitHTML es un motor de plantillas, que se puede usar en cualquier contexto donde tengamos que crear HTML desde Javascript, interpolando valores. Estas plantillas son reactivas, de modo que cambian automáticamente cuando cambian los valores interpolados. Por su parte, LitElement es una base clase para el desarrollo de componentes, que se apoya en LitHTML como motor de templates. LitElement aporta mucho valor al desarrollador, a cambio de muy poco peso, por lo que se hace muy recomendable de usar encima del estándar Javascript para crear componentes.
-
1
Lit-HTML
Qué es Lit-HTML y cómo usar esta librería para creación de templates HTML en Javascript, capaz de ofrecer un altísimo rendimiento.
-
2
LitElement
Conoce LitElement, clase base para creación rápida de Web Components, que funcionan en cualquier tipo de medio, sitios web, aplicaciones web, construidas con cualquier framework del mundo.
-
Desarrollando los primeros componentes con LitElement
En los próximos artículos vamos a comenzar con una parte más práctica, en la que aprendemos a crear nuestros primeros proyectos de componentes y aplicaciones basados en lit-element. En esta parte comenzarás a conocer mejor esta librería y sus posibilidades, aunque nuestro principal objetivo por ahora es simplemente que entiendas y puedas implementar un flujo de trabajo adecuado para trabajar con Web Components y LitElement.
-
3
Primer componente con LitElement
Creamos un primer componente, custom element del estándar Web Components, basado en LitElement. Hola Mundo con LitElement.
-
4
Usar componentes de LitElement en cualquier proyecto web
Cómo usar componentes de LitElement, y Web Components en general, creados por nosotros u otros desarrolladores en cualquier proyecto web, con Javascript y/o frameworks.
-
5
Inicio de proyectos con Web Components y las herramientas open-wc
Cómo iniciar proyectos de componentes y aplicaciones basadas en el estándar Web Components y LitElement con los generadores de código de la open-wc.
-
Templates en LitElement
En esta parte vamos a profundizar para conocer cómo se desarrollan los templates de los componentes LitElement. Sería lo que se consideran las vistas de los componentes, que se construyen recordemos gracias a la librería LitHTML. Veremos qué características podemos implementar sobre los templates, su sintaxis y cómo interpolar, datos, propiedades, eventos dentro de las vistas de los componentes, de manera declarativa.
-
6
Templates en Lit-Element
Los templates en lit-element: Cómo configurar la vista de un componente, Web Component, basado en LitElement.
-
7
Condicionales y bucles en templates LitElement
Aprende a crear estructuras condicionales y bucles o repeticiones en los templates de web components creados con LitElement.
-
8
Sintaxis del binding en templates LitElement
En los templates de LitElement podemos indicar muchas cosas de manera declarativa, como eventos y diversos tipos de bindings. Te hacemos un resumen con ejemplos de nuevos componentes.
-
9
Patrón mediador ¿Dónde está el doble binding en LitElement?
Como en LitElement no tenemos doble binding, tenemos que jugar con 1 way binding y eventos personalizados en lo que se conoce como patrón mediador.
-
Otros asuntos importantes dentro de LitElement
En estos artículos abordamos distintos temas relevantes para los desarrolladores de componentes y aplicaciones basadas en Web Components y LitElement.
-
10
Introducción al ciclo de vida de los componentes LitElement
Qué es el ciclo de vida, cuáles son los métodos del ciclo de vida nativos en Web Components y las particularidades de los updates asíncronos de los templates de LitElement.
-
11
Redux en LitElement
Cómo usar Redux en una aplicación frontend basada en Web Components y LitElement.
Descargas
-
Libros electrónicos de LitElement Descarga del manual completo de LitElement, la clase base para construir Web Components del estándar de Javascript. Este manual se incluye en distintas versiones de archivos adecuadas para ordenadores y lectores electrónicos. Los libros electrónicos de PDF los podrás leer cómodamente en un ordenador y los formatos ePub y Mobi son adecuados para eReaders y Kindle.
Archivos disponibles: PDF, ePup, Mobi (Kindle)
Páginas: 78 (Referencia por el archivo PDF)