Getting Started

Comet is a few things:

• a platform agnostic UI toolkit
• a programming pattern

Pre-Requisites

1. Visual Studio Code

2. .NET Core 3.0

3. Platform install

   1. IOS - install the latest version of Xcode and Xamarin.iOS
   2. Android - install the latest version of Xamarin.Android

4. Install the Comet Project Templates

dotnet new -i Comet.Templates.Multiplatform.0.0.1.nupkg

2. Start a New Project

dotnet new comet-app -n RideTheComet

3. Open the Project in VS Code

code RideTheComet

4. Install the Comet extension for VS Code

Open the extension marketplace, search for Comet Debug, and install it.

5. Restore the NuGets for your library project and the iOS project.

VS Code will often prompt you to restore, however you can restore a few other ways.

With VS Code commands:

Type SHFT+CMD+P and type restore to choose the restore command.

With dotnet cli:

dotnet restore

6. Ride the Comet!

Just start debugging. VS Code should have already selected the iOS project as your startup project, and prompt you to select a simulator from your Xcode installation.

Once running, you can make changes to your view code and your app running in the simulator will update in real-time. Any invalid code will either report an error to you in the output window, or may crash the app and require reboot to get going again. So write good code!

Getting Help

We’d love to hear from you. Join us in the gitter channel to discuss using Comet, ask questions, or help others with your own experience.

——-

Your First Comet Component

Comet favors an atomic architecture and customization via extensions. What that means is that your components ought to be fairly small, and you’ll customize them with extension methods that ready like a beautiful story.

[Body]
View body() => new VStack(){
	new Text(“Hello”)
		.FontSize(32)
		.Color(Color.Black),
	new Button(“Get Started”)
		.FontSize(24)
		.Background(Color.Black)
		.Color(Color.White)
		.Frame(320, 40)
};

Model-View-Update

State in Comet is managed with the Model-View-Update pattern. A model state object is the source of truth. As anything updates the state of your view, Comet reacts by re-evaluating the View and Updating only what has changed.

This differs from traditional MVVM with data binding in that data only flows 1 direction, from the state object to the view.

Let’s look at a simple example right from our template code:

public class CounterView : View
{
	readonly State<int> count = 0;

	[Body]
	View body() => new VStack(){
		new Text(()=>$”You have tapped {count.value} times.”),
		new Button(“Increment”, ()=>count.value++)
	};	
}	

The change to state in the Button action triggers the Body to re-evaluate. Because the Comet UI is not on the native UI thread, this is fast!