Build together, debug together. Join the community on Discord.→

Bridging the Gap Between MVU and MVVM

State management patterns like MVU and MVVM have long been staples in application development, but both come with trade-offs that can limit scalability and maintainability in complex projects. Model-View-Update eXtended (MVUX) a new pattern in Uno Platform, bridges the gap between these two approaches, offering a more streamlined, asynchronous-friendly alternative. If you’ve ever struggled with the rigidness of MVU or the complexity of MVVM, MVUX could be the solution you’ve been looking for.

Understanding the Landscape: MVU vs. MVVM

Before diving into MVUX, let’s review the pros and cons of MVU and MVVM:

Model-View-Update (MVU):

Pros: Immutable, one-way data flow; explicit state management.
Cons: Presentation logic often couples with UI; requires shadow DOM/tree diffing.

Model-View-ViewModel (MVVM):

Pros: Presentation logic decoupled from the View.
Cons: Requires INPC, INCC, and ICommand implementation; stateful, two-way state management.

Both share a common drawback: lack of async-friendliness, particularly in command execution and data reading.

MVUX: The Best of Both Worlds

MVUX addresses these limitations by combining the strengths of MVU and MVVM:

Decoupled Architecture: Keeps presentation logic separate from the view.
Rich Data Binding: Leverages Uno Platform’s robust data binding engine.
Immutability: Encourages the use of immutable records for entities and models.
Async-First Approach: Designed for asynchronous operations.

The Power of Immutability

One core principle of MVUX is immutability. Let’s look at a simple example:

				
					internal partial record Countable(int Count, int Step)
{
    public Countable Increment() => this with
    {
        Count = Count + Step
    };
}

Instead of modifying the existing Countable object, we create a new one with updated values. This approach provides a clear history of state changes, which is incredibly helpful during debugging.

Seamless XAML Integration

MVUX integrates smoothly with XAML or C# markup. Here’s how to connect your UI to your data model:

				
					<Page.DataContext> 
   <local:MainViewModel /> 
</Page.DataContext>

This simple declaration bridges your entire UI with the underlying model, enabling robust data binding while maintaining immutability.

A New Perspective on State Updates

MVUX encourages a shift in how we think about state updates. Rather than directly modifying properties, we define methods that describe state changes:

				
					public ValueTask IncrementCounter() 
    => Countable.UpdateAsync(c => c?.Increment());

This approach leads to more predictable and maintainable code, especially as your application grows in complexity.

How MVUX Works

The magic of MVUX lies in its approach to model declaration and view model generation:

Declare an immutable model using IFeed for reading and IState for updating:

				
					internal partial record MainModel
{
    public IState<Countable> Countable => State.Value(this, () => new Countable(0, 1));

    public ValueTask IncrementCounter() 
        => Countable.UpdateAsync(c => c?.Increment());
}

The MVUX engine uses source generators to automatically create a ViewModel with the same API surface as your model. This approach combines MVU’s immutability with MVVM’s familiar data binding while providing built-in support for asynchronous operations.

The following Uno Tech Bite provides a hands-on introduction to MVUX (Model-View-Update-X). It covers the fundamental concepts and walks you through building a simple counter application using MVUX with your choice of C# markup or XAML.

Practical Benefits

Consider a weather app fetching data from an external API. With MVUX:

State transitions (loading, error, success) are handled seamlessly through IFeed.
Asynchronous data fetching doesn’t require manual thread management.
The UI remains responsive during long-running operations.

MVUX in Uno Platform represents a thoughtful evolution in state management for cross-platform development. Addressing the limitations of MVU and MVVM offers a powerful pattern for building robust, maintainable applications.

Whether you’re from an MVVM background or more familiar with MVU, MVUX provides a familiar yet enhanced development experience. It’s worth considering for your next Uno Platform project, especially for complex, asynchronous operations or to improve overall application architecture.

The Uno Platform documentation is an excellent resource for diving deeper into MVUX and its practical applications.

Happy coding!