Componentes Web, Lit y Santa ūüéÖ

Rate this content
Bookmark

Comienza con los Componentes Web, que te permiten definir nuevos elementos HTML que funcionan en todas partes donde funciona el HTML regular. Esta charla se centrar√° en Lit, una suite de Google que te ayuda a crear Componentes Web con caracter√≠sticas que esperar√≠as, como la vinculaci√≥n de datos y definiciones declarativas. Tambi√©n se hablar√° de c√≥mo los hemos utilizado para construir uno de los sitios m√°s alegres de la web, el Rastreador de Santa de Google ūüéÖ

Sam Thorogood
Sam Thorogood
28 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Se presentan los Componentes Web y la biblioteca Lit, destacando su capacidad para crear elementos personalizados y replicar componentes integrados con funcionalidades diferentes. Se enfatiza el uso de HTML sem√°ntico y los beneficios de los Componentes Web en el desarrollo. Se discuten las caracter√≠sticas de Lit, como la vinculaci√≥n de datos y el renderizado. Se muestra el Rastreador de Santa como ejemplo de uso de Componentes Web en juegos educativos. Se resalta la compatibilidad de los Componentes Web con otros frameworks y su versatilidad para crear peque√Īos widgets o aplicaciones grandes.

Available in English

1. Introducción a los componentes web y la biblioteca Lit

Short description:

Hola, mi nombre es Sam y hoy estoy aquí para hablar sobre los componentes web, la biblioteca Lit y Santa Tracker. 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. Los componentes web, fundamentalmente, nos permiten escribir nuestros propios elementos. Estos son ciudadanos de primera clase que funcionan como elementos HTML regulares. Los objetivos de esta charla son introducirte a los componentes web y sus partes, y aprender sobre Lit, una biblioteca de componentes web muy opinada que Google proporciona.

y Santa Tracker. Pero primero, un poco de contexto sobre m√≠. Tengo la suerte de ser el l√≠der de Santa Tracker. Es algo que he estado haciendo durante cinco o seis a√Īos. Afortunadamente, no tengo que hacerlo todo el a√Īo, solo durante unos meses alrededor de la temporada navide√Īa. De lo contrario, me volver√≠a loco, solo para dejarlo claro. Tambi√©n trabajo en sitios de contenido como web.dev y developer.chrome.com.

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.

2. Creando un Componente Web Personalizado de Detalles

Short description:

Quiero escribir mis detalles como un componente web que se abre hacia arriba. Es un ejemplo poderoso de cómo los componentes web pueden reproducir un componente incorporado pero con una funcionalidad diferente. Al definir el HTML interno de la sombra y agregar comportamiento, podemos crear este elemento sin costo adicional de biblioteca. Es interoperable con navegadores modernos y fundamentalmente indistinguible del elemento de detalles regular. Los componentes web tienen acceso al ciclo de vida del elemento, lo que nos permite saber cuándo se crea, agrega o elimina un elemento de la página.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
It's Time to De-Fragment the Web
React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
Authoring HTML in a JavaScript World
React Summit US 2023React Summit US 2023
21 min
Authoring HTML in a JavaScript World
 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! ūü§Į In this talk, we‚Äôll take a look at what Web Components are, how to make one and include it into an application.
Let's talk about Web Components
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.