Recomposing our apps! Our migration to compose

This talk is about the journey to migrating Vodafone's apps from XML UI to Compose.
You can also read the article about it here: https://tech.gr.vodafone.com/post/re-composing-our-apps-inside-the-android-chapter

Transcript

1. Re-composing our apps! Our migration to compose Presented by Antonis Moustakos 17 October 2024
2. C2 General Who we are • 4 Apps under our wing • Chapter time to focus on R&D and personal growth • We aim in providing the best experience for our users using the latest tech and guidelines. • Task force of 3 engineers to read, learn and create a guide on how the chapter will migrate from XML UI to Compose • Focus on new screens, migrate old screens for training and awareness • Dedicated support channel for engineers • Constant feedback from team helped shape our Compose Guidelines
3. C2 General What is Jetpack Compose Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android.
4. C2 General Why Jetpack Compose is better No more XMLs!!
5. C2 General Why Jetpack Compose is better • Simplicity
6. C2 General Why Jetpack Compose is better (Simplicity) Compose makes it very simple to handle UI state. There is no more need to update the internal state of a view. This leads to reduced complexity and errors.
7. C2 General Why Jetpack Compose is better • Simplicity • Performance
8. C2 General Why Jetpack Compose is better (Performance) • Easier to make simpler UI structures • Redrawing (Re-composition) the UI is avoided as much as possible causing a smoother experience for the user. • Re-compositions can be easily checked through the layout inspector to find issues with your UI.
9. C2 General Why Jetpack Compose is better • Simplicity • Performance • Interoperability
10. C2 General Why Jetpack Compose is better (Interoperability) • Compose can be used in existing Activities/Fragments • Navigation Integration: Compose can be integrated with existing navigation graphs • View Interoperability: Compose can be used in XML and vice-versa (ComposeView, AndroidView) • Data Flow: Compose can work with existing data flow frameworks such as LiveData and Flow.
11. C2 General Why Jetpack Compose is better • Simplicity • Performance • Interoperability • Live edit
12. C2 General Why Jetpack Compose is better • Simplicity • Performance • Interoperability • Live edit • Easy animations
13. C2 General Why Jetpack Compose is better (Animation example) Set the rotation angle / animation specification Add modifier to rotate
14. C2 General Migration Dependenci es Theme To get things started we need to setup the dependencies and theme:
15. C2 General Time to make a screen! After some trial and error our screens are now comprised of the following: • a Fragment • a ViewModel • a UI state class • a UI transformer • a composable function In the following slides you will see how these work together in one of our screens (Vodafone eShop).
16. C2 General Screen structure - Fragment (1/8) Our fragment is very simple. It is used only for navigation and handling UI events.
17. C2 General Screen structure – UI State (2/8) Our state class is our single point of communication between the view model and the UI. Once the state is changed the UI gets updated automatically.
18. C2 General Screen structure – Views (3/8) To create our screen, we use multiple small views (UIView) that each has its own data class (UIViewData). The example on the right is of a generic text view we use for many different screens.
19. C2 General Screen structure – UI transformer (4/8) The transformer is responsible for converting domain data to UI data.
20. C2 General Screen structure – Screen (5/8) Our composable now looks like this:
21. C2 General Screen structure – Main view (6/8) Load all UIViewData into views: To find the proper view we simply filter:
22. C2 General Screen structure – View Model (7/8) Our view model. Used to fetch page data and transform to UI state.
23. C2 General Screen structure – Final result (8/8) Finally, our new screen looks like this: Header Generic Text view Generic Text view Footer view Categories view
24. C2 General Re-composing our apps! Scan the QR for the full article! Q&A!
25. C2 General Links • Compose • Thinking in Compose • Compose Phases • Collection of animations • Accompanist