¡Los componentes web son increíbles!

Rate this content
Bookmark

¿Alguna vez te has preguntado cómo al colocar "video" o "audio" en tu HTML obtienes un reproductor multimedia con controles incluidos? ¿O cómo, dependiendo del atributo de tipo, "input" puede ser un botón, un lugar para ingresar texto, seleccionar una fecha o archivo, selector de color y más? ¿Qué tal si pudieras crear tu propio elemento? La respuesta: ¡Componentes web! 🤯 En esta charla, veremos qué son los componentes web, cómo crear uno e incluirlo en una aplicación.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Los componentes web son elementos personalizados y reutilizables que puedes crear para usar en aplicaciones web. Permiten encapsular funcionalidades específicas en etiquetas HTML, similar a como funcionan las etiquetas como video o audio en HTML.

Sí, todos los navegadores modernos tienen soporte para los componentes web, lo que facilita su integración y uso en diversos proyectos web.

Muchas empresas utilizan componentes web en sus desarrollos. Por ejemplo, plataformas como YouTube y GitHub implementan estos componentes para mejorar la interactividad y la eficiencia de sus sitios web.

Puedes crear un componente web utilizando HTML, JavaScript y CSS. Herramientas como WebComponents.dev te ofrecen plantillas y un entorno de desarrollo para empezar rápidamente con componentes web.

Sí, existen varios recursos como WebComponents.org y Open Web Components que ofrecen pautas, recomendaciones y mejores prácticas, además de herramientas de línea de comandos para estructurar proyectos de componentes web.

WebComponents.dev es una plataforma que proporciona herramientas y plantillas para desarrollar y probar componentes web sin la necesidad de instalar software adicional, ayudando a los desarrolladores a crear componentes web de manera más eficiente.

Sí, los componentes web son compatibles con varios frameworks y bibliotecas modernas. Incluso hay sitios como custom-elements-everywhere.com que muestran cómo los componentes web pueden integrarse con diferentes frameworks.

Dwane Hemmings
Dwane Hemmings
10 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Los componentes web te permiten crear tus propios elementos HTML que pueden hacer cualquier cosa que desees, y son compatibles con todos los navegadores modernos. Muchas empresas, incluyendo YouTube y GitHub, utilizan componentes web para mejorar sus sitios web. Existen herramientas y bibliotecas extensas disponibles para el desarrollo de componentes web. El componente web Model Viewer permite mostrar modelos 3D en realidad virtual y aumentada sin necesidad de conocer las tecnologías subyacentes. Los componentes web se pueden utilizar con varios frameworks y bibliotecas, y existen recursos disponibles para ayudar con la compatibilidad.
Available in English: Web Components are awesome!

1. Introducción a los Componentes Web

Short description:

Hola, soy Dwayne, un defensor del desarrollo de JavaScript en Vonage, y estoy aquí para argumentar a favor de los componentes web. Los componentes web te permiten crear tus propios elementos HTML que pueden hacer cualquier cosa que desees. Son compatibles con todos los navegadores modernos y muchas empresas ya los están utilizando. Por ejemplo, YouTube y GitHub utilizan componentes web para mejorar sus sitios web. Personalmente, utilizo componentes web para ahorrar tiempo al crear sitios web y para agregar funcionalidades como mostrar datos y crear temporizadores de cuenta regresiva. La herramienta para desarrollar componentes web es amplia, con muchas bibliotecas y frameworks disponibles.

me han dado 10 minutos para argumentar por qué creo que los componentes web son increíbles.

Entonces, ¿qué son los componentes web? ¿Alguna vez has utilizado las etiquetas video, audio y/o details de HTML? ¿Alguna vez te has preguntado cómo, simplemente colocando la etiqueta con algunos atributos y propiedades, obtienes interfaces de reproductores multimedia completamente funcionales con controles de volumen, botones de reproducción y pausa, y más? ¿O un menú desplegable que funciona de inmediato? Ahora, imagina crear tu propio elemento HTML que haga lo que quieras.

