El desarrollo basado en componentes es una excelente estrategia para acelerar el desarrollo de frontends e interfaces de usuario.
En aplicaciones pequeñas, las listas de componentes en uso se pueden administrar fácilmente: no necesita una herramienta específica para mantener esas listas más que su propia memoria. El uso de componentes permite la reutilización y simplifica la construcción, prueba y modularización de aplicaciones.
Pero cuando las aplicaciones y los equipos de desarrollo crecen en número y complejidad, el número y la complejidad de los componentes también aumentan, hasta el punto en que necesita algún tipo de ayuda para realizar un seguimiento de los componentes y mantener la coherencia en sus interfaces de usuario.
Para adoptar el desarrollo impulsado por componentes para proyectos medianos a grandes, necesita una herramienta capaz de administrar bibliotecas de componentes, documentarlas, mostrarlas y permitir su desarrollo independientemente de las aplicaciones que las utilicen.
Afortunadamente, esta necesidad de catalogación y gestión de componentes se resuelve con una nueva clase de herramientas que apuntan directamente a acelerar el desarrollo y la documentación de interfaces de usuario y frontends.
Estas herramientas ofrecen soporte para diferentes bibliotecas, diferentes dialectos de JavaScript y diversos Marcos de JavaScript para el desarrollo de UI, como Angular, Reaccionary Vue.
Además, algunas de las herramientas de administración de componentes también cumplen la función de generar guías de estilo de front-end.
¿Qué son las guías de estilo en el ámbito del desarrollo front-end?
Son colecciones en vivo de todos los elementos de la interfaz de usuario de una aplicación en desarrollo. Estas guías no solo presentan listas de componentes, sino que también incluyen ejemplos funcionales comprobables.
También ofrecen fragmentos de código de cada componente, que los desarrolladores pueden copiar y pegar en su propio código. Normalmente, las guías de estilo incluyen componentes comunes de la interfaz de usuario, como botones, iconos, menús de navegación, elementos de entrada de formulario y superposiciones modales.
A continuación, puede encontrar revisiones de las herramientas que están emergiendo como líderes en el segmento de herramientas de documentación y desarrollo de componentes de IU.
Storybook
Libro de cuentos es una herramienta popular para desarrollar componentes front-end y de interfaz de usuario que le permite trabajar sin preocuparse por las dependencias específicas de la aplicación. Ofrece un espacio aislado para crear la interfaz de usuario de forma aislada, fuera de la aplicación en desarrollo.
Esto permite el desarrollo de estados difíciles de alcanzar y casos extremos, lo que da como resultado mejoras significativas en la reutilización, capacidad de prueba y velocidad de desarrollo de los componentes.
También facilita la interacción con los diseñadores de UX, simplificando la tarea de ver los componentes existentes e identificar los que deben crearse.
Storybook admite una variedad de marcos de JavaScript, incluidos React, Angular, Vue, Svelte, Web Components y más de una docena de otros. Los casos de uso creados en Storybook se pueden guardar como historias en JavaScript simple, para su revisión durante el desarrollo, las pruebas y el control de calidad.
La herramienta tiene un extenso ecosistema de complementos que permite la integración con herramientas de desarrollo, lo que facilita la personalización del flujo de trabajo y la automatización de las pruebas y la documentación. Por ejemplo, el complemento Docs permite escribir Markdown/MDX para generar sitios personalizables para bibliotecas de componentes y sistemas de diseño.
Styleguidist
Guidista de estilo se puede clasificar como un generador de guía de estilo de vida, pero su funcionalidad es cercana a la de un servidor de entorno de desarrollo para componentes de interfaz de usuario.
Las guías de estilo creadas con Styleguidist muestran las propiedades de los componentes y muestran ejemplos de uso editables basados en archivos Markdown (.md). La herramienta es compatible con dialectos de JavaScript como ES6, Flow y TypeScript.
Los documentos generados automáticamente permiten que Styleguidist funcione como un portal de documentación para todos los componentes, que está disponible para todo el equipo de desarrollo.
También simplifica la creación y el mantenimiento del sitio de documentación de la interfaz de usuario, que incluye el catálogo de componentes de la interfaz de usuario. También permite crear páginas de rebajas e importar componentes de interfaz de usuario.
La documentación centralizada en Styleguidist logra ahorros significativos de tiempo y esfuerzo en proyectos grandes, pero se deben asignar recursos para mantener la documentación actualizada.
De lo contrario, puede caer en un problema llamado mortalidad de la guía de estilo, que ocurre cuando la documentación se vuelve obsoleta, los desarrolladores dejan de usarla y la utilidad de las guías de estilo simplemente se pierde.
Es común que Styleguidist se use junto con Storybook, ya que sus fortalezas son complementarias: Storybook se puede usar para construir componentes y escribir historias para rastrear cambios en ellos, mientras que Styleguidist se puede usar para documentar componentes usando Markdown.
Bit
Poco es un marco/repositorio distribuido y extensible, también conocido como monorepo o repositorio de paquetes múltiples, de componentes de interfaz de usuario, que se puede usar como una infraestructura para construir aplicaciones bajo la metodología de Desarrollo Dirigido por Componentes (CDD).
Con esta metodología, Bit tiene como objetivo acelerar los procesos de creación, prueba y mantenimiento, acortando significativamente los ciclos de desarrollo de aplicaciones y mejorando la calidad de las aplicaciones.
En lugar de construir los componentes como parte de la aplicación, Bit permite que se desarrollen fuera de la aplicación y luego se utilicen para componer las aplicaciones de abajo hacia arriba.
A su vez, los componentes se pueden reutilizar en muchas aplicaciones diferentes, creando una especie de mercado de componentes disponible para todo un equipo de desarrollo. Como resultado, obtiene aplicaciones extensibles, cuya funcionalidad puede cambiar simplemente agregando o eliminando componentes.
Bit es compatible con React, Vue y Bibliotecas angulares. Se basa en una filosofía de espacio de trabajo, donde los espacios de trabajo se utilizan para desarrollar y componer componentes.
Esta forma de trabajar le permite crear aplicaciones de forma distribuida, pero con una experiencia similar a la monolítica. La interfaz de usuario de los espacios de trabajo de Bit permite desarrollar y administrar componentes visualmente con facilidad.
React Cosmos
Reaccionar Cosmos es un entorno de desarrollo diseñado para crear interfaces de usuario escalables y de alta calidad. Le permite desarrollar componentes de React de forma aislada y crear bibliotecas de componentes de interfaz de usuario.
Se puede usar para reducir drásticamente los tiempos de desarrollo, ya sea a través de pruebas de regresión o a través de integraciones que se pueden personalizar según sus necesidades.
React Cosmos utiliza una filosofía basada en accesorios de componentes que le permite marcar sus estados definiendo entradas de ejemplo. La agrupación de accesorios de componentes le permite crear una biblioteca de ellos, que React Cosmos expone bajo una elegante interfaz de usuario especialmente diseñada para hacer que su tiempo sea más productivo.
Para hacer su trabajo, React Cosmos se inserta en su canal de compilación para que pueda comprender su código fuente.
Esto significa que puede usar la herramienta sin importar qué dialecto JS use para escribir su código, ya sea Flow, TypeScript u otros. También significa que a veces tienes que agregar algunas opciones en alguna configuración para que la integración funcione.
Como su nombre lo indica, React Cosmos opera exclusivamente con React, centrándose en algunos aspectos del desarrollo de la interfaz de usuario, pero haciéndolo con el mayor nivel de detalle.
React Developer Tools
Ofrecida por Facebook, esta herramienta funciona como un complemento de Chrome, lo que le permite inspeccionar las jerarquías de componentes de React dentro de las herramientas de desarrollo de Chrome. También está disponible como complemento para el navegador Firefox.
Reaccionar herramientas de desarrollo le permite inspeccionar y editar el estado y las propiedades de un componente mientras navega por el árbol de jerarquía de componentes de su aplicación. Esta forma interactiva de desarrollo le brinda la capacidad de ver cómo los cambios en un componente afectan a los demás, para que pueda ensamblar correctamente la estructura de su componente de interfaz de usuario y lograr una separación adecuada entre ellos.
Cuando instala React Developer Tools en su navegador, obtiene dos nuevas pestañas, una llamada Componentes y la otra llamada Profiler. El primero le muestra los componentes raíz de React que se renderizaron en la página, así como los subcomponentes renderizados por ellos.
Al seleccionar uno de los componentes en el árbol, puede inspeccionar y editar sus propiedades y estado en el panel derecho. Usando las migas de pan, puede inspeccionar los ancestros del componente seleccionado. La pestaña Profiler se utiliza para registrar información de rendimiento.
Docz
El proceso de documentación del código es probablemente el que más odian los programadores. Quizás incluso más que leer los informes de errores que reciben de los probadores.
Sin embargo, un sitio de documentación constantemente actualizado es esencial para reducir el tiempo de desarrollo, ya que evita que los mismos componentes se reescriban una y otra vez, y con características diferentes cada vez.
Docz tiene como objetivo simplificar el proceso de documentación y actualización de los sitios de documentación tanto como sea posible para que los desarrolladores no pierdan el tiempo que podrían usar para terminar las aplicaciones más rápido.
Con Docz puede escribir y publicar fácilmente documentación interactiva de su código, creando archivos MDX que muestren sus virtudes. Como resultado, obtiene un sitio listo para producción con recarga en vivo, que se actualiza en su totalidad cada vez que cambia un archivo.
Si le gustan las API, puede explorar estas herramientas para crea una hermosa documentación de API.
Esto es solo el comienzo
Además de las herramientas reseñadas aquí, existen muchos otros proyectos de herramientas para catalogar, gestionar y documentar componentes, como Carte Blanche, Atellier, Bluekit, entre otros.
Muchos de ellos aún están en beta, mientras que otros son proyectos sin mantenimiento, pero vale la pena conocerlos y mantenerlos en el radar, ya que pueden ofrecer cualidades que pueden acortar sustancialmente los tiempos de desarrollo de software.
Muchas grandes empresas modernas, incluidas Shopify, Atlassian, IBM, Spotify y AirBNB, están adoptando sistemas de diseño respaldados por herramientas que aceleran el desarrollo y la documentación de los componentes de la interfaz de usuario.
Sin embargo, no tiene que esperar hasta ser una gran empresa para adoptar estas herramientas. Es mejor comenzar a usarlos cuando tenga un catálogo mínimo de componentes para mantener.
Puede familiarizarse con ellos para que no lo tomen desprevenido cuando su lista de componentes crezca y se vuelva demasiado costoso comenzar a organizarla.
