jetc.dev Newsletter Issue #132
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,
Some new experimental focus APIs, plus some deprecations (
FocusDirection.Outare deprecated, being replaced by
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
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
#compose Slack thread.
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
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
AnimatedTransitionDialog() wrapper around
Dialog(), offering enter and
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 !!!
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)
Or, you can subscribe to the Atom feed or follow Mark Murphy in the Fediverse.
- 2023-05-30: Compose beta! Tracking continuous composable presses! Animated carousels! MVI! 2D scrolling layouts! Tables! And... a stable function?!?
- 2023-05-23: Focus and preview cards for Compose for TV! Interactions and visual states! ViewCompositionStrategy! Compose for iOS, for real! @email@example.com is zooming! Data tables! And... BasicTextField2, the sequel?!?
- 2023-05-16: Google I/O! New Compose BOM and alpha! Viewmodels! BottomScaffold()! SealedX! Lottie! Dynamic themes! Floating action menus!