Jetpack Compose - серебряная пуля Android UI

Transcript

1. Jetpack Compose
   Кирилл Розов@Android Broadcast
   Серебряная пуля Android UI
   

   View Slide

2. 👉 Блоггер
   
   
   👉 Android GDE
   
   
   👉 Автор Telegram канала
   “Android Broadcast”
   
   
   👉 Автор YouTube канала
   “Android Broadcast”
   Кирилл Розов
   @kirill_rozov
   @krlrozov
   

   View Slide

3. View Slide

4. План
   👉 Что не так с Android View
   
   
   👉 Что такое Compose
   
   
   👉 Каким образом Compose меняет разработку UI
   
   
   👉 Будущее Compose
   
   
   👉 Мультиплатформенный UI
   4
   

   View Slide

5. layout/activity_hello_world.xml
   
   xmlns:android="http:
   //
   schemas.android.com/apk/res/android"
   
   android:id="@+id/text"
   
   android:layout_width="match_parent"
   
   android:layout_height="match_parent"
   
   android:textAppearance="@style/TextAppearance.MaterialComponents.Headline5"
   
   />
   5
   

   View Slide

6. HelloWorldActivity.kt
   class HelloWorldActivity : ComponentActivity(R.layout.activity_hello_world) {
   
   private lateinit var textView: TextView
   
   override fun onCreate(savedInstanceState: Bundle?) {
   
   super.onCreate(savedInstanceState)
   
   textView = findViewById(R.id.text)
   
   setGreeting("Android")
   
   }
   
   fun setGreeting(name: String) {
   
   textView.text = "Hello, $name"
   
   }
   
   }
   6
   

   View Slide

7. class HelloWorldActivity :
   
   ComponentActivity(R.layout.activity_hello_world) {
   
   private lateinit var textView: TextView
   
   override fun onCreate(savedInstanceState: Bundle?) {
   
   super.onCreate(savedInstanceState)
   
   textView = findViewById(R.id.text)
   
   setGreeting("Android")
   
   }
   
   fun setGreeting(name: String) {
   
   textView.text = "Hello, $name"
   
   }
   
   }
   7
   

   View Slide

8. Альтернативы findViewById()
   👉 AndroidAnnotations
   
   
   👉 ButterKnife
   
   
   👉 Kotlin Synthetic
   
   
   👉 Android DataBinding/ViewBinding
   8
   

   View Slide

9. class HelloWorldActivity :
   
   ComponentActivity(R.layout.activity_hello_world) {
   
   private lateinit var textView: TextView
   
   override fun onCreate(savedInstanceState: Bundle?) {
   
   super.onCreate(savedInstanceState)
   
   textView = findViewById(R.id.text)
   
   setGreeting("Android")
   
   }
   
   fun setGreeting(name: String) {
   
   textView.text = "Hello, $name"
   
   }
   
   }
   9
   

   View Slide

10. class HelloWorldActivity :
    

    ComponentActivity(R.layout.activity_hello_world) {
    
    private val viewBinding: ActivityHelloWorldBinding
    

    by viewBinding()
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    super.onCreate(savedInstanceState)
    
    setGreeting("Android")
    
    }
    
    fun setGreeting(name: String) {
    
    viewBinding.text.text = "Hello, $name"
    
    }
    
    }
    10
    

    View Slide

11. Android View - всё объекты
    

    View Slide

12. RelativeLayout
    FrameLayout LinearLayout
    ConstraintLayout
    Какой Layout самый
    
    
    оптимальный для экрана X?
    

    View Slide

13. Списки в Android
    RecyclerView
    RecyclerView.Adapter
    ViewHolder
    DiffUtil
    ItemAnimator LayoutManager
    13
    

    View Slide

14. Как много Custom View
    
    
    вам приходилось создавать?
    

    View Slide

15. View Slide

16. Типы собственных View
    👉 Полностью свой View
    
    
    👉 Расширение существующих
    

    Обычно “закостылить”
    
    
    👉 Собственный ViewGroup
    
    
    👉 Группировка View в виджет
    

    Например, виджет контакта
    

    16
    

    View Slide

17. Особенности Android View
    👉 Разные языки для вёрстки (XML) и бизнес логики (Kotlin/JAVA)
    
    
    👉 View xранит состояние (set методы + атрибуты)
    
    
    👉 Зависимость от платформы
    
    
    👉 Высокая сложность создания собственных View
    
    
    👉 Синхронное API с вызовами только с главного/UI потока
    
    
    👉 Много кода в View. Очень много!
    

    Класс View содержит 30000+ строк в Android 11.0
    17
    

    View Slide

18. Декларативный UI
    
    
    под Android и iOS UI XML
    

    View Slide

19. Jetpack Compose
    

    View Slide

20. class HelloComposeActivity : ComponentActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    super.onCreate(savedInstanceState)
    
    setContent {
    
    Greeting("Android")
    
    }
    
    }
    
    }
    
    @Composable
    
    fun Greeting(name: String) {
    
    Text(
    
    text = "Hello $name!",
    
    style = MaterialTheme.typography.h5
    
    )
    
    }
    20
    

    View Slide

