A Composable New World - Workshop Edition

As our Twitter streams become flooded with the release of Jetpack Compose 1.0, it's time to jump into the UI declarative world and reform the XML and all of the `findViewById` calls that exist scattered throughout the code.

Join me in this talk to see the first steps into this composable new world and build your first app (with Compose)!

Transcript

1. Workshop Edition cafonsomota @ A Composable New World!
2. 👨💻 Android GDE 🗣 Founder @GDGCoimbra and co-founder @Kotlin_Knights ✍ Author @rwenderlich 🗺 Loves travel, photography and running 🇪🇬 In love with Bamia (well, Egyptian food in general) cafonsomota @
3. 🖥 CodeLab cmota.github.io/a-composable-new-world 👉 Code github.com/cmota/a-composable-new-world 🍿 YouTube bit.ly/cmota-youtube Materials cafonsomota @
4. 🖥 CodeLab cmota.github.io/a-composable-new-world 👉 Code github.com/cmota/a-composable-new-world 🍿 YouTube bit.ly/cmota-youtube cafonsomota @ Materials
5. cmota.github.io/a-composable-new-world
6. 1. git clone github.com/cmota/unsplash-compose 2. Download Android Studio Dolphin* developer.android.com/studio 3. Open 00. Starter Project in Android Studio a-composable-new-world/00. Starter Project * ⚠ There’s a Speci fi c version for Mac M1 Materials @cafonsomota cmota.github.io/a-composable-new-world
7. Jetpack Compose
8. developer.android.com/jetpack/compose cmota.github.io/a-composable-new-world
9. This is item 1 This is item 2 This is item 3 This is item 4 This is item 5 This is item 6 Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
10. 1. Create an activity MainActivity.kt Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
11. 1. Create an activity 2.Create the correspondent xml activity_main.xml Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
12. 1. Create an activity 2.Create the correspondent xml 3.Create a fragment MainFragment.kt Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
13. 1. Create an activity 2.Create the correspondent xml 3.Create a fragment 4.Create the correspondent xml fragment_main.xml Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
14. 1. Create an activity 2.Create the correspondent xml 3.Create a fragment 4.Create the correspondent xml 5.Create a recycler view RecyclerView Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
15. 1. Create an activity 2.Create the correspondent xml 3.Create a fragment 4.Create the correspondent xml 5.Create a recycler view 6.Create the adapter Adapter Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
16. 1. Create an activity 2.Create the correspondent xml 3.Create a fragment 4.Create the correspondent xml 5.Create a recycler view 6.Create the adapter 7.Create the correspondent xml for items item_adapter.xml Exercise: Implementing a list Imperative UI: XML cmota.github.io/a-composable-new-world
17. fi les created 5 (It can be more if we want to add further customization) lines of code written +200 (between declarations and xml attributes) Exercise: Implementing a list @cafonsomota Imperative UI: XML cmota.github.io/a-composable-new-world
18. • Time consuming • Error prone • Several fi les created • Increasing APK size • Coupled components Imperative UI: XML Exercise: Implementing a list This is item 1 This is item 2 This is item 3 This is item 4 This is item 5 This is item 6 cmota.github.io/a-composable-new-world
19. android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java View.java TextView extends Imperative UI: XML cmota.github.io/a-composable-new-world
20. View.java TextView extends ImageView Imperative UI: XML cmota.github.io/a-composable-new-world android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
21. View.java TextView extends ImageView ViewGroup Imperative UI: XML cmota.github.io/a-composable-new-world android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
22. View.java TextView extends ImageView ViewGroup extends LinearLayout Imperative UI: XML cmota.github.io/a-composable-new-world android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
23. View.java TextView extends ImageView ViewGroup extends LinearLayout RelativeLayout … Imperative UI: XML cmota.github.io/a-composable-new-world android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
24. View.java 30407 lines of code TextView extends ImageView ViewGroup extends LinearLayout RelativeLayout … Imperative UI: XML cmota.github.io/a-composable-new-world android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
25. With 30407 lines of code and several classes that extend it - Dif fi cult to scale - Hard to maintain - Every change might re fl ect on a lot of classes - Bundled to the OS and OEM’s implementation of these components @cafonsomota Imperative UI: XML cmota.github.io/a-composable-new-world
26. Unbundle from platform releases Faster to implement new designs (views/components) Clarify state ownership and event handling * adapted from declarative UI patterns (Google I/O’19) - https://www.youtube.com/watch?v=VsStyq4Lzxo&t @cafonsomota Goals cmota.github.io/a-composable-new-world
27. @cafonsomota Apps in production cmota.github.io/a-composable-new-world
28. Twitter going all in on Jetpack Compose for feature development: greater productivity, less bugs *android-developers.googleblog.com/2022/04/twitter-going-all-in-on-jetpack-compose.html @cafonsomota Apps in production cmota.github.io/a-composable-new-world
29. Compose
30. compose.animation compose.foundation compose.material compose.material3 compose.ui compose.runtime compose.compiler @cafonsomota Jetpack Compose cmota.github.io/a-composable-new-world
31. compose.animation compose.foundation compose.material compose.material3 compose.ui compose.runtime compose.compiler Jetpack Compose Compose Compiler Compose Runtime Compose Animation Compose UI Compose Foundation Compose Material Compose Material 3 Compose UI Toolkit (Android) cmota.github.io/a-composable-new-world
32. Compose Compiler Compose Runtime Compose Animation Compose UI Compose Foundation Compose Material Compose Material 3 compose.animation compose.foundation compose.material compose.material3 compose.ui compose.runtime compose.compiler Jetpack Compose Compose UI Toolkit (Android) cmota.github.io/a-composable-new-world
33. Compose Compiler Written in Kotlin Transforms @Composable into UI Doesn’t use the Annotation Processor The plugin works at system/code generation level Doesn’t impact build times Open source Available in the AOSP android.googlesource.com/platform/frameworks/support/+/HEAD/compose/compiler Compose Compiler Compose Runtime Compose Animation Compose UI Compose Foundation Compose Material Compose Material 3 Compose UI Toolkit (Android) cmota.github.io/a-composable-new-world
34. Compose Compiler Platform agnostic Doesn’t know what android or UI are Tree management solution Compose Runtime Compose Runtime Compose Animation Compose UI Compose Foundation Compose Material Compose Material 3 Compose UI Toolkit (Android) cmota.github.io/a-composable-new-world
35. compose.ui Handles input management, Drawing, Layouts, etc. compose.foundation Contains Basic building: Column, Text, Image, etc. compose.material Material design system to use on components compose.material3 Material design 3 system to use on components compose.animation Animations to use easily and out side of the box Compose UI Toolkit Compose Compiler Compose Runtime Compose Animation Compose UI Compose Foundation Compose Material Compose Material 3 Compose UI Toolkit (Android) cmota.github.io/a-composable-new-world
36. Compose UI Web Compose Compiler Compose Runtime Compose UI Android Compose UI Desktop Compose UI Console Compose UI iOS Compose cmota.github.io/a-composable-new-world
37. blog.jetbrains.com/kotlin/2022/10/compose-multiplatform-1-2-is-out/ cmota.github.io/a-composable-new-world
38. Android, desktop, iOS, and Web
39. :androidApp @cafonsomota
40. :androidWearApp @cafonsomota
41. :desktopApp @cafonsomota
42. :iosAppCompose @cafonsomota
43. :webApp :webApp
44. Live Coding
45. A set of libraries that provide Compose ready features Examples: Insets, Paging, Permissions, Swipe to refresh, etc. 📐 Insets 🍫 System UI Controller 🎨 AppCompat Theme Adapter 🧭✨Navigation-Animation 📫 Permissions ⏳ Placeholder 🌊 Flow Layouts 🧭🎨 Navigation-Material 🖌 Drawable Painter ⬇ Swipe to Refresh 📖 Pager @cafonsomota Accompanist cmota.github.io/a-composable-new-world
46. dev-reactions/live-coding.gif
47. droidcon Egypt
48. droidcon Egypt Composing in Your Canvas! Today, @ 18h00, Main Stage by Himanshu Singh Create Multiplatform Chat App with Compose and Ktor Today, @ 18h00, Jameel Stage Ahmed Nabil @cafonsomota
49. droidcon Egypt Compose Everywhere! From Android to Desktop … Web! Friday, @ 15h15, Jameel Stage by Ahmed Adel Composing your design system in Jetpack Compose Today, @ 16h45, Jameel Stage Frank Tamre @cafonsomota
50. Resources
51. Jetpack Compose samples (Google) github.com/android/compose-samples A curated list of Jetpack Compose libraries, projects and articles github.com/jetpack-compose/jetpack-compose-awesome Jetpack Compose Catalog jetpackcompose.app Jetpack/JetBrains Compose Playground foso.github.io/Jetpack-Compose-Playground/ Community twitch.tv/intelligibabble joebirch.co/tag/jetpack-compose/ jorgecastillo.dev/ Resources
52. Workshop Edition cafonsomota @ A Composable New World!