Kita telah mempelajari fundamental terkait Jetpack Compose pada pertemuan sebelumnya. Kali ini kita akan mengenal Layout dan State lebih dalam di mana kedua komponen tersebut berperan secara fundamental dan membedakan implementasi pengembangan UI dengan cara lainnya.
Dicoding Event hadir menyapa Anda dengan materi lanjutan kelas pro ini. Mari belajar implementasi Layout dan State Jetpack Compose dengan mudah dan aplikatif. Serta yang terpenting, langsung bisa Anda aplikasikan pada kodemu sendiri
Sesi IDCamp X Dicoding LIVE ke-14 kali ini, akan mengupas tuntas:
- Pengenalan dan Implementasi Prinsip Layout yang Aplikatif
- Pengenalan dan Implementasi State
3. State management refers to the management of the state of one or more
user interface controls such as text fields, OK buttons, radio buttons, etc. in a
graphical user interface. In this user interface programming technique, the state
of one UI control depends on the state of other UI controls. For example, a state
managed UI control such as a button will be in the enabled state when input fields
have valid input values and the button will be in the disabled state when the input
fields are empty or have invalid values. As applications grow, this can end up
becoming one of the most complex problems in user interface development.
"Motivation · Redux". redux.js.org. Retrieved 2019-07-23.
4.
5. 1. Lifecycle in core components
2. State in Android Views
3. LiveData and ViewModel
4. DataBinding
5. Observable Object
6.
7.
8. Android Views like View, TextView, Button etc manage their state by
themselves and exposing the access through methods or properties to their
consumer to manipulate it.
9.
10.
11.
12.
13.
14.
15.
16.
17. 1. Event: An event is generated by part of the UI, able to be triggered by
the users and passed up.
2. Update state: An event handler may change the state.
3. Display state: The state is passed down, and the UI observes the new
state and displays it.
18. 1. Event: User Clicks the Button.
2. Update state: onClickListener() or method update the state to start
processing the task.
3. Display state: updated state to be shown as result.
19.
20. 1. Testability: by decoupling state from the UI that displays it, it's easier to
test both in isolation.
2. State encapsulation: because state can only be updated in one place,
it's less likely that you'll create inconsistent states (or bugs).
3. UI consistency: all state updates are immediately reflected in the UI by
the use of observable state holders.
23. 1. Memoization with remember(){ /** DEFAULT **/ }
2. Stateful Composable
3. Stateful Composable
4. Hoisting State
5. Internal State
24. In computing, memoization or memoisation is an optimization technique used
primarily to speed up computer programs by storing the results of expensive
function calls and returning the cached result when the same inputs occur
again.
https://en.wikipedia.org/wiki/Memoization
25. remember(){ /** DEFAULT **/ } gives a composable function memory and to
store objects in the Composition, and forgets the object when the
composable that called remember is removed from the Composition.
This mechanism impacts when the process of initial composition and
recomposition.
26.
27. In an imperative UI model, to change a widget, you call a setter on the
widget to change its internal state. In Compose, you call the composable
function again with new data. Doing so causes the function to be
recomposed--the widgets emitted by the function are redrawn, if
necessary, with new data. The Compose framework can intelligently
recompose only the components that changed.
A Composition can only be produced by an initial composition and
updated by recomposition. The only way to modify a Composition is
through recomposition.
28.
29. A stateless composable is a composable that cannot change any state
itself. The main responsibility of this composable is to show the data
and receive the event. Stateless components are easier to test, tend to
have fewer bugs, and open up more opportunities for reuse.
33. Compose is a pattern of moving state to a composable's caller to make a
composable stateless. The general pattern for state hoisting in Jetpack
Compose is to replace the state variable with two parameters:
● value: T: the current value to display
● onValueChange: (T) -> Unit: an event that requests the value to change,
where T is the proposed new value
34. ● Single source of truth: by moving state instead of duplicating it, we're ensuring
there's only one source of truth for expanded. This helps avoid bugs.
● Encapsulated: only stateful Composable will be able to modify its state. It's
completely internal.
● Shareable: hoisted state can be shared with multiple composables. Say we
wanted to hide a Fab button when the Card is expanded, hoisting would allow us
to do that.
● Interceptable: callers to the stateless Composable can decide to ignore or modify
events before changing the state.
● Decoupled: the state for the stateless Composable may be stored anywhere. For
example, it's now possible to move title, body, and expanded into a ViewModel.
● Reusable: Making the stateless composable reusable for other purpose but with
the same form.
35.
36. When hoisting state, there are three rules to help you figure out where state
should go:
1. State should be hoisted to at least the lowest common parent of all
composables that use the state (read).
2. State should be hoisted to at least the highest level it may be changed
(write).
3. If two states change in response to the same events they should be
hoisted together.
You can hoist state higher than these rules require, but underhoisting state
will make it difficult or impossible to follow unidirectional data flow.
37. Values that are remembered by remember in a Composition are forgotten
and recreated during configuration changes such as rotation.
The solution is to switch to composable function SaveInstanceState<T>
38.
39. 1. Managing state is a state of art that becomes the most challenging thing
in software development
2. Jetpack Compose aims that state are transparent and controlled by the
developer
3. Unidirectional Data Flow offers the testability, state encapsulation and UI
Consistency
4. Memoization helps in performance during recomposition process
5. State Hoisting will give benefit and making composable owns their
Responsibility
