Join our Discord server for community support and discussions

MVUX or MVVM? Choosing the Right Pattern for Your .NET Projects

Uno Platform Team
Published July 25, 2023

If you’re a developer familiar with the Model-View-ViewModel (MVVM) architecture, you know it’s a popular choice for building applications. However, it comes with its challenges, especially when it comes to boilerplate code and threading issues.

Nick Randolph recently wrote a series of articles delving into MVVM and introducing an alternative called Model-View-Update-eXtended (MVUX). This blog post will recap the key features and highlight the MVUX approach for your future .NET projects.

MVVM: A Quick Refresher

Model-View-ViewModel (MVVM) is an architecture that connects the View and the ViewModel using data binding, usually done in XAML. The ViewModel serves as the current state of the View, and any changes to ViewModel properties trigger the PropertyChanged event, prompting the View to update the data-bound elements. User actions, like button clicks, can update ViewModel properties or execute ViewModel methods via data-bound commands.

However, MVVM has a downside: the lack of a well-defined Model and the mutability of the ViewModel. The interaction between ViewModel and Model can vary depending on the framework used, leading to excessive boilerplate code. Additionally, managing asynchronous data fetching and updating can result in challenging threading issues.

MVUX: A Paradigm Shift

MVUX, short for Model-View-Update eXtended, builds upon the MVU (Model-View-Update) architecture and consists of four central components:

Model
View
Update
Extended

In MVU, also known as the Elm Architecture, the model corresponds to the application’s state and is presented through the view. User input prompts updates to the model.

MVUX takes MVU further by introducing a robust set of tools that enable defining the application’s state with immutable models (in contrast to the mutable ViewModels used in MVVM-style applications), all the while harnessing the data binding capabilities of the Uno Platform.

MVUX takes a revolutionary approach by introducing the concepts of unidirectional flow and immutability of data. The Model in MVUX is immutable, meaning any updates result in a new Model instance. The View represents the Model, so when a new Model is created, the View is rebuilt accordingly.

MVUX capitalizes on the power of XAML and data binding while maintaining an immutable approach to the Model and updates. At the core of MVUX lies the concept of a “feed,” which is akin to an Observable from Reactive programming. However, a feed goes beyond just data streaming; it also conveys information about the feed’s progress, whether it’s in progress, has data, encountered an error, or has no data.

MVUX in Action

In MVUX, the unidirectional flow ensures that updates create new instances of the Model, keeping data consistent. Notably, MVUX introduces bindable proxies, which are source code generated to enable data binding between the Model and the View. This means you can still use familiar data binding expressions in constructing the View, and Model methods become exposed as commands, allowing them to be data bound to elements.

A key element of MVUX is the FeedView control, which leverages the additional information exposed by a feed. This simplifies both the Model, eliminating the need for extra properties to express the data loading state, and the View, as there’s no requirement to define visual states.

How to Set up an MVUX Project

Get started with MVUX projects easily using Uno Platform Wizard in Visual Studio.

1. Ensure your environment is correctly configured with the “uno check” command.

2. Create a Uno App using the Uno Platform Visual Studio extension. Make sure to have the latest Uno Extension (v4.8) installed.

3. Press Ctrl+Shift+N to create a new project and select “Uno Platform App”.

4. Give your project a name

5. Select “Blank,” and click “Customize.”

5. In the Presentation tab, choose MVUX.

6. Finally, click “Create” in the bottom right corner.

Embrace MVUX

MVUX opens up new possibilities for building applications with its unidirectional flow and immutable data model, addressing some of the challenges MVVM faces. It’s an architecture designed to simplify development, reduce boilerplate code, and offer a more intuitive and efficient way to create modern applications.

While this blog post has only scratched the surface of MVUX, there’s much more to explore when it comes to the MVUX approach. The best way to get acquainted with this new approach is to dive in and try it.

You can find additional information in the Uno Platform Documentation – MVUX Overview.

Further MVUX readings

The original article by Nick Randolph, titled “MVVM versus MVUX” is available here, where he compares these two architectural patterns. Additionally, you can explore more of his MVUX-related articles, including:

About Uno Platform

For those new to the Uno Platform, it allows for creating pixel-perfect, single-source C# and XAML apps that run natively on Windows, iOS, Android, macOS, Linux and Web via WebAssembly. In addition, it offers Figma integration for design-development handoff and a set of extensions to bootstrap your projects. Uno Platform is free, open-source (Apache 2.0), and available on GitHub.

Next Steps

To upgrade to the latest release of Uno Platform, please update your packages to 4.9 via your Visual Studio NuGet package manager! If you are new to Uno Platform, following our official getting started guide is the best way to get started. (5 min to complete)