React Advanced

React Advanced Conference 2023

Karen discusses measuring the coverage of a design system using React Scanner. The tool helps analyze code and extract component details, allowing for the measurement of component usage and identification of patterns. The analysis also reveals anti-patterns in the design system consumption. By restructuring components, data-driven decisions can be made to optimize component usage at a route level and address anti-patterns.

Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system.  The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system. - Introduction to  react-scanner- Measuring Component Usage- Identifying Native HTML elements and Styled Components- Showing Tree structure of Page in terms of Components- Highlighting Anti Patterns- Benefits / Use Cases for this tool

#react measure