Introduction to Comet

Happy New Year everyone, As apart of my holiday break and working on Cade: A multi-system emulator platform (which you can read about in my last post). I came across Comet while evaluating UI frameworks for the project. Comet is and experimental UI framework that implements the MVU (Model-View-Update) pattern and sits on top of Microsoft’s new .NET MAUI platform.

As this is an experimental framework there isn’t a lot of documentation for it currently. To help out with I am going to document my journey with Comet. Today’s post will be an introduction to the MVU concept, what Comet is and setting up my development environment.

Now while I wouldn’t normally go with a library that is going through this much change I like the MVU pattern. Cade itself is right now an experiment itself and I am treating it as a playground for testing at the moment.

What Is MVU

Source

The Model-View-Update pattern is a paradigm to bring immutability (being unchangeable) to a programs UI.

The image above breaks down the data flow for the pattern.

• View: A view is component that will be seen on the UI. This can be thought as small as a piece of displayed text all the way through to a full page in an application.
• Model: Each view has a model that holds the data (or state) for this view. If we are using the text view above then the text in the text view is held in a model for the text view.
• Update: Update is the process to change the data (state) in a view’s model. Again in the Text view example when the text is updated the Text view will re-create itself to display the new data.

Riding the Comet

As mentioned Comet is an experimental multi-platform UI framework that implements the MVU pattern. It sits on top of .NET MAUI.

Comet currently has a Github and discord if you’re after more information

Below is the out of the box example view for Comet.

public class MainPage : View
{

	[State]
	readonly CometRide comet = new();

	[Body]
	View body()
		=> new VStack {
				new Text(()=> $"({comet.Rides}) rides taken:{comet.CometTrain}")
					.Frame(width:300)
					.LineBreakMode(LineBreakMode.CharacterWrap),

				new Button("Ride the Comet! ☄️", ()=>{
					comet.Rides++;
				})
					.Frame(height:44)
					.Margin(8)
					.Color(Colors.White)
					.Background(Colors.Green)
				.RoundedBorder(color:Colors.Blue)
				.Shadow(Colors.Grey,4,2,2),
		};

	public class CometRide : BindingObject
	{
		public int Rides
		{
			get => GetProperty<int>();
			set => SetProperty(value);
		}

		public string CometTrain
		{
			get
			{
				return "☄️".Repeat(Rides);
			}
		}
	}
}

There is a lot going on here. At the top the state for the view is held on the CometRide property and is attributed with the [state] attribute

The view is held in the body() method and is attributed with the [body]attribute.

The view has a text view to display the data held in the state and a button to update the state.

Finally CometRide class is defined which holds the data for the view.

I will dive into views and state in follow up posts.

Setting up your development environment

Now to work with Comet you need to setup your device to develop for .NET MAUI

Now I work on MacOS and David Ortinau has a great write up here to setup MacOS development environment for .NET MAUI

Once you are setup for .NET MAUI you need a few other pieces to get your environment going.

• Comet Template: You can install the Comet project template with the following terminal command.

dotnet new -i Clancey.Comet.Templates.Multiplatform

Once this is installed you will be able to create a Comet project with

dotnet new comet -n CometTest

• VSCode Comet extension: to help with debugging and hot reloading your comet project Clancey the person behind Comet as released a VSCode extension. This is available on the marketplace. Follow up the setup guide on the page here to complete your development environment.

Opening your project is as easy as opening it in VSCode.

Code CometTest

Now at the time of writing I had to update the Clancey.Comet package to the latest version as I would receive an error when building directly from the templated project. The latest version currently is 0.3.430-beta and can be updated by opening your projects csproj file and updating the following line to use this version

<PackageReference Include="Clancey.Comet" Version="0.3.430-beta" />

Once this is done run another dotnet restore and you should be good to go.

dotnet restore

As Comet and .NET MAUI are going through breaking changes I will do my best to keep this post up to date. However if you run into any issues please reach out to me on Twitter and I can help out.

Remember to follow me on Twitter to see when I drop new posts and my journey into Comet and .NET MAUI