name: portada
class: portada-slide, center, middle

# Compose
### ViewModel

---
# Arquitectura
- Organitzar el codi en diferents components
	- Model-View-Controller
	- Model-View-ViewModel
	- Model-View-Intent
	- ...

---
# Activity recreation Android
- Obre l'última aplicació feta en un Android.
- Introdueix valors
- Gira la pantalla
- Que passa?

---
# ViewModel
- Organització del codi
- Soluciona el problema de rotació de pantalla

---
# ViewModel
- Logica de la vista
	- Les funcions composables només s'encarreguen de mostrar, tenen la mínima lògica possible

---
# ViewModel Sample

```
class HelloByeViewModel : ViewModel() {
    val text = mutableStateOf("Hello World")
    fun sayBye(){
        text.value = "Bye"
    }
}
```

---
# ViewModel Sample 
```
@Composable
fun HelloByeVmApp() {
    val viewModel = viewModel { HelloByeViewModel() }
    Button(
        onClick = viewModel::sayBye // or { viewModel.sayBye() }
    ) {
        Text(viewModel.text.value)
    }
}
```

---
# ViewModel Sample v2
```
@Composable
fun HelloByeVmAppv2() {
    val viewModel = viewModel { HelloByeViewModel() }
    HelloByeVmAppv2View(viewModel.text.value, viewModel::sayBye)
}

@Composable
fun HelloByeVmAppv2View(text: String, onSayBye: ()-> Unit) {
    Button(
        onClick = onSayBye // or { viewModel.sayBye() }
    ) {
        Text(text)
    }
}
```

---
# Exercicis