Componentes Web, Lit y Santa 🎅

Personalmente, ¿qué me gusta? Me gusta empujar los límites, hacer cosas extrañas en la web. Puedes leer mi blog si tienes curiosidad por saber más. Y también tengo algunas cosas que no me gustan. Me gusta construir sitios web de una manera muy rápida y creo que las grandes construcciones, durante el desarrollo, realmente te ralentizan. Me encantaría ver un proceso de desarrollo mucho más rápido y creo que muchas herramientas ahora ayudan a apoyar eso.

En primer lugar, vamos a hablar sobre los componentes web. Así que vamos a tener un poco de contexto sobre los elementos y las páginas. Ahora, todos sabemos que las páginas HTML están compuestas por diferentes elementos. Estos pueden ser elementos semánticos que en su mayoría solo afectan al estilo y también son importantes para cosas como lectores de pantalla, y también un poco de semántica para ti como desarrollador, cosas como encabezado y sección. Pero también pueden ser elementos que tienen funcionalidad, cosas como A y button, y elementos como diálogo y detalles, y versiones más avanzadas de esos que tienen un estado que cambia. Los componentes web, fundamentalmente, cuando se trata de eso, nos permiten escribir nuestros propios elementos. Estos son ciudadanos de primera clase que funcionan como elementos HTML regulares. Voy a hablar sobre un ejemplo de mis detalles, al que llegaré en breve.

Entonces, ¿cuáles son los objetivos de esta charla? Quiero que te introduzcas a los componentes web y sus partes. Esta es una charla bastante general. Quiero dejar eso claro. Pasaremos por alto algunas cosas más sutiles, que, con suerte, te señalaré en la dirección correcta para que puedas obtener más información. Quiero que aprendas sobre Lit, una biblioteca de componentes web muy opinada que Google proporciona, que es realmente el mejor lugar para comenzar a escribir componentes web. Y también estaría muy contento si abres Santa Tracker en otra pestaña y haces clic en diferentes partes y juegas algunos juegos e intentas descubrir qué juegos y qué partes del sitio están ejecutados con componentes web. Así que hablemos de los detalles. Los detalles son un elemento muy interesante que mencioné antes. Tiene muchas funcionalidades. Si no lo has visto antes en acción, lo que hace es mostrar el texto del resumen, que es la cosa de arriba aquí, y solo muestra la descripción en forma más larga cuando haces clic en ese resumen.

Tiene mucho sentido y es muy útil. Quiero escribir mis detalles. Ahora, esto será muy similar al elemento de detalles regular, pero con una diferencia clave. Así es como se verá como un componente web. No puede verse exactamente igual. Tenemos que usar esta cosa de ranura aquí, pero mencionaré cómo funciona más adelante.

Entonces, la diferencia fundamental de mis detalles en comparación con los detalles es que estos detalles deben abrirse hacia arriba. Esto puede que no sea lo más importante en la web, pero pensé que era un ejemplo bastante lindo para mostrar lo poderosos que son los componentes web, que puedo reproducir un componente incorporado, un pequeño widget lindo, pero hacer algo completamente diferente. Así que quiero explicar cómo funciona esto. Fundamentalmente, creamos esta clase aquí y luego definimos su HTML interno de algo llamado sombra, a lo que llegaré un poco más tarde. Creo un poco de código aquí. Luego, obtengo algunas referencias a algunos elementos dentro de esa sombra y agrego algo de comportamiento.