¿Cómo es el soporte de los navegadores? Todos los navegadores modernos tienen soporte para los componentes web. Puede que estés pensando, suena genial y todo, pero ¿los componentes web ya son una realidad? Afortunadamente, es un sitio web. Y la respuesta es sí, eso es todo. Solo bromeo. Este sitio enumera algunas empresas que utilizan componentes web. Y como ejercicio para todos los que están viendo, a medida que hago scroll, si hay una empresa o un logotipo que reconozcas, di Ding. Aquí vamos. Es una lista larga. ¿Has visto algo ya? La lista sigue y sigue. Hay bastantes. Y esto es solo una parte de ellas. ¿Cuántas veces has dicho Ding hasta ahora? Sigue y sigue. Ahí vamos.

Ahora, aquí tienes un par de ejemplos específicos. Si ves el código fuente de YouTube, verás muchas etiquetas HTML que comienzan con YTD. YTD no es un prefijo normal para un elemento HTML, así que eso es una buena pista de que es un componente web. Ahora, cuando haces cosas como crear un repositorio, hacer push de cambios y/o fusionar PR en GitHub, puedes ver cuánto tiempo ha pasado desde tu última actividad. Esos son componentes web, y GitHub los ofrece para que todos los utilicen en sus propios proyectos. Ahora, me gusta hacer sitios web, muchos sitios web. Para cada uno, me gusta tener una página de `Acerca de` que explique quién, qué y por qué hice el sitio. Ahora, crear la página una y otra vez se convirtió en una tarea tediosa, así que creé un componente web llamado dwayne-made. Puedo obtener los datos sobre el sitio desde un punto final en el proyecto y pasarlo al componente web, y dwayne-made sabe cómo mostrar esos datos. Me ahorra mucho tiempo para centrarme en la aplicación en sí. Otra característica increíble es que un componente web puede tener múltiples usos. Por ejemplo, ¿no es genial cómo el humilde elemento HTML de entrada puede hacer tantas cosas diferentes con solo cambiar el atributo de tipo? Siguiendo esa línea, creé dwayne-timer porque estaba lidiando con muchas fechas y horas en proyectos personales y no quería lidiar con eso una y otra vez. No solo puede mostrar una fecha y hora local para el visitante del sitio, sino que también puede ser un temporizador de cuenta regresiva solo con agregar una propiedad al componente web. Ahora, las herramientas para desarrollar componentes web son bastante increíbles. Hay muchas bibliotecas y frameworks para crear componentes web.

2. Desarrollo de Componentes Web y Recursos

Short description:

¿Quieres usar TypeScript o JSX? Echa un vistazo a WebComponents.dev para obtener plantillas que te ayuden a comenzar con el desarrollo de Componentes Web. Open Web Components proporciona pautas y mejores prácticas para un desarrollo consistente. Explora WebComponents.org para encontrar soluciones existentes y añadir las tuyas propias. Crea fácilmente aplicaciones WebXR sin necesidad de tener un amplio conocimiento de tecnologías subyacentes como 3JS y Unity.

¿Quieres usar TypeScript? Hay varias bibliotecas que puedes utilizar. ¿Estás más familiarizado con JSX? No hay problema. Un buen recurso para probar estas herramientas sin tener que descargarlas es WebComponents.dev. Ahora, WebComponents.dev puede hacer muchas cosas, pero también puede proporcionarte plantillas para que puedas comenzar rápidamente con un Componente Web y ver si te gusta en cuanto a la codificación.

En este momento, hay 64 plantillas que puedes utilizar. Si estás en un equipo y quieres asegurarte de tener consistencia en todos los Componentes Web que construyas, existe Open Web Components, que proporciona pautas, recomendaciones y mejores prácticas al crear Componentes Web. También tienen una herramienta de línea de comandos (CLI) que generará la estructura de archivos y carpetas de un proyecto para que todos los Componentes Web tengan la misma estructura, lo que facilita que cada miembro del equipo se ponga al día con un componente que nunca antes haya visto, sabiendo dónde buscar.

