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

Android new UI ToolKit: Jetpack Compose

Android new UI ToolKit: Jetpack Compose

Souleymane Sidibe

February 27, 2022
Tweet

More Decks by Souleymane Sidibe

Other Decks in Technology

Transcript

  1. @soulesidibe - Feb 2022 Android new UI ToolKit: Jetpack Compose

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

    State management • Modi fi er • Building a Composable(demo) • Beyond android’s use case • Wrap-up
  3. 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 😅
  4. The View System

  5. The View System

  6. 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
  7. And then… • React Native • Flutter • SwiftUI •

    And developers love them! • 🚀Declarative UI 🚀
  8. Declarative UI

  9. Declarative UI

  10. 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
  11. 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.)
  12. Jetpack Compose

  13. 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
  14. Declarative UI Framework

  15. Takes full advantage of Kotlin Functions Extension functions Passing functions

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

    events, con f ig Child Composables No class, no inheritance
  17. Compose 🤝 View System

  18. Compose 🤝 View System

  19. Compose 🤝 View System

  20. Jetpack Compose View System Jetpack Compose A screen @Composable Multiple

    screens @Composables Fragments @Composables Custom Views @Composable A Button @Composable
  21. State Management

  22. State Management

  23. State Management

  24. State Management

  25. State Management

  26. State Management

  27. State Management

  28. State Management Stateless composable Stateful Composable

  29. 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)
  30. State Management

  31. State Management Lifecycle

  32. Modi f ier

  33. Modi f ier • Decorate a composable • Size, padding

    • Accessibility • Make the Composable clickable, scrollable, zoomable, etc
  34. Modi f ier

  35. Modi f ier

  36. Modi f ier

  37. 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
  38. Type safe modi f ier

  39. Type safe modi f ier

  40. Type safe modi f ier

  41. Building a Composable (Demo)

  42. Beyond android’s use case

  43. Beyond android • Compose for desktop by JetBrains (Desktop App)

    • Compose Multiplatform (Multiplatform App) • Mosaic by Jake Warthon (console UI) • IOS?
  44. Wrap-up

  45. 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 😊
  46. Thanks!

  47. 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