Building a component library in Compose for a large banking application

Talk about building a component library in Compose for DNB Bank held at Droidcon in San Francisco on June 8.

Transcript

1. Building a component library in Compose for a large-scale banking application Odin Asbjørnsen Android Developer @ DNB
2. What this talk is • Opinionated way that made Compose work for us • Not meant as a blueprint for other projects
3. What this talk is • Your journey will be different
4. Agenda • Who is DNB Bank? • Starting the Jetpack Compose initiative • Eufemia design system • Design system architecture • Building a component library with Compose • Making sure we deliver components with banking level quality • Release & dependency management • Learnings and challenges
5. Who is DNB Bank?
6. Who is DNB Bank? • Bank in Norway, Europe • We help millions of people move billions of NOK every day • Both within private and business banking • Of fi ces around the world
7. Who is DNB Bank? • Most used mobile bank in Norway • We provide • Mobile bank services • Fund trading services • Pension services • Loan services • ++
8. Who is DNB Bank? • 3 mobile banking applications + web applications • MobileBank • Spare • Bedrift
9. Who is DNB Bank?
10. Who is DNB Bank?
11. Who is DNB Bank?
12. Starting the Jetpack Compose initiative
13. Starting the Jetpack Compose initiative • Started early last year • How can we make UI development faster? • How do we start using Compose in our applications?
14. Starting the Jetpack Compose initiative • Change of mindset • Declarative programming style • Held workshops with teams adopting Compose • Heavy code reviews
15. Starting the Jetpack Compose initiative • Two apps where using xml with Epoxy from AirBnb
16. Starting the Jetpack Compose initiative
17. Starting the Jetpack Compose initiative • Monolithic repo with different architecture • One app had single activity architecture • One app had multiple activity architecture • One app is not part of mono-repo • They all used one design system
18. Eufemia Design System
19. Eufemia Design System https://eufemia.dnb.no/
20. Eufemia Design System • Open-source design system • Shared with web, iOS and Android • Setup to follow industry regulatory standards for A11y • Maintained by a group of developers and designers
21. How to implement Eufemia in Compose?
22. How to implement the design system? Compose UI
23. How to implement the design system? Compose UI Compose Foundation
24. How to implement the design system? Compose UI Compose Foundation Compose Material
25. How to implement the design system? • You can use Material out of the box • Can make your own based on Compose foundation • We needed to compliant with Eufemia • Tried to wrap Material
26. How to implement the design system? • Wrapping Material • Made it easy to start • Components where well tested • It was quite close to Eufemia
27. Eufemia design in Android • Internal platform speci fi c version of Eufemia • View and Compose support • Not 1 to 1 with Material • Colours and Typography is different
28. How to implement the design system? Eufemia App1 App2 uses uses
29. How to implement the design system? Eufemia App1 App2 uses uses
30. How to implement the design system? Eufemia App1 App2 uses uses uses Theming Atoms
31. How to implement the design system? Eufemia App1 App2 uses uses uses Theming Atoms
32. How to implement the design system? Theming • Supporting 30 different colour palettes for our apps
33. How to implement the design system? Theming • Contains all our colours • Have our own colour class • Provided through a colour palette
34. How to implement the design system? Theming @Stable public class EufemiaColors()
35. How to implement the design system? Theming @Stable public class EufemiaColors( interaction: Color, interactionLight: Color, interactionDark: Color, background: Color, surface: Color, surfaceBackgroundPrimary: Color, surfaceBackgroundSecondary: Color, highlightSurface: Color, highlightOnSurface: Color, textPrimary: Color, textSecondary: Color, accessory: Color, *** ** * )
36. How to implement the design system? Theming public val LightEufemiaColorPalette: EufemiaColors = EufemiaColors( interaction = SeaGreen, background = LightGrey, surface = White, surfaceBackgroundPrimary = OceanGreen, surfaceBackgroundSecondary = EmeraldGreen, highlightSurface = OutlineGrey, highlightOnSurface = CoalAlpha08, *** ** * )
37. How to implement the design system? Theming public val LightEufemiaColorPalette: EufemiaColors public val LightSagaEufemiaColorPalette: EufemiaColors public val DarkEufemiaColorPalette: EufemiaColors *** ** *
38. How to implement the design system? • Typography • Also provided through the theme • Providing a custom class that holds the compose text styles Theming
39. How to implement the design system? Theming public data class EufemiaTypography( )
40. How to implement the design system? Theming public data class EufemiaTypography( val title: TextStyle, val titleDemi: TextStyle, val titleEmphasized: TextStyle, val titleMedium: TextStyle, val titleMediumEmphasized: TextStyle, val titleLarge: TextStyle, *** ** * )
41. How to implement the design system? • Shapes • Also provided through the theme Theming
42. How to implement the design system? Theming @Immutable public class EufemiaShape( public val small: CornerBasedShape = RoundedCornerShape(4.dp), public val medium: CornerBasedShape = RoundedCornerShape(4.dp), public val large: CornerBasedShape = RoundedCornerShape(8.dp), )
43. How to implement the design system? Theming • How are these properties provided through the theme?
44. How to implement the design system? Theming @Composable public fun EufemiaTheme( overlayType: OverlayType, isNightMode: Boolean = isSystemInDarkTheme(), loyaltyProgram: LoyaltyProgram = ThemeServiceWrapper.get(), shape: EufemiaShape = EufemiaShape(), content: @Composable () -> Unit )
45. How to implement the design system? Theming @Composable public fun EufemiaTheme( overlayType: OverlayType, isNightMode: Boolean = isSystemInDarkTheme(), loyaltyProgram: LoyaltyProgram = ThemeServiceWrapper.get(), shape: EufemiaShape = EufemiaShape(), content: @Composable () -> Unit ) { * * * ProvideEufemiaColors( isNightMode = isNightMode, loyaltyProgram = loyaltyProgram, ) { CompositionLocalProvider( LocalEufemiaTypography provides provideTypography() ) { MaterialTheme( colors = getMaterialColors(isNightMode = isNightMode), content = content ) } } }
46. How to implement the design system? Theming public object EufemiaTheme { public val colors: EufemiaColors @Composable @ReadOnlyComposable get() = LocalEufemiaColors.current public val typography: EufemiaTypography @Composable @ReadOnlyComposable get() = LocalEufemiaTypography.current *** ** * }
47. How to implement the design system? Theming Text( text = title, style = EufemiaTheme.typography.bodyEmphasized, color = EufemiaTheme.colors.textPrimary, )
48. How to implement the design system? Eufemia App1 App2 uses uses uses Theming Atoms ✅
49. How to implement the design system? Atoms • Atoms are the fundamental building blocks • Buttons • Chips • Checkbox • ++
50. How to implement the design system? Atoms • Atoms have their own fi gma instance • Designers need approval to add atoms • These are speci fi c for platform
51. Eufemia design in Android • Providing a design system for 3 different apps + other libraries • A lot of similar components • Keeping it consistent through the DNB domain
52. Building a component library in Compose
53. Building a component library in Compose • What is a component library?
54. Building a component library in Compose Eufemia App1 App2 uses uses uses
55. Building a component library in Compose Eufemia Component library App1 App2 uses uses uses
56. Building a component library in Compose Atom
57. Building a component library in Compose Atom Molecule uses
58. Building a component library in Compose
59. Building a component library in Compose • Illustration • Title • Description • Button
60. Building a component library in Compose @Composable public fun CardPromo( title: String, description: String, illustrationDrawable: DrawableData, backgroundColor: Color, primaryButtonText: String?, primaryButtonOnClicked: (() -> Unit)?, modifier: Modifier = Modifier, )
61. Building a component library in Compose @Composable public fun CardPromo( illustration: @Composable () -> Unit, button: @Composable () -> Unit, textContent: @Composable () -> Unit, modifier: Modifier = Modifier, )
62. Building a component library in Compose • Slot APIs • Decreases the API surface • Reduces coupling between components • Can become to fl exible @Composable public fun CardPromo( illustration: @Composable () -> Unit, button: @Composable () -> Unit, textContent: @Composable () -> Unit, modifier: Modifier = Modifier, )
63. Building a component library in Compose • Where to draw the line? • Domain speci fi c vs. Generic component? • Should we only depend on the library and not Eufemia-atoms?
64. Building a component library in Compose • There is no solution that fi ts all • Our mission was to help the developers • Did not want developers to reinvent the wheel
65. Building a component library in Compose • Applications who only depend on component library forced domain speci fi c components into the library • Did not want to expose other apps domain to all the apps
66. Building a component library in Compose Eufemia Component library App1 App2 uses uses uses
67. Building a component library in Compose Eufemia Component library App1 App2 uses uses uses uses uses
68. Building a component library in Compose Eufemia Component library App1 App2 uses uses uses uses uses Module Module Module Module Module Module
69. Building a component library in Compose • Figma fi le for Eufemia and Component library • New components needs review from designers/community
70. Making sure we deliver components with banking- level quality
71. Making sure we deliver components with banking- level quality • Compose + Material helps us out of the box • Enforces touch sizes by default • Content description is required from API side in Compose
72. Making sure we deliver components with banking- level quality • Permutation based testing • n X Font • n X Display • dark vs light mode • loyalty programs
73. Making sure we deliver components with banking- level quality • Use Showkase from Airbnb • Annotate our component with @Preview or @ShowkaseComposable • Will generate an activity to browse your components • Helps us see which components we have
74. Making sure we deliver components with banking- level quality @Composable public fun CardPromo( title: String, description: String, illustrationDrawable: DrawableData, modifier: Modifier = Modifier, backgroundColor: Color = EufemiaTheme.colors.surface, closeOnClicked: (() -> Unit)? = null, primaryButtonText: String? = null, primaryButtonOnClicked: () -> Unit = {}, textButtonText: String? = null, textButtonOnClicked: (() -> Unit) = {}, textButtonIsLink: Boolean = true, )
75. Making sure we deliver components with banking- level quality @ShowkaseComposable Or @Preview
76. Making sure we deliver components with banking- level quality @ShowkaseComposable @Composable public fun CardPromoPreview( @PreviewParameter(LoyaltyProgramParameterProvider::class) params: LoyaltyProgram, ) { EufemiaTheme(loyaltyProgram = params, overlayType = OverlayType.STANDARD) { CardPromo( modifier = Modifier.fillMaxWidth(), title = "DNBs mortgage", description = "A mortgage loan can be a good solution if you want to buy a house. You can calculate how much you can get here!", illustrationDrawable = DrawableData( drawableRes = R.drawable.ic_illustration_example_1, contentDescription = “Mortgage illustration” ), closeOnClicked = {}, primaryButtonText = "Calculate mortgage loan", primaryButtonOnClicked = {}, textButtonText = "Read more about mortgages at dnb.no", textButtonOnClicked = {} ) } }
77. Making sure we deliver components with banking- level quality @ShowkaseComposable @Composable public fun CardPromoPreview( @PreviewParameter(LoyaltyProgramParameterProvider::class) params: LoyaltyProgram, ) { EufemiaTheme(loyaltyProgram = params, overlayType = OverlayType.STANDARD) { CardPromo( modifier = Modifier.fillMaxWidth(), title = "DNBs mortgage", description = "A mortgage loan can be a good solution if you want to buy a house. You can calculate how much you can get here!", illustrationDrawable = DrawableData( drawableRes = R.drawable.ic_illustration_example_1, contentDescription = “Mortgage illustration” ), closeOnClicked = {}, primaryButtonText = "Calculate mortgage loan", primaryButtonOnClicked = {}, textButtonText = "Read more about mortgages at dnb.no", textButtonOnClicked = {} ) } } @PreviewParameter(LoyaltyProgramParameterProvider::class) params: LoyaltyProgram,
78. Making sure we deliver components with banking- level quality
79. Making sure we deliver components with banking- level quality
80. Making sure we deliver components with banking- level quality • Paparazzi for screenshot testing con fi guration permutations • Require all components to be covered • Can be integrated with Showkase
81. Making sure we deliver components with banking- level quality • POCs on paparazzi + a11y • Paparazzi version 1.3.0+ • Screenshot testing semantic nodes • AccessibilityRenderExtension
82. Making sure we deliver components with banking- level quality class CardPromoScA11yTest { @get: Rule val paparazzi = Paparazzi( deviceConfig = DeviceConfig.PIXEL_C, renderExtensions = setOf(AccessibilityRenderExtension()) ) @Test fun cardPromoLightModeStandardNormalFont() { paparazzi.snapshot { CardPromoPreview(params = LoyaltyProgram.DEFAULT) } } }
83. Making sure we deliver components with banking- level quality class CardPromoScA11yTest { @get: Rule val paparazzi = Paparazzi( deviceConfig = DeviceConfig.PIXEL_C, renderExtensions = setOf(AccessibilityRenderExtension()) ) @Test fun cardPromoLightModeStandardNormalFont() { paparazzi.snapshot { CardPromoPreview(params = LoyaltyProgram.DEFAULT) } } } renderExtensions = setOf(AccessibilityRenderExtension())
84. Making sure we deliver components with banking- level quality
85. Making sure we deliver components with banking- level quality
86. Making sure we deliver components with banking- level quality • Locally hosted preview screenshot testing from AGP 8.2+ • Announced at Google IO 2023 • Integrate well with @Preview • Great option to Showkase + Paparazzi
87. Making sure we deliver components with banking- level quality https://io.google/2023/program/ 6d34f5ed-60c1-4a92-9 ff 9-5aa4fd561af4/
88. Making sure we deliver components with banking- level quality • We use Robolectric heavily for UI tests • Runs without spinning up an emulator
89. Making sure we deliver components with banking- level quality • Preview helps us check device con fi gurations during development
90. Making sure we deliver components with banking- level quality @Preview @Composable public fun CardPromoPreview( )
91. Making sure we deliver components with banking- level quality @Preview @Composable public fun CardPromoPreview( ) @Preview
92. Making sure we deliver components with banking- level quality annotation class Preview( val name: String = “", val group: String = “", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = “", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, )
93. Making sure we deliver components with banking- level quality @Preview( name = "CardPromo dark high font", uiMode = Configuration.UI_MODE_NIGHT_YES, fontScale = 2f, ) @Composable public fun CardPromoPreview( )
94. Making sure we deliver components with banking- level quality @Preview( name = "CardPromo dark high font", uiMode = Configuration.UI_MODE_NIGHT_YES, fontScale = 2f, ) @Preview( name = "CardPromo light high font", uiMode = Configuration.UI_MODE_NIGHT_NO, fontScale = 2f, ) @Composable public fun CardPromoPreview( )
95. Making sure we deliver components with banking- level quality @Preview( name = "CardPromo dark high font", uiMode = Configuration.UI_MODE_NIGHT_YES, fontScale = 2f, ) @Preview( name = "CardPromo light high font", uiMode = Configuration.UI_MODE_NIGHT_NO, fontScale = 2f, ) annotation class HighFontPreviews
96. Making sure we deliver components with banking- level quality @HighFontPreview @Composable public fun CardPromoPreview( )
97. Making sure we deliver components with banking- level quality
98. Making sure we deliver components with banking- level quality • Ensuring Code Quality • A lot of easy mistakes to make in Compose • Static code checks helps us avoid these
99. Making sure we deliver components with banking- level quality https://mrmans0n.github.io/compose-rules/
100. Making sure we deliver components with banking- level quality • Support for both detekt + ktlint
101. Making sure we deliver components with banking- level quality @Composable fun InputTextField() { var text = mutableStateOf("") TextField(value = text, onValueChange = { text.value = it }) }
102. Making sure we deliver components with banking- level quality @Composable fun InputTextField() { var text = mutableStateOf("") TextField(value = text, onValueChange = { text.value = it }) } var text = mutableStateOf("") • Rule violation
103. Making sure we deliver components with banking- level quality @Composable fun InputTextField() { var text = remember { mutableStateOf("") } TextField(value = text, onValueChange = { text.value = it }) } var text = remember { mutableStateOf("") }
104. Making sure we deliver components with banking- level quality @Composable fun InputTextField() { var text = remember { mutableStateOf("") } TextField(value = text, onValueChange = { text.value = it }) } var text = remember { mutableStateOf("") } • State should be remembered to avoid creating new state instance on each recomposition
105. Release & dependency management
106. Release & dependency management • Nexus • Dev release after merge • Testing during development • Local substitution • Publish maven local • Showkase • Previews
107. Release & dependency management includeBuild("../eufemia") { } settings.gradle.kts
108. Release & dependency management includeBuild("../eufemia") { dependencySubstitution { substitute(module("internal.artifact.eufemia:eufemia..")) .using(project(":eufemia")) .because("Testing internal versions”) } } settings.gradle.kts
109. Release & dependency management • Drawbacks to local substitution • Projects has to have same AGP version
110. Release & dependency management • Publish maven local to is an option
111. Release & dependency management ./gradlew publishToMavenLocal /Users/username/.m2/repository
112. Release & dependency management mavenCentral mavenLocal Project using local dependency
113. Learnings and challenges
114. Learnings and challenges • Using custom theme in previews without setting loyalty program type crashes the preview
115. Learnings and challenges • This will crash :( @Preview @Composable fun ComponentPreview() { EufemiaTheme() { SomeComponent() } }
116. Learnings and challenges @Composable public fun EufemiaTheme( overlayType: OverlayType, isNightMode: Boolean = isSystemInDarkTheme(), loyaltyProgram: LoyaltyProgram = ThemeServiceWrapper.get(), shape: EufemiaShape = EufemiaShape(), content: @Composable () -> Unit )
117. Learnings and challenges @Composable public fun EufemiaTheme( overlayType: OverlayType, isNightMode: Boolean = isSystemInDarkTheme(), loyaltyProgram: LoyaltyProgram = ThemeServiceWrapper.get(), shape: EufemiaShape = EufemiaShape(), content: @Composable () -> Unit ) loyaltyProgram: LoyaltyProgram = ThemeServiceWrapper.get(),
118. Learnings and challenges • Solution • Check LocalInspectionMode.Current • Will return true if you are in a preview context
119. Learnings and challenges @Composable private fun loyaltyProgram(): LoyaltyProgram { }
120. Learnings and challenges @Composable private fun loyaltyProgram(): LoyaltyProgram { if (LocalInspectionMode.current) return LoyaltyProgram.DEFAULT return ThemeServiceWrapper.get().getCurrentProgram().toLoyaltyProgram() }
121. Learnings and challenges • When starting to build a component library • Have close conversation with designers • Make sure you are on the same page
122. Learnings and challenges • Start strict and open up • Hard to close up if users depend on it being loose
123. Learnings and challenges • Don’t forget to have fun!
124. QR Codes Scalable UI testing solutions 
 Google I/O Showkase - Airbnb Twitter Compose rules Paparazzi
125. THANKS ♥