Componentes Web: cómo crear una librería que funcione

Photo by Ian Schneider

Técnicamente, una librería de componentes web (o librería de patrones web) es una simple colección de componentes de interfaz de usuario.

Para que los desarrolladores puedan realizar el mejor trabajo del mundo, una librería de patrones también debe presentar otra información importante. Echemos un vistazo a la información que se puede mostrar junto a cada componente.

Título del componente

El nombre del componente debe destacar y ser fácil de entender por todos los que visitan la biblioteca de componentes.

Dar nombre a las cosas resulta complicado, pero los grupos de trabajo deben esforzarse por acordar nombres que tengan sentido para todos y no solamente para los desarrolladores. Llevar a cabo un ejercicio de recuento de componentes de interfaz es una gran manera de discutir y acordar los nombres de patrones de interfaz.

Título y descripción de un componente web

En la biblioteca de componentes de Apple destaca el título y la descripción de cada patrón.

Descripción del componente

Es oportuno proporcionar una definición resumida para ayudar al equipo a entender cuál es el patrón y qué hace.

Algunos componentes web pueden ser fáciles de entender (“tabla de datos”), mientras que otros pueden necesitar más ayuda (“jumbotron”).

Ejemplo real

Una característica clave de cualquier biblioteca de patrones es mostrar un ejemplo en vivo y en directo de un patrón.

Mostrar como un patrón vive, como se comporta, como se transforma, su interacción, su movimiento, su ergonomía, su renderizado de texto, su color real y su rendimiento, es un valor para los equipos de desarrollo. Una imagen estática nunca podrá aportar la misma información.

Ejemplo real de un componente web

La biblioteca de componentes de Audi muestra un ejemplo real de cada componente.

Información de contexto

Si bien mostrar un ejemplo real de un patrón de interfaz de usuario es una parte necesaria de cualquier biblioteca de patrones, también es importante mostrar cómo y dónde se utiliza ese patrón.

Al respecto Material Design hace un excelente trabajo ubicando un componente en un contexto de aplicaciones reales.

Contexto de un componente web

Material Design muestra el contexto de sus componentes utilizando imágenes y vídeos.

Las capturas de pantalla y los vídeos son un buen recurso para mostrar un patrón en contexto. Aunque estos medios son muy eficaces par comunicar, pueden implicar un gran esfuerzo manual para producirlos. Pattern Lab es una gran ayuda para eso porque nos muestra exactamente qué patrones forman los componentes que necesitamos, así como dónde se usa ese patrón.

Dónde se utiliza y cómo

¿Cuándo debería utilizar un componente de tipo toggle en lugar de un grupo de radio buttons? ¿Debería usar pestañas o un acordeón? Mostrar cómo se usa, lo que no se debe hacer, las reglas y las consideraciones oportunas para cada patrón puede ayudar al equipo de desarrollo a buscar el componente adecuado para una correcta ejecución y eliminar todas las hipótesis que pueden surgir durante la implementación.

Código de ejemplo

Casi todas las librerías de patrones muestran el código apropiado de un patrón junto con la muestra real. ¿Pero cuál es el código relevante a mostrar?

Depende del tipo de sistema de diseño que estás manteniendo. Para los sistemas de diseño integrado como Rizzo, el único código que se muestra es el código necesario para introducir un patrón en la aplicación.

Para los sistemas menos integrados, es posible que se proporcione la posibilidad de copiar y pegar el marcado HTML y/o CSS y/o JavaScript. Algunos ejemplos de código:

  • HTML: muestra la sintaxis del marcado HTML y su estructura.
  • Plantilla: muestra el marcado HTML así como los aspectos dinámicos del patrón.
  • CSS: los estilos correspondientes de un patrón en concreto.
  • JavaScript: código para controlar un determinado patrón.
  • Código de implementación: muestra cómo integrar un determinado patrón en un sistema de backend.
Código de un componente web

MS Office en su sistema de diseño proporciona el código, sus variantes, estados y métodos.

Recursos externos e internos

Un buen sistema de diseño debería incorporar las mejores prácticas de la industria del web.

La respuesta a “¿Por qué éste componente es así?” no debería ser “porque yo lo dije”.

Existen cantidades de artículos, excelentes por ciertos, que argumentan de manera muy detallada sobre formularios, tablas, cards, pestañas, etc. Blogs de recursos como Smashing Magazine, A List Apart, CSS Tricks y muchos más, pueden aumentar el nivel de conocimento de los equipos que hacen uso de un sistema de diseño y ayudarles a convertirse en mejores profesionales.

Además de los recursos externos, es buena idea mantener un conjunto de principios de diseño que gobiernan tu sistema de diseño. Cuando sea apropiado, vincularse a estos recursos internos ayuda a relacionar los conceptos abstractos con los conceptos del mundo real.

Personas involucradas

Algunas librerías de patrones indican los nombres y la información de contacto de personas relevantes con la cual mantener una conversación productiva entre los diseñadores de sistemas de diseño y los desarrolladores.

Encontramos las respuestas a:

  • ¿Quién creó este componente?
  • ¿Con quién tengo que contactar si tengo preguntas o quiero proponer cambios a un componente?
  • ¿Quién más puede opinar sobre cómo debe ser o comportarse este componente?

Metadatos de utilidad

Los componentes también pueden aportar otro tipo de metadatos que en ocasiones resultan útiles:

  • Estado del componente: en curso, en revisión, aprobado, no aprobado, etc.
  • Versión: por ejemplo Botón v1.3
  • Registro de cambios: cuándo fue la última actualización del componente con un enlace a su historia.
  • Información de compatibilidad: cuáles son las dependencias necesarias para utilizar este componente.

Conclusión

Con esta información ya puedes configurar un sistema de diseño de éxito y dominar la anatomía de un componente en una biblioteca de componentes de interfaz de usuario.

Comprendo que es una misión laboriosa pero tu equipo de trabajo te lo agradecerá porque ganaréis en robustez, en facilidad de mantenimiento y en la posibilidad de reciclar los patrones que necesiteis.

Decide: o usar frameworks o crear tu propio sistema de diseño.

Éste post ha sido creado sobre la base de Anatomy of a pattern in a pattern library

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *