Beam 3

I started on the team as Viasat was still building out Beam version 3, an exciting time for new precedents to be set.

Product designer Ted Lee has a great writeup about Beam 3 motivations.

Components

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

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

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.

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.