Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
유연한 Composable 설계
Search
HyunWoo Lee
July 20, 2024
Programming
0
520
유연한 Composable 설계
Google I/O Extended Korea Andorid 2024에서 진행한 유연한 Composable 설계 발표의 Speaker Deck입니다.
HyunWoo Lee
July 20, 2024
Tweet
Share
More Decks by HyunWoo Lee
See All by HyunWoo Lee
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
190
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
390
React Native under the hood
l2hyunwoo
0
34
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
66
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
330
CDG로 모두와 함께 성장하기
l2hyunwoo
0
99
fun HelloKMP(): GladToMeetYou
l2hyunwoo
0
400
Jetpack Compose - 실무에 발라보기
l2hyunwoo
1
150
The Android Wears Material
l2hyunwoo
0
83
Other Decks in Programming
See All in Programming
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
510
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
880
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
480
Re:proS_案内資料
rect
0
250
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
0
1.2k
CSC509 Lecture 07
javiergs
PRO
0
140
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
200
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
160
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
100
Scan with Decoupled Look-back and Onesweep Radix Sort
shocker_0x15
0
160
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.6k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
48
30k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Fireside Chat
paigeccino
32
3k
Typedesign – Prime Four
hannesfritz
39
2.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
The Cult of Friendly URLs
andyhume
78
6k
Transcript
ਬোೠ Composable ࢸ҅ അ Viva Republica(Toss) Android/React Native Developer
Motivation
None
None
fun RepositoryCard() { Column { Row { Row { Image();
Text(); Chip(); } Image(); } Row { Text(); } Row { Props(); Props(); Props(); } } } private fun Props() { Row { Image(); Text(); } }
fun RepositoryCard() { Column { Title(title = “sept-android”, isPrivate =
false) Description() Row { Language(); Stars(); Forks(); } } } private fun Props() { Row { Image(); Text(); } }
ߣ ࣁ࣌ীࢲח Scalable Consistent Guide Others
Framework Library App
Framework Library App
Think and Plan
ܻח ઁ ࢜۽ Composableਸ ٜ݅ө?
ઁ, যڌѱ ࢜۽ Composableਸ ٜ݅ Ѿबਸ оઉঠೡө?
Single Responsibility Principle(SRP) ೞա ೣࣻ ೞա ଼
Single Responsibility Principle(SRP) ೞա ೣࣻ ೞա ଼
Ѣ ࠺तೠ ਊ۹۽ ডр ߸݅ ਃೠ ҃ Component ࢸ҅ ߑध
Think and Plan ౠ ਃҳࢎ೦ ইצ ҕాػ ࢎ೦ٜਸ ҳഅೞҊ ೞח Composable Ҋࣻળ(Higher level) API ࣻળ(Lower level) API
Ҋࣻળਵ۽ тࣻ۾ ز ח ݺഛ೧Ҋ ழझథ ৈח যઉঠ ೠ Component
ࢸ҅ ߑध Think and Plan
@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, )
@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 */ ) } }
ӝઓী ח ஹನք݅ਵ۽ ࠙ೞݶ ୶о۽ ٜ݅ ঋইب ػ. ߄௰ܳ ߊݺೞ
݃ۄ Think and Plan
Name and Parameters
Naming
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
// DO!! // InputField @Composable fun InputField(inputState: InputState) {
// ࢎਊ(Call-Site) val inputState = remember { InputState() } Button("Clear input", onClick = { inputState.clear() }) InputField(inputState)
// DON’T!! // InputField @Composable fun InputField(): UserInputState {
// पઁ ࢎਊ Button("Clear input", onClick = { …? }) val inputState = InputField()
1. Chip() 2. BasicTextField() 3. FilterChip() GoogleChip() FeatureXChip() 1. ߄۽
ࢎਊоמೠ ӝࠄ ஹನք 2. ୶оਵ۽ झఋੌ݂ ਃೠ ࣻ ળ ஹನք 3. ౠ Usecaseܳ оҊ ח ஹನ ք val LocalTheme = compositionLocalOf() val ThemeLocal = compositionLocalOf() Prefixing CompositionLocal Name and Parameters
Parameters
@Composable fun Chip( modifier: Modifier, onClick: () -> Unit, )
Chip( modifier = Modifier, onClick = { } ) { // TODO } ಁ۞ఠܳ ݺदਵ۽ ٘۞ղۄ → ಁ۞ఠо যڃ Ѫੋ ࡅܰѱ ঈ оמ Parameters Name and Parameters
// DON’T val LocalChipBorder = compositionLocalOf() @Composable fun Chip( modifier:
Modifier, onClick: () -> Unit, ) { val border = LocalChipBorder.current } ঐद ࢎਊ < ݺद ࢎਊ → CompositionLocal < State Hoisting Parameters Name and Parameters
// DO @Composable fun Chip( border: BorderStroke, ) { //
Set border } ঐद ࢎਊ < ݺद ࢎਊ → CompositionLocal < State Hoisting Parameters Name and Parameters
@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
@Composable fun Chip( modifier: Modifier ) @Composable fun Button( modifier:
Modifier = Modifier, ) @Composable fun Card( modifier: Modifier = Modifier, ) Compose ࢎਊٜ Ӓ ஹನք ࢎਊߑߨਸ যוب ఠٙ೮ӝী, যڌѱ ࢎਊೡ Ӓ ಁఢ ۚ ਵ۽ ೧ઉ. Modifiers Name and Parameters
@Composable fun Chip( modifier: Modifier ) UI ਃࣗܳ emitೞח Composable
Modifier ಁ۞ ఠ ࣻ۽ ઓ೧ঠೣ Modifiers Name and Parameters
@Composable fun Chip( label: @Composable () -> Unit, onClick: ()
-> Unit, modifier: Modifier = Modifier ) UI ਃࣗܳ emitೞח Composable Modifier ಁ۞ ఠ ࣻ۽ ઓ೧ঠೣ ݽٚ Optional Parameter о ߣ૩۽ ਤ೧ ঠೣ - First optional parameter Modifiers Name and Parameters
@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
@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
@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
@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
@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
@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
@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
@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
// 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
@Composable fun Chip( icon: @Composable () -> Unit? = null,
label: @Composable () -> Unit, ) Slots Single Slot Mutliple Slots content ಁ۞ఠ ݺद ಁ۞ఠ ഐױীࢲ ஹನքܳ ೧ࢲ ੑೞݶ ղࠗীࢲ ܳ ഝਊ೧ࢲ UIܳ ҳࢿೞח ߑध Name and Parameters
@Composable fun Chip( enalbled: Boolean = true, ) Chip( enabled
= true ) State State Hoistingਸ ӝ߈ਵ۽ غب۾ݶ ৻ࠗীࢲ ࢚కܳ ҙܻೡ ࣻ ب۾ ೞۄ Name and Parameters
@Composable fun Chip( enalbled: Boolean = true, onClick: () ->
Unit, ) // call-site Chip( enabled = true onClick = { } ) Events ࢚కח ৻ࠗীࢲ ઑೡ ࣻ ݅ ஹನքীࢲ ৻ࠗী नഐܳ ߉ਸ ࣻ ח ߑߨ ۈ ۄఠ۽ ѐߊо ߮ܳ ೡ ࣻ Name and Parameters
Conclusion
ೞա ஹನքח ೞա ଼ਸ APIܳ ਬোೞѱ ࢸ҅ೞ۰ݶ? Conclusion ୶࢚ചػ ࣻળ
APIܳ ӝ߈ਵ۽ Ҋࣻળ APIܳ ѐߊ оةࢿ જ Naming & Parameter ஶ߮࣌ Composableਸ ҳࢿೞח নೠ ਃࣗܳ Ҋ۰ • Slots • State • Event
Thank You HyunWoo Lee nunu.tv | toss Android (React Native)
Developer