Impresionante independiente (componentes web)

En su última charla An Event Apart, Dave destacó que recién ahora los componentes web se están convirtiendo en una opción práctica para el desarrollo web de producción. Por ejemplo, solo ha pasado aproximadamente un año desde que Edge pasó a ser Chromium. Antes de eso, Edge no admitía ningún componente web. Si los enviabas hace mucho tiempo, lo hacías con polyfills bastante grandes, o en un estilo de mejora progresiva, donde si fallaban, lo hacían con gracia o en un entorno controlado, digamos, una intranet donde todos tienen la misma computadora. (o en algo como Electron ).

En mi opinión, los componentes web todavía tienen mucho camino por recorrer para resultar atractivos para la mayoría de los desarrolladores, pero lo están logrando. Una cosa que creo que impulsará su adopción es la DX increíblemente sencilla de los componentes prediseñados gracias, en parte, a los módulos ES y lo fácil que es importJavaScript.

Ya mencioné esto antes: mira lo tonto y fácil que es usar el selector de emojis de Nolan Lawson:

Esa es una línea de JavaScript y una línea de HTML para que funcione, y otra línea de JavaScript para conectarlo y devolver una respuesta JSON de una selección.

Convincente, por cierto. DX , podrías llamarlo.

Los componentes web como ese no están solos, de ahí el título de esta publicación. Dave preparó una lista de Awesome Standalones . Es decir, componentes web que no forman parte de ningún sistema ¹ más grande y complejo , sino que son simplemente pequeños complementos que son útiles por sí solos, como el selector de emoji. El repositorio de Dave enumera alrededor de 20 de ellos.

Tome este de GitHub (la empresa), un componente web que se copia al portapapeles :

Bastante bueno para algo que cruza el cable a ~ 3 KB. La historia de producción es lo que quieras que sea. Úselo fuera del CDN. Abrígalo con tus cosas. Déjelo como único bajo demanda. Lo que sea. Es muy fácil de usar. En el caso de este sistema independiente, ni siquiera hay ningún Shadow DOM con el que lidiar.

Sin sombra en Shadow DOM, esa es quizás la característica más útil de los componentes web (y no puede ser replicada por una biblioteca ya que es una característica nativa del navegador), pero las opciones para diseñarlo no son mis favoritas . Y si usó tres componentes independientes diferentes con tres opiniones diferentes sobre cómo diseñar el Shadow DOM, eso se volverá molesto.

Lo que me imagino es a los desarrolladores sumergiéndose en cosas como esta, viendo los beneficios y usándolos cada vez más en lo que están construyendo, e incluso construyendo los suyos propios. Construir un sistema de diseño a partir de componentes web me parece un punto ideal, como ya lo hacen muchos nombres ^importantes .

El sueño es que la gente realmente consolide patrones de interfaz de usuario comunes. Por ejemplo, incluso si nunca obtenemos “pestañas” HTML nativas, es posible que un componente web pueda proporcionarlas, obtener la UI, la UX y la accesibilidad perfectas, pero dejarlas con estilo de modo que literalmente cualquier sitio web pueda usarlas. Pero primero, eso tiene que existir.

---

1. Esa también es una forma genial de usar componentes web, pero lo fácil llama la atención y eso es importante. ⮑
2. La gente siempre menciona Lightning Design System como un sistema de diseño basado en componentes web, pero yo no lo veo. Por ejemplo, este acordeón parece HTML semántico con nombres de clases, no componentes web. ¿Qué me estoy perdiendo? ⮑