Android new UI ToolKit: Jetpack Compose

Transcript

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

   View Slide

2. Agenda
   • The View System
   
   
   • Jetpack Compose: overview
   
   
   • State management
   
   
   • Modi
   fi
   er
   
   
   • Building a Composable(demo)
   
   
   • Beyond android’s use case
   
   
   • Wrap-up
   

   View Slide

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 😅
   

   View Slide

4. The View System
   

   View Slide

5. The View System
   

   View Slide

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
   

   View Slide

7. And then…
   • React Native
   
   
   • Flutter
   
   
   • SwiftUI
   
   
   • And developers love them!
   
   
   • 🚀Declarative UI 🚀
   

   View Slide

8. Declarative UI
   

   View Slide

9. Declarative UI
   

   View Slide

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
    

    View Slide

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

    View Slide

12. Jetpack Compose
    

    View Slide

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
    

    View Slide

14. Declarative UI Framework
    

    View Slide

15. Takes full advantage of Kotlin
    Functions
    Extension functions
    Passing functions around
    Property delegate
    High order functions
    Control Flow
    Strong type system
    

    View Slide

16. Function based UI
    Compose special keyword
    Compose decorator
    Params: data, events, con
    f
    ig
    Child Composables
    No class, no inheritance
    

    View Slide

17. Compose 🤝 View System
    

    View Slide

18. Compose 🤝 View System
    

    View Slide

19. Compose 🤝 View System
    

    View Slide

20. Jetpack Compose
    View System Jetpack Compose
    A screen @Composable
    Multiple screens @Composables
    Fragments @Composables
    Custom Views @Composable
    A Button @Composable
    

    View Slide

21. State Management
    

    View Slide

22. State Management
    

    View Slide

23. State Management
    

    View Slide

24. State Management
    

    View Slide

25. State Management
    

    View Slide

26. State Management
    

    View Slide

27. State Management
    

    View Slide

28. State Management
    Stateless composable
    Stateful Composable
    

    View Slide

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)
    

    View Slide

30. State Management
    

    View Slide

31. State Management
    Lifecycle
    

    View Slide

32. Modi
    f
    ier
    

    View Slide

33. Modi
    f
    ier
    • Decorate a composable
    
    
    • Size, padding
    
    
    • Accessibility
    
    
    • Make the Composable clickable, scrollable, zoomable, etc
    

    View Slide

34. Modi
    f
    ier
    

    View Slide

35. Modi
    f
    ier
    

    View Slide

36. Modi
    f
    ier
    

    View Slide

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
    

    View Slide

38. Type safe modi
    f
    ier
    

    View Slide

39. Type safe modi
    f
    ier
    

    View Slide

40. Type safe modi
    f
    ier
    

    View Slide

41. Building a Composable
    
    
    (Demo)
    

    View Slide

42. Beyond android’s use case
    

    View Slide

43. Beyond android
    • Compose for desktop by JetBrains (Desktop App)
    
    
    • Compose Multiplatform (Multiplatform App)
    
    
    • Mosaic by Jake Warthon (console UI)
    
    
    • IOS?
    

    View Slide

44. Wrap-up
    

    View Slide

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 😊
    

    View Slide

46. Thanks!
    

    View Slide

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
    

    View Slide