A Case Study - Rewriting our Home Feed in JC

Transcript

1. Case Study: Rewriting our Home Feed In Jetpack Compose
2. Why rewrite our Home Feed in Jetpack Compose? 1. Required API migration work 2. We were there anyway 3. Why not try something new?
3. Home Feed, what are you made of? • Various Cards: Photos, Products, Stories, Ads, Banners • Carousels: Photos, Videos (playing inline), Custom Layouts • Includes: Caching, Refresh Pill, Pagination, Tracking Items and more… • Millions of visits every week • The first page the users see when they enter the app
4. What are we going to talk about? Pagination Visibility Tracker Performance
5. Remember LaunchedEffect SnapshotFlow LazyListState Let’s start with some Jetpack Compose basics
6. Remember LaunchedEffect SnapshotFlow LazyListState
7. Remember LaunchedEffect SnapshotFlow LazyListState
8. Remember LaunchedEffect SnapshotFlow LazyListState
9. Remember LaunchedEffect SnapshotFlow LazyListState
10. Pagination Visibility Tracker Performance
11. Pagination
12. Pagination
13. Pagination
14. Pagination
15. Pagination Visibility Tracker Performance
16. Visibility Tracker
17. Visibility Tracker
19. Pagination Visibility Tracker Performance
20. Recomposition
21. Restartable Skippable
22. Stable Unstable VS
23. Nearest Restartable Function Recomposed Ends State Changed Recomposed Skipped
24. Performance Analytics
25. Enabling the metrics
29. Can we improve it?
30. Unstable to Stable
31. Unstable to Stable
32. @immutable @stable
33. @immutable
34. @Stable • The result of equals will always return the same result for the same two instances. • When a public property of the type changes, composition will be notified. • All public property types are stable.
38. Let’s See How We Did It
39. Model Transformer ViewModelItem UI Models
40. Class PhotoCard Class PhotoTransformer: Transformer <PhotoCard, PhotoViewModelItem> Class PhotoViewModelItem
41. When can using Transformers help us? • When the Compose Compiler is not defined in the module your object is defined in • Unlike the original model, your UI model consists of primitives only • Annotating the UI model with @immutable or @Stable is safer as there are no side-effects affecting other places in the app.
42. Summary Instead of Using Replace With var val Collections classes like: List, Set and Map • Kotlinx immutable collections • Use @immutable/@stable annotations Classes from modules with no dependency on compose runtime • Enable compose compiler • UI models • Wrapper classes and use @immutable/@stable annotations
43. Contact Info Daniel Okanin https://www.linkedin.com/in/danielokanin/