Introducing Showkase: A Library to Organize, Discover, and Visualize Your Jetpack Compose Elements | by Vinay Gaba | Airbnb Engineering & Data Science | Dec, 2020

Over the last few years, Android™ development has gone through significant changes in how apps are structured, the language used for development, the tooling & libraries that speed up our development, and the improvements in testing apps. What didn’t change in all these years is the Android UI toolkit.

This changes with Jetpack Compose — Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android and is a paradigm shift in Android development as we know it. The move to using declarative programming for describing UI is a welcome change and one that is prevalent across platforms with the introduction of frameworks like React for web, SwiftUI for iOS, and Flutter for cross-platform development.

Declarative UI frameworks encourage the creation of reusable components that can be shared across different parts of the app. We know that reusability is a good engineering practice but what often ends up happening is a little more nuanced.

  • Discoverability of these components is a challenge and there is no easy way to search. As a result, your codebase often ends up with duplicate components that offer similar functionality. You might be able to use your IDE to search for a component if you used a very descriptive name. However, naming things is hard and descriptive names still do not always help us find the right component to use.
  • 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.

If you have ever worked on any frontend platform, you can probably relate to some of these issues that contribute to a sub-par developer experience. As engineers, our job is to make software do this work for us.

Showkase auto-generates a browser for your Jetpack Compose UI Elements
Showkase helps you visualize and document your design system

Showkase takes it a step further and auto-generates permutations of your components in common situations like dark mode, right-to-left layouts, scaled fonts, etc. This helps to preview your components in common scenarios without the need to do any additional work. This is helpful in detecting issues early and fixing them while you are still developing the components.

Multiple permutations are auto generated for each component allowing you to preview it in different scenarios

Step 1: Add the dependency to your module’s build.gradle file. If you have a multi-module setup, add this dependency to all the modules with UI elements that should be displayed inside the Showkase browser.

Step 2: Add the relevant annotations for every supported UI element that should be a part of the Showkase browser.

Showkase provides different annotations to mark UI elements that you’d like to see inside the Showkase UI browser.

For @Composable components, use the @ShowkaseComposable annotation:

Showkase provides first class support for @Preview. If you are already using the @Preview annotation that Compose provides for previewing Composable in Android Studio, you don’t need to do anything else.

For color properties, you can add the @ShowkaseColor annotation to the field:

Similarly, for TextStyle properties that are useful for representing typography in Jetpack Compose, you can add the @ShowkaseTypography annotation to the field:

Step 3: Define an implementation of the ShowkaseRootModule interface in your root module.

Step 4: Showkase is now ready to use!

Showkase comes with a predefined Activity that does the necessary scaffolding for accessing the UI browser with the elements you annotated. Typically you would start this activity from the debug menu of your app but you are free to start this from any place you like! A nice helper function createShowkaseBrowserIntent is generated for you — just start the intent and you are good to go.

Showkase in action demonstrating how you can visualize and search all your Jetpack Compose components in your codebase.
Showkase also lets you visualize the other aspects of your design system like colors & typography.

By reducing the amount of manual work needed in maintaining your design system/UI components and making it more discoverable, Showkase helps in driving adoption of the reusable components in your Android codebase.

If you like what you see and are experimenting with Jetpack Compose, give Showkase a spin and let us know what you think.

  • Hooks for screenshot testing. Since all your components are a part of the Showkase browser, this would be a good opportunity to make this a part of your CI and detect differences in components across pull requests.
  • Support for other UI elements that are a part of your design system (like icons, spacing, etc).
  • Generating a web version of the Showkase browser with documentation, search, and screenshots.

Many thanks to Eli Hart, Ben Schwab, Laura Kelly, Andreas Rossbacher, Gaurav Mathur, Laura Skelton, Madison Capps, Steve Flanders, Shreya Sharma, Brett Bukowski, Lauren Mackevich & David Shariff for helping with various aspects of Showkase.

Source link