Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose interoperability challenges and how to ...

Compose interoperability challenges and how to face them!

Migrating an existing codebase to Compose can be long and full of surprises! In this transition period your Compose code and your View-based UI will live together side by side.

Using real-life examples from our Compose migration journey, this talk will unveil practical solutions you can use to tackle all these interoperability challenges. From the helpful CompositionLocalProvider to communicate with View-based code to tips and tricks for seamless navigation integration, and leveraging the best of the Kotlin language, you will be ready to face them all by the end of the session.

Julien Salvi

February 28, 2025
Tweet

More Decks by Julien Salvi

Other Decks in Programming

Transcript

  1. Compose interoperability challenges Julien Salvi - Android GDE | Android

    @ Aircall DevFest Stockholm 2025 󰐴 @jusalvi.bsky.social and how to face them! 🤓
  2. Julien Salvi Android @ Aircall Android GDE PAUG, Punk &

    IPAs! @jusalvi.bsky.social Bonjour !
  3. Migrating to Compose A little bit of context… A little

    bit of context… Which strategy to adopt? 🧐
  4. Happy is a happy developer! But to be happier, they

    want to use Compose in their applications
  5. Migrating to Compose Which strategy? • Developers or teams can

    face 3 different scenarios when migrating to Compose: From scratch Migrating all at once because the app is small enough Introduce Compose step by step for big apps
  6. Happy has a huge codebase! Let’s see how to gradually

    introduce Compose in a project 💻
  7. Migrating to Compose Migration Plan • Key pillars of the

    migration plan you should keep in mind: ◦ Architecture ◦ Navigation ◦ Interoperability ◦ Testability • Let’s explore some tips to best achieve the Compose migration
  8. Interoperability tips A little bit of context… A little bit

    of context… To avoid (bad) surprises when migrating 🙈
  9. Architecture assessment ⚙ Is your app Compose ready? • Before

    migrating your entire app to Compose make sure the architecture you are using fits the Compose paradigms • Avoid architectures that depend on mutable shared state or bidirectional data binding when working with Compose • Let’s take the example of our architecture move 💡
  10. Architecture assessment ⚙ LiveData vs StateFlow • LiveData can be

    used with Compose without any issue but are very platform specific • To have a more agnostic approach consider using StateFlow (Kotlin lib) that can be safely collected in Compose screens. • LiveData and StateFlow can coexist well together for transition purposes but favor a full usage of StateFlow 💡
  11. Theming 🎨 Colors and dimens • Composable and View components

    will have two distinct theming implementations (code vs xml) • If the app strictly relies on Material theme, the interop between the themes can be straightforward matching the colors • If using a custom theme no magic tricks to ease the migration unfortunately 🥲
  12. Theming 🎨 Material Components • Not all Material View Components

    have been migrated to Compose yet • And some Composable are missing features that were existing in the View system components • Let’s take the example of the DatePicker 💡
  13. Navigating with Compose 🧭 Check current nav • Assess your

    current navigation system inside your app (the complexity of the graph, which components…) • If you are using androidx navigation with Fragment, keep the Fragment as holder till end of the migration and then remove all the Fragments to be full Compose (easiest transition) • Custom navigation == Custom problems 😅
  14. Navigating with Compose 🧭 Compose Nav • We decided to

    go with Voyager for our Compose Navigation system as it has many benefits: ◦ Great API that fits our needs ◦ Easy multi module navigation with ScreenRegistry ◦ Type safe navigation
  15. Navigating with Compose 🧭 Feature isolation • Currently, a global

    router manages the navigation between Activity, Fragments, modals and external links • The router has its own stack and is very tight to the View framework • So how to introduce our new Compose navigation that can coexist with the current one? 💡
  16. Navigating with Compose 🧭 Feature isolation • We decided to

    fragment the app per Universe where each “Universe” is an Activity that is used in the application • Once all Fragments and BottomSheets have been migrated, you can now get rid of the fragments in each “Universe” and use the new Compose nav safely. • The old router will only be there to open new Activity but inside it full Compose
  17. Communication 📡 Compose to View • During the migration you

    might want to send events to your View components (Acitivity, Fragments…) • Example: the feedback alert system was not migrated yet but needed to be trigger from Compose code • Let’s see how to do it thanks to CompositionLocal 💡
  18. Testing • Make sure you keep your screen testable •

    Compose has a great API to add test tags to your Composable • Try to keep the same tag ID from View to Compose to ease the migration • If a QA team is in charge of the UI tests, sync early and make a POC UI tests
  19. Testing • Layout inspector is great to check the Compose

    tree or the recomposition counts in your apps • Works perfectly with a mix of View and Compose • Here are 2 tips to keep in mind 💡 Layout inspector
  20. Testing • 💡Not seeing Composable in layout inspector? ◦ Make

    sure you are not removing META-INF/androidx.compose.*.version file from the APK • 💡Application is crashing with layout inspector? ◦ Don’t use semantics(mergeDescendants = true) in your base Composable component (e.g. Scaffold) Layout inspector
  21. Compose interoperability Migrate to Compose https://developer.android.com/develop/ui/compose/migrate Interoperability APIs https://developer.android.com/develop/ui/compose/migrate/interoperability-apis Coupling

    Compose - interoperability in a legacy codebase https://www.droidcon.com/2023/10/06/coupling-compose-interoperability-in-a-legacy-codebase/ Migrating to Jetpack Compose - an interop love story https://medium.com/androiddevelopers/migrating-to-jetpack-compose-an-interop-love-story-part- 1-3693ca3ae981