Let's Talk Composing UI :: DevFest Kolkata '19

While Developing Apps, following a Reactive Architecture (for example MVI, Mobius, Redux and even MVVM) & Single Source of Truth can get you some big wins including but not limited to, Loose Coupling & Separation of Concerns, Code Testability and easy debugging, unidirectional data, etc. However, unlike Web, where Reactive Architectures are the norm, in Android, we need to opt for Reactive Architecture considering few tradeoffs (time to market, learning curve, etc.), as it’s not natural in Android.

What do I mean by saying Reactive architecture is not natural in Android? Just like web frontends, Android apps revolve around the UI, everything we do in our Android apps has some direct or indirect relation with the UI, and the Android UI framework is imperative itself.
While the Android Platform team kept adding more and more types of Views (such as Constraint Layout, RecyclerView or more recent Motion Layout), they didn’t change the nature of UI framework itself since the beginning of android development. This was majorly due to language and tooling limitations (limited by the technologies of that time).

Google announced official support for Kotlin 2 years back, and now major numbers of professional Android Developers worldwide already adopted Kotlin, which made it easier for Google to go Kotlin first in this IO19. Kotlin comes with many perks, some of them are Functional Programming support, compiler plugin capabilities and most importantly huge support on building DSLs at ease.

What relation does Koltin have with Reactive applications? In this IO19, Google announced Jetpack Compose (https://developer.android.com/jetpack/compose/), a new (still-in-development) next generation, Kotlin based, reactive cum declarative UI toolkit, backed by principals like Single Source of Truth, Unidirectional Data Flow, Functional Programming (especially function composition and effects).

This new UI toolkit would require a radical shift in our thought process about app architectures UI programming. In this talk, we would see how we can create and interact with UI with Jetpack Compose and how different it is from the present Android framework. We will also look into examples of some code patterns and ideas of from a few famous platforms such as Vue.js, React, Flutters, etc., and how these patterns and are adopted in Jetpack Compose.

Transcript

1. Hello Kolkata!! Slide Design by instagram.com/mohijeet/ Rivu Chakraborty
2. Let’s Talk Composing UI Rivu Chakraborty https://rivu.dev
3. Rivu Chakraborty About Me • https://rivu.dev • Sr Software Engineer (Android) - BYJU’S • Instructor - Caster.io • Google Certified Associate Android Developer • Speaks on Kotlin / Android • Author - Reactive Programming in Kotlin • Author - Functional Kotlin • Author - Hands-On Data Structures and Algorithms with Kotlin
4. @intelligibabble http://intelligiblebabble.com/ Big Shout Out Leland Richardson
5. This Talk Covers • Why should we care @rivuchakraborty https://rivu.dev
6. @rivuchakraborty https://rivu.dev This Talk Covers • Why should we care • How to Use Jetpack Compose
7. @rivuchakraborty https://rivu.dev This Talk Covers • Why should we care • How to Use Jetpack Compose • How Compose Works
8. This Talk Covers @rivuchakraborty https://rivu.dev • Why should we care • How to Use Jetpack Compose • How Compose Works • How to manage States with Compose
9. @rivuchakraborty https://rivu.dev Why Should We Care
10. Why Should We Care @rivuchakraborty https://rivu.dev
11. @rivuchakraborty https://rivu.dev Why Should We Care
12. @rivuchakraborty https://rivu.dev Why Should We Care
13. @rivuchakraborty https://rivu.dev Why Should We Care
14. @rivuchakraborty https://rivu.dev Why Should We Care
15. Why Should We Care @rivuchakraborty https://rivu.dev
16. Why Should We Care • UI • Declarative • Functional • Reactive @rivuchakraborty https://rivu.dev
17. Why Should We Care • UI • Declarative • Functional • Reactive Functional Declarative UI is on rise to become The Way of doing UI @rivuchakraborty https://rivu.dev
18. Why Should We Care Benefits • Separation of Concerns @rivuchakraborty https://rivu.dev
19. Why Should We Care Benefits • Separation of Concerns • Declarative + Functional / Reactive @rivuchakraborty https://rivu.dev
20. Why Should We Care Benefits • Separation of Concerns • Declarative + Functional / Reactive • DSL @rivuchakraborty https://rivu.dev
21. Why Should We Care Benefits • Separation of Concerns • Declarative + Functional / Reactive • DSL • Developer Friendly @rivuchakraborty https://rivu.dev
22. Why Should We Care @rivuchakraborty https://rivu.dev
23. Why Should We Care Benefits • Separation of Concerns • Functional / Reactive • DSL • Developer Friendly • Designer Friendly • Flattened UI @rivuchakraborty https://rivu.dev
24. Why Should We Care Benefits • Flattened UI • Less Compile Time Overhead • Separation of Concerns • Functional / Reactive • DSL • Developer Friendly • Designer Friendly @rivuchakraborty https://rivu.dev
25. Why Should We Care Benefits • Flattened UI • Less Compile Time Overhead • Better Performance, Less Memory Wastage • Separation of Concerns • Functional / Reactive • DSL • Developer Friendly • Designer Friendly @rivuchakraborty https://rivu.dev
26. How to use Jetpack Compose
27. How to use Jetpack Compose Everything is `fun` And Lambda
28. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
29. How to use Jetpack Compose @Composable @rivuchakraborty https://rivu.dev
30. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
31. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
32. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
33. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
34. CraneWrapper: Needed to buld the Foundation Might be renamed/removed later or get invoked by the framework itself inside `setContent()` How to use Jetpack Compose @rivuchakraborty https://rivu.dev
35. MaterialTheme / CustomTheme: Every Root Layout (Anything inside CraneWrapper), should have a Theme How to use Jetpack Compose @rivuchakraborty https://rivu.dev
36. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
37. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
38. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
39. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
40. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
41. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
42. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
43. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
44. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
45. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
46. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
47. @rivuchakraborty https://rivu.dev How to use Jetpack Compose
48. Let’s write the logic for Counter How to use Jetpack Compose @rivuchakraborty https://rivu.dev
49. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
50. How to use Jetpack Compose
51. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
52. How to use Jetpack Compose @rivuchakraborty https://rivu.dev
53. How Compose Works
54. How Compose Works Gap Buffer @rivuchakraborty https://rivu.dev
55. Item 1 Item 2 Item 3 Empty Empty Empty Empty How Compose Works Gap Buffer @rivuchakraborty https://rivu.dev
56. How Compose Works Gap Buffer Slot Table @rivuchakraborty https://rivu.dev
57. How Compose Works Slot Table Item 1 Item 2 Item 3 Empty Empty Empty Empty Cu rr en t In de x @rivuchakraborty https://rivu.dev
58. Item 1 Item 2 Item 3 Item 4 Empty Empty Empty Cu rr en t In de x @rivuchakraborty https://rivu.dev How Compose Works Slot Table
59. @rivuchakraborty https://rivu.dev How Compose Works
60. Group Empty Empty Empty Empty Empty Empty How Compose Works @rivuchakraborty https://rivu.dev
61. Group State(0) Empty Empty Empty Empty Empty How Compose Works @rivuchakraborty https://rivu.dev
62. Group State(0) Group Empty Empty Empty Empty How Compose Works @rivuchakraborty https://rivu.dev
63. Group State(0) Group “Count 0” Empty Empty Empty How Compose Works @rivuchakraborty https://rivu.dev
64. Group State(0) Group “Count 0” Group Empty Empty How Compose Works @rivuchakraborty https://rivu.dev
65. Group State(0) Group “Count 0” Group {...} Empty How Compose Works @rivuchakraborty https://rivu.dev
66. Group State(1) Group “Count 1” Group {...} Empty Recompose How Compose Works @rivuchakraborty https://rivu.dev
67. View Tree with XML in Present Day View Group 1 View Group 2 View Group 3 View Group 4 Image View Button Text View Toolbar @rivuchakraborty https://rivu.dev How Compose Works
68. Slot Table Group State(1) Group “Count 1” “Group” {...} Empty Cu rr en t In de x How Compose Works @rivuchakraborty https://rivu.dev
69. How to Manage States with Compose How should we align our thinking to work with Functional Declarative UIs
70. How to Manage States with Compose State View Action Reactive - Redux, Mobx, MVI, Mobius, MVPI, MVMI ... @rivuchakraborty https://rivu.dev
71. State How to Manage States with Compose @rivuchakraborty https://rivu.dev
72. View & View Model How to Manage States with Compose
73. The Problem How to Manage States with Compose
74. Spinner SpinnerAdapter OnItemSelectedListener How to Manage States with Compose The Problem 2 @rivuchakraborty https://rivu.dev
75. Jetpack Compose How to Manage States with Compose The Solution @rivuchakraborty https://rivu.dev
76. Let’s build a statefull App How to Manage States with Compose @rivuchakraborty https://rivu.dev
77. How to Manage States with Compose @rivuchakraborty https://rivu.dev
78. How to Manage States with Compose @rivuchakraborty https://rivu.dev
79. How to Manage States with Compose @rivuchakraborty https://rivu.dev
80. UI How to Manage States with Compose @rivuchakraborty https://rivu.dev
81. Success How to Manage States with Compose @rivuchakraborty https://rivu.dev
82. Error How to Manage States with Compose @rivuchakraborty https://rivu.dev
83. Reload Button How to Manage States with Compose @rivuchakraborty https://rivu.dev
84. State change In the UI Level 2 ways How to Manage States with Compose @rivuchakraborty https://rivu.dev
85. Activity How to Manage States with Compose Approach 1 @rivuchakraborty https://rivu.dev
86. How to Manage States with Compose Approach 1 Root Composable @rivuchakraborty https://rivu.dev
87. How to Manage States with Compose Approach 1 Root Composable @rivuchakraborty https://rivu.dev
88. Root Composable How to Manage States with Compose Approach 1 @rivuchakraborty https://rivu.dev
89. How to Manage States with Compose Approach 1 Root Composable @rivuchakraborty https://rivu.dev
90. How to Manage States with Compose Approach 1 Activity @rivuchakraborty https://rivu.dev
91. Activity How to Manage States with Compose Approach 2 @rivuchakraborty https://rivu.dev
92. Composable How to Manage States with Compose Approach 2 @rivuchakraborty https://rivu.dev
93. Approach 2 Activity How to Manage States with Compose @rivuchakraborty https://rivu.dev
94. Activity onCreate How to Manage States with Compose Approach 2 @rivuchakraborty https://rivu.dev
95. Activity loadData How to Manage States with Compose Approach 2 @rivuchakraborty https://rivu.dev
96. Activity stateModel How to Manage States with Compose Approach 2 @rivuchakraborty https://rivu.dev
97. Let’s Talk Composing UI Resources ➢ https://developer.android.com/jetpack/compose ➢ http://bit.ly/composefirstprinciple ➢ http://bit.ly/contentondeclarativeUI ➢ https://speakerdeck.com/lelandrichardson/react-meet-compo se ➢ https://rivu.dev/writing-android-ui-code-in-jetpack-compose/ ➢ https://rivu.dev/jetpack-compose-managing-states/ ➢ https://fragmentedpodcast.com/episodes/172/ @rivuchakraborty https://rivu.dev
98. ধন্যবাদ!! Thank You!! @rivuchakraborty https://rivu.dev Slide Design by instagram.com/mohijeet/