Android jetpack compose | Declarative UI
- 1. Android Jetpack Compose A modern toolkit for building native UI From: Ajinkya Saswade
- 2. What is Jetpack Compose? Android’s modern toolkit for building native UI Jetpack compose accelerates UI development on Android with less code, powerful tools and intuitive Kotlin APIs. Note : Jetpack Compose is currently in Developer preview and not ready for production.
- 3. Inspired by ● React ● Litho ● Vue.js ● Flutter ...but it’s written completely in Kotlin and is fully compatible with the existing Android view system
- 4. Why are they building it? When we have existing UI toolkit. “API design is building future regret” - Chet Hase Move android.widget to a support library Jetpack
- 6. API regret Button And the list goes on with Fragment and other stuff.
- 7. What is Compose? ● New set of Jetpack UI widgets ● A Kotlin compiler plugin ● Fully compatible with your existing app/code. (Both Java or Kotlin). In compose “Everything is a function”
- 8. What goals are achieve? ● Simplify ● Less code ● Fix what’s broken.
- 9. Building with Compose Adding into Existing Project - Gradle Configuration
- 10. Adding into Existing Project - Gradle Configuration
- 12. Define a composable function
- 13. Preview function
- 14. Layouts
- 15. Layouts
- 16. Components (Functions) Layouts ● Column ● Row ● Flex (Column / Row) ● ConstraintLayout (in process) Built-in Components ● Button ● Checkbox ● Drawers ● AppBars Custom View ● Draw ● Layout
- 17. What problem does Compose solve? Separation of Concerns Coupling VS Cohesion
- 18. Separation of Concerns Framing into more familiar way There is lot of depency hidden here. There is lot of coupling between the ViewModel & layout.xml
- 19. Separation of Concerns Now because we’re in the same language some of the dependencies might start to become more explicit. After doing some refactoring some of the coupling is reduce and cohesion is increased There’s actually a forced line of separation
- 20. State Management Over Time ● Observability is required ● Compose adds @Model classes ● @Model allows cross-cutting observation ● We can still use LiveData, Rx, etc. One of the concerns of the UI developer is solved i.e How your UI changes over the time
- 21. Data Flow
- 22. Eg.
- 23. Eg.
- 24. Eg.
- 25. Eg.
- 27. Compose UI Core
- 30. Compatibility
- 32. Imperative way
- 33. Declarative way
- 34. How does it work? Compose works on Gap Buffer data structure
- 35. Gap Buffer
- 36. Gap Buffer
- 38. Learn more about Jetpack Compose Jetpack Compose Android Compose Tutorial Codelabs Using Jetpack Compose to build UI in Android Exploring Jetpack Compose: Text