Medición de la Cobertura del Sistema de Diseño React

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Los sistemas de diseño se están volviendo cada vez más populares en el desarrollo de front-end moderno. Sin embargo, medir el uso y la cobertura de estos sistemas de diseño a menudo es un desafío. En esta charla relámpago, hablaré sobre una herramienta en la que estamos trabajando que utiliza react-scanner y Árbol de Sintaxis Abstracta (AST) con scripts personalizados para generar datos de uso de componentes para un sistema de diseño React.

La charla cubrirá cómo generamos estos datos y cómo se representan en un tablero para proporcionar información valiosa sobre la cobertura del sistema de diseño.

- Introducción a react-scanner
- Medición del Uso de Componentes
- Identificación de elementos HTML nativos y Componentes Estilizados
- Mostrando la estructura del Árbol de la Página en términos de Componentes
- Destacando Patrones Anti
- Beneficios / Casos de uso para esta herramienta

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

El sistema de diseño 4.0 es una actualización del sistema de diseño 3.0 de Fabric Agency, construido con TypeScript para mejorar la consistencia y reducir las personalizaciones excesivas. Se introdujo para abordar los problemas de inconsistencia entre aplicaciones, proporcionando un sistema más restrictivo y soportado.

Fabric Agency utiliza una arquitectura basada en micro-front-end, empleando tecnologías como single-SPA, REACT, TypeScript y componentes de estilo para la gestión de sus tableros SAS.

La migración del diseño-system-3.0 al 4.0 busca abordar problemas de consistencia y personalización excesiva en las aplicaciones, mediante un sistema de diseño más estructurado y coherente que restrinja las variaciones innecesarias de los componentes.

React scanner es una herramienta que analiza estáticamente el código para extraer el uso de componentes y propiedades en React. Fabric Agency lo utiliza para medir el uso de componentes en sus sistemas de diseño, lo que ayuda en la toma de decisiones basadas en datos sobre estrategias de componentes.

AST (Árbol de Sintaxis Abstracta) es una representación en árbol del código fuente de un programa, utilizado para analizar y modificar el código de manera programática. Es relevante en el desarrollo front-end para herramientas como react-scanner, que lo usa para analizar componentes y propiedades en aplicaciones React.

Los anti-patrones identificados incluyen el uso inadecuado de colores codificados en lugar de tokens de diseño y el uso de elementos HTML básicos en lugar de componentes del sistema de diseño. Estos se resaltan en un panel de control para que los equipos puedan tomar acciones correctivas y mejorar la calidad del código.

Karan Kiri
Karan Kiri
19 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La Charla discute la cobertura mayoritaria del sistema Reduzon y el viaje de migración de design-system-3.0 a design-system-4.0. Presenta React scanner, una herramienta que analiza estáticamente el código y extrae el uso de componentes y prop de React. La Charla explora las opciones y funciones personalizadas en React scanner, así como los procesadores y AST utilizados por la herramienta. También discute la exploración de AST utilizando astexplorer.net y muestra el uso de react-scanner. Finalmente, menciona la importancia de la reestructuración de componentes e introduce Omelet, una herramienta para análisis de componentes.

1. Introducción a la Cumbre de React

Short description:

Hola a todos, mi nombre es Karan. Hoy voy a hablar sobre la cobertura mayoritaria del sistema Reduzon. Actualmente estoy trabajando como ST2 front-end en Fabric Agency. Tenemos nuestro propio tablero donde los minoristas pueden administrar sus productos, inventarios, clientes, cupones y suscripciones. Estábamos en el viaje de construir nuestro sistema de diseño en Typescript, que era design-system-4.0. Definamos el problema donde estamos en el viaje de migrar de design-system-3.0 a design-system-4.0. Nosotros, como equipo de plataforma, queríamos medir el uso de nuestro componente y obtener algunos datos para tomar decisiones basadas en datos sobre nuestras estrategias de componentes. Empecemos. Primero que nada, si eres ingeniero, te asignan cualquier tarea y tratas de buscar en Google todo lo posible. Pero si eres desarrollador, vas a chatgpd, escribes tu pregunta y esperas que produzca la salida, pero no lo hizo. Pero después de luchar durante unos días, pidiendo ayuda a la gente en Twitter, varias plataformas, pude encontrar este paquete NPM llamado React scanner. Entonces, ¿qué hace React scanner? React scanner es básicamente una herramienta que analiza estáticamente tu código dado y extrae el uso del componente y prop de React.