Ahora, este comportamiento es bastante estándar. Cuando hago clic en este elemento aquí, quiero que el otro contenido cambie de estado. Por lo tanto, voy a abrir y cerrar este elemento haciéndolo visible o no visible, y también voy a cambiar la representación de emoji según si el elemento está abierto o no. Hemos construido este pequeño elemento genial y la mejor parte para mí es que no tiene costo adicional de biblioteca. Obviamente, el elemento tiene un poco de código que debe ejecutarse, pero no te cuesta nada más. No hay biblioteca que adjuntar, descargar o incluir. Y todos los navegadores modernos, aproximadamente el 95% de todos los navegadores hoy en día, admiten esto de forma nativa. Esto es algo que puedes usar directamente. La siguiente mejor parte es que esto es simplemente una forma estándar de interoperabilidad. Resulta que mis detalles, si hacemos un poco más de trabajo para que sea un poco más pulido, serán fundamentalmente indistinguibles del elemento de detalles regular. Nada de lo que uses realmente debería importar si son mis detalles o detalles. Por supuesto, tiene una funcionalidad diferente, pero, ya sabes, se ve, se siente, sabe, hace cuac, cualquier metáfora que te guste. Exactamente igual que cualquier otra cosa. Estos elementos son como HTML. Y la razón por la que son como HTML es porque tenemos acceso a estos dos componentes básicos de los componentes web. En primer lugar, tenemos acceso al ciclo de vida del elemento. Sabemos cuándo se crea un elemento, eso está en el constructor. Sabemos cuándo se agrega o se elimina de la página.

La otra cosa es que para ser un elemento personalizado, debes tener un guión en su nombre. Y esa es una regla muy simple. No hay elementos incorporados que tengan un guión, por lo que tus elementos deben tener un guión. La parte más divertida de esto, por supuesto, es que los emoji son cadenas válidas. Así que resulta que tu elemento puede llamarse fire-guion-camión de bomberos emoji si quieres. La segunda parte de los componentes web es la parte que te permite encapsular HTML personalizado y estilos. Ya he usado esto en el ejemplo anterior para crear una estructura en la que encajan nuestros otros elementos. Esto se llama shadow DOM. Shadow DOM se ajusta dentro de la raíz de sombra. Estos términos son intercambiables. Significan cosas ligeramente diferentes. Pero si alguna vez escuchas a alguien hablar sobre shadow DOM o raíz de sombra, están hablando de lo mismo.

Una cosa de la que quiero hablar antes de seguir adelante es esta pregunta filosófica sobre la web. Una pregunta que nos hacemos es si crees que HTML es una forma muy buena de construir cosas para la web. Eso suena contradictorio. Tenemos HTML y así es como construyes sitios web. Pero muchos frameworks eligen usar HTML como destino de renderizado. Generan divs u otros elementos que tal vez no tengan mucho significado semántico, pero se basan en conceptos más complicados que estás construyendo en alguna otra biblioteca de frameworks o alguna biblioteca de componentes en otro lugar. Y eso es totalmente válido. Pero hay un argumento que sostiene que la web puede ser semántica. Llegaré a eso más adelante.

Otra preocupación es que puedes mantener los componentes web de la manera que desees. Y lo que quiero decir con eso es que no estoy aquí desde la posición de un autor de frameworks o una biblioteca diciendo que esta es la forma en que creemos que deberías construir cosas. Tenemos orientación. Tenemos sugerencias de cómo debes usar el ciclo de vida del componente web para construir elementos de manera productiva. Pero al final, sabes, soy un orador, no un policía. Puedes construir las cosas de la manera que quieras y puedes hacerlo mal o realmente bien o de esa manera que funcione para tu aplicación y no para la de otra persona. Y eso está totalmente bien. Algunos ejemplos interesantes de esto son que anteriormente teníamos un elemento llamado Santa app. Ahora eso es más o menos lo que dice en la lata. Era toda nuestra aplicación de Rastreador de Santa.

Entonces, si cargas el sitio web, literalmente verías un elemento llamado Santa app. Resulta que descubrimos que esto es un poco un patrón antiestético. Encontramos que los componentes web funcionan mejor cuando son cosas compartimentadas que se utilizan o elementos discretos que representan una sola unidad de trabajo que se puede probar y utilizar de manera muy fácil. Descubrimos que simplemente escribir JavaScript regular para orquestar algunos elementos era mucho mejor que escribir un elemento monolítico.

