Migrating to Compose | DevFest Bangalore 2022

While Developing Apps, following a Reactive Architecture (for example MVI, Mobius, Redux, and even MVVM) & Single Source of Truth can get you some big wins including but not limited to, Loose Coupling & Separation of Concerns, Code Testability, and easy debugging, unidirectional data, etc. However, unlike Web, where Reactive Architectures are the norm, in
Android, however, Reactive Architecture wasn’t natural till the UI layer, until Compose that is.
Using Compose would require a radical shift in our thought process about app architectures and the way we manage UI. Not only we’ll have to let go of the habit of calling `findViewById`, but we’ll also need to become accustomed to have our UI completely controlled by states, instead of having multiple flags here and there in the Activity.
Not only that, but the way we manage screens will also be affected, we’ll now have to consider having a Single Activity/Fragment while basing the navigation/Screens completely on Compose functions.
Now, if you’re developing an App from scratch, addressing the above concerns is comparatively easier than when you need to adopt/migrate to Compose in an existing app.
In this session, we’ll talk about what could be the best strategies for adopting/migrating to Compose in different kinds/sizes of apps. We'll talk about challenges you might face while migrating some existing screens to Compose.
Are you thinking is it the best time to invest in Compose? We’ll also talk about that.

*Short Description: *In this session, we'll talk about the best strategies to migrate/adopt Compose in your existing app. We'll talk about the challenges you might face doing so.

Transcript

