Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tutorial formatting #3535

Merged
merged 1 commit into from
Sep 4, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/content/docs/get-started/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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**.

Expand All @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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.

Expand Down