Hola a todos, mi nombre es Karan, bienvenidos a la Cumbre de React. Hoy voy a hablar sobre la cobertura mayoritaria del sistema Reduzon.

Para darte una introducción sobre mí, actualmente estoy trabajando como ST2 front-end en Fabric Agency, que es una startup de e-commerce basada en EE.UU. Anteriormente he trabajado con startups como Razorpay y Google Foods en India.

Tengamos un poco de contexto antes de definir el problema. Hablaré sobre lo que normalmente trato en Fabric en mi trabajo diario. Tenemos nuestro propio tablero, un tablero SAS, donde los minoristas pueden administrar sus productos, inventarios, clientes, cupones y suscripciones. Es una arquitectura basada en micro-front-end. Usamos single-SPA, REACT, Typescript, y componentes de estilo. Estábamos en el viaje de construir nuestro sistema de diseño en Typescript, que era diseño-system-4.0. Teníamos nuestro antiguo sistema de diseño, que estaba en Vs3. Fue construido usando JavaScript. Era muy flexible, no un sistema de diseño, sino una biblioteca de componentes o kit de UI. Era muy flexible. Así que la gente terminó creando muchas personalizaciones y muchas variaciones del mismo componente, a su vez, lo que carecía de consistencia en nuestras aplicaciones. Así que todas nuestras aplicaciones empezaron a parecer que pertenecían a una plataforma diferente en su totalidad.

Para resolver todos los problemas que teníamos con diseño-system-3.0, decidimos construir nuestro diseño-system-4.0 usando TypeScript. Era flexible, pero tenía restricciones de diseño con respecto a nuestro sistema de diseño. Es muy consistente, tiene todo el soporte, todas las últimas características como tokens, espaciado, color, tema, que puedes usar.

Definamos el problema donde estamos en el viaje de migrar de diseño-system-3.0 a diseño-system-4.0. Nosotros, como equipo de plataforma, queríamos medir el uso de nuestro componente y obtener algunos datos para tomar decisiones basadas en datos sobre nuestras estrategias de componentes. Así que algunos puntos de datos que queríamos capturar eran el uso de diseño-system-3.0, el uso de diseño-system-4.0, cualquier elemento nativo de HTML que los equipos de dominio estuvieran usando, cualquier componente de estilo que estuvieran usando construido sobre elementos nativos de HTML, o cualquier componente existente de diseño-system-3.0. También queríamos tener una estructura de árbol de cualquier página o diseño para que podamos visualizar cómo nuestros diferentes componentes se están utilizando en combinación con otros componentes. Y también queríamos destacar algunos anti-patrones que podemos recoger usando los datos.

Así que empecemos. Primero que nada, si eres ingeniero, te asignan cualquier tarea y tratas de buscar en Google todo lo posible. Ves si hay alguna solución existente que puedas usar de inmediato. Pero si eres desarrollador, vas a chatgpd, escribes tu pregunta y esperas que produzca la salida, pero no lo hizo. Pero después de luchar durante unos días, pidiendo ayuda a la gente en Twitter, varias plataformas, pude encontrar este paquete NPM llamado React scanner. Entonces, ¿qué hace React scanner? React scanner es básicamente una herramienta que analiza estáticamente tu código dado y extrae el uso del componente y prop de React.

2. Opciones y Funciones Personalizadas en React Scanner

Short description:

React scanner admite varias opciones como definir el directorio raíz, el punto de inicio de rastreo, excluir archivos específicos e incluir subcomponentes. También permite generar datos para bibliotecas específicas y proporciona funciones personalizadas y procesadores para información consolidada.

Entonces, React scanner admite las siguientes opciones que puedes dar. Básicamente, cuando ejecutas este React scanner en una base de código dada, tienes algunas opciones. La primera es el directorio raíz. Puedes definir desde dónde es tu directorio raíz, por lo que comenzará a escanear desde ese directorio raíz. También puedes definir desde dónde quieres empezar a rastrear. Puedes excluir cualquiera de los archivos en los que no quieras ejecutar un escaneo. También puedes definir el patrón de bloque para incluir o excluir archivos específicos.

