El Santo Grial de los componentes reutilizables: elementos personalizados, Shadow DOM y NPM

 

 

 

  • Smart Interface Design Patterns, 10h video + UX training
  • Register!

  • Índice
    1. Compartir y reutilizar código
    2. El problema del margen de beneficio
    3. Una solución: componentes web
  • Hacer un componente web
    1. Definición de un elemento personalizado
    2. Ciclo de vida del elemento personalizado
    3. Atributos de elementos personalizados
    4. Adjuntar marcado y estilos con Shadow DOM
    5. Publicar un componente en NPM
    6. Otras lecturas
  • Los desarrolladores realizan pruebas AB, auditorías de accesibilidad, pruebas unitarias y comprobaciones entre navegadores. Una vez que haya resuelto un problema, no querrá repetir ese esfuerzo. Al crear una biblioteca de componentes reutilizables, podemos utilizar continuamente esfuerzos anteriores y evitar revisar desafíos de diseño y desarrollo ya resueltos. En este artículo, Oliver Williams analiza cómo aumentar HTML con componentes que tienen funcionalidades y estilos integrados. También le mostrará cómo hacer que estos elementos personalizados sean reutilizables en todos los proyectos utilizando NPM.

     

    Incluso para los componentes más simples, el costo en mano de obra humana puede haber sido significativo. Los equipos de UX realizan pruebas de usabilidad. Una serie de partes interesadas deben aprobar el diseño.

    Los desarrolladores realizan pruebas AB, auditorías de accesibilidad, pruebas unitarias y comprobaciones entre navegadores. Una vez que haya resuelto un problema, no querrá repetir ese esfuerzo . Al crear una biblioteca de componentes reutilizables (en lugar de crear todo desde cero), podemos utilizar continuamente los esfuerzos anteriores y evitar revisar los desafíos de diseño y desarrollo ya resueltos.

    Vista previa grande

    Crear un arsenal de componentes es particularmente útil para empresas como Google, que poseen una cartera considerable de sitios web que comparten una marca común. Al codificar su interfaz de usuario en widgets componibles, las empresas más grandes pueden acelerar el tiempo de desarrollo y lograr coherencia en el diseño visual y de interacción del usuario en todos los proyectos. En los últimos años ha habido un aumento en el interés por las guías de estilo y las bibliotecas de patrones. Dado que hay múltiples desarrolladores y diseñadores repartidos en varios equipos, las grandes empresas buscan lograr coherencia. Podemos hacerlo mejor que simples muestras de color. Lo que necesitamos es código fácilmente distribuible .

     

    Compartir y reutilizar código

    Copiar y pegar código manualmente no supone ningún esfuerzo. Sin embargo, mantener ese código actualizado es una pesadilla de mantenimiento. Por lo tanto, muchos desarrolladores confían en un administrador de paquetes para reutilizar el código en todos los proyectos. A pesar de su nombre, Node Package Manager se ha convertido en la plataforma inigualable para la gestión de paquetes front-end . Actualmente hay más de 700.000 paquetes en el registro de NPM y cada mes se descargan miles de millones de paquetes. Cualquier carpeta con un archivo package.json se puede cargar en NPM como un paquete que se puede compartir. Si bien NPM se asocia principalmente con JavaScript, un paquete puede incluir CSS y marcado. NPM facilita la reutilización y, lo que es más importante, la actualización del código. En lugar de tener que modificar el código en innumerables lugares, cambia el código solo en el paquete.

    El problema del margen de beneficio

    Sass y Javascript son fácilmente portátiles mediante el uso de declaraciones de importación. Los lenguajes de plantillas le dan a HTML la misma capacidad: las plantillas pueden importar otros fragmentos de HTML en forma de parciales. Puede escribir el marcado para su pie de página, por ejemplo, solo una vez y luego incluirlo en otras plantillas. Decir que existe una multiplicidad de lenguajes de plantillas sería quedarse corto. Atarse a uno solo limita gravemente la posible reutilización de su código. La alternativa es copiar y pegar marcas y usar NPM solo para estilos y javascript.

    Este es el enfoque adoptado por el Financial Times con su biblioteca de componentes Origami . En su charla “ ¿No puedes simplemente hacerlo más como Bootstrap? Alice Bartlett concluyó que "no existe una buena manera de permitir que la gente incluya plantillas en sus proyectos". Hablando sobre su experiencia en el mantenimiento de una biblioteca de componentes en Lonely Planet, Ian Feather reiteró los problemas con este enfoque:

    “Una vez que copian ese código, básicamente están cortando una versión que debe mantenerse indefinidamente. Cuando copiaron el marcado de un componente en funcionamiento, tenía un enlace implícito a una instantánea del CSS en ese punto. Si luego actualiza la plantilla o refactoriza el CSS, deberá actualizar todas las versiones de la plantilla repartidas por su sitio”.

    Una solución: componentes web

    Los componentes web resuelven este problema definiendo el marcado en JavaScript. El autor de un componente es libre de modificar el marcado, CSS y Javascript. El consumidor del componente puede beneficiarse de estas actualizaciones sin necesidad de rastrear manualmente un proyecto alterando el código. La sincronización con los últimos cambios en todo el proyecto se puede lograr con un npm updateterminal vía conciso. Sólo el nombre del componente y su API deben ser coherentes.

     

    Instalar un componente web es tan simple como escribir npm install component-nameen una terminal. El Javascript se puede incluir con una declaración de importación:

    script type="module"import './node_modules/component-name/index.js';/script

    Luego puede usar el componente en cualquier parte de su marcado. A continuación se muestra un componente de ejemplo simple que copia texto al portapapeles.

    Vea la demostración del componente web Pen Simple de CSS GRID ( @cssgrid ) en CodePen .

    Un enfoque centrado en componentes para el desarrollo front-end se ha vuelto omnipresente, introducido por el marco React de Facebook. Inevitablemente, dada la omnipresencia de los marcos en los flujos de trabajo front-end modernos, varias empresas han creado bibliotecas de componentes utilizando el marco de su elección. Esos componentes son reutilizables sólo dentro de ese marco particular.

    Un componente del Carbon Design System de IBM. Para uso exclusivo en aplicaciones React. Otros ejemplos importantes de bibliotecas de componentes creadas en React incluyen Atlaskit de Atlassian y Polaris de Shopify. ( Vista previa grande )

    Es raro que una empresa importante tenga una interfaz uniforme y no es infrecuente cambiar la plataforma de un marco a otro. Los marcos van y vienen. Para permitir la máxima cantidad de reutilización potencial en todos los proyectos, necesitamos componentes que sean independientes del marco .

    La búsqueda de componentes a través de npmjs.com revela un ecosistema de Javascript fragmentado. ( Vista previa grande )
    La popularidad siempre cambiante de los marcos a lo largo del tiempo. ( Vista previa grande )

    “He creado aplicaciones web usando: Dojo, Mootools, Prototype, jQuery, Backbone, Thorax y React a lo largo de los años... Me encantaría haber podido llevar ese excelente componente Dojo que trabajé como esclavo a mi React. aplicación de hoy”.

    — Dion Almaer , Director de Ingeniería, Google

    Cuando hablamos de un componente web, hablamos de la combinación de un elemento personalizado con Shadow DOM. Los elementos personalizados y el DOM oculto son parte tanto de la especificación DOM W3C como del estándar DOM WHATWG, lo que significa que los componentes web son un estándar web . Los elementos personalizados y el DOM oculto finalmente están configurados para lograr soporte en todos los navegadores este año. Al utilizar una parte estándar de la plataforma web nativa, garantizamos que nuestros componentes puedan sobrevivir al rápido ciclo de reestructuración del front-end y replanteamientos arquitectónicos. Los componentes web se pueden utilizar con cualquier lenguaje de plantillas y cualquier marco de interfaz de usuario: son verdaderamente compatibles e interoperables. Se pueden utilizar en cualquier lugar, desde un blog de WordPress hasta una aplicación de una sola página.

     

    El proyecto Custom Elements Everywhere de Rob Dodson documenta la interoperabilidad de componentes web con varios marcos Javascript del lado del cliente. Se espera que React, el caso atípico aquí, resuelva estos problemas con React 17. ( Vista previa grande )
    Fanfics de Harry Potter en Español

    Hacer un componente web

    Definición de un elemento personalizado

    Siempre ha sido posible inventar nombres de etiquetas y hacer que su contenido aparezca en la página.

    made-up-tagHello World!/made-up-tag

    HTML está diseñado para ser tolerante a fallos. Lo anterior se mostrará, aunque no sea un elemento HTML válido. Nunca ha habido una buena razón para hacer esto: desviarse de las etiquetas estandarizadas ha sido tradicionalmente una mala práctica. Sin embargo, al definir una nueva etiqueta utilizando la API de elemento personalizado, podemos aumentar HTML con elementos reutilizables que tengan funcionalidad incorporada. Crear un elemento personalizado es muy parecido a crear un componente en React, pero aquí lo ampliamos HTMLElement.

    class ExpandableBox extends HTMLElement { constructor() { super() } }

    Una llamada a sin parámetros super()debe ser la primera declaración en el constructor. El constructor debe usarse para configurar el estado inicial y los valores predeterminados y para configurar cualquier detector de eventos. Es necesario definir un nuevo elemento personalizado con un nombre para su etiqueta HTML y la clase correspondiente del elemento:

    customElements.define('expandable-box', ExpandableBox)

    Es una convención poner en mayúscula los nombres de clases. Sin embargo, la sintaxis de la etiqueta HTML es más que una convención. ¿Qué pasaría si los navegadores quisieran implementar un nuevo elemento HTML y quisieran llamarlo cuadro expandible? Para evitar colisiones de nombres, ninguna etiqueta HTML estandarizada nueva incluirá un guión. Por el contrario, los nombres de los elementos personalizados deben incluir un guión.

    customElements.define('whatever', Whatever) // invalidcustomElements.define('what-ever', Whatever) // valid

    Ciclo de vida del elemento personalizado

    La API ofrece cuatro reacciones de elementos personalizados : funciones que se pueden definir dentro de la clase y que se llamarán automáticamente en respuesta a ciertos eventos en el ciclo de vida de un elemento personalizado.

    connectCallback se ejecuta cuando el elemento personalizado se agrega al DOM.

    connectedCallback() { console.log("custom element is on the page!")}

    Esto incluye agregar un elemento con Javascript:

    document.body.appendChild(document.createElement("expandable-box")) //“custom element is on the page”

    además de simplemente incluir el elemento dentro de la página con una etiqueta HTML:

    expandable-box/expandable-box // "custom element is on the page"

    Cualquier trabajo que implique buscar recursos o renderizar debe estar aquí.

    desconectadoCallback se ejecuta cuando el elemento personalizado se elimina del DOM.

     

    disconnectedCallback() { console.log("element has been removed")}document.querySelector("expandable-box").remove() //"element has been removed"

    adoptedCallbackse ejecuta cuando el elemento personalizado se adopta en un nuevo documento. Probablemente no necesites preocuparte por esto con demasiada frecuencia.

    attributeChangedCallbackse ejecuta cuando se agrega, cambia o elimina un atributo. Se puede utilizar para escuchar cambios en atributos nativos estandarizados como disabled o src , así como en cualquier atributo personalizado que creemos. Este es uno de los aspectos más poderosos de los elementos personalizados, ya que permite la creación de una API fácil de usar.

    Atributos de elementos personalizados

    Hay muchos atributos HTML. Para que el navegador no pierda el tiempo llamando a nuestro attributeChangedCallbackcuando se cambia algún atributo, debemos proporcionar una lista de los cambios de atributos que queremos escuchar. Para este ejemplo, sólo nos interesa uno.

    static get observedAttributes() { return ['expanded'] }

    Así que ahora solo se llamará a nuestro attributeChangedCallbackcuando cambiemos el valor del atributo expandido en el elemento personalizado, ya que es el único atributo que hemos enumerado.

    Los atributos HTML pueden tener valores correspondientes (piense en href, src, alt, value, etc.) mientras que otros son verdaderos o falsos (por ejemplo , deshabilitados, seleccionados, requeridos ). Para un atributo con un valor correspondiente, incluiríamos lo siguiente dentro de la definición de clase del elemento personalizado.

    get yourCustomAttributeName() { return this.getAttribute('yourCustomAttributeName');}set yourCustomAttributeName(newValue) { this.setAttribute('yourCustomAttributeName', newValue);}

    Para nuestro elemento de ejemplo, el atributo será verdadero o falso, por lo que definir el captador y el definidor es un poco diferente.

    get expanded() { return this.hasAttribute('expanded')}// the second argument for setAttribute is mandatory, so we’ll use an empty stringset expanded(val) { if (val) { this.setAttribute('expanded', ''); } else { this.removeAttribute('expanded') }}

    Ahora que hemos solucionado el texto estándar, podemos utilizarlo attributeChangedCallback.

    attributeChangedCallback(name, oldval, newval) { console.log(`the ${name} attribute has changed from ${oldval} to ${newval}!!`); // do something every time the attribute changes}

    Tradicionalmente, configurar un componente Javascript habría implicado pasar argumentos a una initfunción. Al utilizar attributeChangedCallback, es posible crear un elemento personalizado que se pueda configurar solo con marcado.

    Shadow DOM y los elementos personalizados se pueden usar por separado, y es posible que los elementos personalizados le resulten útiles por sí solos. A diferencia de los DOM de sombra, se pueden rellenar con múltiples capas. Sin embargo, las dos especificaciones funcionan bien en conjunto.

    Adjuntar marcado y estilos con Shadow DOM

    Hasta ahora, hemos manejado el comportamiento de un elemento personalizado. Sin embargo, en lo que respecta al marcado y los estilos, nuestro elemento personalizado equivale a un ` ` vacío y sin estilo. Para encapsular HTML y CSS como parte del componente, necesitamos adjuntar un DOM oculto. Es mejor hacer esto dentro de la función constructora.

     

    class FancyComponent extends HTMLElement { constructor() { super() var shadowRoot = this.attachShadow({mode: 'open'}) shadowRoot.innerHTML = `h2hello world!/h2` }

    No se preocupe por comprender lo que significa el modo: debe incluirlo como modelo, pero casi siempre lo querrá open. Este sencillo componente de ejemplo simplemente representará el texto "hola mundo". Como la mayoría de los demás elementos HTML, un elemento personalizado puede tener elementos secundarios, pero no de forma predeterminada. Hasta ahora, el elemento personalizado anterior que hemos definido no mostrará ningún elemento secundario en la pantalla. Para mostrar cualquier contenido entre las etiquetas, necesitamos hacer uso de un slotelemento.

    shadowRoot.innerHTML = `h2hello world!/h2slot/slot`

    Podemos usar una etiqueta de estilo para aplicar algo de CSS al componente.

    shadowRoot.innerHTML = `stylep {color: red;}/styleh2hello world!/h2slotsome default content/slot`

    Estos estilos solo se aplicarán al componente, por lo que somos libres de utilizar selectores de elementos sin que los estilos afecten a nada más de la página. Esto simplifica la escritura de CSS, haciendo innecesarias las convenciones de nomenclatura como BEM.

    Publicar un componente en NPM

    Los paquetes NPM se publican mediante la línea de comando. Abra una ventana de terminal y vaya a un directorio que le gustaría convertir en un paquete reutilizable. Luego escriba los siguientes comandos en la terminal:

    1. Si su proyecto aún no tiene un package.json , npm initlo guiaremos para generar uno.
    2. npm adduservincula su máquina a su cuenta NPM. Si no tiene una cuenta preexistente, creará una nueva para usted.
    3. npm publish

    Vista previa grande

    Si todo ha ido bien, ahora tiene un componente en el registro de NPM, listo para instalarlo y utilizarlo en sus propios proyectos, y compartirlo con el mundo.

    Vista previa grande

    La API de componentes web no es perfecta. Actualmente, los elementos personalizados no pueden incluir datos en los envíos de formularios . La historia de la mejora progresiva no es muy buena. Lidiar con la accesibilidad no es tan fácil como debería ser .

    Aunque se anunció originalmente en 2011, la compatibilidad con el navegador aún no es universal. El soporte de Firefox llegará a finales de este año. Sin embargo, algunos sitios web de alto perfil (como Youtube) ya los están utilizando. A pesar de sus deficiencias actuales, para los componentes que se pueden compartir universalmente son la opción única y en el futuro podemos esperar interesantes adiciones a lo que tienen para ofrecer.

    Otras lecturas

    • Un kit de herramientas para la promoción de la accesibilidad para diseñadores web
    • Recreando el efecto de brillo en modo ambiente de YouTube
    • Cómo dibujar gráficos de radar en la web
    • El final de mi viaje Gatsby

    (il, ra, yk, mrn)Explora más en

    • Accesibilidad
    • HTML
    • CSS
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    El Santo Grial de los componentes reutilizables: elementos personalizados, Shadow DOM y NPM

    El Santo Grial de los componentes reutilizables: elementos personalizados, Shadow DOM y NPM

    Smart Interface Design Patterns, 10h video + UX training Register! Índice Compartir y reutilizar código

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-santo-grial-de-los-componentes-reutilizables-elementos-personalizados-942-0.jpg

    2024-05-20

     

    El Santo Grial de los componentes reutilizables: elementos personalizados, Shadow DOM y NPM
    El Santo Grial de los componentes reutilizables: elementos personalizados, Shadow DOM y NPM

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20