En segundo lugar, una cosa que quiero mencionar es que a menudo usamos HTML porque es semántico. Usamos encabezados y secciones porque eso tiene un significado para nosotros como desarrolladores y para las personas que ven nuestras páginas utilizando lectores de pantalla. Ahora puedo crear un elemento llamado enlace elegante, pero tal vez no debería hacerlo porque resulta que los navegadores no lo entienden, ¿verdad? Entienden que A significa enlace. Ahora, puedes solucionar esto construyendo tu elemento con elementos A, pero vale la pena considerarlo y tenerlo en cuenta antes de reemplazar todo lo que HTML te brinda de forma gratuita.

Entonces me gustaría usar un ejemplo concreto de divs versus elementos semánticos. Usar divs como este no es realmente ideal. Aunque sospecho que Gmail está apuntando a estos divs en lugar de construirlos manualmente. Los nombres de clase aquí son bastante desagradables. En realidad, tienen algún significado semántico aquí. Aquí hay un rol igual a principal oculto dentro de este gran diseño. Pero para mí, si estuviera escribiendo un sitio equivalente a Gmail, creo que usaría cosas como encabezados, navegación, algunos elementos integrados junto con un montón de elementos personalizados que realmente proporcionen algún significado semántico. Tenemos este ícono de búsqueda aquí. Tenemos este botón de redacción y luego mensajes individuales. Y para mí, como desarrollador, esto parece una forma mucho más agradable de construir el sitio. Obviamente, esto depende de ti, pero esta es una de las formas en que puedes usar componentes web. Y puedes imaginar construir un sitio de esta manera. Fundamentalmente, sin embargo, los componentes web están aquí ahora, ¿verdad? Los ves por todas partes, probablemente los has usado sin darte cuenta. Para Santa Tracker, nuestro gran caso de uso aquí es impulsar la estructura y el diseño del sitio. En realidad, tenemos mucho código antiguo y esos juegos viven dentro de iframes y a menudo, sabes, código de más de 10 años construido con jQuery, y es un desastre total. Es uno de los poderes de la web, ¿verdad? No tengo que cambiar ese código drásticamente, pero sí tenemos que darle soporte. Pero todas las cosas nuevas son todos componentes web, lo que ha hecho que el desarrollo para el sitio sea realmente agradable. También vemos algunos casos de uso realmente interesantes en la web. GitHub envía fechas a los clientes como, por ejemplo, 2021-05-5. Luego, en tiempo de ejecución, tienen un componente web que convierte esa fecha absoluta en una fecha relativa. Esto es realmente genial porque puedes almacenar en caché esa página casi para siempre y luego, en tiempo de ejecución, el componente web va a reemplazar esa hora absoluta por una hora relativa.

Entonces, en realidad, también tiene un beneficio de almacenamiento en caché. A nivel personal, la forma en que utilizo los componentes web es, ya sabes, mi blog tiene contenido y encabezados y etiquetas de párrafo, al igual que el HTML regular que ha existido durante mucho tiempo, pero envuelvo demos interesantes en componentes web. Para mí, esto es realmente agradable porque no tengo que crear diseños o estructuras extrañas en las que tenga que encajar. Literalmente solo coloco este elemento en mi página, en este caso es el demo de carga de WC, y eso envuelve todo el comportamiento y todo el HTML y todo el JavaScript necesario para ejecutar este demo. Y eso es realmente agradable.

Así que mencioné las dos partes de los componentes web que voy a cubrir. Una de ellas son los elementos personalizados, que se trata realmente de la carga de código cuando se encuentra con un cierto elemento, y el shadow DOM, que se trata de diseños interesantes para tus elementos. Lo que voy a hacer es hablar sobre este botón, el botón de creación de elfos, que en realidad es un botón que carga un juego específico en Santa Tracker. Esto es en realidad un problema muy difícil, ¿verdad? Si tengo este botón y lo llamo inicio de juego, en realidad no sé cuándo se agrega a la página. En este caso, estoy en HTML. Probablemente podría llamar a un método de actualización o usar un observador de mutaciones con un montón de indicadores. Pero para cuando haga todo eso, es un poco incómodo y he escrito una implementación de compatibilidad para la función que voy a mencionar. Entonces, si le doy un guion, y como mencioné antes, cualquier cosa con un guion puede ser un componente web, el navegador dirá, genial, tengo una tarjeta de Santa, sé que se ejecuta esta clase aquí. No importa cómo se agregue, ya sea a través de HTML, otro framework, estando en tu página que envías a tus clientes, esas dos cosas se conectarán. Esa es realmente la potencia de los elementos personalizados. En cuanto a las clases, esto se ve como una clase bastante aburrida. Esto extiende el elemento HTML y tiene dos devoluciones de llamada principales. Tiene una devolución de llamada de conexión y una devolución de llamada de desconexión. Si has escrito algún otro código con otros frameworks, esta metáfora no es nueva. O desmontar o conectar o este tipo de verbos que has escuchado mucho.

Por último, lo que tengo que hacer es que este elemento no aparece automáticamente en mi página. Tengo que llamar a este global custom elements.define que realmente vincula el nombre a la clase en sí. Entonces, ¿por qué son importantes estos métodos? Resulta que se trata de ser un buen ciudadano web y limpiar después de uno mismo. En este caso, estoy usando una biblioteca de animaciones para reproducir mi animación como parte de esta tarjeta. Si no dejamos de reproducir cuando estoy desconectado, tal vez se filtren tiempos de espera o fotogramas de animación mientras la animación intenta seguir funcionando. Esta es la última vez que se te informa sobre la desaparición de un elemento de la página, por lo que es el momento adecuado para limpiar después de uno mismo. Quiero hablar sobre algunos matices más del ciclo de vida. En realidad, puedes agregar la tarjeta de Santa a tu página antes de que llegue el código, eso está totalmente bien, puedes hacerlo en cualquier orden. Hay algunos matices complicados sobre cómo darle estilo antes de que llegue el código.

Finalmente, también quiero mencionar dos métodos, el callback de cambio de atributo y el getter estático para atributos observados. Estos dos te proporcionan devoluciones de llamada cuando ciertos atributos cambian, lo cual puedes hacer como un observador de mutaciones, pero aquí se integra de manera más elegante como parte de toda esta API. A continuación, quiero hablar sobre el Shadow DOM, que puede hacer que tus elementos destaquen. Esta tarjeta aquí no es solo una tarjeta estándar con texto, aunque lo maravilloso de trabajar con ella en tu página es que la tratas como tal. Tiene un shadow root, al que llegaré en un momento, y lo llamaré shadow DOM y el shadow root se ve más comúnmente en componentes. No es el único lugar donde puede funcionar, pero el 99% del tiempo es lo único que verás aquí. Ahora, una vez que hablamos con el shadow root abierto, lo cual puedes hacer usando herramientas de desarrollo o lo que sea, puedes ver que lo hemos creado usando un montón de otros elementos. Entonces, en este caso, la tarjeta de Santa está compuesta por un botón real y también un SVG que tiene una bonita animación en él. Lo emocionante aquí es que creo una etiqueta de estilo y en la etiqueta de estilo estilo todos los botones para que sean azules. Pero lo importante es que solo afecta a los botones que están dentro del shadow root. Esto no se filtra, ¿verdad? No todos los botones de mi página se vuelven azules de repente. Eso sería muy incómodo.

