Jetpack Compose. Готов к продакшену?

Transcript

1. Jetpack Compose. Готов к продакшену?
2. Максим Турчин Android Developer
3. Как оно сейчас?
4. Недостатки Android View • Разные языки для вёрстки (XML) и бизнес логики (Java/Kotlin) • View хранит параметры (set методы + атрибуты) • Зависимость от платформы • Высокая сложность создания собственных View • Синхронное API с вызовами только с главного/UI потока • Много кода в View (30к+ строк в Android 11)
5. Custom View public View(Context context) public View(Context context, AttributeSet attrs) public View(Context context, AttributeSet attrs, int defStyleAttr) public View(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
6. Списки (View) RecyclerView RecyclerView.Adapter LayoutManager ItemAnimator DiffUtil ViewHolder
7. Jetpack Compose
8. Концепции Jetpack Compose • Декларативный (описывается только результат) • Единый язык логики и UI (Kotlin) • Можно использовать фишки Kotlin • Не зависит от платформы • Асинхронное построение UI • Никакого наследования
9. Метрики
14. Как использовать?
15. Compose внутри View <androidx.compose.ui.platform.ComposeView android:id="@+id/composeView" android:layout_width="match_parent" android:layout_height="match_parent" /> binding.composeView.setContent { // Your composables }
16. View внутри Compose Box { AndroidView( factory = { context -> PlayerView(context) } ) }
17. Lifehacks and best practices
18. Логгирование рекомпозиции
19. class Ref(var value: Int) @Composable fun LogCompositions(tag: String, msg: String) { if (BuildConfig.DEBUG) { val ref = remember { Ref(0) } SideEffect { ref.value++ } Log.d(tag, "Compositions: $msg ${ref.value}") } } LogCompositions("MyCompose.app", "MyComposable function")
20. Организация навигации
21. Особенность путей в навигации "profile/{userId}" profile/1234
22. interface NavigationDestination { val route: String val arguments: List<NamedNavArgument> get() = emptyList() }
23. State Hoisting
24. @Composable fun HelloScreen() { var name by rememberSaveable { mutableStateOf("") } HelloContent(name = name, onNameChange = { name = it }) } @Composable fun HelloContent(name: String, onNameChange: (String) -> Unit) { Column(modifier = Modifier.padding(16.dp)) { Text( text = "Hello, $name", modifier = Modifier.padding(bottom = 8.dp), style = MaterialTheme.typography.h5 ) OutlinedTextField( value = name, onValueChange = onNameChange, label = { Text("Name") } ) } }
25. Modifier
26. @Composable fun HelloContent( name: String, modifier: Modifier = Modifier, onNameChange: (String) -> Unit ) { Column(modifier = modifier.padding(16.dp)) { Text( text = "Hello, $name", modifier = Modifier.padding(bottom = 8.dp), style = MaterialTheme.typography.h5 ) OutlinedTextField( value = name, onValueChange = onNameChange, label = { Text("Name") } ) } }
27. Списки
28. LazyColumn(modifier = Modifier.fillMaxSize()) { items( items = characters, key = { character -> character.id } ) { character -> CharacterListItem( character = character, onCharacterClicked = { onItemCLicked(character) } ) } }
29. Как изменится Android разработка
30. Производительность • Не нужно парсить XML • Оптимизация кода R8/ProGuard • Асинхронное и многопоточное построение UI
31. Fragment больше не нужен
32. ViewModel тоже не нужна?
33. android:configChanges="colorMode|density|fontScale|keyboard|keyboardHidden|l ayoutDirection|locale|mcc|mnc|navigation|orientation|screenLayout|screenSize|s mallestScreenSize|touchscreen|uiMode"
34. Библиотеки Jetpack с поддержкой Compose • Navigation • Activity • Paging 3 • ViewModel • Hilt • Material • Wear (Preview) • Widgets (Preview)
35. Accompanist
36. Insets
37. System UI Controller
38. Pager
39. Placeholder
40. Недостатки • Привязка к версии Kotlin • Не все виджеты есть в Compose • Lazy списки уступают по производительности RecyclerView
41. Преимущества • Один язык для всего • Не стоит заботиться о вложенности • Возможность оптимизировать UI код (R8/ProGuard) • Независимость от версии Android • Обратная совместимость
42. Что дальше? • Material You • Поддержка больших экранов • Анимации в LazyList • Анимации элементов при переходе на другой экран • Ускорение предпросмотра в IDE • Android Wear • Android Widgets • Инструментарий для просмотра рекомпозиции
43. Compose Android, Desktop, Web
44. Jetpack Compose. Готов к продакшену? ДА
45. https://github.com/Sannedak/devfest-compose https://bit.ly/3AOSheA