My Summer Experience With Broadcom
Hi, I’m Sparsh Mathur, a senior studying computer science at Purdue University. This summer I had the opportunity to return to Broadcom’s Mainframe Division as a summer worker with the Precision SDK team. Given my insightful experience last summer working on automated visual regression testing, I was excited to return. Having just completed my junior year of college, I was eager to apply my expanded academic knowledge and contribute to the team with a fresh perspective.
Addressing UI Framework Constraints
As a summer worker with the Precision SDK team, I was tasked with evaluating our UI framework to improve its long-term sustainability. My analysis revealed that the foundation of our UI had grown to have a lot of issues. Precision SDK, our frontend SDK, was heavily reliant on PrimeReact, which had recently shifted to a closed-source model and dropped backward compatibility, forcing our teams into a cycle of constant, disruptive refactoring. Furthermore, because it wasn't a headless library, customizing styles to fit the Precision UX required brittle workarounds. Poor quality control across releases, paired with outdated React anti-patterns, was actively degrading developer experience and application health. It was clear we needed a migration to a robust, headless component library to ensure long-term stability. Since Precision SDK now offers over 70 components, with 35 of 48 UI-facing MSD products successfully onboarded, finding a solution would be a big step in improving our ecosystem's sustainability.
Choosing the Alternative Architecture
While certain basic components could be made from scratch using HTML elements, other components are far more complex. As a result, choosing a headless React library, which means having zero styles from bundled CSS, allowing freedom to align the design according to the requirements set forth by the design team, would eliminate the hidden, time-consuming complexities of component development like accessibility (ARIA standards, screen reader support, focus trapping), keyboard navigation, and edge-case positioning. By handling the raw interactive logic and HTML semantics out of the box, the library would give a production-ready foundation while leaving 100% control over styling.
After a deep dive evaluating different headless libraries, Base UI emerged as the winner. Base UI is built cleanly without legacy baggage, keeping bundle sizes light. It utilizes modern patterns like proper render props instead of rigid structures and is regularly maintained and updated.
To ensure a smooth migration, I developed a data-driven Feature Parity List. Using usage matrices provided by my team on what props and attributes are used for each component, I was able to make data driven decisions on what the SDK would support. I categorized props into three support levels: Yes (essential/high-usage), No (inconsistent with new designs or unused), and Replaced (deprecated in favor of better React props). This document now serves as the compatibility guide for developers across the ecosystem.
Building the Foundation
With the architecture chosen, I began the rigorous process of building the next-gen components. Instead of a one-size-fits-all approach, I tailored the implementation strategy to the specific needs of each primitive:
-
From-Scratch Primitives: Basic components such as Button and Skeleton were built from scratch using native HTML and direct Tailwind token binding. For high-frequency components, this provides maximum execution speed, zero wrapper overhead, and absolute design freedom without unnecessary external dependencies.
-
State-Managed Form Controls: Components like the Radio Button and Checkbox required a different approach. Handling accessibility, keyboard navigation, and edge cases for form inputs is notoriously complex. Here, I leveraged Base UI primitives paired with a four-slot Tailwind-variants architecture. This enabled smooth, opacity-based selection transitions while strictly managing internal and group-level states to mirror native HTML behavior.
Even with BaseUI, creating components wasn’t clear cut. For the Tooltip, I engineered a flexible, external-anchored component that bypasses Base UI's trigger constraints, allowing it to target elements we don't strictly control the JSX for. Additionally, I designed the Dialog, Overlay Panel, ConfirmDialog, and others under a shared BaseDialog architecture to centralize visual language and interaction behavior (like drag-and-drop and resizing) while maintaining specialized local variants.
Ensuring Quality & Documentation
To establish a standardized technical foundation, I authored Component Architecture Specifications for all assigned UI components. These frameworks align API contracts, strict accessibility compliance through ARIA semantic mappings, explicit keyboard interaction matrices, and robust QA strategies. I also established a testing strategy that combined functional behavior verification with efficient Visual Regression Testing (VRT). Rather than writing dozens of individually-triggered interaction tests, I leveraged Storybook's pseudo parameters to map CSS classes to forced states. This allowed a single deterministic screenshot to capture an entire matrix of variants, sizes, and states for both light and dark themes.
All button variations and states simulated through pseudo state
Understanding the Broader Ecosystem
Beyond the code, I proactively engaged with engineers across various value streams to understand MSD’s broader ecosystem. These conversations gave me insight into how different teams collaborate to deliver value. I also conducted targeted research into Broadcom’s Mainframe Division, highlighting the unmatched security, scalability, and reliability of mainframes. This clarified exactly why deep integration with mission-critical enterprise workflows makes complete customer migration off these systems virtually impossible, reinforcing the importance of the reliable tools we build.
Concluding Remarks
The summer worker program has proven to be an incredibly rewarding experience. Throughout its duration, I've not only deepened my understanding of modern UI architecture, building components and documentation standards, but I've also gained invaluable insight into collaborative teamwork within a dynamic, enterprise-scale environment. I greatly appreciate everyone who helped me during my project, especially my manager Brian Steele, my buddy Harish, and everyone on the Precision SDK team. Thank you all for a fantastic summer!