Esto es realmente una característica poderosa. La parte más sorprendente del Shadow DOM para mí es el elemento slot. Básicamente, lo que hace el elemento slot es tomar los hijos directos o elementos reales de tu elemento Santa card, en este caso, y colocarlos en algún lugar dentro de la estructura de tu shadow root. Esto crea muchas oportunidades interesantes para el diseño y la reorganización de tus elementos. En muchos aspectos, es como una mini API. Sabes, tengo el elemento que básicamente dice que cualquier cosa que pongas aquí realmente aparecerá en otro lugar y se estilizará potencialmente de cierta manera o se colocará de cierta forma. La forma en que hacemos esto es en el constructor de tu elemento. Y lo hacemos en el constructor y no en el callback de conexión porque es algo que solo afecta directamente al elemento. Podemos hacerlo de manera segura aquí porque no importa cuándo se agregue a la página, lo configuramos una vez y está listo para funcionar. Algo incómodo de esto es que en realidad tienes que escribir tu HTML y CSS directamente en línea con tu JavaScript. Ahora hay formas de evitar esto y la gente usa cosas como etiquetas de plantilla para hacer que esto suceda más rápidamente o como parte de tu HTML que envías a tus clientes y eso está totalmente bien. Pero si estás escribiendo un componente completamente nuevo desde cero, normalmente escribirás código como este. Algunos matices del Shadow DOM son complicados de emular, y solíamos hacerlo, pero en 2021, con un 95% de soporte en los navegadores, realmente no es necesario. Algunos frameworks aún proporcionan esta funcionalidad y, de hecho, Lit lo hace, y mencionaré eso en un momento, pero tiende a encerrarte.

También hay algunas características relacionadas con el Shadow DOM pero no estrictamente relacionadas. Hay una especificación de variables CSS, que te permite especificar otro tipo de API que puede cambiar tus elementos de sombra, así como cosas como Part y Slotted, que te permiten cambiar tanto las partes específicas dentro de tu Shadow DOM como los elementos directamente asignados bajo tu raíz de sombra. Por ejemplo, usamos Slotted para cambiar el texto a la fuente de langosta en el ejemplo anterior. Es una especie de mini-API para especificar cómo se verán los descendientes directos de mi hijo que estoy reorganizando.

Ahora quiero hablar de lit-element, que es la forma de Google de escribir Web Components. Ahora se llama Lit, antes se llamaba Lit-element, y es un descendiente de algo llamado Polymer, que es posible que hayas oído hablar y que Google solía organizar conferencias sobre, puedes buscar eso. Es bastante pequeño, tiene un tamaño de 5 kilobytes comprimido con GZIP, y puedes obtener más información en lit.dev. La razón principal por la que usas Lit en lugar de los Web Components regulares es la vinculación de datos. Tenemos este atributo de nombre aquí, y se renderizará como hello-name, o en este caso, hello-world. Ahora, Lit es obviamente muy poderoso. Es mucho más que solo la vinculación de datos, pero es la diferencia principal que verás cuando comiences por primera vez.

Ahora el código para esto es bastante simple. Así es como se ve en JavaScript, aunque pasaré directamente a TypeScript. La diferencia principal aquí es que TypeScript admite estos decoradores directamente. Así que quiero explicar algunas de las formas en que escribes un elemento y algunas de estas características. En primer lugar, no tenemos que llamar a custom-elements.define, Lit tiene un decorador para eso que dice: este es un saludo simple, haz que esta clase esté asociada a ese nombre de elemento. Luego, en lugar de escribir estilos en línea con nuestra declaración HTML, en realidad devolvemos un objeto. Esto proporciona una serie de beneficios de rendimiento y reutilización porque cada elemento tiene los mismos estilos. También tenemos propiedades y esto maneja mucho de la vinculación de datos. Así que cada vez que tenemos esta propiedad, sabemos que cuando cambiemos el nombre, hará que se vuelva a llamar al render cuando cambiemos esa propiedad. Por último, tenemos el propio render, que devuelve esta plantilla literal de etiqueta HTML. Esto significa que es bastante rápido. Esto está fuera del alcance de la charla, pero las plantillas literales de etiquetas son útiles para las cachés. Lo que hace aquí es pregenerar el HTML y luego insertará el nombre cuando cambie. Esto significa que es bastante rápido volver a renderizar. Como puedes esperar, cuando cambio el campo de nombre a jsnation, ahora dice hola jsnation. Funciona como se esperaba. La sintaxis de la plantilla es interesante. Como viste antes, renderizamos las cosas diciendo HTML comilla invertida, luego un montón de HTML con algunas variables intercaladas. Pero también podemos especificar algún tipo especial de atributos. Ahora, si pongo un signo de interrogación antes del atributo, este es una propiedad booleana.

