New Android Declarative UI patterns - Compose

- 2019년 7월 20일 기만콘
- 2019년 6월 30일 Google I/O Extended 2019 서울
에서 발표한 자료입니다.

Google I/O 2019에서 새로운 안드로이드의 선언형 UI Toolkit, Compose가 발표되었습니다. 선언형 UI는 기존과 무엇이 다른지, Compose는 무엇인지, 어떻게 사용할지, 어떤 점이 좋은지 등 Compose를 소개하고 전반적인 내용을 함께 살펴봅니다.

Transcript

1. New Android Declarative UI patterns Compose ੉थ޹ ߛ௼࢟۞٘ উ٘۽੉٘ ѐߊ੗ GDE Android Korea
2. ݾର 1. উ٘۽੉٘ UI੄ ޙઁ੼ 2. ҳӖ੉ ਗೞח ࢜۽਍ UI 3. What is declarative? 4. Jetpack Compose 5. ੿ܻ
3. উ٘۽੉٘ UI੄ ޙઁ੼
4. API Regrets
5. API Regrets ড 30,000઴੄ View ௏٘
6. API Regrets ࣘࢿ੉ য࢝ೠ ࢚ࣘ
7. API Regrets - Bundled SDK৬ ೣԋ UIо ߸೧১ UIܳ সؘ੉౟ ೞ۰ݶ SDKܳ ߄Լঠ ೠ׮
8. ࠂ੟ೠ View ҳઑ Fragment CustomView
9. ࠂ੟ೠ View ҳઑ class SquareImageView : AppCompatImageView { constructor(context: Context?) : super(context) constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, widthMeasureSpec) } } ঌইঠ ೡ ࠗݽ੄ Ѫٜ੉ ݆਺
10. Too much code Fragment CustomView
11. Too much code layout.xml attrs.xml styles.xml SomeCustomView.kt Fragment CustomView
12. Multiple data flow MVC MVP MVVM MVI
13. Multiple data flow MVC MVP MVVM MVI View State ܻ࠙ೞӝ ਤೠ ֢۱
14. data flowо Viewীب ੓ӝ ٸޙী Architecture Multiple data flow
15. What is data flow? What is the source of truth - State Who owns it Who updates it
16. What is data flow? What is the source of truth - State Who owns it Who updates it 3ѐ ݽف Viewীب ઓ੤
17. What is data flow? onSelectedItemChanged ࢎਊ੗о чਸ ߄Բݶ notify Ӓ۞ա ч੉ ߄Ո ‘ٍী’ notify data flowо ܻ࠙ Spinner example
18. ҳӖ੉ ਗೞח ࢜۽਍ UI
19. Unbundled SDK৬ UIܳ ܻ࠙ UI সؘ੉౟ ݃ҳ݃ҳ!!! from platform releases
20. рױೠ View ҳઑ NO ࢚ࣘ NO ࠁੌ۞೒ۨ੉౟ ੘ࢿೠ؀۽ ୹۱غח ૒ҙ੸ੋ UI ௏٘
21. layout, attr, style Write less code
22. layout, attr, style Write less code ೞա੄ UI Code
23. Single data flow Stateח ೞա੄ Owner݅ ыח׮ ೞա੄ Owner݅ Stateܳ ߸҃ೠ׮ Ownerо ੉ߕ౟ܳ х૑ೞҊ ߸҃ਸ ઱بೠ׮ => View withOUT State
24. ؀উ਷? Jetpack Compose
25. What is Jetpack Compose? NEW Jetpack UI Widgets - NOT in SDK! Declaritive UI Toolkits for Android Kotlin Compile Plugin - Kotlin First! ӝઓ জҗ fully ഐജ SUPER Experimental
26. What is declarative?
27. Declarative Programming ࢶ঱ഋ ೐۽Ӓې߁ ೣࣻഋ ೐۽Ӓې߁ ݾ಴ܳ ݺद SQL, HTML, झணۄ
28. Imperative Programming ݺ۸ഋ ೐۽Ӓې߁ ੺ରഋ, ё୓૑ೱ ೐۽Ӓې߁ ঌҊ્ܻ, Stateܳ ݺद Java, C, C++
29. fun sumFunctional(arr: List<Int>): Int = arr.reduce { acc, i -> acc + arr[i] } ݺ۸ഋ sum fun sumImperative(arr: List<Int>): Int { var result = 0 arr.forEach { result += it } return result } ࢶ঱ഋ sum
30. fun sumFunctional(arr: List<Int>): Int = arr.reduce { acc, i -> acc + arr[i] } ݺ۸ഋ sum fun sumImperative(arr: List<Int>): Int { var result = 0 arr.forEach { result += it } return result } ࢶ঱ഋ sum
31. Functional Programming ؘ੉ఠ(ݾ಴) ߈ജ੄ োࣘ൒ܴ (ೣࣻ) (झ౟ܿ)
32. Imperative Android UI XMLী ݽٚ Stateܳ ݺद Kotlinী ݽٚ View ߸҃ਸ ݺद
33. Declarative Android UI Viewܳ ߈ജೞח ೣࣻ੄ োࣘ Anko, Flutter COMPOSE
34. Jetpack Compose
35. • UI as a function (Declaritive) • View ҅கਸ ߈ജೞח ೣࣻ Basic Idea @Composable fun Greeting(name: String) { Text("Hello $name") }
36. Basic Idea @Composable fun Greeting(name: String) { Text("Hello $name") } • UI as a function (Declaritive) • View ҅கਸ ߈ജೞח ೣࣻ
37. Initialize class MainActivity : AppCompatActivity() { public override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Greeting(“World!") ... } } }
38. View @Composable fun Greeting(name: String) { Text("Hello $name") }
39. ListView @Composable fun Greeting(name: String) { Text("Hello $name") } @Composable fun GreetingList(names: List<String>) { for (name in names) { Text("Hello $name") } }
40. ӝઓ List Adapter
41. @Composable fun Greeting(name: String) { Text("Hello $name") } Composable in Composable
42. @Composable fun Greeting(name: String) { Text("Hello $name") } Composable in Composable /** * Simplified version of [Text] component with minimal set of customizations. */ @Composable fun Text( text: String, style: TextStyle? = null, paragraphStyle: ParagraphStyle? = null, softWrap: Boolean = DefaultSoftWrap, overflow: TextOverflow = DefaultOverflow, textScaleFactor: Float = 1.0f, maxLines: Int? = DefaultMaxLines, selectionColor: Color = DefaultSelectionColor )
43. Composable in Composable @Composable fun NewsFeed(stories: List<StoryData>) { for (story in stories) StoryWidget(story) } @Composable fun StoryWidget(story: StoryData) { Padding(8.dp) { Column { Title(story.title) Image(story.image) Text(story.content) } } }
44. Composable in Composable @Composable fun NewsFeed(stories: List<StoryData>) { for (story in stories) StoryWidget(story) } @Composable fun StoryWidget(story: StoryData) { Padding(8.dp) { Column { Title(story.title) Image(story.image) Text(story.content) } } }
45. @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) } } @Composable fun <T> ScrollingList( dataList: List<T>, body: @Composable() (T) -> Unit ) { for (data in dataList) body(data) } Composable parameter
46. @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) } } @Composable fun <T> ScrollingList( dataList: List<T>, body: @Composable() (T) -> Unit ) { for (data in dataList) body(data) } Composable parameter
47. @Composable fun NewsFeed(stories: LiveData<List<StoryData>>) { stories.observe(owner) { ScrollingList(it) { StoryWidget(it) } } } Data Observe data class StoryData( val title: LiveData<String>, val image: LiveData<String>, val content: LiveData<String> )
48. @Composable fun NewsFeed(stories: LiveData<List<StoryData>>) { stories.observe(owner) { ScrollingList(it) { StoryWidget(it) } } } data class StoryData( val title: LiveData<String>, val image: LiveData<String>, val content: LiveData<String> ) Data Observe
49. @Composable fun NewsFeed(stories: LiveData<List<StoryData>>) { stories.observe(owner) { ScrollingList(it) { StoryWidget(it) } } } data class StoryData( val title: LiveData<String>, val image: LiveData<String>, val content: LiveData<String> ) Data Observe
50. @Composable fun NewsFeed(stories: LiveData<List<StoryData>>) { stories.observe(owner) { ScrollingList(it) { StoryWidget(it) } } } data class StoryData( val title: LiveData<String>, val image: LiveData<String>, val content: LiveData<String> ) Data Observe
51. Data Observe @Model data class StoryData( val title: String, val image: String, val content: String )
52. Data Observe @Model data class StoryData( val title: String, val image: String, val content: String )
53. Event @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) { onSelected(it) } } } @Composable fun StoryWidget(story: StoryData, onClick: () -> Unit) { Clickable(onClick) { Padding(8.dp) { ... } } }
54. Event @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) { onSelected(it) } } } @Composable fun StoryWidget(story: StoryData, onClick: () -> Unit) { Clickable(onClick) { Padding(8.dp) { ... } } }
55. Top-down data flow @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) { onSelected(it) } } } @Composable fun StoryWidget(story: StoryData) { Clickable(onClick) { Padding(8.dp) { ... } } } Data
56. Bottom-up event @Composable fun NewsFeed(stories: List<StoryData>) { ScrollingList(stories) { StoryWidget(it) { onSelected(it) } } } @Composable fun StoryWidget(story: StoryData) { Clickable(onClick) { Padding(8.dp) { ... } } } Event
57. Single data flow • ചݶীࢲ ҙܻೞח ؘ੉ఠܳ ࠭۽ ղܽ׮ • ࠭ীࢲ ߊࢤೞח ੉߮౟ܳ ചݶীࢲ ֈѹળ ۈ׮۽ ৢܽ׮
58. Single data flow • ചݶীࢲ ҙܻೞח ؘ੉ఠܳ ࠭۽ ղܽ׮ • ࠭ীࢲ ߊࢤೞח ੉߮౟ܳ ചݶীࢲ ֈѹળ ۈ׮۽ ৢܽ׮ Data flowܳ ചݶਵ۽ ాੌ! (MVPীࢲח Presenter / MVVMীࢲח ViewModel)
59. Multiple data flow onSelectedItemChanged ࢎਊ੗о чਸ ߄Բݶ notify Ӓ۞ա ч੉ ߄Ո ‘ٍী’ notify data flowо ܻ࠙ Spinner example
60. Single data flow Spinner @Composable fun FoodPreferences(data: UserPreferences) { val options = listOf(MILK, EGGS, BREAD) Spinner( options = options, selected = data.favoriteFood, onChanged = { selected -> data.favoriteFood = selected } ) }
61. Single data flow Spinner @Composable fun FoodPreferences(data: UserPreferences) { val options = listOf(MILK, EGGS, BREAD) Spinner( options = options, selected = data.favoriteFood, onChanged = { selected -> data.favoriteFood = selected } ) } Notify റ Single data sourceܳ ߸҃
62. ੿ܻ
63. Unbundled SDK৬ UIܳ ܻ࠙ UI সؘ੉౟ ݃ҳ݃ҳ!!! from platform releases
64. Single data flow Stateח ೞա੄ Owner݅ ыח׮ ೞա੄ Owner݅ Stateܳ ߸҃ೠ׮ Ownerо ੉ߕ౟ܳ х૑ೞҊ ߸҃ਸ ઱بೠ׮ => View withOUT State
65. Basic Idea @Composable fun Greeting(name: String) { Text("Hello $name") } • UI as a function (Declaritive) • View ҅கਸ ߈ജೞח ೣࣻ
66. Compose ࢎ੹੘স Kotlin ؘ੉ఠܳ View۽ ղ۰઱ࣁਃ (Top-down data flow) - DataBinding, LiveData, RxJava, etc...
67. ݃੉Ӓۨ੉࣌
68. Compose ࢎਊೞӝ SUPER Experimental! ૒੽ ࠽٘ ೧ঠೣ
69. Compose ࢎਊೞӝ @Pluulove
70. ୶ୌ ҕࠗ Flutter Redux / React MVI
71. Reference • Google I/O 2019 ৔࢚ • ҕध о੉٘ • @turaש ࠶۽Ӓ • ੿थ਌ש ߊ಴੗ܐ • @pluuloveש ࠶۽Ӓ
72. хࢎ೤פ׮! ੉थ޹ ߛ௼࢟۞٘ উ٘۽੉٘ ѐߊ੗ GDE Android Korea