SDE 2 FE at Fabric, Previously -  Razorpay, Rebel Foods

Karan Kiri

Measuring Coverage of React Design System

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

SDE 2, Fabric

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

Karan Kiri

About

Watch on YouTube

Measuring Coverage of React Design System - Karan Kiri