From ee3bb61cd5e786dd8f0a63bb76679a776539949d Mon Sep 17 00:00:00 2001 From: Nick Simons Date: Fri, 4 Sep 2020 15:52:45 -0700 Subject: [PATCH] Tutorial formatting Switched heading 3 to heading 2 so be consistent with other content and have the right nav show up and be useful --- docs/content/docs/get-started/tutorial.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/content/docs/get-started/tutorial.md b/docs/content/docs/get-started/tutorial.md index 51222767e9a8..ccaf79411a1d 100644 --- a/docs/content/docs/get-started/tutorial.md +++ b/docs/content/docs/get-started/tutorial.md @@ -20,7 +20,7 @@ In our DiceRoller app we'll show users a dice with a button to roll it. When th 1. Connect our model instance to our view for rendering -### The view +## The view In this app we're just going to render our view without any UI libraries such as React, Vue or Angular. We'll be using [Typescript](https://www.typescriptlang.org/) and HTML/DOM methods. Fluid is impartial to how you write your view, so you could use your favorite view framework instead if you'd like. @@ -51,7 +51,7 @@ export function renderDiceRoller(div: HTMLDivElement) { ``` -### The model interface +## The model interface To clarify what our model needs to support, let's start by defining its public interface. @@ -67,7 +67,7 @@ As you might expect, we have the ability to read its value and command it to rol This event is particularly important because we're building a collaborative experience. It's how each client will observe that other clients have rolled the dice remotely, so they know to update with the new value. -### Implementing the model +## Implementing the model Up to this point, we've just been using Typescript. Now that we're implementing the model for our collaborative DiceRoller, we'll start to use features from Fluid Framework. @@ -124,7 +124,7 @@ export const DiceRollerInstantiationFactory = new DataObjectFactory( And that's it -- our DiceRoller model is done! -### Defining the container contents +## Defining the container contents In our app, we only need a single instance of this single model for our single dice. However, in more complex scenarios we might have multiple model types with many model instances. The code you'll write to specify the type and number of data objects your application uses is the **container code**. @@ -142,7 +142,7 @@ export const DiceRollerContainerRuntimeFactory = new ContainerRuntimeFactor Now we've defined all the pieces and it's just time to put them all together! -### Connect container to service for collaboration +## Connect container to service for collaboration To orchestrate the collaboration, we need to connect to a service to send and receive the updates to the data. The way we do this is to connect a Fluid [Container][] object to the service and load our container code into it. @@ -169,7 +169,7 @@ const diceRoller: IDiceRoller = response.value; ``` -### Connect model instance to view for rendering +## Connect model instance to view for rendering That's it, now that we have a model instance, we can wire it to our view! We'll update the function to take an `IDiceRoller`, connect our button to the `roll()` method, listen to the `"diceRolled"` event to detect value changes, and read that value from the model. @@ -202,7 +202,7 @@ export function renderDiceRoller(diceRoller: IDiceRoller, div: HTMLDivEleme ``` -### Running the app +## Running the app At this point we can run our app. The [full code for this application is available](https://github.com/microsoft/FluidHelloWorld) for you to try out. Try opening it in multiple browser windows to see the changes reflected between clients.