Forward Compatibility
What began with breaking change to Spotify’s most used design system component in 2021 grew into robust tooling that helps facilitate more frequent incremental library improvements.
Visual QA
When it was time to update our Type component, visual review was needed. This component is used thousands of times across many pages in different apps. Some pages actually pull code from several sources at once, raising the risk inconsistent visuals.In order to allow visual QA to happen on a rolling basis, I developed the Encore Context component. Encore Context uses React context to modify the behavior of a component within an isolated section of an application. It does this by allowing the configuration of a component’s lifecycle in order to display the desired version.
Maintaining a design systems library involves managing breaking changes, providing tools to help customers migrate, and ensuring no one falls behind.
Automated Migrations
JSCodeshift uses Abstract Syntax Trees (AST’s) to make a JSON representation of the JavaScript file. From there, manipulations can be performed on specific aspects of the code such as import paths, component names, and component props.Making a codemod with JSCodeshift for the Type migration was critical for adoption. With Type instances ranging in the thousands, automating the migration saved days of development time for each product where the component was used.
Outcomes
Migration time has been greatly reduced, and new feature adoption has become faster and more seamless. This allows us to release more new features without leaving customers in the dust.
