유연한 Composable 설계

Google I/O Extended Korea Andorid 2024에서 진행한 유연한 Composable 설계 발표의 Speaker Deck입니다.

Transcript

1. ਬোೠ Composable ࢸ҅ ੉അ਋ Viva Republica(Toss) Android/React Native Developer
2. Motivation
5. fun RepositoryCard() { Column { Row { Row { Image(); Text(); Chip(); } Image(); } Row { Text(); } Row { Props(); Props(); Props(); } } } private fun Props() { Row { Image(); Text(); } }
6. fun RepositoryCard() { Column { Title(title = “sept-android”, isPrivate = false) Description() Row { Language(); Stars(); Forks(); } } } private fun Props() { Row { Image(); Text(); } }
7. ੉ߣ ࣁ࣌ীࢲח Scalable Consistent Guide Others
8. Framework Library App
9. Framework Library App
10. Think and Plan
11. ਋ܻח ঱ઁ ࢜۽਍ Composableਸ ٜ݅ө?
12. ঱ઁ, যڌѱ ࢜۽਍ Composableਸ ٜ݅ Ѿबਸ оઉঠೡө?
13. Single Responsibility Principle(SRP) ೞա੄ ೣࣻ ೞա੄ ଼੐
14. Single Responsibility Principle(SRP) ೞա੄ ೣࣻ ೞա੄ ଼੐
15. Ѣ੄ ࠺तೠ ਊ۹۽ ডр੄ ߸઱݅ ೙ਃೠ ҃਋ Component੄ ࢸ҅ ߑध Think and Plan ౠ੿ ਃҳࢎ೦੉ ইצ ҕాػ ࢎ೦ٜਸ ҳഅೞҊ੗ ೞח Composable Ҋࣻળ(Higher level) API ੷ࣻળ(Lower level) API
16. Ҋࣻળਵ۽ тࣻ۾ ز੘੄ ੿੄ח ݺഛ೧૑Ҋ ழझథ੄ ৈ૑ח ੸যઉঠ ೠ׮ Component੄ ࢸ҅ ߑध Think and Plan
17. @Composable fun AssistChip( onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, /* etc */ ) = Chip( modifier = modifier, onClick = onClick, enabled = enabled, label = label, leadingIcon = leadingIcon, trailingIcon = trailingIcon, )
18. @Composable fun Chip( onClick: () -> Unit, label: @Composable () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, leadingIcon: @Composable (() -> Unit)? = null, trailingIcon: @Composable (() -> Unit)? = null, /* etc */ ) { Surface( onClick = onClick, modifier = modifier.semantics { role = Role.Button }, enabled = enabled /* etc */ ) { ChipContent( label = label, leadingIcon = leadingIcon, trailingIcon = trailingIcon, /* etc */ ) } }
19. ӝઓী ੓ח ஹನք౟݅ਵ۽ ୽࠙ೞ׮ݶ ୶о۽ ٜ݅૑ ঋইب ػ׮. ߄௰ܳ ੤ߊݺೞ૑ ݃ۄ Think and Plan
20. Name and Parameters
21. Naming
22. fun FilterChip() fun filterChip() • Composeীࢲ UI ҳࢿਃࣗܳ աఋ ն • ௿ېझ ಴ӝ ഋधਸ ରਊ fun gdgState(): State fun GdgState(): State • ೣࣻ ֎੉߁ ӏ஗ਸ ࢎਊ • ೣࣻח чਸ ߈ജೞѢա UI ҙ۲ ਃࣗ ٜਸ emit ೧ঠೠ׮. fun rememberCoroutineScope(): CoroutineScope fun createCoroutineScope(): CoroutineScope • Recompositionীࢲب чਸ ਬ૑ೞ ח Ѫਸ ಴द UI ҳࢿਃࣗܳ emitೞח @Composable Name and Parameters чਸ ܻఢೞח @Composable rememberܳ ࢎਊೞח @Composable
23. // DO!! // InputField ੿੄ @Composable fun InputField(inputState: InputState) { // ࢎਊ୊(Call-Site) val inputState = remember { InputState() } Button("Clear input", onClick = { inputState.clear() }) InputField(inputState)
24. // DON’T!! // InputField ੿੄ @Composable fun InputField(): UserInputState { // पઁ ࢎਊ୊ Button("Clear input", onClick = { ਺…? }) val inputState = InputField()
25. 1. Chip() 2. BasicTextField() 3. FilterChip() GoogleChip() FeatureXChip() 1. ߄۽ ࢎਊоמೠ ӝࠄ ஹನք౟ 2. ୶о੸ਵ۽ झఋੌ݂੉ ೙ਃೠ ੷ࣻ ળ ஹನք౟ 3. ౠ੿ Usecaseܳ о૑Ҋ ੓ח ஹನ ք౟ val LocalTheme = compositionLocalOf() val ThemeLocal = compositionLocalOf() Prefixing CompositionLocal Name and Parameters
26. Parameters
27. @Composable fun Chip( modifier: Modifier, onClick: () -> Unit, ) Chip( modifier = Modifier, onClick = { } ) { // TODO } ಁ۞޷ఠܳ ݺद੸ਵ۽ ٘۞ղۄ → ੉ ಁ۞޷ఠо যڃ Ѫੋ૑ ࡅܰѱ ౵ঈ оמ Parameters Name and Parameters
28. // DON’T val LocalChipBorder = compositionLocalOf() @Composable fun Chip( modifier: Modifier, onClick: () -> Unit, ) { val border = LocalChipBorder.current } ঐद੸ ࢎਊ < ݺद੸ ࢎਊ → CompositionLocal < State Hoisting Parameters Name and Parameters
29. // DO @Composable fun Chip( border: BorderStroke, ) { // Set border } ঐद੸ ࢎਊ < ݺद੸ ࢎਊ → CompositionLocal < State Hoisting Parameters Name and Parameters
30. @Composable fun Chip( modifier: Modifier ) // Call-Site Chip(Modifier.padding(8.dp)) Components → define own internal behavior and appearance Modifiers -> modify external Modifiers Name and Parameters
31. @Composable fun Chip( modifier: Modifier ) @Composable fun Button( modifier: Modifier = Modifier, ) @Composable fun Card( modifier: Modifier = Modifier, ) Compose ࢎਊ੗ٜ਷ ੉޷ Ӓ ஹನք౟ ࢎਊߑߨਸ যו੿ب ఠٙ೮ӝী, যڌѱ ࢎਊೡ૑ Ӓ ಁఢ੉ ؀ۚ ੸ਵ۽ ੿೧ઉ੓׮. Modifiers Name and Parameters
32. @Composable fun Chip( modifier: Modifier ) UI ਃࣗܳ emitೞח Composable਷ Modifier ಁ۞ ޷ఠ ೙ࣻ۽ ઓ੤೧ঠೣ Modifiers Name and Parameters
33. @Composable fun Chip( label: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier ) UI ਃࣗܳ emitೞח Composable਷ Modifier ಁ۞ ޷ఠ ೙ࣻ۽ ઓ੤೧ঠೣ ݽٚ Optional Parameter ઺ о੢ ୐ߣ૩۽ ਤ஖೧ ঠೣ - First optional parameter Modifiers Name and Parameters
34. @Composable fun Chip( modifier: Modifier = Modifier ) { Row(modifier = modifier.size(16.dp) } // Call-site Chip( modifier = Modifier.padding(8.dp) ) UI ਃࣗܳ emitೞח Composable਷ Modifier ಁ۞ ޷ఠ ೙ࣻ۽ ઓ੤೧ঠೣ ݽٚ Optional Parameter ઺ о੢ ୐ߣ૩۽ ਤ஖೧ ঠೣ - First optional parameter Monoid Type → ಁ۞޷ఠীࢲ ֈӟ чਸ Ӓ؀۽ ղ ࠗীࢲ Ӓ؀۽ ࢎਊоמ + ২࣌ ୶о оמ Modifiers Name and Parameters
35. @Composable fun Chip( modifier: Modifier = Modifier ) { Row(modifier = modifier.size(16.dp) } UI ਃࣗܳ emitೞח Composable਷ Modifier ಁ۞ ޷ఠ ೙ࣻ۽ ઓ੤೧ঠೣ ݽٚ Optional Parameter ઺ о੢ ୐ߣ૩۽ ਤ஖೧ ঠೣ - First optional parameter Monoid Type → ಁ۞޷ఠীࢲ ֈӟ чਸ Ӓ؀۽ ղ ࠗীࢲ Ӓ؀۽ ࢎਊоמ + ২࣌ ୶о оמ ೣࣻ੄ ಁ۞޷ఠ ઺ Modifier ఋੑ਷ ױ ೞաৈঠೣ Modifiers Name and Parameters
36. @Composable fun Chip( enabled: Boolean, icon: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = ChipDefaults…, colors: ChipColors = ChipDefaults… ) { Surface( modifier = modifier, enabled = enabled, shape = shape, color = colors.containerColor(enabled) ) { // etc… } } Chip(modifier = Modifier.padding(8.dp)) Modifiers or explicit parameters? ஹನ੷࠶੄ ೯زҗ UIܳ ੿੄ೞח чੋؘ Modifierী ֍ਸ ࣻ হח ఋੑ → Explicit Parameters Modifier۽ ֍ਸ ࣻ ੓ח ఋੑ → Modifier Name and Parameters
37. @Composable fun Chip( onClick: () -> Unit, enabled: Boolean, icon: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = ChipDefaults…, colors: ChipColors = ChipDefaults…, content: @Composable () -> Unit, ) Ordering 1. Required Params 2. Modifier 3. Optional Params 4. @Composable content params Name and Parameters
38. @Composable fun Chip( onClick: () -> Unit, enabled: Boolean, icon: @Composable () -> Unit, modifier: Modifier = Modifier, shape: Shape = ChipDefaults…, colors: ChipColors = ChipDefaults…, content: @Composable () -> Unit, ) Ordering 1. Required Params 2. Modifier 3. Optional Params 4. @Composable content params Name and Parameters
39. @Composable fun Chip( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ChipDefaults.shape, colors: ChipColors = ChipDefaults…, icon: @Composable () -> Unit? = null, content: @Composable () -> Unit, ) Default and nullable Empty Nullable Default Ҷ੉ হযب غח ӝמ ੑ۱੉ ೙ਃೣ, ೞ૑݅ ࠼ ч੉ ٜযоب ؽ ࠺য੓ਵݶ উغח ч Name and Parameters
40. @Composable fun Chip( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, elevation: Dp = 8.dp shape: Shape = ChipDefaults.shape, colors: ChipColors = ChipDefaults…, icon: @Composable () -> Unit? = null, content: @Composable () -> Unit, ) Styling Defaults Inline ૣҊ ৘ஏоמೠ ҃਋ ӝࠄч੉ ݆੉ ೙ਃೠ ҃਋ ࢚కчী ٮۄ ࠙ӝо ୊ܻغযঠ ೞח ҃਋ Name and Parameters
41. @Composable fun Chip( onClick: () -> Unit, shape: Shape = ChipDefaults.shape, colors: ChipColors = ChipDefaults…, ) object ChipDefaults { val shape = InputChip.ContainerShape fun colors(): ChipColors fun elevation(): ChipElevation } Styling Defaults Inline ૣҊ ৘ஏоמೠ ҃਋ ӝࠄч੉ ݆੉ ೙ਃೠ ҃਋ ࢚కчী ٮۄ ࠙ӝо ୊ܻغযঠ ೞח ҃਋ Name and Parameters
42. // Kotlin 2.2 Experimental dataarg class ChipColors( container: Color, label: Color ) @Composable fun Chip( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, dataarg colors: ChipColors, ) Chip( onClick = {}, container = Color(…) ) // Kotlin Language Features in 2.0 and beyond https://www.youtube.com/watch?v=tAGJ5zJXJ7w // ೠҴয ߡ੹ (KotlinConf’24 Global South Korea) https://speakerdeck.com/dalinaum/recap-kotlin- language-features-in-2-dot-0-and-beyond- michail-zarecenskij Styling Defaults Inline ૣҊ ৘ஏоמೠ ҃਋ ӝࠄч੉ ݆੉ ೙ਃೠ ҃਋ ࢚కчী ٮۄ ࠙ӝо ୊ܻغযঠ ೞח ҃਋ Name and Parameters
43. @Composable fun Chip( icon: @Composable () -> Unit? = null, label: @Composable () -> Unit, ) Slots Single Slot Mutliple Slots content ಁ۞޷ఠ ݺद੸ ಁ۞޷ఠ ഐ୹ױীࢲ ૒੽ ஹನք౟ܳ ੿੄೧ࢲ ઱ੑೞݶ ղࠗীࢲ ੉ܳ ഝਊ೧ࢲ UIܳ ҳࢿೞח ߑध Name and Parameters
44. @Composable fun Chip( enalbled: Boolean = true, ) Chip( enabled = true ) State State Hoistingਸ ӝ߈ਵ۽ غب۾੉ݶ ৻ࠗীࢲ ࢚కܳ ҙܻೡ ࣻ ੓ب۾ ೞۄ Name and Parameters
45. @Composable fun Chip( enalbled: Boolean = true, onClick: () -> Unit, ) // call-site Chip( enabled = true onClick = { } ) Events ࢚కח ৻ࠗীࢲ ઑ੺ೡ ࣻ ੓૑݅ ஹನք౟ীࢲ ৻ࠗী ઴ नഐܳ ߉ਸ ࣻ ੓ח ߑߨ ۈ׮ ౵ۄ޷ఠ۽ ѐߊ੗о ੉߮౟ܳ ૑੿ೡ ࣻ ੓਺ Name and Parameters
46. Conclusion
47. ೞա੄ ஹನք౟ח ೞա੄ ଼੐ਸ APIܳ ਬোೞѱ ࢸ҅ೞ۰ݶ? Conclusion ୶࢚ചػ ੷ࣻળ APIܳ ӝ߈ਵ۽ Ҋࣻળ APIܳ ѐߊ оةࢿ੉ જ਷ Naming & Parameter ஶ߮࣌ Composableਸ ҳࢿೞח ׮নೠ ਃࣗܳ Ҋ۰ • Slots • State • Event
48. Thank You HyunWoo Lee nunu.tv | toss Android (React Native) Developer