Fluid Framework 2.0 Beta - Build collaborative apps fast!

Key Takeaways

hey everyone I'm Nick Simons and I'm cash kesi we're both product managers at Microsoft working on the fluid framework and we're excited to announce the availability of fluid framework 2.0 beta fluid framework makes building collaborative applications fast and intuitive and fluid framework 2.0 beta includes a new more robust data model and a even more intuitive programming model that makes working with collaborative data as easy as working with Json objects let's talk about collaboration it is an integral part of our work lives it allows us to work together to achieve common goals share ideas and build on each other's stengths new generation of employees are also demanding more flexibility at work with the rise of remote and hybrid work as a result our productivity tools also need to evolve to adapt to this new mode of working at Microsoft we've been building the collaborative platform for all developers out there before I worked on fluid I worked on the office web app where collaboration was our top priority we spent a lot of time building collaboration into word PowerPoint and Excel both on the web and ultimately on all clients and we learned learned a great deal fluid framework represents the culmination of everything we learned so that we could build a platform that was designed for building the next generation of collaborative applications and we're using that platform to build applications like Microsoft Loop and Microsoft whiteboard but maybe more importantly we've built the platform so that you can also use it to build any collaboration experiences you want to to build so let's take it from first principles what are the elements of a realtime collaborative application you have multiple clients with some local state that needs to be shared and synced across the other clients that's why fluid framework consists of two parts a relay service and a clients Side Library the relay service is responsible for receiving changes from the clients sequencing them and then broadcasting them out to the other clients the client Side Library is responsible for merging these changes in with the local state so all clients eventually end up with the same state the relay service is meant to be flexible and lightweight so developers like you don't have to write a single line of code to make this work the fluid client Library leverages mainstream web Technologies to make it as as approachable as possible for front-end web developers the way you work with fluid data is using something we call distributed data structures which look a lot like local data structures like objects arrays Maps numbers and strings but unlike local data these distributed data structures are automatically kept in sync by the fluid framework the value and real and the power of fluid framework really comes when you're able to focus on your application experiences and just use this fluid data as if it were local data for the most part um and then rely on fluid to take care of keeping all of your data in sync um so that you know you don't have to worry about saving data or any sort of network operations with fluid framework 1.0 we were able to build a number of powerful collaborative experiences at Microsoft including Microsoft Loop and Microsoft whiteboard and we've partnered with companies like Autodesk and hexagon to build collaborative experiences there as well with fluid framework 2.0 we've introduced a new hierarchical data structure called shared tree which is designed to make it much easier to model complex data and comes with a much more intuitive programming model that feels much more like building an object model using typescript so let's take a look at the Shared Tree in action so what you see here is a demo app that cash and I built um it's a react app built using the fluid framework 2.o beta and this application allows you to add sticky notes to a canvas and then you can write ideas on these sticky notes you can vote on those ideas and you can group them when you're creating um an application using the share tree the first thing you need to think about is your schema and so if you think back to the uh application I just showed the primary object we're working with is one of those sticky notes and so let's take a look at the schema for the sticky note so the way that this works is we have a class which we've called note um and it has a set of properties it has an ID which takes a string a text which is a string Etc let's take a quick look at how we would use one of these objects in a react app so what you see here is the top level react component for building one of those sticky notes and you can see that the first um property we're passing in to that component is simply a note object and for the remainder of all the code we treat that object like we would treat any other object which means you know in order to update the data all we need to do is change a property so for example we change the text and that updates the text in all of the clients um or we call the vote method which changes the vote um in all of the clients so because share tree is so powerful and flexible developers can just bring their data model to fluid and use share tree as the the foundation of their data um and all they need to do is hook hook up their UI to uh share tree um and monitor updates and update the UI uh it's uh it's really uh pretty uh straightforward yeah that was really the goal with chare tree was to um really sort of shorten the distance between the fluid data model um and your programming model so that you don't need to think about building any sort of of Plumbing um between the fluid data and your data you really just get to use fluid data like it were were local typescript objects so let's talk about the relay options today fluid offers two relay options the Azure fluid relay which is an Azure hosted service and comes with all of the promises of an Azure service including scale and security it is available in production today and is serving millions of sessions per day with fluid framework 20 we're also launching a new Option called SharePoint embedded service this service allows you to keep your collaborative data within the M365 uh boundaries of your tenant and again it comes with all of the promises of an M365 based service including data residency compliance iance and security and so when would I choose one over the other it really depends on your product needs uh if you're developing your application on uh an M365 uh uh base tenant you would choose SharePoint embedded and what if I want to do both well fluid does allow quick switching between these two services so your code will be very very similar um when building for Azure fluid relay or M365 and you can very easily with a few lines of code switch from one service to the other so to wrap up what we really want you to take away is that fluid framework is an amazing platform for building collaborative applications and fluid framework 2.0 makes building those applications more intuitive than ever before and allows you to build data models that just better reflect the types of data models you would build using typescript objects maps and arrays visit aka.ms fluid to learn more about fluid framework 2.0 it's available in beta starting today um and will be generally available later this summer we can't wait for you to try this release out and provide feedback join us as we bring the future of collab to life