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

Jetpack Compose @ Swile: last year retrospective

Jetpack Compose @ Swile: last year retrospective

🙎 Benjamin ORSINI
🙎 Romain MOUTON

In this talk we look at the Jetpack Compose integration strategy in a multi-module app over the last year:

- Onboard a team on a new framework without strongly impacting the production cycle
- Manage Compose/XML/CustomView interoperability and vice versa in the context of a progressive migration
- (Re)write a design system and its components in 100% Compose

Benjamin Orsini

September 25, 2022
Tweet

Other Decks in Programming

Transcript

  1. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Cover title Jetpack Compose, last year retrospective Swile

    Android Team - 2022
  2. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Romain MOUTON @RomMout Android Dev @Swile Android since 2011

    🧗 Benjamin ORSINI @benjaminorsini Android Dev @Swile Android since 2010 󰣗
  3. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Swile and the Android app Our first Composable Hands-on

    : Design System, tooling Let’s take a step back Summary (slides will be available!)
  4. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf “ The card and app at the center of

    the employee engagement. ”
  5. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Swile app, today.

  6. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Swile app, numbers. - 6 Android devs - 4

    feature teams - No core team - 35+ modules - 150k Kotlin lines of code - 38k XML lines of code
  7. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Who has heard of Jetpack Compose? Who has ever

    tested Compose? Who is using Compose in production? Who has a full Compose app in production? Compose survey
  8. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Making Swile App Compose ready for production

  9. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf We have constraints… - Scale-up - Product evolves rapidly

    - Lots of features to maintain - Keep velocity high - Learning curve
  10. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf …so we need a plan. - Had open discussions

    with managers - Chose a first feature in internal beta for Swilers - It was ok 👍, we started progressive migration “May a fully-featured design system help us?”
  11. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf “ A Design System is the single source of

    truth which groups all the elements that allows teams to design, realize and develop a product. ”
  12. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Figma file From Design to Code Compose preview

  13. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf This is confidential. Keep it between us. Hands-on

  14. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf https://developer.android.com/jetpack/ compose/themes/custom#implementin g-fully-custom DSTheme Custom Theme

  15. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Colors Design system

  16. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Colors tip Design system

  17. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Typography Design system

  18. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Icons Design system

  19. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Icons Design system

  20. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Shapes Design system

  21. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf DSIconAvatar Design system

  22. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf DSIconAvatar Design system

  23. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf DSIconAvatar Design system

  24. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf DSIconAvatar Design system

  25. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf How we use it Design system

  26. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf How we use it Design system

  27. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf How we use it Design system

  28. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Layers DSColor DSTypo DSShape DSIcon DSTheme InfoBanner Screen :design-system

    :my-feature DSIconAvatar DSButton DS…
  29. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Interop 👉 ComposeView - Use Compose inside an android.View

    - Can be done inside existing XML or Fragment code
  30. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Interop 👉 ComposeView - Use Compose inside an android.View

    - Can be done inside existing XML or Fragment code
  31. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Interop 👉 AndroidView(Binding) - Use android.View or androidx.ViewBinding inside

    a Composable scope
  32. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Interop 👉 AndroidView(Binding) - Use android.View or androidx.ViewBinding inside

    a Composable scope
  33. This is confidential. Keep it between us. Code quality tools

  34. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Linter: Detekt - Detekt already set up doc -

    Update and configure Deteck to support Jetpack Compose guidelines doc - TopLevelPropertyNaming - FunctionNaming - LongParameterList - Respect API Guidelines for Jetpack Compose doc
  35. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Custom guidelines & lint rules - 1 @Composable +

    1 @Preview by file - 1 @Composable may expose interoperability - Use @PreviewParameter in order to be exhaustive doc - 2 @Composable maximum inside a Fragment/Activity - Custom lint rules - RoundedCornerShape to avoid duplication
  36. This is confidential. Keep it between us. UI quality tools

  37. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf https://www.droidcon.com/2021/11/17/keeping-your-pixels-perfect-paparazzi-1-0-2/ https://www.droidcon.com/2022/08/01/how-to-test-your-compose-ui/

  38. This is confidential. Keep it between us. Let’s take a

    step back
  39. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf

  40. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf

  41. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf

  42. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf

  43. It’s like a candy Easy Compose migration with interop’ 🤩

  44. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf The Good 🤩 - Reusability ++ - Powerful animation

    system + Android Studio integration - Easier code review (Kotlin vs XML) - New paradigm == motivation boost
  45. It’s like a drug Full compose preferred over interop 🙈

  46. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf The Bad 😕 - Maturity - Jetpack Compose Navigation

    - Steep learning curve + experimental - Performance: track down recomposition - Kotlin and Compose bumping version are linked (Fixed in version 1.7 and 1.2)
  47. It’s a trap Don’t rush tests?

  48. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf The Ugly 🙈 ✅ custom fonts & android:includeFontPadding (link)

    ⌛ back button behavior, TextField vs. EditText (link) ⌛ TextField below the soft keyboard (link)
  49. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Global satisfaction: 4.5/5

  50. 897bd865-aa7e-46fa-9bfa-7831c1dfc9bf Thank you! We are hiring!