Exploring Jetpack Compose : Droidcon Vienna

The Android UI toolkit API has remained the same for nearly a decade now and while new libraries like recyclerView, constraintLayout, motionLayout were launched, the toolkit was never changed fundamentally.

Jetpack Compose presents a radical shift in the way developers think about and write UI code on Android.

What is Jetpack Compose?

Jetpack Compose is an unbundled toolkit designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language.

With compose, UI components are fully declarative and allow developers to create layouts by simply describing what the UI should look like in their code.

Join me as we dive into setting up and building apps with JetPack compose, which will soon become the most intuitive way of writing UI code on Android.

Transcript

1. Exploring Jetpack Compose Sneak peek into the future of Android UI @kaustavjaiswal Kaustav Jaiswal Senior Android Developer Amadeus
2. 2008 Android 1.0 is released 2013 Android Studio 2014 ART, Recycler View 2017 Constraint Layout, Kotlin, Arch Components 2019 Jetpack Compose @kaustavjaiswal A brief look at Android history Credits: Declarative UI Patterns (Google I/O'19)
3. Old UI @kaustavjaiswal
4. New UI @kaustavjaiswal
5. @kaustavjaiswal
6. @kaustavjaiswal Developer looks at the Design:
7. @kaustavjaiswal Developer Reaction
8. A sneak peak into the future @kaustavjaiswal
9. What is compose? Declarative UI Runtime @kaustavjaiswal
10. What is compose? Kotlin Compiler Plugin @kaustavjaiswal
11. What is compose? Built from the ground up by the Android Team @kaustavjaiswal Inspired by React, Litho, Vue.js & Flutter
12. What is compose? Unbundled @kaustavjaiswal
13. What is compose? Open Source @kaustavjaiswal
14. What is compose? “pre”-alpha?! @kaustavjaiswal
15. What is compose? Jetpack Compose presents a radical shi in the way developers think about and write UI code on Android @kaustavjaiswal
16. Setting up Compose @kaustavjaiswal
17. Get Compose Up and Running Fork the AndroidX components from the AOSP Run a special version of Android Studio with compose compiler plugins enabled. All steps mentioned here http://bit.ly/setupcompose Linux and Mac Windows http://bit.ly/composewin10 @kaustavjaiswal
18. Composing UI @kaustavjaiswal
19. Compose Elements Compose Runtime Compiler Plugin Compose UI @kaustavjaiswal
20. Magic happens here! Trailing Lambda Syntax @kaustavjaiswal
21. @kaustavjaiswal Abstract Syntax Tree IR (Intermediate Representation) Kotlin Code Parser Compiler Front-end Compiler
22. @kaustavjaiswal Generated Code for a composable function IR (Intermediate Representation) Transform Perform Optimizations Compiler Back-end Experimental Compose Work
23. @kaustavjaiswal No more findViewById Composition over inheritance ✅ No handle on the view No XML
24. A composable can be called from within another composable only @kaustavjaiswal
25. @kaustavjaiswal
26. @kaustavjaiswal
27. @kaustavjaiswal
28. Compose Principles @kaustavjaiswal
29. @kaustavjaiswal UI is represented as a tree tree
30. @kaustavjaiswal
31. @kaustavjaiswal
32. @kaustavjaiswal
33. @kaustavjaiswal
34. @kaustavjaiswal
35. @kaustavjaiswal
36. Positional Memoization @kaustavjaiswal
37. @kaustavjaiswal UI= function(state)
38. @kaustavjaiswal
39. @kaustavjaiswal @kaustavjaiswal Creates State
40. State is passed @kaustavjaiswal
41. @kaustavjaiswal State Compose Tree Root Node
42. @kaustavjaiswal State Compose Tree Root Node
43. @kaustavjaiswal Events Compose Tree Root Node
44. @kaustavjaiswal Events Compose Tree Root Node
45. @kaustavjaiswal
46. Makes composable the root view Defines key colors and typography @kaustavjaiswal
47. Under the hood @kaustavjaiswal
48. Gap Buffers @kaustavjaiswal Compose uses a slightly different implementation of Gap Buffers called Slot Tables Core principles are same Tradeoffs are the same
49. Gap Buffers - How do they work? @kaustavjaiswal
50. Gap Buffers @kaustavjaiswal For a gap buffer all operations -> Insert, update, delete are constant time Except for moving the gap Move the gap when the structure of the tree changes Making a bet that the structure of the UI doesn’t change very often, but values do
51. @kaustavjaiswal
52. @kaustavjaiswal
53. Positional Memoization @kaustavjaiswal EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY
54. Positional Memoization @kaustavjaiswal EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY
55. Positional Memoization @kaustavjaiswal [ a , b , c ] EMPTY EMPTY EMPTY EMPTY EMPTY EMPTY
56. Positional Memoization @kaustavjaiswal [ a , b , c ] b EMPTY EMPTY EMPTY EMPTY EMPTY
57. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
58. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
59. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
60. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
61. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
62. Positional Memoization @kaustavjaiswal [ a , b , c ] b [ b ] EMPTY EMPTY EMPTY EMPTY
63. What’s next? UI Landscape is quickly evolving One-way data flow model What about my existing views? Layout editor? Preview Tool? Potential to use the Compose runtime and compiler plugin for other libraries? Multithreaded layout! @kaustavjaiswal
64. References and Credits Big shout out to @intelligibabble http://intelligiblebabble.com/comp ose-from-first-principles/ Compose slack channel Chain React Conf Talk http://bit.ly/reactmeetcompose https://www.geeksforgeeks.org/ga p-buffer-data-structure/ @kaustavjaiswal Declarative UI Patterns talk http://bit.ly/declarativeGoogleio19 Unsplash – For all slide title images https://unsplash.com/ Kotlin/Everywhere Talk by @ragunathjawahar https://speakerdeck.com/ragunathj awahar/jetpack-compose-next-gen- kotlin-ui-toolkit-for-android
65. @kaustavjaiswal kaustavj@gmail.com ✉