Exploring Jetpack Compose - An Overview : Droidcon India

Lightning talk was given @droidconIN about Jetpack Compose.

he 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 get an overview of JetPack compose, which will soon become the most intuitive way of writing UI code on Android.

Transcript

1. Jetpack Compose Overview 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 peek 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 shift in the way developers think about and write UI code on Android @kaustavjaiswal
16. Composing UI @kaustavjaiswal
17. Compose Elements Compose Run4me Compiler Plugin Compose UI @kaustavjaiswal
18. Magic happens here! Trailing Lambda Syntax @kaustavjaiswal
19. @kaustavjaiswal No more findViewById Composition over inheritance ✅ No handle on the view = No XML
20. Compose Principles @kaustavjaiswal
21. @kaustavjaiswal UI is represented as a tree tree
22. @kaustavjaiswal UI= function(state)
23. @kaustavjaiswal State Compose Tree Root Node
24. @kaustavjaiswal State Compose Tree Root Node
25. @kaustavjaiswal Events Compose Tree Root Node
26. @kaustavjaiswal Events Compose Tree Root Node
27. What’s next? UI Landscape is quickly evolving One-way data flow model What about my exis4ng views? Layout editor? Preview Tool? Poten4al to use the Compose run4me and compiler plugin for other libraries? Mul4threaded layout! @kaustavjaiswal
28. References and Credits Big shout out to @intelligibabble hNp://intelligiblebabble.com/c ompose-from-first-principles/ Compose slack channel @kaustavjaiswal Declarative UI Patterns talk http://bit.ly/declarativeGoogle io19 Unsplash – For all slide title images https://unsplash.com/
29. Thank you! @kaustavjaiswal kaustavj@gmail.com ✉