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

Android new UI ToolKit: Jetpack Compose

Android new UI ToolKit: Jetpack Compose

Souleymane Sidibe

February 27, 2022

More Decks by Souleymane Sidibe

Other Decks in Technology


  1. Agenda • The View System • Jetpack Compose: overview •

    State management • Modi fi er • Building a Composable(demo) • Beyond android’s use case • Wrap-up
  2. The View System • Provides the visual elements on the

    screen • Buttons, text, animations • Also the tools for the developers • Android Studio UI Editor for xml layouts, Visual layout editor for ConstrainLayout • We almost used Javascript instead of Java 😅
  3. The View System • Pros • XML layouts are logic

    free (databinding lovers… ☠☢⛔⚠) • Layout quali fi ers. (Orientation, screen density, locale, etc) • Cons • Two languages: XML and Java • NPE • Hard to create custom views • Views are stateful
  4. And then… • React Native • Flutter • SwiftUI •

    And developers love them! • 🚀Declarative UI 🚀
  5. Why Compose • Build a UI Toolkit with the developers

    • Unbundle the UI Toolkit from the platform releases • Fewer technology stack(Activity, Fragment, Custom view, etc) • Better state management • Write less code • Be aligned with industry standard
  6. The timing • Kotlin (2017) • The new Kotlin compiler

    • Years of experience building and maintaining a UI Toolkit(since 2007) • Real world implementation of Declarative UI (inspired by React Native, Flutter, etc.)
  7. Jetpack Compose • Open source • Declarative UI Framework •

    Takes full advantage of Kotlin • Function based piece of UI • Compose 🤝 View System • Powerful tooling with @Preview • Great documentation
  8. Takes full advantage of Kotlin Functions Extension functions Passing functions

    around Property delegate High order functions Control Flow Strong type system
  9. Function based UI Compose special keyword Compose decorator Params: data,

    events, con f ig Child Composables No class, no inheritance
  10. Jetpack Compose View System Jetpack Compose A screen @Composable Multiple

    screens @Composables Fragments @Composables Custom Views @Composable A Button @Composable
  11. State Hoisting • Do not manipulate state locally • Let

    the caller provides the state • Inform the caller about events • And let the caller calls back with new data(recomposition)
  12. Modi f ier • Decorate a composable • Size, padding

    • Accessibility • Make the Composable clickable, scrollable, zoomable, etc
  13. Type safe modi f ier • Modi fi er only

    available for a given Composable • weight() is only available for Column and Row • The pattern for your Custom Composable
  14. Beyond android • Compose for desktop by JetBrains (Desktop App)

    • Compose Multiplatform (Multiplatform App) • Mosaic by Jake Warthon (console UI) • IOS?
  15. Wrap-up • Android dev 💙 Compose • Compose is here

    to stay • Compose is not perfect(performance issues, material design components) • Compose is production ready • Give it a try 😊
  16. Links • Doc: https://developer.android.com/jetpack/compose • Android dev channel => https://www.youtube.com/c/AndroidDevelopers/search?

    query=compose • Maps => https://cloud.google.com/blog/products/maps-platform/compose-maps- sdk-android-now-available • Accompanist => https://google.github.io/accompanist/ • Soulesidibe => https://soulesidibe.medium.com/jetpack-compose-1-0-where-to- start-8275717b1e0