Comparing Fluid-Framework to Signal-R: Understanding the Distinguishing Factors

Query: Recently, Microsoft unveiled the Fluid-Framework on GitHub. What are the steps to replace Signal-R with Microsoft's Fluid-Framework and what are the main differences?

Scenario: It appears that Fluid supports collaboration and data synchronization for tools like Mermaid diagrams and Flowcharts, which is a key use case. However, when attempting to switch from Signal-R to Fluid-Framework, the lack of documentation and guidance became evident.

Some points of confusion that require clarification:

  • The absence of clear details on the client-server connection is puzzling. For instance, configuring

    data sync frequency, fallback storage, custom claims within the container, port information, attribute binding
    in the Action/API signature is challenging without strongly typed examples.
    import { DataObject, DataObjectFactory } from "@fluidframework/aqueduct";
    Requesting more robust server-side wiring examples.

  • Fluid Container: Obtaining Transition or Query information for the active nodes' state and next nodes from the mermaid chart is unclear. How can this be achieved?

Difficulties due to lack of documentation https://i.sstatic.net/a83Hz.png

Answer №1

SignalR is a powerful tool for facilitating communication between clients. One could consider the possibility of creating a custom driver to replace the existing WebSocket implementation, such as socket.io, within the Fluid Framework.

However, Fluid Framework is not a direct substitute for WebSockets, Socket.IO, or SignalR. It may require the application to transition more of the client state into Fluid distributed data structures.

Developers familiar with SignalR and WebSockets often rely on Last Write Wins data structures, where a message sent via WebSocket can update the client-side data. In certain cases, the message might serve as a simple notification, like receiving an alert.

While Fluid does incorporate Last Write Wins data structures, it focuses more on state management than message transmission. Some data structures within Fluid may necessitate more intricate state management, as not all data, like strings and sequences, follow a Last Write Wins approach.

Consider a scenario where two users concurrently edit a string using a Last Write Wins algorithm:

Starting state: "Hello World";
Alice adds "!" at the end;
Bob adds "?" at the end;

This could result in either "Hello World?" or "Hello World!" depending on the order of operations.

Fluid processes Bob's and Alice's changes through the service and applies them in a reproducible manner using a merge tree data structure. Ultimately, the string would display as "Hello World?!".

While simple examples, like Last Write Wins, may be straightforward to implement, handling more complex scenarios can be challenging. Operational Transformation (OT) and Conflict-free Replicated Data Types (CRDTs) are existing methods for managing state replication. Fluid's primary value lies in managing intricate state on behalf of the user.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Google Maps JavaScript API failing to load due to a 403 error after the tab has been open for an extended period

Our website utilizes Angular and includes tabs with Google Maps that load lazily when needed. Everything works fine when the page is first opened, but after spending some time on a tab without a map, switching to a new tab with a map results in the map not ...

Utilize underscore's groupBy function to categorize and organize server data

I am currently utilizing Angular.js in conjunction with Underscore.js This is how my controller is structured: var facultyControllers = angular.module('facultyControllers', []); facultyControllers.controller('FacultyListCtrl', [' ...

Arranging a variety of array objects based on unique identifiers

Previously, I successfully combined two arrays into one and sorted them by the created_at property using the sort() method. let result = [...item.messages, ...item.chat_messages] result.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)) it ...

How to dynamically modify ion-list elements with Ionic on button click

Imagine having 3 different lists: List 1: bus, plane List 2: [related to bus] slow, can't fly List 3: [related to plane] fast, can fly In my Ionic Angular project, I have successfully implemented the first ion-list. How can I dynamically change th ...

What is the reason for browsers changing single quotation marks to double when making an AJAX request?

Jquery: var content = "<!DOCTYPE html><html lang='en'><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='w ...

Navigating the DOM in real-time with jQuery using the parent()

$(".hovertip").parent().live('hover', function() { ... It appears that the code above is not being recognized. Also, the following code does not seem to be effective: $(".hovertip").parent().live({ mouseenter: function() { ... Are ...

I have an Observable but I need to convert it into a String

Seeking assistance with Angular translation service and Kendo.UI components. In the Kendo.UI documentation, it mentions the use of MessageService for component translation implementation. To achieve this, an abstract class must be extended containing a m ...

Processing one file to submit two forms to the database in Express

I am facing an issue with two forms on one form.hbs page using the same process.js file. Each form is processed by a different submit button for separate occasions. The first submit button works correctly, processing the data in the process.js file and se ...

What is the best way to access all of the "a" elements contained within this specific div?

Chrome websites are built using the following structure: <div class="divClass"> <a class="aClass"></a> <a class="aClass"></a> <a class="aClass"></a> </div> Utili ...

Display the div only when the radio button has been selected

I have been attempting to tackle this issue for quite some time now, but unfortunately, I haven't had any success. My goal is to display a specific div on the webpage when a particular radio button is selected. While I have managed to achieve this by ...

Proper functionality of Chrome Extension chrome.downloads.download

I am currently developing an extension with a feature that allows users to download a file. This file is generated using data retrieved from the localStorage in Chrome. Within my panel.html file, the code looks like this: <!DOCTYPE html> <html&g ...

Having trouble retrieving the selected date from the Material-Ui datepicker after the first selection

I am facing an issue with the material-ui dateandtimepicker where I am unable to retrieve the date value on the first select. The value only shows up after the second click, and it's always the previous one. Is there a way to convert the date to a for ...

What is the best way to filter out empty arrays when executing a multiple get request in MongoDB containing a mix of strings and numbers?

I am currently working on a solution that involves the following code: export const ProductsByFilter = async (req, res) => { const {a, b, c} = req.query let query = {} if (a) { query.a = a; } if (b) { query.b = b; } if (c) { ...

Can JavaScript functions be automated on a web browser using Power BI tables?

I am facing a challenge with saving data from a powerbi table on a daily basis. When I hover over the table and click on the ellipsis menu, a button element is generated in HTML that allows me to save the data to a CSV file using Selenium. However, achiev ...

Tips for preventing HTTP Status 415 when sending an ajax request to the server

I am struggling with an AJAX call that should be returning a JSON document function fetchData() { $.ajax({ url: '/x', type: 'GET', data: "json", success: function (data) { // code is miss ...

Adjusting background position using incremental changes through JavaScript

Although I have a strong background in PHP coding, using javascript is a new venture for me so I hope this question doesn't sound naive. My objective is to create a button that, when clicked, shifts the background-position of a specified DIV object b ...

Unable to Render Data URI onto HTML5 Canvas

I have been attempting for quite some time and feeling frustrated. I am facing issues with my Data URI image not being able to write to my canvas for reasons unknown .... Here's the code snippet ... function addImage() { var allfiles = $("#postAtta ...

Modify information in formArray

Let's take a look at this setup I have: Model: export class MapDetailModel{ id: number; lat: number; lon: number; alt: number; long: number; angle: number; distance?: number; pendenza?: number; } Html: <div clas ...

Retrieve image file from computer's hard drive

I have the following HTML Tags: <input id="bigPicture" name="bigPicture" type="file" value=""> <img src="test.png" id="test1"> User select file and I want to preview this file inside ...

Search through a group of distinct objects to find arrays nested within each object, then create a new object

I am currently working with objects that contain arrays that I need to filter. My goal is to filter an array of classes based on category and division, then return the new object(s) with the filtered arrays. Below is a representation of the JSON structure ...