Entonces, te permite alternar cosas como atributos deshabilitados. Si especificas un punto, esto significa una propiedad. Ahora, las propiedades frente a los atributos, hay otra cosa, pero fundamentalmente, recuerda que si estás tratando de pasar objetos complicados, los atributos no tienen sentido. Los atributos solo pueden ser cadenas. Entonces, si tienes una matriz o un objeto y quieres pasarlo a un elemento, debes ir con propiedad punto igual a ese valor de propiedad.

A continuación, tenemos los eventos. Ahora, los eventos son interesantes para mí porque puedo simplemente decir, en clic, para el evento de clic, llama a este método. Pero resulta que también puedo escribir un controlador en línea. Esto no es especial, ¿verdad? Lit no está interpretando el código y diciendo que esa es la propiedad a llamar. Simplemente puede llamar al código que pasas en línea. Y eso es algo genial para mí.

Ahora, quiero dar un ejemplo un poco más largo. Esto es la representación de una lista de emojis. Entonces, lo que puedo hacer aquí es renderizar realmente una matriz de otros elementos HTML. En este caso, estoy representando una lista de estos tres emojis aquí. Y eso simplemente funciona. Devuelvo una matriz y simplemente sucede. En segundo lugar, quiero mostrar ejemplos de cómo funcionan estas propiedades y eventos. La propiedad aquí a la izquierda se pasa a otro componente web llamado agregar widget. Y eso significa que no muestre estos elementos. Ya tienes estos emojis. Y finalmente, cuando un usuario presiona enter, recibiré una llamada en el método on add.

Otras partes de Lit que quiero mencionar son estas cosas poderosas llamadas directivas. Repeat te permite hacer mejores listas que no hacen que se vuelva a renderizar cada vez. Until también es una buena directiva que te permite hacer cosas como mostrar spinners hasta que se resuelva una promesa. Lo cual tiene sentido para muchas cosas que se comunican con Internet o alguna base de datos. Y las directivas son una forma de escribir anulaciones poderosas del comportamiento predeterminado de Lit. Hay una nueva función llamada controladores reactivos. Que es algo similar, pero un poco diferente. Hemos hablado mucho sobre el ciclo de vida del componente web, pero en realidad, los controladores reactivos te permiten vincularte a este ciclo de vida sin ser un elemento real.

Entonces, eso es algo que puedes leer si tienes curiosidad. Lit ahora también tiene el concepto de estado versus propiedades. Anteriormente, todo estaba mezclado. Pero el estado es realmente útil si tienes algunos cambios en la database que no quieres exponer en el elemento. Lo cual aún debería causar actualizaciones de data mining.

Una cosa que encuentro realmente interesante es que lit ha sido adoptado y utilizado por muchas empresas para escribir sistemas de design. Ahora, los sistemas de design son conjuntos completos de elementos que puedes insertar en tus páginas y obtener un aspecto y una sensación determinados. Además de un montón de comportamientos nuevos increíbles. Y hay un montón de estos. Puedes ver cualquiera de estas páginas y ver una interpretación completa de un determinado sistema de design que puedes insertar en tus páginas y que está construido completamente con lit element y web components. Creemos que eso es genial. Estos pueden ser botones, deslizadores, interruptores, incluso diseños de sitios completos que puedes insertar y usar.

También hay algunos recursos aquí si tienes curiosidad por saber más sobre lit. El sitio web es increíble y puede hacer mucho más de lo que puedo mostrarte en una charla.

