jetc.dev Newsletter Issue #132

Published: 2022-09-13

We received some Compose updates, including a new tracing library!

Beyond that, the focus this time is on over-composing: using tools to track it down and using lambdas to try to limit the effect. We also see a molecule of a redwood, a maestro doing testing, and what Twitter thinks of your composables.

Ooooo… What Did We Get?

Reviewing the release notes for the latest Jetpack Compose update!

Compose Compiler is up to 1.3.1, with bug fixes.

The rest of Compose has a 1.3.0-beta02 release… mostly. Among other things, it includes:

• An experimental StaggeredGrid()

• A new rememberSnapFlingBehavior()

• Some new experimental focus APIs, plus some deprecations (FocusDirection.In and FocusDirection.Out are deprecated, being replaced by FocusDirection.Enter and FocusDirection.Exit)

• A new overload of Layout(), supporting multiple content lambdas

There is a new androidx.compose.runtime:runtime-tracing artifact, out in 1.0.0-alpha01 state. It is described as:

…a library which - in the presence of tooling supporting it (coming soon) - allows for extended tracing in a Compose app

Wear Compose has a new 1.1.0-alpha05 release. Partly, this improves Talkback support for InlineSlider() and Stepper(). It also includes a fix for the Z-index order of position and page indicators, layering them atop of any vignette. That particular change also is available in a 1.0.2 patch release.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

Why Does My Composable Keep Recomposing?

Over-composition is an ongoing problem with Compose development — there are multiple items in this issue covering this topic. Here, we look at the problem from the standpoint of composition scopes: where you read state determines what will get recomposed, in this week’s highlighted Stack Overflow question.

How Can I Avoid LaunchedEffect() Restarting?

LaunchedEffect() restarts when you re-enter a composable, such as after navigating away and returning. That’s unavoidable, but with a bit of creativity, you can negate the initial impact of the restarted effect, as we see in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Jetpack Compose: Debugging Recomposition

Google’s Ben Trengrove explores how to identify over-composition problems using Android Studio’s recomposition counter. Ben addressed a specific performance problem by converting some composable parameters to be lambda expressions, to reduce unnecessary recompositions. Ben’s analysis is also available in a video.

Medium: Debugging and fixing a huge Jetpack Compose performance problem in my Sudoku-solver app

Chris Ward was also encountering performance problems, also used Electric Eel’s recomposition counts feature, and eventually concluded that the problem stemmed from List being read-only but not immutable.

How to automate your UI testing using Maestro

Maestro is a new solution for scripted testing of Android and iOS apps. Alex Styl took a look at it and explains how to use Maestro for testing your Compose UIs.

Slides: Native UI with Multiplatform Compose

Jake Wharton and Jesse Wilson delivered a presentation for droidcon NYC on redwood, CashApp’s approach for using composables to drive UIs from design systems, where those design systems are not limited to Compose UI constructs.

Molecule: Build a StateFlow stream using Jetpack Compose

Benoît Quenaudon walks us through the use of Molecule for populating a Flow by means of a composable function. Mohit Sarveiya delivered a presentation on this same subject at droidcon NYC — here are the slides.

Medium: Expanding Dialog in Jetpack Compose

Katie Barnett wanted to apply a custom animation for a dialog becoming visible, rather than the typical “wink into existence” that we normally settle for. Katie whipped up an AnimatedTransitionDialog() wrapper around Dialog(), offering enter and exit animations.

Other Interesting Links

• Slides: What does Recomposition mean to your app?
• Medium: Auspost delivers on Jetpack Compose
• Stateful vs Stateless Composables
• Medium: Android app widgets with Glance
• Medium: Create Animated Splash Screen in Jetpack Compose
• Navigation Drawer using Jetpack Compose
• Jetpack Compose: State Management
• Medium: Simple Profile App Example in Jetpack Compose
• Medium: Android Compose UI Toolkit
• Medium: Jetpack Compose, It’s Time to Adopt !!!

Resource Roundup

100% pure code!

GitHub: twitter / compose-rules

Twitter (yes, that Twitter) has published a library of ktlint rules (and a Detekt plugin) for their Compose programming style guide. See their rules documentation for what these rules report. Anyone interested in creating a Twitter bot that applies these rules to composables written in tweets? 😁

GitHub: alorma / Compose-Debug-Drawer

Bernat Borrás Paronella brings us a DebugDrawerLayout() composable that implements a “debug drawer”, whose contents are built up from a set of modules that you can enable as needed.

GitHub: commandiron / WheelPickerCompose

iOS has popularized the “wheel picker” UI pattern. Emir Demirli offers us a series of picker composables implementing that UI pattern, for dates, times, date/times, text, or your own custom composables.

GitHub: mukeshsolanki / android-otpview-pinview

Mukesh Solanki released a library with an OtpView() composable for the common digit-at-a-time UI used for PIN codes or one-time pad (OTP) values.

Other Interesting Links

• GitHub: HedvigInsurance / FlexboxCompose (Yoga-based flexbox implementation)
• GitHub: kiwicom / navigation-compose-typed (type-safe Navigation for Compose arguments)
• GitHub: SmartToolFactory / Compose-Color-Picker-Bundle (lots of color pickers)
• GitHub: Raed-Mughaus / compose-color-picker (another color picker)