1. Migrating to Compose Bangalore Rivu Chakraborty Kotlin GDE | Lead Engineer @ Meesho https://www.rivu.dev/
2. https://www.rivu.dev/ A bit about me • Rivu Chakraborty • Lead Android Engineer (SDE-IV) @ Meesho • GDE for Kotlin • Author, Speaker, Community Person • Ex - Gojek, Paytm [Insider], Byjus https://rivu.dev @rivuchakraborty
3. Topics to Discuss • Is Compose ready for Production? • Why should we care? • Is Compose right for us? • How should we plan? • Do we need a new Arch for using Compose? • What are the things to watch out for? https://www.rivu.dev/
4. Is Compose Ready for Production? • Compose Latest Stable Release: 1.2.1, Beta Release: 1.3.0-beta02 https://www.rivu.dev/
5. Is Compose Ready for Production? • Compose Latest Stable Release: 1.2.1, Beta Release: 1.3.0-beta02 • Apps started using / completely migrated to Compose: ◦ Google Play Store ◦ Twitter ◦ Airbnb ◦ Monzo ◦ Disney+ Hotstar ◦ Byju’s ◦ Meesho (soon) More details here: https://developer.android.com/jetpack/compose/why-adopt#testimonials https://www.rivu.dev/
6. Why Should We care? • Developer Perspective ◦ Write better debuggable and functional UI code https://www.rivu.dev/
7. Why Should We care? • Developer Perspective ◦ Write better debuggable and functional UI code ◦ Ability to utilise complete Reactive patterns throughout the App https://www.rivu.dev/
8. Why Should We care? • Developer Perspective ◦ Write better debuggable and functional UI code ◦ Ability to utilise complete Reactive patterns throughout the App ◦ Less logic in Activity https://www.rivu.dev/
9. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Developer Perspective ◦ Write better debuggable and functional UI code ◦ Ability to utilise complete Reactive patterns throughout the App ◦ Less logic in Activity ◦ Option to go for Single Activity, with screens separated by Compose https://www.rivu.dev/
10. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Developer Perspective ◦ Write better debuggable and functional UI code ◦ Ability to utilise complete Reactive patterns throughout the App ◦ Less logic in Activity ◦ Option to go for Single Activity, with screens separated by Compose ◦ Can be an incremental migration with Interoperability https://www.rivu.dev/
11. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Can be an incremental migration with Interoperability composeView.apply { setViewCompositionStrategy(DisposeOnViewTreeLifecycleDestroyed) setContent { MyTheme { ProductDetail(/*params*/) } } } https://www.rivu.dev/
12. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Product / Manager Perspective ◦ UI being better debuggable and unit testable, less possibility of bugs?? https://www.rivu.dev/
13. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Product / Manager Perspective ◦ UI being better debuggable and unit testable, less possibility of bugs?? ◦ Easier to write Declarative UI => Less time fixing that 5dp margin 🤪 https://www.rivu.dev/
14. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Product / Manager Perspective ◦ UI being better debuggable and unit testable, less possibility of bugs?? ◦ Easier to write Declarative UI => Less time fixing that 5dp margin 🤪 ◦ Server Driven UI https://www.rivu.dev/
15. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Server Driven UI class ProductDetailsComponent(val product: Product) : ComposableElement { @Composable override fun Compose(hoist: Map<String, MutableState<State>>, modifier: Modifier) { val state = remember { mutableStateOf(MyDataClass(qty = 0)) } ConstraintLayout(modifier) { val startGuideline = createGuidelineFromStart(16.dp) val endGuideline = createGuidelineFromEnd(16.dp) val (discountText, image, name, price, stepper, description) = createRefs() Discount(modifier = Modifier.constrainAs(discountText) { https://www.rivu.dev/
16. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Server Driven UI https://www.droidcon.com/2021/11/10/a-page-out-of-server-driven-ui-on-android/ https://www.rivu.dev/
17. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Product / Manager Perspective ◦ UI being better debuggable and unit testable, less possibility of bugs?? ◦ Easier to write Declarative UI => Less time fixing that 5dp margin 🤪 ◦ Server Driven UI ◦ Can be an incremental migration with Interoperability https://www.rivu.dev/
18. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Why Should We care? • Product / Manager Perspective ◦ UI being better debuggable and unit testable, less possibility of bugs?? ◦ Easier to write Declarative UI => Less time fixing that 5dp margin 🤪 ◦ Server Driven UI ◦ Can be an incremental migration with Interoperability -- With Compose for Desktop and Web now in Alpha, in near future, coupled with KMM, can be a good bet against Cross-platform Frameworks https://www.rivu.dev/
19. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Is Compose right for us? Short Answer: YES Broad Answer: YES https://www.rivu.dev/
20. “Simple statement, URL or quote goes here. Limit text to four lines or less.” How Does Compose UI Code look like? ConstraintLayout(modifier.fillMaxWidth()) { val (titleText, subtitleText, seeAllText, cardsRow) = createRefs() Text( text = productCarouselState.heading, fontSize = 18.sp, fontWeight = FontWeight.Light, fontFamily = LarkenFonts, modifier = Modifier.constrainAs(titleText) { top.linkTo(parent.top, 16.dp) start.linkTo(parent.start, 16.dp) } ) Text( text = productCarouselState.subTitle, https://www.rivu.dev/
21. “Simple statement, URL or quote goes here. Limit text to four lines or less.” How should we plan? • General Suggestion ◦ Move to a State based Arch ◦ Start migration atomically screen by screen https://www.rivu.dev/
22. “Simple statement, URL or quote goes here. Limit text to four lines or less.” How should we plan? • We have a design System (Custom Views for each Component) ◦ Start replacing the simplest Views (e.g. CustomTextView) ◦ From product side follow the previous steps to atomically migrate to Compose https://www.rivu.dev/
23. “Simple statement, URL or quote goes here. Limit text to four lines or less.” How should we plan? • Is ComposeView compatible with RecyclerView? ◦ If your Compose version is below 1.2.0-beta02 or RecyclerView version is below 1.3.0-alpha03, follow this link: https://medium.com/androiddevelopers/jetpack-compose-interop-using-c ompose-in-a-recyclerview-569c7ec7a583 https://www.rivu.dev/
24. “Simple statement, URL or quote goes here. Limit text to four lines or less.” How should we plan? • I have a 4000 lines View Class ◦ Keep that class for last item to Migrate ◦ Try to break down the logic to properly organise them, and if possible in separate classes ◦ Write Unit (if possible) and UI test cases to verify existing functionality ◦ Rewrite the View in Compose and run the test cases https://www.rivu.dev/
25. “Simple statement, URL or quote goes here. Limit text to four lines or less.” Do we need a new Arch for using Compose? • Short Answer: No • Time investment required in State Management? Yes https://www.rivu.dev/
26. “Simple statement, URL or quote goes here. Limit text to four lines or less.” What are the things to watch out for? • Recursive Recomposition -> Happens when you update the state of a Compose from inside the function moviesState.movies.isNotEmpty() -> { ListScreen(moviesState.movies, onMovieClick) searchState.value = SearchState.SearchTyped(moviesState.query) } //... searchState.value is SearchState.Typing -> { SearchScreen(hint = "Search Movies", onSearch = { searchState.value = SearchState.SearchTyped(it) onSearch(it) }) }
27. “Simple statement, URL or quote goes here. Limit text to four lines or less.” What are the things to watch out for? • Recursive Recomposition -> Happens when you update the state of a Compose from inside the function https://github.com/RivuChk/Jetpack-Compose-MVI-Demo/issues/1 https://www.rivu.dev/
28. “Simple statement, URL or quote goes here. Limit text to four lines or less.” What are the things to watch out for? • Recursive Recomposition -> Happens when you update the state of a Compose from inside the function • Too much logic in Compose Functions https://www.rivu.dev/
29. This is an example of section title Resources • Jetpack Compose: Missing piece to the MVI puzzle? by Garima Jain: https://medium.com/google-developer-experts/je tpack-compose-missing-piece-to-the-mvi-puzzle-4 4c0e60b571 • Jetpack Compose - MVI Demo Project: https://github.com/RivuChk/Jetpack-Compose-M VI-Demo • Compose Academy: https://compose.academy/ • Jetpack Compose internals 📖 by Jorge Castillo: https://jorgecastillo.dev/book/ https://www.rivu.dev/
30. Thanks! Rivu Chakraborty Twitter: @rivuchakraborty Website: https://rivu.dev