21. class HelloComposeActivity : ComponentActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    super.onCreate(savedInstanceState)
    
    setContent {
    
    Greeting("Android")
    
    }
    
    }
    
    }
    
    @Composable
    
    fun Greeting(name: String) {
    
    Text(
    
    text = "Hello $name!",
    
    style = MaterialTheme.typography.h5
    
    )
    
    }
    21
    

    View Slide

22. class HelloComposeActivity : ComponentActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
    
    super.onCreate(savedInstanceState)
    
    setContent {
    
    Greeting("Android")
    
    }
    
    }
    
    }
    
    @Composable
    
    fun Greeting(name: String) {
    
    Text(
    
    text = "Hello $name!",
    
    style = MaterialTheme.typography.h5
    
    )
    
    }
    22
    

    View Slide

23. Концепции Jetpack Compose
    👉 Декларативный (описываете результат)
    
    
    👉 Единый язык для логики и UI (Kotlin)
    
    
    👉 Можно использовать всё чему вы привыкли в Kotlin
    
    
    👉 Не зависит от платформы
    
    
    👉 Асинхронное параллельное построение UI
    23
    

    View Slide

24. Особенности Android View
    👉 Разные языки для вёрстки и бизнес логики
    
    
    👉 Хранит состояние
    
    
    👉 Зависимость от платформы
    
    
    👉 Высокая сложность создания собственных View
    
    
    👉 Синхронное API с вызовами только с главного/UI потока
    
    
    👉 Много кода в View. Очень много!
    24
    

    View Slide

25. Динамический контент
    

    View Slide

26. @Composable
    
    fun MultiGreeting(name: String) {
    
    Column {
    
    repeat(10) {
    
    Greeting(name)
    
    }
    
    }
    
    }
    26
    

    View Slide

27. Интерактивный режим в IDE
    

    View Slide

28. @Composable
    
    fun Counter() {
    
    var counter by rememberSaveable { mutableStateOf(0) }
    
    Surface(modifier = Modifier.fillMaxSize()) {
    
    Column(
    
    modifier = Modifier.padding(16.dp),
    
    horizontalAlignment = Alignment.CenterHorizontally
    
    ) {
    
    Text(
    
    text = counter.toString(),
    
    style = MaterialTheme.typography.h4
    
    )
    
    Spacer(modifier = Modifier.height(8.dp))
    
    Row {
    
    Button(onClick = { counter
    ++
    }) { Text(text = "+") }
    
    Spacer(modifier = Modifier.width((8.dp)))
    
    Button(
    
    enabled = counter > 0, onClick = { counter
    --
    }
    
    ) { Text(text = "-") }
    
    }
    
    }
    
    }
    
    }
    28
    

    View Slide

29. Превью в Android Studio
    @Composable
    
    fun Counter() {
    
    var counter by rememberSaveable { mutableStateOf(0) }
    
    Surface(modifier = Modifier.fillMaxSize()) {
    
    Column(
    
    modifier = Modifier.padding(16.dp),
    
    horizontalAlignment = Alignment.CenterHorizontally
    
    ) {
    
    Text(
    
    text = counter.toString(),
    
    style = MaterialTheme.typography.h4
    
    )
    
    Spacer(modifier = Modifier.height(8.dp))
    
    Row {
    
    Button(onClick = { counter
    +
    +
    }) { Text(text = "+") }
    
    Spacer(modifier = Modifier.width((8.dp)))
    
    Button(
    
    enabled = counter > 0, onClick = { counter
    --
    }
    
    ) { Text(text = "-") }
    
    }
    
    }
    
    }
    
    }
    29
    Compose Preview Android Studio Artic Fox Canary 15
    

    View Slide

30. Списки
    

    View Slide

31. Списки
    @Composable
    
    fun SimpleList(items: List) {
    
    LazyColumn {
    
    items(items.size) { i
    -
    >
    
    
    SimpleTextItem(items[i].toString())
    
    }
    
    }
    
    }
    
    @Composable
    
    fun SimpleTextItem(text: String) {
    
    Text(
    
    text = text,
    
    style = MaterialTheme.typography.h5,
    
    modifier = Modifier.padding(8.dp)
    
    )
    
    }
    31
    

    View Slide

32. Списки
    @Composable
    
    fun SimpleList(items: List) {
    
    LazyColumn {
    
    items(items.size) { i
    -
    >
    
    
    SimpleTextItem(items[i].toString())
    
    }
    
    }
    
    }
    
    @Composable
    
    fun SimpleTextItem(text: String) {
    
    Text(
    
    text = text,
    
    style = MaterialTheme.typography.h5,
    
    modifier = Modifier.padding(8.dp)
    
    )
    
    }
    32
    

    View Slide

