Getting started with Jetpack Compose.

These slides mainly focus on how an individual can start learning jetpack compose.
A modern UI Toolkit for Android Developers.
In these Slides, we discussed the basics of the Compose and its future.
How one can start the journey and what things they must take care of while learning the new tech.
This includes some resources, tips,s, and links for the same.

Transcript

1. Android Developer @ Mutual Mobile Jetpack Compose Getting started with Niket Jain
2. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Niket Jain Android Developer @ Mutual Mobile nikeight @nikeight_
3. A Complete package for Android Developers. What is Jetpack?
4. A Complete package for Android Developers. What is Jetpack?
5. Modern Declarative UI Toolkit. Jetpack Compose
6. Difference Between Imperative and Declarative User Interface in Android.
7. Adobe Stock#243026154 1. Step by Step Approach 2. Needed to be updated manually 3. XML approach Imperative UI
8. Adobe Stock#243026154 Imperative UI Some Problems with this approach. 1. Coupled with XML 2. Lots of Boilerplate Code 3. Old way of Building UI
9. Adobe Stock#243026154 1. Declared Approach 2. Event Driven ⏫ 3. Updates based on the State Declarative UI
10. Adobe Stock#243026154 Declarative UI Advantages of Using this approach 1. Fast the developer’s speed 2. Less Boilerplate codes. 3. Less chances of errors or inaccuracies. 4. Modern and recommended way to build UI.
11. And what is Recomposition. Composables and its Lifecycle
12. LifeCycle • Initialization • Recomposition • End of Composition
13. And Some Best practices. State Management In Jetpack Compose
14. Important things to notice here - remember key word - mutableStateOf ( State<T> ) - Delegates ( By ) - Lambdas Callbacks
15. Type of States - Stateful - StateLess Type of Observables - Live Data - Flows - RxJava.
16. We will be learning about - How to create a Compose Project - Project Structure - Layouts and UI Components. Lets shift to Android Studio to Understand some UI Components.
17. - Rows - Columns - Constraint Layouts Layouts 01 - Surface - Box - TextInputs - Buttons - Lazy Column Components 02 - App Bar - Scaffold - SnackBar Material Components 03 UI Components
18. We will be using Marvel API. Lets Create a list in XML and Compose
19. Adobe Stock#243026154 - Initialization of Recycler View - Creating Adapter - Creating ViewHolder Recycler View - Creating Lazy Column - Items Lazy Column
20. Compose provides rich set of API’s. Building Beautiful and rich Animated UI screens.
21. Compose Animation Flow Chart
22. Migrations to Compose Approaches - Top To Bottom - Bottom To Top
23. Adobe Stock#243026154 - Starting Migrating Activity - Start migrating Fragments - Comes to the Custom Views - And Finally the Basic Views Top To Bottom - Start with the basic Views - Try to create Common Components - Migrate the Whole Screen to ComponentActivity - Migrate the Values and themes Bottom To Top
24. Adding Compose to the Existing App - Create a `ComposeView` - Find the View and Inflate it - By setting the content - Define a theme - Start writing your composables.
25. As Jetpack Compose is interoperable we can use Android Views at Composable as well.
26. Let’s Talk about KMM Little more about Compose and its future.
27. Build Cross Platform apps using native UI Kotlin Multi Platform - Share the Business Logic with all the Domains - Build Your Domains with respective UI Frameworks ( React, Swift UI) - One Code Runs everywhere The Catch here is this - Jetbrains provides support for React with Compose - Support for Desktop apps - Soon they are going to release the support for IOS
28. Adobe Stock#243026154 - Modern and Fast - Easy to learn and apply - Powerful API - Less Code - Declarative Approach Pros - Needed intermediate Kotlin knowledge. - Cons
29. Resources : https://developer.android.com/jetpack/compose https://developer.android.com/ https://developer.android.com/jetpack https://github.com/android
30. Thank you! Android Developer @nikeight Niket Jain