jetc.dev Newsletter Issue #117

Published: 2022-05-24

beta02 is out already for Compose and Wear Compose!

We also look at Canvas() including animating its rendered output. We examine Google Fonts, MVI, and composables that return stuff. We look at some Detekt rules for coding style and an experiment in generating PowerPoint presentations from composables. And I look at a possibly-forthcoming library from the fine folks at Block that does a Compose UI… without Compose UI.

Beta Breakdown

Reviewing the release notes for the latest Jetpack Compose update!

Surprisingly, we already have 1.2.0-beta02!

One change seen in the commits, if not the actual released artifacts, is that we may soon have a new runtime-tracing library at our disposal. This adds Perfetto traces to Compose, though it appears that we may need some Studio improvements to take advantage of this.

Beyond that, though, very little shows up in the 1.2.0-beta02 release notes.

Wear Compose also has a beta02 release. Mostly, this has bug fixes, though it also changes the various Chip() composables to be sized according to their contents by default, rather than always having their width fill the container.

One Off the Stack, One Off the Slack

You’ve got questions. That’s understandable!

I wasn’t a fan of any of the answered Stack Overflow questions this week, so let’s head right to Slack!

Are Large State Classes Performant?

Is it better to have larger classes used in fewer State objects, or smaller classes used in more State objects? As often is the case, the answer is “it depends”, but see what Google’s Leland Richardson thinks in this week’s highlighted Kotlinlang #compose Slack thread.

Composable Commentary

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

Medium: Custom Canvas Animations in Jetpack Compose

Google’s Rebecca Franks looks at Animatable and using it to control the angle and color of a rounded rectangle drawn on a Canvas(), as a demonstration of how much easier basic animated effects are in Compose UI.

5 steps to Google Fonts in Jetpack Compose

Joe Birch is back, exploring using GoogleFont.Provider to obtain fonts from Google Fonts and use them with FontFamily and Text() to render text in a requested font.

Medium: Managing Jetpack Compose UI State With Sealed Classes

Lucca Beurmann writes about using sealed classes to represent view states, such as the classic loading/content/error state triad. Lucca reviews how you emit and react to those states, previewing composables based on state, and writing tests for these different types of state.

Composable functions and return types

James Shvarts returns, looking at the naming conventions behind composable functions and how that ties into whether the function returns Unit or something else. If your reaction to that is “all composable functions should return Unit“… you probably want to read this post!

Custom Progress Bar with Jetpack Compose Canvas API

Ishan Khanna examines the Canvas() API, in this case using drawArc() and other functions to implement a progress indicator that is an arc instead of a complete circle.

Medium: MVVM vs MVI for Jetpack Compose

Jesús Daniel Medina Cruz explores MVI and compares it to one flavor of MVVM, emphasizing MVI’s approach to having a unidirectional data flow. Jesús specifically examines Orbit-MVI as a way of reducing the boilerplate required of an MVI implementation.

Medium: A cleaner way to interact between Composable and ViewModel in Jetpack Compose

Saurabh Pant also takes a look at MVI, but focusing on supplying UI events to a common function on a viewmodel, rather than calling dedicated functions representing those events.

Other Interesting Links

• Medium: LazyColumn with indexing for Jetpack Compose
• Medium: Jetpack Glance Part5: Widget State and Preference
• Medium: Migrate to Jetpack Compose from XML
• Medium: Android Custom Dialog using jetpack compose

Resource Roundup

100% pure code!

GitHub: appKODE / detekt-rules-compose

The KODE team has put together a half-dozen rules for Detekt that help enforce composable coding conventions, such as where modifier goes in the parameter list and suggesting heightIn() for composables containing Text() nodes.

GitHub: Decathlon / vitamin-compose

The Decathlon team has a custom design language and corresponding design system (Vitamin). This library implements that design system as an extension of Compose Material.

GitHub: fgiris / composePPT

Fatih Giriş released a toolkit for creating PowerPoint presentations (PPTX files) using composables, because what the world needs is more PowerPoint presentations.

🤔

Regardless of your opinion of PowerPoint decks, this is a great demonstration of using Compose for things other than Compose UI-based user interfaces.

GitHub: aclassen / ComposeReorderable

Andre Claßen brings us a ReorderableLazyListState and a reorderable() modifier to allow a LazyColumn() or LazyRow() to have its items be reordered. Andre’s library also has support for reordering items in a LazyGrid() using a related mechanism.

Other Interesting Links

• GitHub: devDebajo / staggered_lazy_column (staggered grid)
• GitHub: raipankaj / Chip (text with rounded rectangle background)
• GitHub: akshay2211 / rang-vikalp (minimalist color picker)
• GitHub: ivaniskandar / compose-fastscroller (FastScroller ported from RecyclerView)
• GitHub: ch4rl3x / settings-compose (preferences-backed composable widgets)

…And One More Thing

Some of the most interesting innovation in Compose comes from projects applying Compose to things beyond the official Compose UI. Some of that is official, such as Glance for app widgets and Wear OS tiles. Some of that is from the community, such as Jake Wharton’s Mosaic, a console UI powered by Compose, or molecule, CashApp’s library for having composable functions be the driver of content through a Flow.

They seem to be at it again, this time with a project named “redwood”.

Based on Jake’s description in Kotlinlang Slack, redwood is a Compose-powered UI engine, but not using the official Compose UI framework. Rather, redwood expects you to provide the underlying implementations of a design system, down to how you intend that to be rendered in some UI toolkit. The redwood project lets you build UIs using that design system.

In theory, Compose UI can implement any design system. In practice, Compose Material is the only realistic choice if you want something that works “out of the box”. If you want to deviate from what Compose Material gives you, you wind up having to implement lots of composables from scratch, perhaps using the Compose Material implementations as inspiration. It would appear that the redwood project is saying “well, if you have to do all of that, use a framework designed around that premise”. The downside is a lot of custom code to maintain, but you get absolute control as a benefit.

From the description, it sounds like they hope that redwood will be released as open source before the end of 2022, probably late in the year. The quality of the open source projects from Square and CashApp is exceptionally high, so it will be interesting to see what redwood turns out to look like and whether it is something that might become popular.