33. Списки
    @Composable
    
    fun SimpleList(items: List) {
    
    LazyColumn {
    
    items(items.size) { i
    -
    >
    
    
    SimpleTextItem(items[i].toString())
    
    }
    
    }
    
    }
    
    @Composable
    
    fun SimpleTextItem(text: String) {
    
    Text(
    
    text = text,
    
    style = MaterialTheme.typography.h5,
    
    modifier = Modifier.padding(8.dp)
    
    )
    
    }
    33
    

    View Slide

34. Списки
    @Composable
    
    fun SimpleList(items: List) {
    
    LazyColumn {
    
    items(items.size) { i
    -
    >
    
    
    SimpleTextItem(items[i].toString())
    
    }
    
    }
    
    }
    
    @Composable
    
    fun SimpleTextItem(text: String) {
    
    Text(
    
    text = text,
    
    style = MaterialTheme.typography.h5,
    
    modifier = Modifier.padding(8.dp)
    
    )
    
    }
    34
    

    View Slide

35. Списки
    @Composable
    
    fun SimpleList(items: List) {
    
    LazyColumn {
    
    items(items.size) { i
    -
    >
    
    
    SimpleTextItem(items[i].toString())
    
    }
    
    }
    
    }
    
    @Composable
    
    fun SimpleTextItem(text: String) {
    
    Text(
    
    text = text,
    
    style = MaterialTheme.typography.h5,
    
    modifier = Modifier.padding(8.dp)
    
    )
    
    }
    35
    

    View Slide

36. Будущее Jetpack Compose
    

    View Slide

37. Compose
    
    
    Android, Desktop & Web
    

    View Slide

38. Jetpack Compose
    @Composable
    
    fun Counter() {
    
    var counter by rememberSaveable { mutableStateOf(0) }
    
    Surface(modifier = Modifier.fillMaxSize()) {
    
    Column(
    
    modifier = Modifier.padding(16.dp),
    
    horizontalAlignment = Alignment.CenterHorizontally
    
    ) {
    
    Text(
    
    text = counter.toString(),
    
    style = MaterialTheme.typography.h4
    
    )
    
    Spacer(modifier = Modifier.height(8.dp))
    
    Row {
    
    Button(onClick = { counter
    + +
    }) { Text(text = "+") }
    
    Spacer(modifier = Modifier.width((8.dp)))
    
    Button(
    
    enabled = counter > 0, onClick = { counter
    --
    }
    
    ) { Text(text = "-") }
    
    }
    
    }
    
    }
    
    }
    38
    

    View Slide

39. Compose for Desktop
    Window(title = "Compose Desktop") {
    
    MaterialTheme {
    
    Counter()
    
    }
    
    }
    39
    

    View Slide

40. View Slide

41. Где
    
    
    поддержка
    
    
    iOS?
    

    View Slide

42. Производительность
    

    View Slide

43. Производительность
    👉 Не нужно парсить XML
    
    
    👉 Оптимизация кода R8/ProGuard
    
    
    👉 Асинхронное и многопоточное построение UI
    43
    

    View Slide

44. Как изменится
    
    
    Android разработка
    

    View Slide

45. View Slide

46. Fragment больше не нужен
    

    View Slide

47. Декомпозиция функционала
    👉 Activity Result API
    
    
    👉 OnBackPressedDispatcher
    
    
    👉 SavedStateRegistry
    
    
    👉 ViewModel
    
    
    👉 Lifecycle
    
    
    👉 ViewTreeLifecycleOwner
    
    
    👉 ViewTreeViewModelStoreOwner
    
    
    👉 ViewTreeSavedStateRegistryOwner
    47
    

    View Slide

48. Библиотеки Jetpack с поддержкой Compose
    👉 Navigation
    
    
    👉 Activity
    
    
    👉 Paging 3
    
    
    👉 ViewModel
    
    
    👉 Hilt
    
    
    👉 Material
    48
    

    View Slide

49. Недостатки Jetpack Compose
    ⛔ Поддерживает только Kotlin (а плохо ли?)
    
    
    ⛔ Нужно использовать Kotlin Compiler Backend IR (Kotlin 1.4.30 или новее)
    
    
    ⛔ Поддерживается только в Android Studio Canary
    
    
    ⛔ Не все виджеты есть в Compose (возможно уже неактуально)
    
    
    ⛔ Не является нативным UI, а лишь его имитация (аля Flutter)
    
    
    ⛔ Над производительностью еще работают
    
    
    ⛔ Над тулингом еще работают (но уже много достигнуто)
    
    
    ⛔ minSdk=21 (Android 5.0)
    49
    

    View Slide

50. Преимущества Jetpack Compose
    ✅ minSdk=21 (Android 5.0)
    
    
    ✅ Один язык для всего
    
    
    ✅ Используйте ко мне чему привыкли в Kotlin. Например, Coroutine
    
    
    ✅ Не стоит заботиться о вложенности
    
    
    ✅ Возможность оптимизировать UI код (R8/ProGuard)
    
    
    ✅ Независимость от Android фреймворка
    
    
    ✅ Мультиплатформенное решение
    50
    

    View Slide

51. Jetpack Compose 1.0
    
    
    ИЮЛЬ 2021
    

    View Slide

52. Спасибо за внимание
    

    View Slide