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

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!