Por último, y quizás lo más importante, quiero hablar un poco sobre Santa Tracker y cómo utilizamos web components. Como mencioné antes, soy el responsable de Santa Tracker y lo he sido durante muchos años. Santa Tracker funciona en muchos lugares, en teléfonos, tabletas, incluso en televisores si tenemos suerte. Es una aplicación de una sola página. Utiliza Web Components. Y nuestro objetivo realmente es mostrar nuevas tecnologías, incluidos los web components, así como admitir una gran cantidad de código heredado. Los juegos no están rotos y no deberíamos desecharlos. Y siguen siendo bastante divertidos. Entonces, algunos de esos juegos más antiguos, han estado aquí por mucho tiempo y esperamos que también sigan aquí por mucho tiempo. Aquí tienes una demostración rápida. Quiero mostrar cómo funciona el sitio. No puedes ver dónde está Santa en este momento, porque no es diciembre. Si es diciembre, tal vez ve a tu otra pestaña y mira dónde está. Pero podemos hacer clic en algunos juegos aquí y jugar un poco. Tratamos de centrarnos en juegos educativos, y vemos esto en tweets y fotos que a menudo vemos durante la temporada navideña. Muchas aulas dedican mucho tiempo a jugar pequeños juegos.

Muchos de nuestros juegos tienden a ser educativos, y esto es algo en lo que realmente nos enfocamos. Los juegos son cosas como juegos de codificación de Blockly y similares, que son muy divertidos en las aulas y son muy educativos. Utilizamos alrededor de 40 componentes web. La gran mayoría heredan de LitElement, pero un pequeño número no lo hace. Descubrimos que aquellos que no lo hacen tienden a ser aquellos en los que la vinculación de datos no es importante. A menudo encontramos que es más conciso escribir elementos vanilla para hacer cosas complicadas como bibliotecas de animación de rutas o interactuar de manera extraña con partes del DOM a las que normalmente no se accede, como iframes y observadores de cambio de tamaño, y cosas por el estilo.

Pero lo que quiero destacar es que la combinación y la mezcla están destinadas, ¿verdad? Es totalmente parte de la plataforma interrumpir estos elementos de esta manera. A Lit no le importa que el elemento con el que está interactuando sea proporcionado por componentes web. A los elementos Lit no les importa que otros elementos Lit sean proporcionados por Lit. Entonces, de muchas maneras, tenemos esta gran capa de interrupción que hace que estos elementos funcionen realmente bien juntos, sin importar cómo los escribas.

Veamos algunos ejemplos de exhibición. Ya mencioné Santa Card antes. Una de las partes realmente geniales de esto en producción es que realmente podemos bloquear estas tarjetas a una fecha específica. Se suscriben a una cuenta regresiva global, que, ya sabes, cuando la fecha llega, mágicamente se descongelan y abren el juego. También tenemos esta exhibición de elementos de mi juego favorito, The Elf Maker. Entonces, esto es un montón de selectores, ¿verdad? Quieres elegir diferentes partes de tu elfo para cambiar o mostrar o cambiar el color de. Lo que es realmente interesante aquí es que el elemento de elección en la parte inferior, en realidad no trata la vinculación de datos. Por lo tanto, principalmente se ocupa de movimientos complicados del mouse y cambio de tamaño y asegurarse de que estos elementos se muestren correctamente. En este caso, tenemos una herencia de Lit. No tiene sentido para nosotros.

A continuación, quiero hablar sobre Santa Chrome. Ahora, Santa Chrome es un gran elemento que realmente reescribe toda la página. No es la aplicación de Santa. No hace todo. Pero va a controlar la barra lateral, así como el botón de silencio y la cuenta regresiva de Santa hasta cuando despegue, que obviamente es muy importante. Lo que encuentro súper interesante es que el Nav realmente no sabe que es la barra lateral. El elemento Chrome tiene un espacio para la barra lateral y cuando lo colocamos allí, lo que sea que esté en ese espacio se mostrará cuando presione ese botón. Es un interruptor. Por lo tanto, podemos probar el área de navegación o, ya sabes, construirla totalmente por separado para decidir si mostrarla en la página. Por último, quiero mencionar que también tenemos algunos elementos incómodos. Tenemos este lindo elemento que muestra a un reno adulto tratando de controlar a un pequeño reno que está volando accidentalmente. Tiene un nombre tonto. Se llama reindeer wrangler. No encaja con nada más. Así que quiero dejarte con algunas reflexiones sobre los componentes web. ¿Por qué construimos componentes web? Al final, como mencioné, puedes crear ciudadanos de primera clase.

Creemos que esto es realmente poderoso. Y tus opciones son amplias y variadas. Te he dado ejemplos de cómo crear pequeños widgets encapsulados. Cosas como mis detalles o tal vez quieras traer de vuelta la etiqueta blink o la etiqueta marquee. Puedes hacer eso con componentes web y está bien.

También puedes ir a lo grande y crear cosas como Santa Chrome o incorporar sistemas de diseño completos, lo cual creemos que es realmente poderoso. Los componentes web son la capa de interoperabilidad con otros. Pero los frameworks son una bestia interesante aquí. Otros frameworks funcionan de manera diferente.

Lit, por supuesto, solo crea componentes web. Hemos visto algunas demostraciones realmente geniales de cosas como React y Vue con solo seis o siete líneas de código, convirtiendo su código en componentes web que se pueden compartir con otros. Esto no es realmente tan común. Lo más común es: ¿puede tu framework usar componentes web? Y la respuesta suele ser sí, porque una vez más, los componentes web simplemente se ven como elementos HTML. Si tu framework puede trabajar con elementos HTML y no hay demasiadas anulaciones para algunos casos especiales, resulta que no les importa si es details o my details. Mi colega, Rob Dodson, tiene este gran artículo o este gran sitio web llamado Custom Elements Everywhere, que muestra una serie de estos casos de uso y muestra cómo los diferentes frameworks se clasifican y califican en esta escala.

Los componentes web funcionan casi en todas partes. Esto representa el 95% o más de los navegadores y está en aumento. Básicamente, esto representa todos los navegadores modernos y es aproximadamente igual al conjunto de navegadores que admiten script type=module, lo cual para mí personalmente ha sido un punto de referencia muy alto. Ni siquiera me molesto en enviar código no modular a los navegadores, o si lo hago, voy a enviar a esos usuarios a una experiencia sin o con poco JS donde, ya sabes, muchas otras funciones tampoco funcionarán. Así que creo que es realmente importante recordar esto. Esta es una característica que simplemente puedes utilizar. Los componentes web también tienen un tiempo de ejecución de cero kilobytes. Esta no es una afirmación completamente justa. Te he dado algunos ejemplos de cómo funcionan los componentes web, pero honestamente creo que usar un framework como Lit tiene sentido para la mayoría de las personas cuando están comenzando. Esto es una analogía muy similar a los service workers, que lanzamos hace un par de años y son compatibles con todos los principales navegadores de una manera similar. Puedes ser muy productivo si eres un desarrollador experimentado y escribes tu propio service worker desde cero. Pero para la gran mayoría de las personas, querrás comenzar con algo como Workbox. Y está bien. No es una concesión.

Creo que es una excelente manera de aprender y evolucionar. Y Lit se encuentra en esa misma categoría. Creo que es una excelente manera de comenzar a escribir componentes web sin profundizar demasiado en los matices de todo el código de inicio que necesitarás escribir para crear un componente efectivo por tu cuenta.

Entonces eso es todo. He terminado. Lo que quiero que saques de esta charla es que los componentes web son algo genial aquí y ahora. Quiero que vayas y construyas algunos componentes web con Lit. Son cinco kilobytes en tu página. No es una carga enorme. Y si no quieres agregarlo a tu página, incluso puedes ir a su área de pruebas y explorar y construir algunos elementos allí mismo. Es un sitio web increíble que realmente te ayuda a comenzar.

Finalmente, ve a hacer bailar a algunos elfos, si aún no lo has hecho. Santa Fe es un lugar maravilloso para pasar un buen rato y disfrutar de tu día. Gracias por escuchar. Nos vemos más tarde.