Design System Visual Coverage in React Native applications
summary
A library counts rendered pixels to report a single coverage percentage and ships as plain JavaScript that runs in production counting pixels. It builds a bitmap from DOM coordinates, offloads work to a web worker, uses requestIdleCallback and typed arrays and removes branching to hit 35 non‑blocking ms on modern laptops and 900 ms on a Huawei P9. It reports green pixels / (green+red) per page and per team, and it proves useful in production.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:23Why visual coverage matters
- 4:57Requirements for metrics
- 7:04Visual coverage formula
- 9:53Splitting by team ownership
- 11:39Performance challenges
- 15:11Live demo: Preply.com
- 18:41DOM traversal and bitmaps
- 23:21Optimization benchmarks
- 24:51Configurable library
- 26:57Visual coverage in React Native
- 28:20Dashboard insights
- 30:30Metric limitations
- 31:32Dynamic visual coverage
related talks
19mVisual Regression Testing in React Native
10mMeasuring Coverage of Design System
28mVisual Regression Test In React Native
26mMeasuring and Improving React Native Performance
30mReact Native
01h 01mReact Native: A Better Way to Do Mobile
24mOptimising React Native "Tools and Tips"
39mPerformance issues: the usual suspects