Retrofitting Legacy Code with Jetpack Compose at Scale

Jetpack Compose sounds great on paper, but how does it work on Android projects with tons of existing code, features, and modules?

Spoiler: it works quite well! At Monzo, we adopted Compose while it was in alpha, and we’ve scaled our implementation across many of our hundreds of feature modules.

We’ve trained up our developers, and have gained incredible speed when delivering new features because of Compose. Our product managers are still shocked at how fast we can be!

Here’s what you’ll be able to take away from this talk:
- Why you should consider Compose for new and existing projects of any size
- The real-world advantages of Compose over the existing View system
- What building a custom design system in Compose can do for your team
- Some things to look out for when adopting Compose with existing View UI
- Tips on how to sell Compose to your team and managers!

Transcript

1. Retrofitting Legacy Code with Jetpack Compose at Scale By Ryan Simon
2. Jetpack Compose is Awesome • Declarative • UI in Kotlin • Intentional state • Obvious side-effects • Recommended UI toolkit for Android*
3. How a stack of pancakes… class PancakeStackAdapter : ListAdapter<Pancake, PancakeViewHolder>(PancakeDiffCallBack()) { class PancakeViewHolder(itemView: View) : ViewHolder(itemView) { fun onBind(pancake: Pancake) { // todo: view binding code } } // todo: need a viewholder for toppings private class PancakeDiffCallBack : DiffUtil.ItemCallback<Account>() { override fun areItemsTheSame(oldItem: Pancake, newItem: Pancake): Boolean { return oldItem.id == newItem.id } override fun areContentsTheSame(oldItem: Pancake, newItem: Pancake): Boolean { return oldItem == newItem } } // todo: more overrides } // todo: need to add XML for RecyclerView
4. @Composable fun PancakeStack(pancakes: Stack<PancakeModel>) { LazyColumn(modifier = Modifier.fillMaxSize()) { item { Topping() } items(items = pancakes, key = { it.id }) { pancake -> Pancake() } } } What a stack of pancakes…
5. “Imagine if Compose was taken away and you had to use Views. How would you feel?”
6. Why we adopted Compose • New internal design system • Simplify reusing UI across app / squads • Figma -> Code is easier • Decouple stateful code • Great dev enthusiasm
7. Stateful vs Not Stateful @Composable fun PancakeScreen(viewModel: PancakeViewModel) { val state by viewModel.collectState() PancakeContent(state) } @Composable fun PancakeContent(state: State) { when (state) { Error -> { Text("Uh oh") } Loading -> { CircularProgressIndicator() } Success -> { Text("Pancakes!"} } }
8. Our migration strategy • Alpha good enough • No Material Design • Compose on new work • ComposeFragment • Demos to team
9. Compose + Existing UI • View Interop • Integrate via Fragments • Compose Theme separately
10. Results of adoption • Speed • Dev experience ++ • Animations • Easier UI testing
11. Compose Reduces Complexity
12. Things to look out for • Missing pieces (roadmap) Material component parity with View version Autosize text Drag and drop support in LazyList Type-safe navigation
13. Things to look out for • Material may not work for you • Compose thought process • Can’t really hack things • Selling management • Missing pieces
14. Getting team buy-in • Better dev experience • Easy learning curve • Show examples
15. Getting management buy-in • Improve productivity • Attract talent • Better collaboration • Low risk
16. Imagine a world where everyone in this room adopted Compose.
17. Q&A