También puedes incluir subcomponentes, como si no quisieras informar todos los componentes, entonces también puedes definir usando componentes. De manera similar, para subcomponentes también. Si quieres generar los datos solo para bibliotecas específicas, digamos que quieres obtener la información de una biblioteca, como digamos qué componentes están usando de Material.ai, entonces puedes definir tus bibliotecas particulares también. Así que generará solo los datos para esa biblioteca particular que has definido. Además, hay algunas funciones personalizadas que puedes pasar. Algunas de ellas son como getComponent, getProperValue y procesadores. Los procesadores son básicamente funciones que se ejecutan en la parte superior de los datos brutos y generará información consolidada para ti.

3. Procesadores de React Scanner y AST

Short description:

React scanner proporciona procesadores como countComponents, countComponent y props, y raw report. CountComponents proporciona el recuento de componentos utilizados en el código. CountComponent y props cuentan los componentes y sus respectivas props. El informe en bruto genera información en bruto sobre las instancias de texto para todos los componentes. React scanner funciona leyendo el archivo, analizando el código en AST y recopilando información basada en los procesadores configurados. AST es una representación en árbol del código fuente del programa.

Entonces, hablemos de algunos de los procesadores que proporciona React scanner. Como sugiere el nombre, el primero es countComponents. Básicamente, te dará solo el recuento de componentes, como todos los componentes que se están utilizando en el código en particular. El siguiente es countComponent y props. Básicamente, contará el componente y también el recuento de props. Aquí puedes ver el componente de texto. Se identificó 17 veces y en esas 17 instancias, la prop de margen se utilizó seis veces, colores cuatro veces y texto una vez. Y así sucesivamente.

Entonces, el procesador base es un informe en bruto. Básicamente, generará la información en bruto de tu informe, de todas las instancias de texto para todos los componentes. Aquí puedes ver las instancias de texto. Tendrá información como el primer objeto es el sujeto de la prop. Otro es la ubicación. Entonces, ¿dónde se identificó tu componente en particular? Y también tendrá la información de propagación de la prop. Si estás utilizando la sintaxis de propagación de la prop, entonces también te dará esa información. Así es el formato del informe en bruto.

Entonces, ¿cómo funciona el escáner de tasa? Básicamente, lee tu archivo. Y luego analiza tu código en sintaxis abstracta AST. Luego recorre el AST, recopila información como el nombre del componente, la información de importación. Luego, en función de los procesos que pasaste en la configuración, generará los datos y devolverá el JSON. Por lo tanto, puedes escribirlo en un archivo separado o también puedes tomarlo como salida. Entonces, hablemos un poco sobre AST. No soy un experto en AST. Este fue mi primer encuentro con AST. Pero es una herramienta genial para aprender algunas cosas sobre tu código. Básicamente, la representación en árbol del código fuente de tu programa es lo que es AST. Así que he tomado un ejemplo muy mínimo o básico aquí. Puedes ver que he declarado dos variables A y B, 45, 5 y tengo una declaración de función que devuelve A más T. Entonces, en el lado derecho, he creado un AST.

4. Explorando AST y React-Scanner

Short description:

Esta sección discute la estructura básica de un Árbol de Sintaxis Abstracta (AST) y cómo explorar AST usando astexplorer.net. También muestra el uso de react-scanner para mostrar información de uso de componentes para DS3 y DS4. Además, destaca la necesidad de manejar los elementos HTML nativos y los componentes de estilo por separado, así como las diferencias entre los elementos JSX y los elementos HTML. La sección concluye con una breve descripción de la sintaxis de los componentes de estilo y su representación en AST.

Aquí puedes ver que esto tiene tres nodos. Como tenemos tres declaraciones, declaración de variable, un par de declaraciones de variable y una declaración de función. Aquí puedes ver. En la declaración de función tenemos una declaración de bloque en este corchete y luego tenemos una declaración de impresión y este operador y su argumento también. Así es el IST básico. Si quieres aprender más sobre AST, te sugeriría fuertemente que vayas a astexplorer.net y lo explores. Puede generar el AST para el código en cualquiera de los lenguajes y te dará una vista agradable y puedes aprender una o dos cosas sobre los ASTs.

