Go to content

Showkase: Automated UI Infrastructure in Jetpack Compose using KSP by Vinay Gaba

Recording brought to you by American Express. https://americanexpress.io/kotlin-jobs Declarative UI frameworks encourage the creation of reusable components that can be used in different parts of the app. We all know that reusability is a good engineering practice but what often ends up happening is a little more nuanced: As developers add new UI components, the codebase often ends up with hundreds of components that are hard to visualize. Discovery is hard and there is no easy way to search for all your components. As a result, your codebase often ends up with duplicate components that offer similar functionality. The same problems extend to other aspects of your design system like colors, typography, icons, etc. In order to get around this, most mobile teams build their version of a “Component Browser” that lets you visualize your design system. This is often maintained manually with little to no tooling around it. In order to solve these problems for our team and for the broader Android community, we (Airbnb) built and open-sourced Showkase. Showkase is an annotation-processor based Android library that helps you organize, discover, visualize and automatically screenshot test Jetpack Compose UI elements. In this talk, we will dive deeper into how we used a KSP based system to solve the problems listed above. We will look into the internals of Showkase and how all this "magic" works. Lastly, we'll look at what to expect from the next few versions of Showkase and how we plan to extend it. Github - https://github.com/airbnb/Showkase Talk by: Vinay Gaba #KotlinConf

April 12, 2023