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

Jetpack Compose

Jetpack Compose

Introduction into Jetpack Compose and a discussion of what still has to improve.
This presentation was shown at the GDG Bucharest event about "What's new in Android 11":
https://gdg.community.dev/events/details/google-gdg-bucharest-presents-whats-new-in-android-11/

D0ed2f28dd13ddfb192ebe198623924c?s=128

Wolfram Rittmeyer

August 25, 2020
Tweet

Transcript

  1. None
  2. Compose? What does it actually mean? www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

    „Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI's construction.“ https://developer.android.com/jetpack/compose/tutorial
  3. https://developer.android.com/jetpack/compose

  4. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  5. None
  6. None
  7. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  8. None
  9. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  10. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  11. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  12. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  13. Functional UI  Small and specific components – Button –

    OutlinedButton – TextButton – IconButton – FloatingActionButton  No inheritance hierarchy www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  14. Functional UI  Data goes in  View hierarchy gets

    emitted  Events are propagated outwards www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  15. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  16. Layouts  Stack  Column / ScrollableColumn  Row /

    ScrollableRow  Card  ConstraintLayout  LazyColumnItems  LazyRowItems www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  17. Simple Widgets  Button  Text  Image  Switch

     Slider  Popup  Spacer  Divider www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  18. More Widgets  TextField  Scaffold  TopAppBar  BottomNavigation

    www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  19. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  20. State  Components need state – slider position of a

    Slider – cursor position of a TextField – current progress of a LinearProgressindicator  Can be either passed into the @Composable function  Or can be internal only www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  21. State  State change triggers recomposition – for internal and

    externally passed values  Done by compiler magic  You should not – actually you can not - query a widget for state – Romain Guy was very adamant about that :-) www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  22. State  @Model is deprecated www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  23. State  @Model is deprecated  var someVal by state

    {} is deprecated www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  24. State  @Model is deprecated  var someVal by state

    {} is deprecated  val someVal = state {} is deprecated www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  25. State  @Model is deprecated  var someVal by state

    {} is deprecated  val someVal = state {} is deprecated  The recommended use is val someVal = remember { yourVal } or val someVal = remember { mutableStateOf(yourVal) } www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  26. None
  27. From Leland Richardson‘s talk „React, Meet Compose“ (https://www.youtube.com/watch?v=4EFjDSijAZU) See also

    John O‘Reilly‘s Tweet: https://twitter.com/joreilly/status/1296745525425905664
  28. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  29. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  30. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  31. Modifier  Can be combined  Are specific to the

    scope  Are applied top to bottom  Can be used add gesture handling www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  32. None
  33. None
  34. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  35. None
  36. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  37. Testing  There‘s a Compose specific testing lib available 

    JUnit rule for setting the test screen  Actions  Assertions www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  38. None
  39. None
  40. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  41. CustomView  Canvas is available as a composable – most

    methods comparable to version of the other Canvas  You can add other Composables as well www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  42. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  43. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  44. Tooling  You can easily create a preview of your

    component  You can feed it data via a PreviewParameterProvider  You can create multiple previews of one component  You can directly interact with it in the preview www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  45. None
  46. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  47. Tooling  Still a bit flaky and susceptible to errors

    – Those might be your fault, but still  Requires recompilation  No way to use drag & drop to design composables www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  48. Tooling  Recompilation makes it slower than XML design 

    No hierarchy of elements  Other tools missing www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  49. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  50. Interoperability I  You can use classical views in Composables

     You can use Composables within XML layouts www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  51. Interoperability I  You can use classical views in Composables

     You can use Composables within XML layouts  But both models do not really fit www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  52. Interoperability II  It‘s part of Jetpack www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW

    @RittmeyerW
  53. Interoperability II  It‘s part of Jetpack, isn‘t it? www.wolfram-rittmeyer.de

    www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  54. Interoperability II  It‘s part of Jetpack, isn‘t it? 

    Lot‘s of stuff still open – Navigation – ViewModel – LiveData www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW
  55. www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW

  56. Marketing blurb revisited https://developer.android.com/jetpack/compose

  57. www.grokkingandroid.com www.grokkingandroid.com @RittmeyerW @RittmeyerW Thanks Picture by Wil Stewart Picture

    by Wil Stewart
  58. Is it production ready? www.wolfram-rittmeyer.de www.wolfram-rittmeyer.de @RittmeyerW @RittmeyerW „right now,

    only the most enthusiastic developers are playing with Compose, in part because of the constant rewrites to adapt to developer preview changes“ Mark Murphy, https://jetc.dev/issues/027.html
  59. Pictures / Licenses 1: Background of title slide shows a

    small section of a photo by Romain Guy: https://www.flickr.com/photos/romainguy/48539281152 2: Jetpack Compose logo: https://developer.android.com/jetpack/compose 3: Background of final slide by Wil Stewart: https://unsplash.com/photos/UErWoQEoMrc 4: Assembly line by Franck V.: https://unsplash.com/photos/dRMQiAubdws 5: Adapter by Frederick Tubiermont: https://unsplash.com/photos/nBfTARHPxiU 6: Leaves by Chris Lawton: https://unsplash.com/photos/5IHz5WhosQE 7: Tools by Hunter Haley: https://unsplash.com/photos/s8OO2-t-HmQ 8: Glasses by Bud Helisson: https://unsplash.com/photos/kqguzgvYrtM 9: Cogs by Bill Oxford: https://unsplash.com/photos/-fGqsewtsJY 10: Discussion by Scott Graham: https://unsplash.com/photos/5fNmWej4tAA 11: Slide design "Fedora Photography" by Liam Doherty: https://github.com/dohliam/libreoffice-impress-templates/tree/master/fedora-slideshow/fedora-photography Licenses: 1: Public Domain 2: CC Attribution 2.5 3, 4, 5, 6, 7, 8, 9, 10: Unsplash License 11: CC Attribution-Share Alike 3.0