Así que veamos react-scanner en acción. Así que usando react-scanner pudimos mostrar esta información sobre el uso de componentes DS3 y DS4. Aquí puedes ver en DS3 que teníamos estos componentes y su uso como tooltip, icon, model y en DS4, como grid, row, skeleton, box, icon. Y en el gráfico de pastel, estamos mostrando el estado de uso del componente DS3 vs DS4 en este proyecto particular llamado Copilot MFA admin. Todavía necesitábamos averiguar algunas cosas como los elementos HTML nativos, los componentes de estilo, la estructura del árbol de componentes y los anti-patterns. Así que veamos cómo podemos hacer cada uno de ellos.

Así que lo primero es lo primero, todos estos como no estaban soportados usando react scanner. Así que neblinamos el repositorio de react scanner porque ya no se mantiene activamente y no tenía todos los casos de uso que queríamos resolver. Así que ahora estamos manteniendo una copia de react scanner en Fabric. Y comencemos a hablar sobre los elementos HTML, cómo difieren de los elementos JSX. Así que hay dos características únicas o dos diferencias únicas entre el elemento JSX y el elemento HTML es que el elemento HTML siempre está en minúsculas y no contiene ningún punto. Así que la sintaxis de punto se utiliza generalmente para los subcomponentes y las letras mayúsculas se utilizan para los elementos JSX. Así que utilizando esta información, utilizando este filtro, pudimos mostrar todos los elementos HTML que los equipos de dominio estaban utilizando y en qué archivo particular también estaban utilizando. Pudimos mostrar eso en el panel de control como puedes ver aquí en la instantánea.

Así que hablemos de los componentes de estilo. Los componentes de estilo son básicamente nuestra solución cssng. Puedes haber visto esta sintaxis si la has usado antes, pero si no, también hablaré brevemente sobre eso. Así que puedes haber usado esta sintaxis de plantilla literal de etiqueta. Generalmente usamos esto cuando definimos nuestros estilos en conjunción con los componentes de estilo. Así que aquí puedes ver que hay dos formas de definir tu componente de estilo. Una es una notación de punto normal, style.button donde he definido este botón usando esa sintaxis, y el botón principal usando una función llamada syntax-style y en los corchetes estoy definiendo este componente. Así que hablemos de los componentes de estilo usando cómo se ve en AST. Así que vayamos al primero.

5. Uso de Componentes, Anti-Patrones y Omelet

Short description:

En esta sección, exploramos cómo recopilar información sobre el uso de componentes e identificar anti-patrones. También discutimos la importancia de la reestructuración de componentes e introdujimos una herramienta llamada Omelet que proporciona una solución integral para el análisis de componentes. La herramienta es compatible con React y React Native, con planes para agregar Angular y Vue en el futuro.

Aquí puedes ver en la notación de punto que está obteniendo el identificador y en la expresión de plantilla de etiqueta puedes ver que hay una etiqueta y hay un cos y un elemento de plantilla. Puedes ver aquí todos los valores que el fondo hizo y todo lo que hemos definido aquí en la sintaxis, puedes ver aquí. Y puedes ver de dónde se derivó, como cuál es su nombre de expresión y podremos ver que se construyó sobre Button. Y de manera similar para el componente basado en estilo, puedes ver aquí que tenemos esta expresión de llamada porque estamos llamando a la función style y aquí tenemos el argumento llamado BaseButton. Puedes ver el valor aquí, BaseButton. Entonces podemos identificar usando esa información que el botón de funcionalidad se construyó sobre BaseButton.

