HotUI

What is HotUI? HotUI is a prototype for a new UI Framework/Pattern to write app UI. It follows the Model View Update (MVU) pattern. It magically databinds for you!

Video Preview:

Key Concepts

HotUI is an MVU style pattern.

View is a screen. Views have a Body method that you can assign either by an attribute [Body]:

public class MyPage : View {
	[Body]
	View body () => new Text("Hello World");
}

or:

public class MyPage : View {
	public MyPage() {
		Body = body;
	}
	View body () => new Text("Hello World");
}

Hot Reload

Hot Reload is included by default! The setup is very easy: a Visual Studio extension and a NuGet. Download both from Releases here on GitHub.

Download and install the VS extension from the Releases

Then add to your AppDelegate.cs and/or MainActivity.cs, or similar. See the sample projects here for examples.

 #if DEBUG
            HotUI.Reload.Init();
 #endif

State

As of right now there are two supported ways to add state.

1. Simple data types like int, bool?

Just add a State<T> field to your View

class MyPage : View {
	readonly State<int> clickCount = 1;
}

View is state aware. When the state changes, databinding will automatically update, or rebuild the view as needed.

2. Do you want to use more complex data types?

You can either implement INotifyPropertyRead or you can use BindingObject to make it even simpler.

Add it as a Field/Property, and add the [State] attribute!

public class MainPage : View {
		class MyBindingObject : BindingObject {
			public bool CanEdit {
				get => GetProperty<bool> ();
				set => SetProperty (value);
			}
			public string Text {
				get => GetProperty<string> ();
				set => SetProperty (value);
			}
		}

		[State]
		readonly MyBindingObject state;
}

INotifyPropertyRead is just like INotifyPropertyChanged. Just call PropertyRead whenever a property Getter is called. And PropertyChanged whenever a property Value changes.

How do I use the State?

Simply update the stateful value and the framework handles the rest.

public class MyPage : View {

	readonly State<int> clickCount = 1;
	readonly State<string> text = "Hello World";

	public MyPage() {
		Body = () => new VStack {
			new Text (text),			
			new Button("Update Text", () => state.Text = $"Click Count: {clickCount.Value++}")
		};

	}
}

That is all!, now when the Text Changes everything updates.

What if I want to format my value without an extra state property?

While new Button("Update Text", () => state.Text = $"Click Count: {clickCount.Value++}" ) works, it isn't efficient.

Instead, use new Text(()=> $"Click Count: {clickCount}").

public class MyPage : View {

	readonly State<int> clickCount = new State<int> (1);

	public MyPage() {
		Body = () => new VStack {
			new Text (() => $"Click Count: {clickCount}"),
			new Button("Update Text", () => {
				clickCount.Value++;
			}
		};
	}
}

What platforms will be supported?

• iOS
• Android
• UWP
• WPF
• Mac OS
• Xamarin.Forms
• Blazor

Disclaimer

HotUI is a proof of concept. There is no official support. Use at your own Risk.