func loadUser(id: String) async {
    isLoading = true
    user = try? await userService.fetch(id)
    isLoading = false
}

}

struct UserView: View { @State var viewModel = UserViewModel()

var body: some View {
    if viewModel.isLoading {
        ProgressView()
    } else if let user = viewModel.user {
        Text(user.name)
    }
}

}


## Core Concepts

### ViewModel

```kotlin
// Android Compose
class UserViewModel(
    private val repository: UserRepository
) : ViewModel() {
    private val _user = MutableStateFlow<User?>(null)
    val user: StateFlow<User?> = _user.asStateFlow()

    fun loadUser(id: String) {
        viewModelScope.launch {
            _user.value = repository.getUser(id)
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel = hiltViewModel()) {
    val user by viewModel.user.collectAsState()
    user?.let { Text(it.name) }
}

Data Binding

// Angular style
@Component({
  template: `<input [(ngModel)]="user.name" />`,
})
class UserComponent {
  user = { name: "" };
}

Best Practices

Do: Keep View passive, ViewModel testable without UI Don't: Reference View from ViewModel

References

MVVM Pattern

mvvm

MVVM (Model-View-ViewModel)

When to Use

Quick Start

More from g1joshi/agent-skills

template

mariadb

claude

javascript

typescript

python