Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create high level overview doc for MVUX #2062

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
54 changes: 54 additions & 0 deletions doc/Overview/Mvux/RootOverview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
---
uid: Uno.Extensions.Reactive.Overview.Short
---

# MVUX Framework Overview
dr1rrb marked this conversation as resolved.
Show resolved Hide resolved

Model-View-Update-eXtended (MVUX) combines the strengths of both Model-View-Update (MVU) and Model-View-ViewModel (MVVM) architectures. This document presents an overview of the key advantages MVUX offers, along with an example demonstrating its efficiency for building applications.

## Key Advantages of MVUX
### 1. Reactive Application Development

MVUX empowers developers to create highly responsive applications that automatically react to state changes, effortlessly updating the view. This reactivity ensures a dynamic and engaging user experience.
nickrandolph marked this conversation as resolved.
Show resolved Hide resolved

### 2. Immutable Models for Stability

MVUX simplifies the creation of immutable models that maintain coherent states in multi-threaded environments. This approach enhances stability and predictability in complex application scenarios.

### 3. Asynchronous Everywhere

MVUX takes care of executing all non-UI-related operations on a background thread without requiring developers to write boilerplate code, such as implementing `INotifyPropertyChanged`. With native support for common data states, users are informed of background data fetching or error occurrences, contributing to a seamless user experience.

### 4. Code Testability

The MVUX framework promotes test-driven development by decoupling presentation logic from the view. This separation facilitates the testing of code components, ensuring robust and reliable applications.
jeromelaban marked this conversation as resolved.
Show resolved Hide resolved

### 5. Declarative Code Friendly

Express your code's intentions more clearly with MVUX's declarative approach. The framework encourages writing code in a declarative fashion, enhancing readability and maintainability.

## Quick Start: Building a Counter App

To illustrate the simplicity and power of MVUX, let's explore building a basic counter application. Below is a minimal model for a counter:

```csharp
dr1rrb marked this conversation as resolved.
Show resolved Hide resolved
public partial record CounterModel
{
public IState<int> Counter => State.Value(this, () => 0);

public IState<int> Step => State.Value(this, () => 42);

public async ValueTask Increment(int step, CancellationToken ct)
=> await Counter.Update(i => i + step, ct);
}
```
dr1rrb marked this conversation as resolved.
Show resolved Hide resolved

Key Features in the Code:

* **Reactive Properties**: `Counter` and `Step` are exposed as plain binding-friendly integer properties to the view, supporting two-way data binding. Updates are reported on the UI thread for the view and on the background thread for the model.

* **Command Handling**: The `Increment` method is automatically exposed as an `ICommand` that can be data bound to any element in the view that has a `Command` property, such as `Button`. Additionally, `ICommand.CanExecute` is updated during the execution of the method, so that the state of the data bound element is correct.
dr1rrb marked this conversation as resolved.
Show resolved Hide resolved

* **Parameter Flexibility**: The method accepts a step parameter, which can be provided by the view using the command parameter. If not provided, it defaults to the `Step` state, offering flexibility and consistency.

MVUX empowers developers to implement the presentation layer quickly and efficiently, allowing a primary focus on business logic. For a more in-depth exploration, consult the comprehensive [MVUX documentation](xref:Overview.Mvux.Overview).
Loading