Medición de la Cobertura del Sistema de Diseño 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.

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.

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.

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.

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.