{"id":18462,"date":"2024-02-06T08:10:01","date_gmt":"2024-02-06T16:10:01","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=18462"},"modified":"2024-04-29T08:41:49","modified_gmt":"2024-04-29T15:41:49","slug":"how-sharedtree-supercharges-and-simplifies-fluid-framework-2-0","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/how-sharedtree-supercharges-and-simplifies-fluid-framework-2-0\/","title":{"rendered":"How SharedTree supercharges and simplifies Fluid Framework 2.0"},"content":{"rendered":"

Fluid Framework<\/a> is a platform for building distributed, real-time, collaborative applications. It allows you to create rich and interactive experiences that can sync data across multiple clients and devices. However, Fluid Framework 1.0 could be challenging when managing the state of very complex and dynamic data.<\/p>\n

That’s where SharedTree in Fluid Framework 2.0<\/a> comes in. SharedTree is a new distributed data structure (DDS) that is designed to make it even easier to build collaborative applications. SharedTree is a tree-like data structure that can store any kind of data you might represent as JSON or a TypeScript object model. It includes a new, intuitive API that makes working with distributed data as simple as working with TypeScript data structures. And, as with all Fluid data, SharedTree handles data synchronization automatically.<\/p>\n

SharedTree is different<\/h2>\n

SharedTree allows you to create a scalable, hierarchical data model<\/strong> from objects, maps, and arrays. You can model very complex data in a single DDS. This makes managing changes to the data \u2013 especially moving data around \u2013 much easier.<\/p>\n

Further, the SharedTree data model is defined by schema<\/strong>. This schema allows you to use Fluid data structures the same way you would use other TypeScript data structures. You can define classes in your SharedTree schema and use them just like any other TypeScript class \u2013 except that the data is automatically kept in sync between clients.<\/p>\n

Schema also makes development safer <\/strong>and easier<\/strong>. SharedTree classes are typed which enables autocomplete and IntelliSense in <\/a>IDEs like Visual Studio Code. And since these are normal TypeScript classes, you can include your own custom methods to make working with data more convenient. For example, you could create a coordinate <\/strong>object with an x<\/strong> property and and a y<\/strong> property that is synched between clients. You could then include methods for moving left<\/strong>, right<\/strong>, up<\/strong>, and down <\/strong>directly in the class.<\/code><\/p>\n

export class Position extends factory.object('Position', {\r\n    x: factory.number,\r\n    y: factory.number,\r\n}) {\r\n    public moveLeft() {\r\n        this.x -= 1;\r\n    }\r\n\r\n    public moveRight() {\r\n        this.x += 1;\r\n    }\r\n\r\n    moveUp() {\r\n        this.y -= 1;\r\n    }\r\n\r\n    moveDown() {\r\n        this.y += 1;\r\n    }\r\n}\r\n<\/code><\/pre>\n
A significant addition to Fluid Framework 2.0 is full support for distributed arrays<\/strong>. SharedTree allows you to define arrays that can hold anything you define using SharedTree schema. SharedTree arrays include sophisticated merge semantics so that concurrent changes to an array will be merged rationally and without data loss. Arrays support insert <\/strong>and remove <\/strong>operations, but they also support move <\/strong>operations both within an array and between two arrays. This means that moves are handled atomically such that concurrent moves never result in duplicated content or incoherent merge outcomes.<\/p>\n
<\/code><\/p>\n
The experience of building a Fluid Framework app using SharedTree almost feels like cheating. Defining schema is as simple as defining TypeScript classes and once defined, you can build a complex hierarchical data model with simple TypeScript code. And because these are Fluid data structures, the data is automatically persisted to storage and synchronized between all clients. There is no need for separate file <\/strong><\/a>I\/O code or database code<\/strong>. Further, if you need to export your data, the SharedTree data is designed to export to JSON very cleanly.<\/p>\n
What the future holds<\/h2>\n
Fluid Framework 2.0 with SharedTree is already a very powerful tool for building collaborative applications. But we are just getting started. We are actively working on building support for a collaborative text<\/strong> data type which will make building experiences that support real-time typing much easier. We will be adding support for tabular data<\/strong>. We are also making significant investments to allow SharedTree to scale past the limits of client memory<\/strong> by allowing you to load just the parts of the tree you need.<\/p>\n
Our goal for SharedTree is to make using Fluid Framework as approachable as possible while delivering a powerful tool for modeling collaborative data. We love using it ourselves and the early feedback has been extremely positive. We\u2019re excited to see what you build with SharedTree and we\u2019d love to get your feedback!<\/p>\n
To get started with Fluid Framework and SharedTree visit https:\/\/aka.ms\/fluid<\/a>.<\/p>\n
Follow us on X (Twitter) \/ @Microsoft365Dev<\/a> and subscribe to our YouTube channel<\/a> to stay up to date on the latest developer news and announcements.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Discover how SharedTree in Fluid Framework 2.0 makes it even easier to build collaborative, real-time applications.<\/p>\n","protected":false},"author":121369,"featured_media":18470,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6],"tags":[118,302],"class_list":["post-18462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fluid-framework","tag-fluid-framework","tag-sharedtree"],"acf":[],"blog_post_summary":"
Discover how SharedTree in Fluid Framework 2.0 makes it even easier to build collaborative, real-time applications.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/18462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/121369"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=18462"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/18462\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/18470"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=18462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=18462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=18462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}