Composing an api in the right way

Transcript

1. @dev_brian Composing an API the way Brian Wangi Senior Software Engineer @intellectsoft
2. API design
3. API design Framework Library App
4. API design Framework Library App
5. Guidelines
6. Guidelines
7. Guideline s jb.gg/compose
8. Guideline s jb.gg/compose
9. Agenda › Naming › Parameters › Default values › Modifiers › Slots › State handling
10. Naming
11. Constants const val SOME_LOUD_CONSTANT = 999999
12. Constants const val SOME_LOUD_CONSTANT = 999999
13. Constants const val DefaultKeyName = " defaultKey"
14. Constants const val DefaultKeyName = " defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl()
15. Constants const val DefaultKeyName = " defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl() object ReferenceEqual : ComparisonPolicy {} sealed class LoadResult<T> { object Loading : LoadResult<Nothing>() class Done<T>(val result: T) : LoadResult<T>() class Error(val cause: Throwable) : LoadResult<Nothing>() }
16. Constants const val DefaultKeyName = " defaultKey" val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl() object ReferenceEqual : ComparisonPolicy {} sealed class LoadResult<T> { object Loading : LoadResult<Nothing>() class Done<T>(val result: T) : LoadResult<T>() class Error(val cause: Throwable) : LoadResult<Nothing>() } enum class Status { Idle, Busy, }
17. Functions
18. Functions It depends.
19. Functions Return a value Emit content
20. Functions Return a value Emit content
21. Functions Return a value Emit content
22. Functions Return a value Emit content @Composable fun Button(...) @Composable fun Column(...) @Composable fun LaunchedEffect(...)
23. Functions Return a value @Composable fun stringResource( @StringRes id: Int ): String @Composable fun rememberScrollState( initial: Int = 0 ): ScrollState Emit content @Composable fun Button(...) @Composable fun Column(...) @Composable fun LaunchedEffect(...)
24. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
25. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme
26. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme
27. Functions @Composable fun ColorScheme(darkTheme: Boolean): ColorScheme @Composable fun colorScheme(darkTheme: Boolean): ColorScheme @Composable fun CoroutineScope(): CoroutineScope @Composable fun rememberCoroutineScope(): CoroutineScope
28. Component /kəmˈpəʊnənt/ noun
29. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
30. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and exactly one emits Compose UI tree node.
31. Components @Composable fun Header() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
32. Components @Composable fun Header() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
33. Components @Composable fun Header() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") Row { Button { Text("Docs") } Button { Text("Blog") } } } }
34. Components Button { Text("Docs") } Button { Text("Blog") } @Composable fun Header() { Column { Row { } } } @Composable fun Title() { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") }
35. Components @Composable fun Header() { Column { Title() Row { Button { Text("Docs") } Button { Text("Blog") } } } } @Composable fun Title() { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") }
36. Components @Composable fun Header() { Column { Title() Row { Button { Text("Docs") } Button { Text("Blog") } } } } @Composable fun Title() { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") }
37. Components CKoť⭲lci⭲ispcí.oCgííoasms m-pil⭲agťrolaí⭲mg."Ia"g⭲c. @Composable fun Title() { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") }
38. Components CKoť⭲lci⭲ispcí.oCgííoasms m-pil⭲agťrolaí⭲mg."Ia"g⭲c. @Composable fun Title() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") } }
39. Components Koťli⭲ píogíammi⭲g la⭲g"agc Co⭲cisc. Cíoss-plaťroím. I"⭲. @Composable fun Title() { Column { Text("Kotlin programming language") Text("Concise. Cross-platform. Fun.") } }
40. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
41. Component /kəmˈpəʊnənt/ noun a @Composable function that returns Unit and emits exactly one Compose UI tree node.
42. Components @Composable fun InputField(): UserInputState { // ... } val inputState = InputField() Button(onClick = { inputState.value = "" }) { Text("Clear input") }
43. Components @Composable fun InputField(): UserInputState { // ... } Button(onClick = { inputState.value = "" }) { Text("Clear input") } val inputState = InputField()
44. Components @Composable fun InputField(): UserInputState { // ... } val inputState = InputField() Button(onClick = { inputState.value = "" }) { Text("Clear input") }
45. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } InputField ( inputState ) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
46. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } InputField(inputState) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
47. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } InputField(inputState) Button(onClick = { inputState.value = "" }) { Text("Clear input") }
48. Components @Composable fun InputField(inputState: UserInputState) { // ... } val inputState = remember { UserInputState() } Button(onClick = { inputState.value = "" }) { Text("Clear input") } InputField(inputState)
49. Components Data UI
50. Parameters
51. CompositionLocal jb.gg/composition-local s
52. CompositionLocal jb.gg/composition-local s
53. CompositionLocal jb.gg/composition-local s
54. CompositionLocal jb.gg/composition-local s
55. CompositionLocal Styles Data jb.gg/composition-local s
56. > Parameters explicit CompositionLocal implicit
57. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, )
58. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, )
59. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyle.current, )
60. Default arguments @Composable fun Text( text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle? = null, ) { val actualStyle = style ?: LocalTextStyle.current // ... }
61. Default arguments @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit, )
62. Default arguments @Composable fun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = ButtonDefaults.shape, colors: ButtonColors = ButtonDefaults.buttonColors(), elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), border: BorderStroke? = null, contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit, )
63. Default arguments object ButtonDefaults { val ContentPadding: PaddingValues val MinWidth: Dp val MinHeight: Dp val IconSize: Dp val IconSpacing: Dp val shape: Shape @Composable get @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) @Composable fun buttonElevation(...): ButtonElevation = ButtonElevation(...) }
64. Default arguments object ButtonDefaults { @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) } Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
65. Default arguments internal object ButtonDefaults { @Composable fun buttonColors(...): ButtonColors = ButtonColors(...) } Button( onClick = { viewModel.savePage() }, colors = customColors ?: ButtonDefaults.buttonColors(), ) { Text("Save") }
66. Modifiers
67. Modifiers @Composable fun PageTitle( text: String, modifier: Modifier = Modifier, )
68. Modifiers @Composable fun PageTitle( text: String, modifier: Modifier = Modifier, ) PageTitle( text = "Home", modifier = Modifier .width(100.dp) .height(40.dp) .background(Color.LightGray) .padding(horizontal = 12.dp) )
69. Modifiers @Composable fun PageTitle( text: String, modifier: Modifier = Modifier, padding: Dp = 0.dp, ) PageTitle( text = "Home", modifier = Modifier .width(100.dp) .height(40.dp) .background(Color.LightGray) .padding(horizontal = 12.dp) )
70. Modifiers @Composable fun PageTitle( text: String, )
71. Modifiers @Composable fun PageTitle( text: String, ) Box( Modifier .padding(12.dp) .background(Color.Blue) PageTitle("Home") ) { }
72. Modifiers @Composable fun PageTitle( text: String, ) Box( Modifier .padding(12.dp) .background(Color.Blue) PageTitle("Home") ) { } ) @Composable fun PageTitle( text: String, modifier: Modifier = Modifier, PageTitle( "Home", Modifier .padding(12.dp) .background(Color.Blue), )
73. Modifiers › Accept a Modifier parameter
74. Modifiers › Accept a Modifier parameter › Named modifier
75. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter
76. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node
77. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
78. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
79. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
80. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
81. Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column(modifier) { Title() Row { Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } }
82. Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column { Title() Row(modifier) { Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } }
83. Modifiers @Composable fun Header( modifier: Modifier = Modifier, ) { Column(modifier) { Title() Row { Button(onClick = { ... }) { Text("Docs") } Button(onClick = { ... }) { Text("Blog") } } } }
84. Modifiers @Composable fun MenuItems( smallScreen: Boolean, modifier: Modifier = Modifier, ) { if (smallScreen) { Column(modifier) { Text(...) Text(...) } } else { Row(modifier) { Text(...) Text(...) } } }
85. Modifiers › Accept a Modifier parameter › Named modifier › First optional parameter › Applied to the root node › Default value Modifier
86. Modifiers modifier: Modifier = Modifier
87. Modifiers modifier: Modifier = Modifier interface Modifier { infix fun then(other: Modifier): Modifier = CombinedModifier(this, other) companion object : Modifier { ... override infix fun then(other: Modifier): Modifier = other override fun toString() = "Modifier" } }
88. Modifiers @Composable fun Topics( topic: List<Topic>, modifier: Modifier = Modifier, ) { Row( modifier = modifier.padding(12.dp), ) { // ... } }
89. Modifiers @Composable fun Topics( topic: List<Topic>, modifier: Modifier = Modifier, ) { Row( modifier = Modifier.padding(12.dp).then(modifier), ) { // ... } }
90. jb.gg/compose-modifier s
91. Slots
92. Slots @Composable () -> Unit
93. Slots @Composable fun Button( content: @Composable () -> Unit, )
94. Slots @Composable fun Button( content: @Composable () -> Unit, ) Button { Row { Icon(Icons.Default.Build, "Build" ) Text("Build project" ) } }
95. Slots Button { this: RowScope @Composable fun Button( content: @Composable RowScope.() -> Unit, ) { Row { content() } } Icon(Icons.Default.Build, "Build") Text("Build project" ) }
96. Slots Button { this: RowScope @Composable fun Button( content: @Composable RowScope.() -> Unit, ) { Row { content() } } Icon(Icons.Default.Build, "Build") Text("Build project" ) }
97. Slots Button { this: RowScope @Composable fun Button( content: @Composable RowScope.() -> Unit, ) { Row { content() } } Icon(Icons.Default.Build, "Build", Modifier.weight(1f)) Text("Build project", Modifier.weight(4f) ) }
98. Slots @Composable fun Button( content: @Composable RowScope.() -> Unit, ) { Row { content() } } Button { this: RowScope Icon(Icons.Default.Build, "Build", Modifier.weight(1f)) Text("Build project", Modifier.weight(4f)) }
99. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } }
100. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } }
101. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } PreferenceItem
102. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } PreferenceItem content
103. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { if (checked) { Row { Text("Checked") content() } } else { Column { Text("Unchecked") content() } } } checked = false checked = true checked = false PreferenceItem content
104. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { val movableContent = remember(content) { movableContentOf(content) } if (checked) { Row { Text("Checked") movableContent() } } else { Column { Text("Unchecked") movableContent()
105. Slot lifecycle @Composable fun PreferenceItem( checked: Boolean, content: @Composable () -> Unit, ) { val movableContent = remember(content) { movableContentOf(content) } if (checked) { Row { Text("Checked") movableContent() } } else { Column { Text("Unchecked") movableContent() jb.gg/movable-content-o f
106. Ordering parameters
107. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda
108. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, )
109. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit, )
110. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }) { Text("Compose") } › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda ) @Composable fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit,
111. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda ) NiaTopicTag(true, { toggleFollowed(id) }) { Text("Compose") } @Composable fun NiaTopicTag( modifier: Modifier = Modifier, followed: Boolean, onClick: () -> Unit, enabled: Boolean = true, text: @Composable () -> Unit,
112. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda ) NiaTopicTag(true, { toggleFollowed(id) }) { Text("Compose") } @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit,
113. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda ) NiaTopicTag(followed = true, onClick = { toggleFollowed(id) }) { Text("Compose") } @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit,
114. Ordering parameters › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda ) NiaTopicTag(true, { toggleFollowed(id) }) { Text("Compose") } @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit,
115. Ordering parameters ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda NiaTopicTag(true, { toggleFollowed(id) }, Modifier.padding(8.dp)) { Text("Compose") } @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit,
116. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }, Modifier.padding(8.dp)) { Text("Compose") } ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, text: @Composable () -> Unit,
117. Ordering parameters NiaTopicTag(true, { toggleFollowed(id) }, Modifier.padding(8.dp)) { Text("Compose") } ) › Required parameters › Optional parameters › First one: Modifier › Trailing content lambda @Composable fun NiaTopicTag( followed: Boolean, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, content: @Composable () -> Unit,
118. State
119. State @Composable fun Scroller( offset: MutableState<Float>, )
120. State @Composable fun Scroller( offset: MutableState<Float>, )
121. State @Composable fun Scroller( offset: MutableState<Float>, ) { offset.value = 42f }
122. State @Composable fun Scroller( offset: Float, onOffsetChange: (Float) -> Unit, )
123. State @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, )
124. @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, ) @Composable fun ContextMenu(offset: Float, onOffsetChange: (Float) -> Unit) { Row { MenuItems() Scroller(offset, onOffsetChange) } } State
125. @Composable fun Scroller( offset: State<Float>, onOffsetChange: (Float) -> Unit, ) @Composable fun ContextMenu(offset: Float, onOffsetChange: (Float) -> Unit) { val offsetState = remember { mutableStateOf(offset) } Row { MenuItems() Scroller(offsetState, onOffsetChange) } } State
126. @Composable fun Scroller( offset: Float, onOffsetChange: (Float) -> Unit, ) State
127. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) State
128. @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) // Constant Scroller(offset = { 0f }, ...) // Plain value Scroller(offset = { offset }, ...) // State Scroller(offset = { offsetState.value }, ...) // Value from an object Scroller(offset = { someObject.offset }, ...) State
129. State @Composable fun Scroller( offset: () -> Float, onOffsetChange: (Float) -> Unit, ) // Constant Scroller(offset = { 0f }, ...) // Plain value Scroller(offset = { offset }, ...) // State Scroller(offset = { offsetState.value }, ...) // Value from an object Scroller(offset = { someObject.offset }, ...) jb.gg/debugging-recompositio n
130. State holders
131. State holders @Composable fun VerticalScroller( scrollPosition: Int, scrollRange: Int, onScrollPositionChange: (Int) -> Unit, onScrollRangeChange: (Int) -> Unit, )
132. State holders @Composable fun VerticalScroller( ) @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int }
133. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int }
134. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int }
135. State holders jb.gg/compose-stabilit y @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int }
136. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) class VerticalScrollerStateImpl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) }
137. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() private class VerticalScrollerStateImpl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) }
138. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState = remember { VerticalScrollerState() } ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() private class VerticalScrollerStateImpl( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition) override var scrollRange: Int by mutableStateOf(scrollRange) }
139. State holders @Composable fun VerticalScroller( verticalScrollerState: VerticalScrollerState = remember { VerticalScrollerState() } ) fun VerticalScrollerState(): VerticalScrollerState = VerticalScrollerStateImpl() @Stable interface VerticalScrollerState { var scrollPosition: Int var scrollRange: Int } private class VerticalScrollerStateImpl ( scrollPosition: Int = 0, scrollRange: Int = 0, ) : VerticalScrollerState { override var scrollPosition: Int by mutableStateOf(scrollPosition)
140. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
141. State holders @Stable class VerticalScrollerState { var scrollPosition: Int by mutableStateOf(0) var scrollRange: Int by mutableStateOf(0) }
142. Conclusion
143. Tooling jb.gg/compose-rules
144. Framework Library App
145. Compose Multiplatform 🞄 jb.gg/compose Guidelines 🞄 jb.gg/compose-api-guidelines 🞄 jb.gg/compose-component-api- guidelines In order of appearance 🞄 jb.gg/composition-locals 🞄 jb.gg/compose-modifiers 🞄 jb.gg/movable-content-of 🞄 jb.gg/debugging-recomposition 🞄 jb.gg/compose-stability 🞄 jb.gg/compose-rules Composing an API the Right way Brian Wangi @dev_brian