Structure that MAUI App!

Premise

I recently found myself giving DotNet MAUI a whirl. The goal was to build a desktop app that connects to RabbitMQ, then sends and receives messages that were protobuf serialized. I got to the goal fast and efficiently enough.

Here’s the source code https://github.com/mariusmuntean/ProtoRabbit

And this is how it looks like on Windows

Motivation

What I didn’t like was that the main page of the app was a mess, tons of little UI elements, databound to the viewmodel. The viewmodel itself wasn’t much better. It had code to create connections, handle sending and receiving messages and so on. “There must be a way to structure this” I thought, and there was. Read on to find out what I settled on.

Step #1 — Custom controls

I first split up the code in three custom controls:

• ConnectionControl — Creates a new connection to RabbitMQ.

• SendMessageControl — Sends messages to an exchange.

• SubscribeAndReceiveMessageControl — Displays messages.

This cleaned up the main page so much that it only contained a Grid layout and the three custom controls. Nice and simple, have a look.

Step #2 — Nested ViewModels

Now it was the MainPageViewModel’s turn. I almost never used nested viewmodels in the past, except for displaying collections of objects. But this is exactly what helped here to tame the complexity.

Basically, each custom control got a dedicated viewmodel and the MainPageViewModel is their parent:

• ConnectionViewModel — Established and stops the RabbitMQ connection.

• SendMessageViewModel — Defines what message templates can be used and sends protobuf serialized messages to RabbitMQ.

• SubscribeAndReceiveMessageViewModel — Manages “subscriptions” to a certain message type from a certain Exchange in RabbitMQ.

This is how the MainPageViewModel looks like after extracting the three sub-viewmodels.

Fin

That’s all I had to say about this topic this time.

As always feel free to browse my GitHub repo and play with the code. It’s all MIT licensed, so go nuts with it.

If you enjoyed this post, follow me to stay up to date.