El hecho de que haya tantas personas trabajando en Componentes Web significa que probablemente ya haya algo construido que sea similar a lo que estás buscando. No es necesario empezar desde cero, lo cual es genial. WebComponents.org es un buen lugar para comenzar a ver qué hay disponible e incluso añadir tus propios componentes a la lista. Soy un gran fan de WebXR, la Realidad Aumentada y Virtual en la Web, y siempre he querido crear una aplicación, pero no tenía suficiente experiencia para crear algo desde cero sin estudiar una larga lista de diferentes tecnologías como 3JS, software de modelado 3D como Unity y mucho más.

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

Lo Bueno, Lo Malo, y Los Componentes Web
JSNation 2023JSNation 2023
29 min
Lo Bueno, Lo Malo, y Los Componentes Web
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
Es hora de desfragmentar la web
React Day Berlin 2022React Day Berlin 2022
34 min
Es hora de desfragmentar la web
Top Content
Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.
Componentes Web, Lit y Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Componentes Web, Lit y Santa 🎅
Web Components and the Lit library are introduced, highlighting their ability to create custom elements and replicate built-in components with different functionality. The use of semantic HTML and the benefits of web components in development are emphasized. The features of Lit, such as data binding and rendering, are discussed. The Santa Tracker is showcased as an example of web components being used in educational games. The compatibility of web components with other frameworks and their versatility in creating small widgets or large applications are highlighted.
Autoría de HTML en un Mundo JavaScript
React Summit US 2023React Summit US 2023
21 min
Autoría de HTML en un Mundo JavaScript
This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.
Aplicaciones Web Inmutables
JSNation 2022JSNation 2022
20 min
Aplicaciones Web Inmutables
Today's Talk discusses immutable web apps and their benefits, such as faster loading times and easy version tracking. The use of Universal Module Definition (UMD) style bundling allows for flexible dependency management and gradual upgrades. Tools like Webpack and Rollup provide ways to reference UMDs in bundles and automate dependency configuration. Arborist and YAML files help resolve dependency trees and handle conflicts, while the Orchard CLI tool automates dependency ordering. Internal and external dependencies can be initialized and managed effectively for optimal performance.
Hablemos de los Componentes Web
React Advanced 2021React Advanced 2021
32 min
Hablemos de los Componentes Web
Web Components are a suite of technologies that allow you to create reusable HTML elements, combining the fun of React with regular HTML. Custom elements and the shadow DOM are key features of Web Components, allowing you to define new elements, encapsulate functionality and styles, and interact with a separate DOM. HTML templates serve as placeholders for content to be rendered later in custom components. Custom elements and HTML templates are cross-framework compatible and can be used in React, Angular, Vue, or any other framework.

Workshops on related topic

Despliega una aplicación de componentes web y configura un flujo de integración continua
DevOps.js Conf 2022DevOps.js Conf 2022
111 min
Despliega una aplicación de componentes web y configura un flujo de integración continua
Workshop
Philippe Ozil
Philippe Ozil
Únete a nosotros en un masterclass en el que desplegarás una aplicación Node.js simple construida con componentes web y configurarás un flujo de integración continua (CI). Aprenderás sobre el poder del Lightning Web Runtime (LWR) y las GitHub Actions.
Componentes Web en Acción
JSNation Live 2021JSNation Live 2021
184 min
Componentes Web en Acción
Workshop
Joren Broekema
Alex Korzhikov
2 authors
El masterclass amplía el conocimiento del lenguaje de programación JavaScript, revisa los patrones generales de diseño de software. Se centra en los estándares y tecnologías de los Componentes Web, como Lit-HTML y Lit-Element. También practicamos la escritura de Componentes Web tanto con JavaScript nativo como con Lit-Element. Al final, revisamos las herramientas clave para desarrollar una aplicación: open-wc.