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/
   

   View Slide

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
   

   View Slide

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/
   

   View Slide

4. Is Compose Ready for Production?
   ● Compose Latest Stable Release: 1.2.1, Beta Release:
   1.3.0-beta02
   https://www.rivu.dev/
   

   View Slide

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/
   

   View Slide

6. Why Should We care?
   ● Developer Perspective
   ○ Write better debuggable and functional UI code
   https://www.rivu.dev/
   

   View Slide

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/
   

   View Slide

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/
   

   View Slide

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/
   

   View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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>, 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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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)
    })
    }
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

30. Thanks!
    Rivu Chakraborty
    Twitter: @rivuchakraborty
    Website: https://rivu.dev
    

    View Slide