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

Rate this content
Bookmark

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

19 min
15 Nov, 2023

AI Generated Video Summary

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

Vue.js London 2023Vue.js London 2023
14 min
Domain Driven Design with Vue Applications
Introduction to Domain Driven Design- What is DDD?- Key principles of DDD- Benefits of using DDD in web application developmentDomain Modeling in Vue 3 Applications- How to design and implement domain models in Vue 3- Strategies for integrating domain logic with Vue's reactive data model and component-based architectureBest Practices for Implementing DDD in Vue 3- Strategies for organizing code in a way that follows DDD principles- Techniques for reducing coupling between domain and application logic- Tips for testing and debugging domain logic in Vue 3 applications
Vue.js London 2023Vue.js London 2023
20 min
Proven Pinia Patterns
With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.
Vue.js London 2023Vue.js London 2023
18 min
Component Design Patterns
How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.
React Advanced Conference 2022React Advanced Conference 2022
19 min
Building Figma’s Widget Code Generator
Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.
JS GameDev Summit 2022JS GameDev Summit 2022
30 min
So You Want to be an Indie Game Developer?
So you want to be an indie game developer? You probably have an idea of what indie game development is like. My job is to assure you that you are wrong. I'm going to talk about misconceptions around indie game development and all you need to know before getting into it.