Introduction to

Azure Fluid Relay

Seiji Villafranca

github.com/SeijiV13

seijivillafranca.com

Hi im Seiji!

A filipino developer based in the Netherlands, I write code, i teach people and i speak in conferences

Developer

Community Lead / Speaker

Author

Talks

What is Azure Fluid Relay?

We want Real-time collaboration!

Real time updates

Seamless data flow

give updates

receive updates!

The Common Way?

Handling front and back

Client Web App

Service

Storage

Handling updates

Merge update conflicts

Receive updates in client

Web Sockets

Azure Fluid Relay Collaboration

Client Web App

Service

Storage

Azure Fluid Relay

Server side is handled by Fluid

What is Azure Fluid Relay?

Fluid Framework

allow developers build real-time collaborative experiences

allow multiple clients to simultaneously create and operate on shared data structures

Why Fluid?

Very low latency.

Client-centric application model

Distributed data structures

"Focused on the client developer"

fluid handles the server logic

Why Fluid?

"Focused on the client developer"

zero custom code on the server

responsible for taking in data operations, sequencing the operations, and returning the sequenced operations to the clients.

How Fluid works?

Step 1

Client code changes data locally.

Dice Roller App

User rolls the dice

    const updateDice = () => {
        const diceValue = diceMap.get(diceValueKey);
        // Unicode 0x2680-0x2685 are the sides of a dice (⚀⚁⚂⚃⚄⚅)
        dice.textContent = String.fromCodePoint(0x267f + diceValue);
        dice.style.color = `hsl(${diceValue * 60}, 70%, 30%)`;
    };

How Fluid works?

Step 2

Sends the change to fluid service

Dice Roller App

 rollButton.onclick = () => 
 diceMap.set(diceValueKey, Math.floor(Math.random() * 6) + 1);

How Fluid works?

Step 3

Fluid service sequences that operation and broadcasts to all clients

Fluid Service

Container

broadcast

state

get data state

How Fluid works?

Step 4

incorporates that operation into local data and raises a "valueChanged" event.

 diceMap.on("valueChanged", updateDice);

How Fluid works?

Step 5

Clients connected handles the changes

const updateDice = () => {
    const diceValue = diceMap.get(diceValueKey);
        // Unicode 0x2680-0x2685 are the sides of a dice (⚀⚁⚂⚃⚄⚅)
    dice.textContent = String.fromCodePoint(0x267f + diceValue);
    dice.style.color = `hsl(${diceValue * 60}, 70%, 30%)`;
 };

Let's deep dive on Fluid Relay

Architecture

Three primary concepts for building an application with Fluid.

Service

Container

Shared objects

Architecture

Service

A centralized service to send and receive data and operations

@fluidframework/azure-client.

package for connecting the Azure fluid relay service

Architecture

Container

Collection of shared objects that contain data that is shared with different clients

const schema = {
 2    initialObjects: {
 3        layout: SharedMap,
 4    },
 5};
 6
 7const { container, services } =
 8    await client.createContainer(schema);
 9
10const containerId = await container.attach();

Architecture

Shared Objects

Shared Data with different clients

Distributed Data Structures and Data Objects

SharedMap - a map-like data structure for storing key/value pair data.
SharedDirectory - a map-like data structure with ability to organize keys into subdirectories.
SharedString - a data structure for string data.