Jetpack Compose: First Blood

Transcript

1. JETPACK COMPOSE: FIRST BLOOD 1/64 — <EPAM>
2. ABOUT ME 2/64 — <EPAM>
3. ABOUT ME > Vladimir Ivanov 2/64 — <EPAM>
4. ABOUT ME > Vladimir Ivanov > Designing Mobile-centric solutions for living 2/64 — <EPAM>
5. ABOUT ME > Vladimir Ivanov > Designing Mobile-centric solutions for living > Primary Skill: Android 2/64 — <EPAM>
6. ABOUT ME > Vladimir Ivanov > Designing Mobile-centric solutions for living > Primary Skill: Android > Certified Google Cloud Architect. 2/64 — <EPAM>
7. WHAT WE USUALLY DO? 3/64 — <EPAM>
8. IMPERATIVE PROGRAMMING 4/64 — <EPAM>
9. override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) emergency_call_layout.setOnClickListener { onEmergencyCallPressed() } filter_recycler_view.layoutManager = LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false) val filterAdapter = FilterAdapter(arrayListOf("One", "Two", "Three"), null, this::onFilterSelected) filter_recycler_view.adapter = filterAdapter crisis_centers_list.layoutManager = LinearLayoutManager(context) viewModel.crisisCenters.observe(this, crisisCenterObserver) } 5/64 — <EPAM>
10. WHAT WE USUALLY DO? 6/64 — <EPAM>
11. WHAT WE USUALLY DO? > XML 6/64 — <EPAM>
12. WHAT WE USUALLY DO? > XML > Fragment 6/64 — <EPAM>
13. WHAT WE USUALLY DO? > XML > Fragment > Presenter/ViewModel 6/64 — <EPAM>
14. WHAT WE USUALLY DO? > XML > Fragment > Presenter/ViewModel > styles 6/64 — <EPAM>
15. WHAT WE USUALLY DO? > XML > Fragment > Presenter/ViewModel > styles > attributes 6/64 — <EPAM>
16. 7/64 — <EPAM>
17. 8/64 — <EPAM>
18. MINUSES 9/64 — <EPAM>
19. MINUSES > Several places to right code 9/64 — <EPAM>
20. MINUSES > Several places to right code > Hard to debug 9/64 — <EPAM>
21. MINUSES > Several places to right code > Hard to debug > Impossible to reuse 9/64 — <EPAM>
22. LET'S RETHINK THE WHOLE APPROACH 10/64 — <EPAM>
23. UI - IS A TREE-LIKE DATA STRUCTURE THAT CHANGES OVERTIME 11/64 — <EPAM>
24. 12/64 — <EPAM>
25. DECLARATIVE APPROACH 13/64 — <EPAM>
26. DECLARATIVE APPROACH > Make UI a pure function of State 13/64 — <EPAM>
27. PROS 14/64 — <EPAM>
28. PROS > Almost single place to write code 14/64 — <EPAM>
29. PROS > Almost single place to write code > Easy to test 14/64 — <EPAM>
30. PROS > Almost single place to write code > Easy to test > Easy to scale 14/64 — <EPAM>
31. PROS > Almost single place to write code > Easy to test > Easy to scale > Unbundled implementation 14/64 — <EPAM>
32. YOU KNOW WHAT? THE APPROACH WON! 15/64 — <EPAM>
33. 16/64 — <EPAM>
34. > React 16/64 — <EPAM>
35. > React > Angular 16/64 — <EPAM>
36. > React > Angular > Vue.js 16/64 — <EPAM>
37. > React > Angular > Vue.js > SwiftUI 16/64 — <EPAM>
38. > React > Angular > Vue.js > SwiftUI > And now: Jetpack Compose 16/64 — <EPAM>
39. JETPACK COMPOSE 17/64 — <EPAM>
40. JETPACK COMPOSE > Inspired by React and Flutter 17/64 — <EPAM>
41. JETPACK COMPOSE > Inspired by React and Flutter > Pre-pre-alpha 17/64 — <EPAM>
42. JETPACK COMPOSE > Inspired by React and Flutter > Pre-pre-alpha > Part of AOSP 17/64 — <EPAM>
43. JETPACK COMPOSE 18/64 — <EPAM>
44. GENERALLY SPEAKING 19/64 — <EPAM>
45. GENERALLY SPEAKING > Node for piece of UI, having children 19/64 — <EPAM>
46. GENERALLY SPEAKING > Node for piece of UI, having children > function to render a root Node 19/64 — <EPAM>
47. GENERALLY SPEAKING > Node for piece of UI, having children > function to render a root Node > functions to render primitives: Text, Image, etc. 19/64 — <EPAM>
48. THEN... 20/64 — <EPAM>
49. THEN... > we need to pass root Node down the branches 20/64 — <EPAM>
50. THEN... > we need to pass root Node down the branches > Which can be kinda harsh 20/64 — <EPAM>
51. SO... interface Composer { // add node as a child to the current Node, execute // `content` with `node` as the current Node fun emit(node: Node, content: () -> Unit = {}) } 21/64 — <EPAM>
52. THUS 22/64 — <EPAM>
53. THUS > ComposerImpl 22/64 — <EPAM>
54. THUS > ComposerImpl > top-level compose function 22/64 — <EPAM>
55. THUS > ComposerImpl > top-level compose function > call top level render function with compose invocation 22/64 — <EPAM>
56. All this can be hidden with the help of compiler and runtime which Jetpack Compose happens to be 23/64 — <EPAM>
57. 2 https://www.raywenderlich.com/3604589-jetpack-compose-primer 1 https://developer.android.com/jetpack/compose 24/64 — <EPAM>
58. > How to start: d.android.com/jetpack/compose1 2 https://www.raywenderlich.com/3604589-jetpack-compose-primer 1 https://developer.android.com/jetpack/compose 24/64 — <EPAM>
59. > How to start: d.android.com/jetpack/compose1 > How to start properly: Primer by raywenderlich.com2 2 https://www.raywenderlich.com/3604589-jetpack-compose-primer 1 https://developer.android.com/jetpack/compose 24/64 — <EPAM>
60. START WITH override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { EditAndSlider() } } } } 25/64 — <EPAM>
61. 26/64 — <EPAM>
62. > Looks like DSL 26/64 — <EPAM>
63. > Looks like DSL > Looks like a tree 26/64 — <EPAM>
64. > Looks like DSL > Looks like a tree > Every record is a component 26/64 — <EPAM>
65. COMPONENT IS A FUNCTION (...) -> UNIT 27/64 — <EPAM>
66. CRANEWRAPPER - ROOT COMPOSABLE MATERIALTHEME - SOME STYLING DEFAULTS 28/64 — <EPAM>
67. SELECTIONSCONTROLSDE MO - INVOCATION OF OUR FUNCTION 29/64 — <EPAM>
68. @Composable fun EditAndSlider() { Text(text = "Enter your login") } 30/64 — <EPAM>
69. COMPOSABLE COMPONENT 31/64 — <EPAM>
70. COMPOSABLE COMPONENT > returns another function invocation 31/64 — <EPAM>
71. COMPOSABLE COMPONENT > returns another function invocation > has @Composable 31/64 — <EPAM>
72. COMPOSABLE COMPONENT > returns another function invocation > has @Composable > basically yields piece of UI 31/64 — <EPAM>
73. WHY COMPILER IS INVOLVED? 32/64 — <EPAM>
74. WHY COMPILER IS INVOLVED? > Every @Composable should accept a Composer as a last argument 32/64 — <EPAM>
75. WHY COMPILER IS INVOLVED? > Every @Composable should accept a Composer as a last argument > Think of @Composable as a keyword(like suspend) 32/64 — <EPAM>
76. @Composable fun EditAndSlider() { Surface(color = Color(0xFFFFFF00.toInt())) { Text(text = "Enter your login, ") } } 33/64 — <EPAM>
77. @Composable fun EditAndSlider() { Surface(color = Color(0xFFFFFF00.toInt())) { Text(text = "Enter your login, ") } } 34/64 — <EPAM>
78. Text( text = "Enter your login, ", style = TextStyle(fontSize = 120f) ) 35/64 — <EPAM>
79. Text( text = "Enter your login, ", style = TextStyle(fontSize = 120f), textAlign = TextAlign.Center ) 36/64 — <EPAM>
80. val progressState = +state { EditorState(text = "vladimir@example.com") } EditableText( value = progressState.value, editorStyle = EditorStyle(TextStyle(fontSize = 48.toFloat())), onValueChange = { progressState.value = it } ) 37/64 — <EPAM>
81. val progressState = +state { EditorState(text = "vladimir@example.com") } EditableText( value = progressState.value, editorStyle = EditorStyle(TextStyle(fontSize = 48.toFloat())), onValueChange = { progressState.value = it } ) 38/64 — <EPAM>
82. 39/64 — <EPAM>
83. REUSABILITY 40/64 — <EPAM>
84. @Composable fun InputWithCaption(caption: String) { val labelStyle = +themeTextStyle { h6 } val progressState = +state { EditorState(text = "vladimir@example.com") } Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text(caption, style = labelStyle) Surface(color = customColor3) { EditableText( value = progressState.value, editorStyle = EditorStyle(TextStyle(fontSize = 48.toFloat())), onValueChange = { progressState.value = it } ) } } } 41/64 — <EPAM>
85. @Composable fun InputWithCaption(caption: String) { val labelStyle = +themeTextStyle { h6 } val progressState = +state { EditorState(text = "vladimir@example.com") } Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text(caption, style = labelStyle) Surface(color = customColor3) { EditableText( value = progressState.value, editorStyle = EditorStyle(TextStyle(fontSize = 48.toFloat())), onValueChange = { progressState.value = it } ) } } } 42/64 — <EPAM>
86. @Composable fun InputWithCaption(caption: String) { val labelStyle = +themeTextStyle { h6 } val progressState = +state { EditorState(text = "vladimir@example.com") } Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text(caption, style = labelStyle) Surface(color = customColor3) { EditableText( value = progressState.value, editorStyle = EditorStyle(TextStyle(fontSize = 48.toFloat())), onValueChange = { progressState.value = it } ) } } } 43/64 — <EPAM>
87. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Column { InputWithCaption("Login") InputWithCaption("Password") } } } } } 44/64 — <EPAM>
88. APPLY KOTLIN CONSTRUCTIONS setContent { CraneWrapper { MaterialTheme { Column { for (1..10) { InputWithCaption("$it") } } } } } 45/64 — <EPAM>
89. PASS LAMBDAS fun onSubmit() { Toast.makeText(this, "Hello!", LENGTH_LONG).show() } setContent { CraneWrapper { MaterialTheme { InputWithCaption("Login", onSubmit) } } } 46/64 — <EPAM>
90. REUSE STYLES val h6: TextStyle = TextStyle( fontFamily = FontFamily("Roboto"), fontWeight = FontWeight.w500, fontSize = 20f), 47/64 — <EPAM>
91. 48/64 — <EPAM>
92. OPENED QUESTIONS 49/64 — <EPAM>
93. LISTS SUPPORT 50/64 — <EPAM>
94. LISTS SUPPORT > RecyclerView analog in development 50/64 — <EPAM>
95. UNIT TESTS 51/64 — <EPAM>
96. fun testRendersTheTitleAsPartOfTheRallyAppBarComponent() { val title = "Any title" val component = RallyApp(title) assertEquals(title, component.title.text) } fun testRendersTheRallyAppBarComponent() { val component = RallyApp(title ) component.matchWithSnapshot() } @Composable fun RallyAppBar(title: String) { Row { Text(text = title, style = +themeTextStyle { h4 }) } } 52/64 — <EPAM>
97. HOWEVER IMO this is a bit of a jump in logic. The assumption here is that asserting on the returned “virtual DOM” of components is the right and only way to test those components. I disagree on both counts. With the right APIs exposed, Compose will be as testable as anything else and we will push you into the “pit of success” of testing the public API of components instead of their implementation details. -- Leland Richardson 53/64 — <EPAM>
98. STATE MANAGEMENT 54/64 — <EPAM>
99. STATE MANAGEMENT > Redux is far in the future 54/64 — <EPAM>
100. MULTITHREADING 55/64 — <EPAM>
101. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it 55/64 — <EPAM>
102. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely 55/64 — <EPAM>
103. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely > if you have a Frame object in current thread 55/64 — <EPAM>
104. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely > if you have a Frame object in current thread > Frame exists in UI thread 55/64 — <EPAM>
105. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely > if you have a Frame object in current thread > Frame exists in UI thread > Frames are in-memory observable non-durable transactions 55/64 — <EPAM>
106. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely > if you have a Frame object in current thread > Frame exists in UI thread > Frames are in-memory observable non-durable transactions > Frame to be renamed to Transaction 55/64 — <EPAM>
107. MULTITHREADING > Would be awesome to accept suspend functions, but current Kotlin-compose compiler plugin doesn't support it > You're possible to change the +state object from any thread safely > if you have a Frame object in current thread > Frame exists in UI thread > Frames are in-memory observable non-durable transactions > Frame to be renamed to Transaction > Batches already supported 55/64 — <EPAM>
108. FEEDBACK LOOP 56/64 — <EPAM>
109. FEEDBACK LOOP > No preview 56/64 — <EPAM>
110. FEEDBACK LOOP > No preview > Hot reloading is warm at the moment(~30 seconds on my machine) 56/64 — <EPAM>
111. FEEDBACK LOOP > No preview > Hot reloading is warm at the moment(~30 seconds on my machine) > Faster, tenant hot reloading to come 56/64 — <EPAM>
112. LIFECYCLE 57/64 — <EPAM>
113. 58/64 — <EPAM>
114. ADDRESSED BY CALLBACKS 59/64 — <EPAM>
115. ADDRESSED BY CALLBACKS > onActive 59/64 — <EPAM>
116. ADDRESSED BY CALLBACKS > onActive > onDispose 59/64 — <EPAM>
117. ADDRESSED BY CALLBACKS > onActive > onDispose > onCommit 59/64 — <EPAM>
118. @Composable fun UserProfile(userId: Int) { val user = +state<User?>(userId) { null } +onCommit(userId) { val cancellationToken = UserAPI.get(userId) { user.value = it } onDispose { UserAPI.cancel(cancellationToken) } } if (user == null) { Loading() return } Text(text=user.name) Image(src=user.photo) } 60/64 — <EPAM>
119. COMPATIBILITY 61/64 — <EPAM>
120. COMPATIBILITY > You can use @Composable functions as views 61/64 — <EPAM>
121. COMPATIBILITY > You can use @Composable functions as views > You can use Views inside @Composable 61/64 — <EPAM>
122. 62/64 — <EPAM>
123. > d.android.com/jetpack/compose 62/64 — <EPAM>
124. > d.android.com/jetpack/compose > kotlinlang.slack.com 62/64 — <EPAM>
125. > d.android.com/jetpack/compose > kotlinlang.slack.com > https://blog.karumi.com/android-jetpack-compose- review/ 62/64 — <EPAM>
126. THE END 63/64 — <EPAM>
127. 64/64 — <EPAM>