$30 off During Our Annual Pro Sale. View Details »

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. Workshop Edition
    cafonsomota
    @
    A Composable New World!

    View Slide

  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
    @

    View Slide

  3. 🖥 CodeLab


    cmota.github.io/a-composable-new-world


    👉 Code


    github.com/cmota/a-composable-new-world


    🍿 YouTube


    bit.ly/cmota-youtube
    Materials cafonsomota
    @

    View Slide

  4. 🖥 CodeLab


    cmota.github.io/a-composable-new-world


    👉 Code


    github.com/cmota/a-composable-new-world


    🍿 YouTube


    bit.ly/cmota-youtube
    cafonsomota
    @
    Materials

    View Slide

  5. cmota.github.io/a-composable-new-world

    View Slide

  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

    View Slide

  7. Jetpack Compose

    View Slide

  8. developer.android.com/jetpack/compose
    cmota.github.io/a-composable-new-world

    View Slide

  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

    View Slide

  10. 1. Create an activity
    MainActivity.kt
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  27. @cafonsomota


    Apps in production
    cmota.github.io/a-composable-new-world

    View Slide

  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

    View Slide

  29. Compose

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  37. blog.jetbrains.com/kotlin/2022/10/compose-multiplatform-1-2-is-out/
    cmota.github.io/a-composable-new-world

    View Slide

  38. Android, desktop, iOS, and Web

    View Slide

  39. :androidApp
    @cafonsomota


    View Slide

  40. :androidWearApp
    @cafonsomota


    View Slide

  41. :desktopApp
    @cafonsomota


    View Slide

  42. :iosAppCompose
    @cafonsomota


    View Slide

  43. :webApp
    :webApp

    View Slide

  44. Live Coding

    View Slide

  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

    View Slide

  46. dev-reactions/live-coding.gif

    View Slide

  47. droidcon Egypt

    View Slide

  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


    View Slide

  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


    View Slide

  50. Resources

    View Slide

  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

    View Slide

  52. Workshop Edition
    cafonsomota
    @
    A Composable New World!

    View Slide