Android jetpack compose | Declarative UI
- 1. Android Jetpack Compose Amodern toolkit for building native UI From: Ajinkya Saswade
- 2. What is JetpackCompose? 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 theybuilding it? When we have existing UI toolkit. “API design is building future regret” - Chet Hase Move android.widget to a support library Jetpack
- 5.
- 6. API regret Button And thelist 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 areachieve? ● Simplify ● Less code ● Fix what’s broken.
- 9. Building with Compose Addinginto Existing Project - Gradle Configuration
- 10. Adding into ExistingProject - Gradle Configuration
- 11.
- 12. Define a composablefunction
- 13.
- 14.
- 15.
- 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 doesCompose solve? Separation of Concerns Coupling VS Cohesion
- 18. Separation of Concerns Framinginto more familiar way There is lot of depency hidden here. There is lot of coupling between the ViewModel & layout.xml
- 19. Separation of Concerns Nowbecause 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 OverTime ● 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.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. How does itwork? Compose works on Gap Buffer data structure
- 35.
- 36.
- 37.
- 38. Learn more aboutJetpack Compose Jetpack Compose Android Compose Tutorial Codelabs Using Jetpack Compose to build UI in Android Exploring Jetpack Compose: Text
- 39.