jetc.dev Newsletter Issue #230

Published: 2024-09-03

This week, we peek at shaders, ponder when to load data, and better leverage preview composables. We also look at a fully-custom Compose Multiplatform design system, and I try to distinguish cases where Compose for Web make sense and where it does not.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Unfortunately, the Kotlinlang #compose Slack archive has not been updated since August 22nd (as of when I am writing this), so no Slack thread shout-out this week!

How Can I Smoothly Partially Collapse a Panel?

I am not the best with animations. 🙂‍↕️ I had a need for a panel that would partially expand and collapse, with the middle of the panel being what remained visible after the collapse. With a bit of help, I used animateDpAsState() to implement a solution, as you will see in this week’s highlighted Stack Overflow question.

Composable Commentary

Posts, videos, and other new information related to Jetpack Compose!

Video: Shaders (Jetpack Compose Tips)

Google’s Rebecca Franks (@riggaroo@androiddev.social) continues the Jetpack Compose Tips series, this time looking at shaders, including AGSL, ShaderBrush, and more.

Video: Build adaptive apps for Pixel 9 Pro Fold

From #TheAndroidShow, George Hwang and Fahd Imtiaz talk with Huyen Tue Dao about designing for foldables and implementing those designs using Compose Material3 Adaptive composables.

Video: SAP integrated NavigationSuiteScaffold within 5 minutes, creating an adaptive UI

Google produced a short Compose marketing video, describing SAP’s experience in using NavigationSuiteScaffold() to create a UI that worked well on foldables and tablets, as well as on traditional phone form factors.

Medium: Loading Initial Data in LaunchedEffect vs. ViewModel

Jaewoong Eum (@skydoves@androiddev.social) explores a common problem: what is the trigger for loading data required by a composable screen? LaunchedEffect() and using init() in a ViewModel are two typical approaches, but Google’s Ian Lake recommends using a cold flow that loads the data upon subscription, and Jaewoong looks at how one could implement that pattern.

Medium: Composable-scoped ViewModel: An interesting experiment

Joost Klitsie looks at what it takes to have a viewmodel be scoped to an individual composable, as opposed to having it be scoped to a navigation destination, an Activity, or similar coarse-grained scopes.

Medium: Using Native iOS Navigation from Compose Multiplatform

Usually, with Compose Multiplatform, we think of using some Compose-centric form of navigation that also is multiplatform. Kashif Mehmood (@KashifMehmood@androiddev.social) examines a hybrid approach, using iOS’s own navigation system with a bit of glue provided by the Voyager navigation framework.

Video: Power Previews with Jetpack Compose

Katie Barnett delivered a presentation for GDG Melbourne, exploring ways to write better @Preview composables. Katie covered preview groups, backgrounds and colors, custom preview annotations, @PreviewParameters, and more.

Medium: 5 Tips for Better Compose Previews

Domen Lanišnik continues the theme, looking at techniques for building more powerful @Preview composables, such as built-in multi-preview annotations, device specs for previewing in landscape, and LocalInspectionMode.current to have better-behaving composables in preview mode.

Medium: Efficient Testing or Code Pollution? The Role of .testTag() in Jetpack Compose Testing

Medium user Ryan W looks at testTag(), a common way of adding a test-specific identifier to a composable. Some have complained that this results in shipping test-specific code in production, so Ryan explores some alternatives to testTag() and whether testTag() is an appropriate option.

Other Interesting Links

• Advanced Navigation with Jetpack Compose: A Comprehensive Guide
• Compose Multiplatform and the Native App Future
• Medium: Android Jetpack Compose — Part 2 : Lifecycle of composables
• Medium: Avoid White Background Glitches in iOS Dark Mode: The Importance of Using Surface as Your Root View in Jetpack Compose
• Medium: Create transition animations for Jetpack Compose
• Medium: Dialogs in Jetpack Compose
• Medium: Handling Nested Lists in Jetpack Compose: Avoiding Common Pitfalls
• Medium: Handling State in Jetpack Compose: Best Practices
• Medium: How to Create a Clock Wipe Animation in Jetpack Compose
• Medium: How to handle parameters and use @PreviewParameter in Jetpack Compose
• Medium: Jetpack Compose and collectAsLazyPagingItems
• Medium: KColor: A library to share color between Android and iOS in KMM
• Medium: Keep the dev and design teams in sync using Gradle tasks
• Medium: Mastering Recomposition in Jetpack Compose: Strategies for Optimal Performance
• Medium: Optimizing PDF Viewing with Jetpack Compose: LRU Cache and Custom Pagination
• Medium: Simple Guide to Extending Material 3 with Custom Colors
• Medium: Swipe to Delete with Jetpack Compose
• Medium: The Lifecycle of Jetpack Compose Composables vs. Android View Lifecycle: A Quick Dive
• Medium: Thinking Outside the Grid: Building Unique Layouts with Jetpack Compose
• Medium: Unlocking the Power of Jetpack Compose: 8 Common Pitfalls and How to Avoid Them for Maximum Efficiency

Resource Roundup

100% pure code!

Carbon Compose

Gabriel Derrien is building a Compose Multiplatform implementation of IBM’s Carbon design system, bypassing Compose Material/Material3.

GitHub: teogor / paletteon

Teodor Grigor offers us a library for dynamic color themes on Compose Multiplatform, based off of a supplied seed color.

GitHub: sergio11 / fudge_tv_compose_library

Sergio Sánchez Sánchez is working on a library offering an MVI framework and a TV Compose component library, with an emphasis on focus management.

GitHub: mohitsoni48 / aDp

GitHub user mohitsoni48 is building a library with .aSp and .aDp unit extension functions, designed to help some of your UI elements be non-responsive when the user changes screen zoom or text scaling. See this Medium post for the stated rationale.

Notable Releases

Maps for Compose released 6.1.2 (just updating a sample) and 6.1.3 (tweaking the activity to extend ComponentActivity instead of AppCompatActivity).

CashApp’s Redwood is up to 0.14.0. This offers built-in leak detection for key Redwood objects, moving event serialization to a background thread, and updates to use Kotlin 2.0.20, among other changes.

…And One More Thing

The utility of Compose for Web/JS and Web/Wasm is up for debate, but I fear that the debaters are talking past one another. For example, one argument against Compose for Web is that it is terrible for SEO. The assumption appears to be that SEO is always a criterion and perhaps the most important one.

🧐

The Web is vast, not only in terms of number of sites but also in terms of number of use cases. For example, if you are reading this post on the JetC Web site, this is a static HTML page with a minor amount of JavaScript (mostly in support of Bootstrap). I would never consider Compose for Web for this, though I could see using some future Jekyll competitor that was powered by Kobweb or Kilua. And, for this page, in theory SEO could be important, if I actually cared about SEO. 😅

On the flip side, consider the Figma Web app, or the Slack Web app, or GMail, or countless other Web apps. SEO is meaningless for these, partly because they are behind login walls, but also partly because they are apps. Sites for selling Figma, Slack, or Google Workspace need SEO, but the apps themselves do not IMHO. If I were tasked with building one of these, Compose for Web would be an option that I would consider, especially if I also needed desktop or mobile versions of the app.

IOW, “one size does not fit all” when it comes to Web front-end technologies. Compose for Web is a heavyweight solution that is suitable for some use cases but perhaps not others. SEO is a requirement that is suitable for some use cases but perhaps not others. Without a solid definition and scope of the development project, one cannot reasonably say whether Compose for Web is or is not a viable option, just as one cannot say whether SEO is important or not.