Overview

Viasat is a satellite communications company serving defense, aviation, government, maritime, and residential needs.

Beam is Viasat’s design system, used across all business segments. I joined the team in the early days of the system, allowing me to set exciting foundations for the component library.

Components

Beam 3 introduced a framework-agnostic API using web components. As such, a Beam 3 component is implemented using TypeScript in both native React and web components using the Lit framework.

I built the empty state, tooltip, popover, and stepper components in both frameworks.

Library Fundamentals

During this process, I introduced a highly efficient theme-property handling model that caches theme properties to reduce DOM lookups, extensible floating component code mixins, event controllers, and a global inverse theme handling system.

These solutions will eventually be morphed into many more components across the library.

Accessibility

I dove deep into WCAG accessibility guidelines to internalize the motivations. I conducted extensive user-experience testing with screen readers to ensure usability.

Developer Experience

Automated Documentation during Code Compilation

While building components, I noticed how our documentation and demonstration tool, Storybook, by itself struggles to reproduce usable source code for complex examples. Developers thus need to do lengthy documentation reading to implement components.

Using Babel, I architected a React compilation tool to automatically inject original source code snippets to the Storybook documentation site.

This would make it much, much easier for engineers to get an app using Beam components up and running.

CI/CD

I used GitHub Actions to build a new CI/CD flow, moving the team from manual to automatically allocated and de-allocated deployments per pull request. I used Serverless, AWS CloudFront, AWS CloudFormation, and S3.

During this process, I also decreased build time.