Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Composable New World - Workshop Edition

cmota
October 21, 2022

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)!

cmota

October 21, 2022
Tweet

More Decks by cmota

Other Decks in Technology

Transcript

  1. 👨💻 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 @
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. • 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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