Entonces, este fue el código que escribí. Así que estoy recopilando toda la información de dónde se estilizó usando el nombre de la propiedad y el valor en bruto también. Entonces, después de recopilar la información, pudimos identificar algunos anti-patrones, así que hablemos de anti-patrones. Entonces, anti-patrón es un término que describe cómo no deberías estar realizando tus problemas recurrentes. Entonces, ¿cuáles podrían ser algunos de los anti-patrones en nuestro caso de uso es que usando un color codificado en lugar de usar un token del sistema de diseño o como usar elementos HTML, como ancla, entrada, botón, en lugar de usarlo desde el sistema de diseño. Así que queríamos resaltar eso en nuestro panel de control para que los equipos puedan tomar acciones correctivas. Así que aquí está el panel de control, puedes ver aquí, hemos identificado algunos de los anti-patrones y hemos dado la sugerencia así como la fuente de la misma de donde surgió donde el usuario estaba siguiendo estos anti-patrones. Y también, como también estamos viendo el color como componente de estilo también. Así que lo último de lo que quería hablar es la reestructuración de componentes. Así que queríamos crear una reestructuración de componentes para cualquier página o cualquier componente para que podamos visualizar cómo se utilizan nuestros componentes junto a otros componentes o entre sí. Entonces, generalmente puedes ver cómo están organizados y cómo podemos optimizarlos aún más o podemos tomar cualquier decisión importante con eso. Así que tomemos un ejemplo de muestra. Así que aquí tengo un formulario de gestión de usuarios de una de las aplicaciones de Microsoft Analytics. Así que este formulario de gestión de usuarios tiene dos componentes que puedes ver uno es formulario de usuario y otro es la tabla de listado de usuarios. Así que aquí puedes ver que este formulario de usuario tiene 3 entradas y 1 desplegable y 1 botón también. Y este formulario tiene como todas las filas y cada uno de ellos puede tomar acción y cambiar el rol del usuario. Así que hablemos de eso. Aquí puedes ver este árbol como nos da la información de que este espacio de usuario gestionado se construye usando botones 3 barras de pila en realidad botón con icono este formulario de usuario y esta lista de usuarios. Así que aquí puedes ver que podemos identificar 1 anti-patrón aquí en la primera clase es que estamos usando 3 instancias de barra de pila que no deberíamos estar usando en esta página porque podemos hacer lo mismo con 1 barra de pila también. Aquí el formulario de usuario es una construcción usando diferentes componentes. Así que por eso está despejado. Puedes expandirlo más no es un nodo de borde por lo que puedes ver que el formulario de usuario está construido de desplegable entrada entrada entrada y botón con icono icono botón en realidad así que puedes ver toda tu página en una sola vista qué componentes se están utilizando Así que es una versión básica que construí pero nosotros planeamos agregar más características a ella como buscar un particular componente y mostrarlos con diferentes colores de donde pertenecen o de donde se importan y también la información de props si podemos resaltar eso sería una gran herramienta para tener Así que en resumen pudimos obtener la idea general de cómo se estaba consumiendo nuestro sistema de diseño. Usando los datos que generamos pudimos tomar decisiones importantes basadas en datos alrededor de qué props deberían ser o hacer compatibles con versiones anteriores o todos los props que podemos duplicar o qué componentes deberían ser combinados o qué componentes deberíamos hacer atómicamente Así que todos estos tipos de decisiones pudimos tomar usando datos y también pudimos resaltar los anti-patrones y mejorar la calidad del código Sí, tengo un bonus para todos ustedes chicos Es una herramienta que he encontrado recientemente que es omelet.dev que hace lo mismo que hace el escáner React pero es una solución todo en uno que puedes usar. Es una herramienta de análisis de componentes que fue desarrollada por Zeppelin Así que aquí hay una simple demostración de Omelet. Puedes ver aquí que tiene la herramienta CLI que puedes usar y tiene un panel de control donde puedes ver todos tus datos una vez que ejecutes tu escaneo en. Así que es mucho más avanzado que lo que hemos construido y es compatible con React y React Native y tiene planes para agregar en el futuro, en el futuro están planeando agregar Angular y Vue también. Así que gracias. Así que aquí están las referencias que puedes usar si quieres aprender más sobre eso y aquí están mis redes sociales si quieres conectar. Gracias chicos y gracias al equipo en la Cumbre Anti-Handicap por darme la oportunidad de hablar en esta masterclass. Gracias chicos.

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

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
React Summit US 2023React Summit US 2023
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
AI + UX: Diseño de Producto para Experiencias Inteligentes
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Diseño de Producto para Experiencias Inteligentes
Premium
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.
Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Patrones Probados de Pinia
Vue.js London 2023Vue.js London 2023
20 min
Patrones Probados de Pinia
Top Content
Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.
Patrones de Diseño de Componentes
Vue.js London 2023Vue.js London 2023
18 min
Patrones de Diseño de Componentes
The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.
Construyendo el Generador de Código de Widgets de Figma
React Advanced 2022React Advanced 2022
19 min
Construyendo el Generador de Código de Widgets de Figma
This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.