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

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.

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
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 Conference 2022React Advanced Conference 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.