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

Migrating to Compose | DevFest Bangalore 2022

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.

Rivu Chakraborty

September 17, 2022
Tweet

More Decks by Rivu Chakraborty

Other Decks in Technology

Transcript

  1. Migrating to
    Compose
    Bangalore
    Rivu Chakraborty
    Kotlin GDE | Lead Engineer @ Meesho
    https://www.rivu.dev/

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide