Integrate with M365 Using Emerging Platform Technologies

Key Takeaways

welcome everyone to today's session uh we are talking about integrate with m365 using immersion platform technologies my name is beth and i'm here with sam hi everyone and together today we're gonna talk about um two things uh i will be talking about microsoft graph and the tools that you can use to get it integrated into your app and sam is going to talk to you about the fluid framework super awesome content so again my name is beth i'm a software engineer with microsoft specifically working in pax which stands for partners analytics and essential experiences we kind of work in the first party and third party developer ecosystem trying to help partners and our developer community to get better access and better tooling around some of the topics and one of them is microsoft craft so i want you to work away today from the session understanding three things regarding the graph first thing is defining and describing the graph and then i want you to be able to build your first app powered by graph or adding some of the graph powered controls into your apps and the third thing is where to find more apps that is built on top of microsoft graph so part one what is microsoft graph um today we offer microsoft 365 as a single suite of connected applications and services that operate within the context of your identity whether at home at work or at your desk or on the move and it is built on a foundation of security and compliance in other words it's a set of interconnected secure tools that help you do more and the keyword is you and do more wherever and whenever you need to do it and the data and insights on which these services operate on that is microsoft graph so the key definition is microsoft graph is the m365 data that describes the patterns of productivity identity and security in an organization and so far we have over 2 000 apis in the graph so because of the graph resize in the cloud it is not bound to a traditional entity like a device or a operating system instead the graph allows us to pivot around a different kind of entity that is a user and we can create what we call a people-centric experience which are apps or solutions that are designed around you and me your calendars your conversations your communications tasks devices files and so much more so digging a little bit deeper into this data that we're talking about it is your data it does not cross boundaries or across organizations um it is required it requires consent to access it in this screen you can see when i'm accessing my asp.net app the app actually asks the user to consent for different things on the screen and when you click accept that's when you allow the application to access your data and the concept of user-centric is not just a marketing concept it is actually core to the way that we we query the microsoft graph api itself if you look at the screen here are three examples you can find all the events in my outlook calendar or create folder in my onedrive service where i get me a list of conference rooms in my building and the base endpoints of all of these are around me and then on top of that we're getting different endpoints to get different data and you can also see that we created more sophisticated queries based off of what we just showed you and they are still very much centered around people or groups for example you can find files that a user edited last week which added more parameters about last week or words or onedrive and or you can schedule time for a meeting with a group on their outlook calendar you can update planner tasks for a user based on their group membership you can also start new conversations thread for a group in microsoft teams in terms of data available in microsoft graph there are several very popular data sets that we see a large number of applications that integrate with them these are the data sets that i was talking about mail conversation tasks users files and events and remember i mentioned that there are over 2 000 apis in the graph well here are some of those data sets listed and each of them comes from a particular product or service in microsoft 365. a microsoft graph provides a core api functionality includes web hooks delta queries as well as more sophisticated sets of capabilities like connectors which enables search and microsoft graph data connect which can power analytic tools with that in mind let me go back to the definition and add one more sentence in addition to data that we described here microsoft graph can be accessed through a set of tools that enables you to build your own apps so in part two we're going to show you how to use some of these popular tools to build your first microsoft graph powered app and regarding the tools we're actually going to focus on developer centric tools and there's a lot more uh you can read about them in our documentation or go to graph.microsoft.com to find more possibilities to build to connect to the graph and builder first thing i wanted to show you are some of the sdks available wrapped around the api they are written in different languages so that you have the flexibility to choose based on your tech stack tier one are all the microsoft supported sd case which comes from rs sdk teams the tier 2 sdks are more community supported and if you're interested in contributing to all of these or any of these we are always welcoming you to do that so the first demo that i'm gonna show you guys is how to quickly get started with um from downloading a sample and it takes like three to five minutes for uh developers to get started with uh the microsoft graph and using a language that you're familiar with as well so if you wanted to do anything graph related remember to go to graph.microsoft.com this is where most of the resources that we have you know here within this one site you can see there's a lot of different solutions from partners um you can go to graph explorer and what we're going to do right now is go to the get started tab click on note.js you can also click on other platforms or languages to get started quickly as well so i'm just going to get started with node.js right here um as you can see on this page there are three options that you can kind of explore the first one is what i just said quickly download a connect sample in three minutes um start a graph powered app you can also follow a tutorial and learn how to build a graph application in about 30 minutes you can also just directly include the sdk in your existing project if you are just now exploring how to use uh graph microsoft graph in your own application so i'm going to click build an app you can see that the language is already selected i'm going to scroll down so let me make this slightly bigger as well uh you could see you know here's the prerequisites that you need to have node um some quick started at the beginning how to get your app id and build a sample in a couple of steps so we're just going to go to step 2 and click get an app id and secret from here it has asked me to sign in to this portal let me just copy this um and then select this account uh right now behind the scenes this portal is trying to create a app id and secret behind the scenes for me in the azure portal so here we have a secret already created right here let me just copy it and go back to get quick quick started scroll down paste it right here and click download the sdk while that's doing its own charm a couple steps that you can take after you've downloaded the sdk based code sample basically all we need to do is just unzip it go into the right directory uh do an install and then start the server in your localhost so let's do that real quick and see what it looked like so i'm gonna see where this zip is unzip this folder uh right click and then i'm going to unzip if i can find the right one extract all that's okay and i'm gonna copy this folder into my development um just copy it go to pc data development and then go to isp event paste it right here and here in my console if i check out what's all in this folder you can see here's the ms graph project that we just downloaded i'm also going to go into the graph folder and if you remember the steps we're just going to do npm install real quick right here uh this is if you're familiar with node behind the scenes you're just going to install all the necessary dependencies that this project needed like it's on downloading code and see how it works so uh you can see that's you know the project that i just opened some default files if i do npm install right here okay now it's running um this is installing all the dependencies as part of the package.json file uh just a couple of pretty simple ones i don't know why this is taking forever it should be done by now okay it seems like it was done okay cool and then we're gonna do it npm start wow access um this will start a local server at 3 000 for us to um look at what the application looks like oh if i go to this local host then you can see it's requesting behind the scenes um and i can click here to sign in with megan's account i'm just gonna do that and sign in as megan and if you remember in the presentation earlier i was talking about the data's all belong to you the application actually has to request on behalf of themselves to ask for to access the graph here are three things that the application is requesting and you can say i accept to share my data for these permissions now megan is signed in so super simple in a couple minutes we've downloaded uh a simple app connect that's connected to the graph and now you can do things like show the calendar if i click on the calendar tab and you can see like all these megan's calendar items as well so the next demo i'm going to show you is how to use graphics blower to explore the graph apis that might be useful for your application now that we've introduced you how to download a quick demo a quick sample and already connected to the graph so again um anything that relates to the graph go to graph.microsoft.com here in the tab you can click on graph explore uh and you can see on the left side is a countdown panel that you can sign into your own tenant or used existing tenant and very quickly this site offers a lot of ready to go queries under the getting started this are these are some of the most popular ones such as get my profile learn you know the default sandbox solutions profile what you could also do is like i said sign into your own tenant and explore the data that way some of the popular ones getting my mail is a really popular one a lot of people asking how do i get my manager and here you can see what the endpoint looks like what is request header you can consent on behalf of your organization if you have the admin account for all these permissions and you can also pull open the access token and say okay here is the access token that i have that will be viewable after that you sign into the graph explorer a couple things that might be interesting to you as well if i go search you know i wanted to see the people that i work with here slash me slash people and i also very quickly wanted to add this into my application next we're going to introduce you to the graph microsoft graph toolkit it's actually built into the graph explorer that you can see like how to how do i add a graph toolkit as part of it so there you saw how do we how we could use the graph explorer to explore different apis that belong to the microsoft graph and next i'm going to talk about another tool that's kind of one layer deeper than the sdks which is called the microsoft graph toolkit it is a library of reusable web components automatically bound to m365 data via microsoft graph it works great in development of web apps pwas sharepoint web parts or microsoft team tabs and because it is based on web standards you can use it with all kinds of web frameworks and it works in modern web browsers so the reason to use it is it's fully functional so it cuts your development time a lot so you build your applications and have your functionalities out faster the second thing is you get a out of the box i'm m360 m365 experience but it's fully customizable and very flexible and the last thing is what i said it's based on web standards so you can use it for with any web framework and in a lot of different browsers and here are some of the ready to explore microsoft graph toolkit components you can play around and explore these components at mgt.dev and i will show you a quick demo on how to use the playground followed by how to get started with microsoft graph toolkit so in this demo we're going to show you what the playground for microsoft graph toolkit look like if you remember uh we were just talking about you know what is the graph toolkit built for and uh who who is it for and some of the cool components that we're just mentioning and a good place to explore all these components is called mgt.dev this is the playground that we built for developers to explore all the components existing in the toolkit let me make the screen a little bit bigger um on the left side is a list of components available to you and you can see we've kind of built a couple samples into each component to help you learn you know what are the options that you can use for to add html attributes or js properties in order to utilize these components and on the right side in canvas above is what the components look like if the screen was bigger this would be like a left or right type of layout and then you have a code editor right here right next to the inside of the canvas section that you can add or remove any properties or javascript in order to live show live at the changes in the canvas and if you're curious what are the available attributes or properties you can go to the docs tab scroll down here's a list of html attributes you know maybe i can say i want to show presents for all the people that's listed right here so i'm just going to add show presents right here and now you can see there's a little bubble showing uh presents unknown because i didn't really sign in to any of these users but you get the chest um i will give you another example is in the uh on the left side outside of the component samp section we also have a section for samples that might be useful to you for example by simply adding two tags which is empty login and agenda you can quickly see the sign-in users mails and you can also utilize the templating that we have in order to see people's group messages or team messages that way okay that's the end of the third demo the fourth one is how to get started with mgt uh one second i'll just get ready and then we can get start okay this is the beginning of demo number four uh i've just showed you you know how to uh where to find all the components for graphic for the microsoft graph toolkit and some of the basic knowledge that you needed to know in order to incorporate it into your application so um what if you're new in order to use the microsoft graph toolkit here is how easy it is to add it to your application in about three minutes so let's look at how you would import it and add a component super fast so i'm here in my development folder and i'm just gonna make a directory call it mgt simple and immediately cd into it and in this i'm just going to open up vs code in this folder and there's nothing in this for now so i'm going to right click create a new file called index.html uh let me enlarge the screen maybe this is a good size okay and uh i'm gonna use the default html template uh in here where you can see there's nothing really uh just a html tag a section of head a section of body so changing this to demo so that shows the right title and the first thing i wanted to do is import the script tag from uh mgtd in order to use it so where to find everything or anything that you needed to know about mgt is if i go to aka dot ms slash mgt dash docs this is our official developer docs released to the graph toolkit and on the left side uh here is getting started link in the overview section here's how to easily get started with the microsoft graph toolkit and you can also see there are a couple other samples that are very popular for example building sharepoint web part building teams tab or using it with react or with angular we have you know getting started guide that was just revamped this month as well so scrolling down like i said we just wanted to import mgt using a script tag so right here i'm going to copy the script tag and paste it here save it and then from here what you need to do is add a nsl provider provider what i need is a supplied and a client id and this is what you would need to register your application with azure accept directory where you will get a client id from there if you don't know how to do that please follow up or ask a question later and then we'll show you the documentation of how to do this so i'm gonna grab the client id real quick from right here this is what i um earlier already gotten from registering my application in aed and the other thing that i wanted to add here outside of using the mso authentication provider is quickly add a logging component so saving it from here all i needed to do is i'm going to do a live server which seems like i don't have it installed on here yet so let me do live server this is a super useful tool that you can use to quickly host your local web pages so what i'm gonna do is so now that that is installed i'm gonna go back to my index.html and click right here on the bottom right go live there's allow access here's the sign in button and if i click sign in it's going to recognize my browser's profile right here so i'm just going to sign in with megan weird oh okay i know why uh because it automatically directed me to one point one two seven point zero zero one so i'm gonna do localhost five five zero zero which is right here the port number that's actually different from uh before if you were paying attention so let's see if this time gonna give me the right one yay uh this is because when i was registering my application and i actually added localhost 5500 as part of a redirect uri versus the 1.7 one but that's another trick if you have questions around that let us know we'll show you about that later so here now you can see megan is signed in and very quickly all we did was uh importing mgt as a script tag and then edit two very simple things one is the authentication provider the other one is our login component so there you have it um how to get started with microsoft graph toolkit in very short amount of time the last demo i want to show is how do we put everything together in order to enable you to have this connected experience with microsoft graph so the demo is called the meeting capture i'm just going to play this real quick so in this demo we're going to show you how to create a meeting right where you are without changing context and this is what's keeping us most uh productive every day is not no contact switching i'm just gonna complete my task where i am whether it's teams outlook or to-do's and here you can see um in my team's environment as part of the team i have a tab teams tab enabled that's having a application installed and we're using all sorts of microsoft graph apis to create a meeting search for people that i wanted to add to this meeting find available meeting times creating meeting agenda and finally attach files using the attachment endpoints so this page alone even though it looks very simple and clean they're different points working together graphing points working together to enable this experience to be complete so now that i've added all the details for the meeting that i wanted to create when i save it it's going to call the microsoft graph to create this meeting for me right here in my teams environment and then in the next view you can see this is a kind of mgt agenda view that connects to your calendar and you can see on the left that's mgt person and we're showing you know the key information for this meeting and you don't have to switch again to go make a note or save it somewhere else in notes or open up your to-do and right here we're using mgt tasks in the v2 version of mgt we're also going to have a mgt to do components which a lot of you have been asking for and here it is creating all these productivity information that i wanted to do within a teams tab and i think we're done um and then like i promised that the last part of the presentation is all about discovering microsoft graph powered apps so you could go to graph.microsoft.com scroll down at the bottom of the page there's a section for customer solutions to explore you know what other people or companies have used microsoft graph to do to give you some inspiration and if you want to look a little further a few for ideas you can also go to appsource and look at the office 365 productivity and the collaboration apps where you find thousands of apps where they are frequently connected to the graph and showcase a wide variety of ways to integrate with m365 platform last but not least here are a list of resources that i kind of mentioned before uh getting started with the graph using the graph explorer or developer docs where to find the toolkit where to find all the ready to explore apps in the last part and then some of the partner examples i'm going to switch gear that is everything i wanted to talk about for microsoft graph and i know sam's got some really exciting things to share with you on frame fluid framework all right uh yeah thank you beth i am so excited to talk to you all today today we're talking about the fluid framework and if you haven't heard of us yet that totally makes sense we just open sourced our project in september of 2020 uh so today we're going to give an intro to it we're going to talk about the basics and the value of the fluid framework and why you might use it i am sam broner i'm a senior engineer on the team i've been with the team for about three years basically since the inception well i'm just excited to share with you all so i just introduced myself we're going to talk about what how and why fluid why would you use fluid we'll go over the big picture you know how's this whole thing work and we'll end with a demo and some we'll talk about how the code works and we'll do a little walk through there so what how why flute the basic framing of this is that we have two key value propositions fluid makes collaborated collaborative applications much much easier to build and we make sure that applications with users are that are all working on the same data uh we just make that process much simpler for developers and the second thing we do is we make applications that are portable we make sure that your application can live in multiple hosts very easily let's talk about how we did that and why we did that so this is kind of this is a common scenario for us we've got kevin and we've got anna and they're collaborating on this silly to-do list application like uh you know adding to-do list items reordering this to-do list even in this simple scenario we've got some immediate questions as developer i'm a developer if i were to build this i'd be wondering how do i make this collaborative experience how do i make sure kevin's changes and anna's changes both end up in in this application here and then i'd ask once i made this little widget this to do list app where do i put it so that i can make it as useful as possible for our customers how do i make sure that kevin and anna get to use the to-do list app exactly where they want to and can access it easily so we realized that this question was coming up over and over again for all sorts of collaborative applications how do we handle multiple users and where are we hosting this application it was you know to say it it a little differently we were realizing that we were we were almost going to build another service to handle collaboration for each new use case if our ability to do with staff i might have to build a standalone collaborative service and that just doesn't really make sense i should have one tool that handles that for a bunch of scenarios and at the same time i might be asking am i gonna have to re-introduce this uh this to-do list app into an existing user experience like am i gonna have to post a new website for each for each uh to-do list app like thing i'm making these don't seem like perfect answers to me as a developer so the same question comes up for all sorts of scenarios rich text editing inking user presence gaming uh those you know whatever you're working on we're trying to figure out uh how do we simplify the collaborative story and the portability story so as we started exploring this problem space the first realization is that collaboration is surprisingly hard it seems like it's going to be just as easy as taking my changes and pets changes or anna's changes and kevin's changes and sort of merging them into some data structure and we'd be off to the races but um that's actually my office on the screen there uh that's the fluid teams library uh that was sort of right over my shoulder and that's a bunch of papers on how collaboration is done right now there's a whole lot of academic research being done on it and what we realized is algorithms like optimistic concurrency that's sort of a relatively simple algorithm it has limited use case for a lot of end user scenarios and we also realize that ot that's operational transformations and crdts conflict-free replicated data types they're pretty generally applicable but they're difficult to implement and they might require special case implementations for each use case so if i did it to do a step i might have to rework my ot model or my crdt model specifically for that use case and then as we begin to address the portability question the the experience sort of speaks for itself i built this to do list app as you can see this middle thing is a website with a to-do list application on it i want to be able to have that same experience with all the same data show up across different endpoints so i'm showing this in some mp65 properties this is teams on the left and outlook uh web on the right i'm just using them as an example this isn't built into our open source library but it's the kind of thing that you could imagine doing with the open source library to do this today you would need to use something like iframes you might have some sort of you know uh you might have a package that's sort of like a to-do list package but there just isn't a great way to write a fully portable experience that's super collaborative and has a lot of state as a developer this model is a huge really i can write something once i can deploy it to a bunch of different endpoints and the user section all this user data actually lives in this to-do list application so a really powerful model let's take a step back and just answer some of the high-level questions so that's why insert a little bit of what we're building but mostly the y and let's talk about uh what is the fluid framework the fluid framework is a collection of client libraries for building portable applications so applications that can be hosted on multiple websites with distributed state distributed state is what allows you to do that low latency collaboration like you saw the to-do list application so that's what we provide our open source project you can find these packages on mpmjs this is available for use this is what we're offering we also have a reference service implementation so you can deploy your own fluid server which is a pretty easy process and we'll have more documentation on that in the future you might also be asking yourself when would i use the fluid framework so anytime you need to sync data between clients if i want to have something on my screen and show up on beth's screen i might use the fluid framework uh real-time text editing is a great scenario presence you know where is my mouse in this document or where is it on the page real-time inking looks beautiful with fluid because the latency is so low that it's uh you just get a much more fluid fluid ink stroke and of course games replicating state from machine to machine is a classic scenario in multiplayer games and then when would i use fluid framework part two you also might want to reuse one application like the to-do list across different websites and so i just showed you the to-do list example and i fleshed out a little bit but there's a whole slew of examples of where that reuse gets really powerful and we're excited to see what people build using this new this new tool a comment pane maybe that that spans across websites there's a bunch of ideas and i'm really excited to see what gets built and used across different uh line of business applications and uh maybe your businesses uh and of course games again always fun to do uh reuse with games so that brings us to we know what the problem sort of looks like and we sort of know what the fluid framework is offering what kind of scenarios it might apply to but why would i specifically use these libraries and it's because building the latency collaborative experiences is hard and writing an application once and deploying it anywhere just saves time and it makes the user experience better you get a much more consistent user experience so this is what we're offering and this is what we're talking about is what we're looking at now let's look at fluid in action because this so far has just been sort of academic pros let's look at uh some of the things that we can build with the fluid framework i kept this window open uh i'm pointing to our documentation site here fluidframework.com as you can see we've got a getting started guide here some you know other features let's look at the docs though uh on the documentation page we've got some getting started guides we do a little bit of an intro to advanced topics uh as you can see we've got y fluid here but this is um we're gonna have more to come here this is our sort of first pass the documentation we can look at the api tab now uh in the api tab we have some of the function calls how to use certain packages within the open source framework and again something we're still working on but it's a good start and you can see it to do in there uh it's a good start and we're excited for you to check it out all right i already opened up a tab to the right that has uh the playground in it this is something i'm really excited about this is a place for you to check out fluid framework applications in action so uh in front of you here is an example of a note-taking application that dan wallin and nick simons demo just a few weeks ago um they did a great job worth checking out their talk but today we're going to talk about prose mirror so um pros mirror is a fantastic open source library text editor and you can see if i type in one of these windows it's collaborative by default this is something that we enabled with the fluid framework and i just want to talk about it for a moment we we took about a day to implement this and i'm very familiar with the fluid framework model and i'm relatively familiar with pros mirror so it might have been a bit faster for me but we're really excited about how easy it was to make a collaborative text editor i hope you can trust me when i say this is the kind of thing that takes a really long time without the fluid framework if you go down the page a little bit you'll see i pulled out some code highlights i'm just trying to show what are the key parts of the fluid framework libraries that you're using when you use pros mirror and so let's talk about it we're going to jump back to the slide deck and we'll break down what's going on in this demo uh this is a pretty live pros mirror scenario and we're going to talk about it uh over the next few minutes the fluid framework application starts with the loader the loader is the key thing that you're going to need to include on your website to host fluid applications the loader is what really makes it portable any fluid container any fluid application can be loaded by uh the loader that we provide the container this is your application we call it a container because it's sort of the outer boundary of your application and it includes all of the necessary parts to make it run it includes the app logic and it includes state and we'll talk more about that in a moment i like to think of this as sort of a shipping container it's got all of your stuff in it the next step would be data objects so a data object is a way to organize your collaborative pieces of your application this is a little breakdown of your app kind of a part of your app a way to organize it you might think it is a crate within your container that's holding all of your stuff finally we have the dds's the distributed data structures this is anything inside of your crates this is actually where we're storing state and when we talked earlier about all of those uh algorithms that you would use to move state from my machine to best machine that we were looking at this is part of our fundamental research this is what allows us to move state efficiently from my computer to yours it's because the dds is the distributed data structures are moving that data from place to place so we're looking back at the pros mirror text editor here and i want to talk about how these parts line up to the actual experience we're seeing your web page just needs to include the loader that's the requirement here is that you include the loader and it's going to allow you to load the container next up we've got the container this whole experience is the container this is sort of the application it's a text editor we also have these data objects we've got two of them on the screen or we could have two of them on the screen there's one that's for the settings or sort of the preferences you know how the formatting is gonna work and there's another that's the actual text editing area uh it controls the app logic of like how does the button click work if you hit the button or what happens on a keystroke and then ultimately we use the distributed data structures to actually move the state from one machine to the other this is you know again where that state transfer is happening and for the preferences up here the formatting we're using a shared map that's one of our distributed data structures it works a lot like a javascript map that you're familiar with um and for the text editing portion we're using a shared string which is powered by our merge tree algorithm and this um operates relatively similarly to a string it's a little bit more complex because the topic's more complex this is you know collaborative algorithms have a lot of complexity to them building a collaborative text editor from the ground up is actually a really tricky proposition it took the you know the microsoft word team sometime it takes people a lot of time to build great collaborative text editors this took us about a day now we're fairly familiar with the pros mirror model and we're fairly familiar you know i was very familiar with uh the fluid framework but it still took us that day that's actually quite fast uh and one of the great things is you could actually take our work and just sort of directly bring it into your own application uh if you'd like to so these things are composable that way you can take our work and build on top of it but uh we think it really simplified building a collaborative text editor and a collaborative text editor is one of the most complicated collaborative scenarios you might want to build here so now we've talked about what that prose mirror is like let's talk about what you would have to build what you'd have to actually touch as you build an application with the fluid framework you would have to build uh data objects and their views so data objects with the dds's is sort of your data model and then the views can be created with any web technology um and can either be included in your fluid container or not uh but this is what you're gonna have to build the data object and dds they get wrapped in your container and it doesn't require very much work most of your time is going to be spent working with the dds's and the data objects so let's take another second to look at those two key parts of the fluid ecosystem you've got your distributed data structures these are the primitive data types that the fluid framework uses to synchronize state across clients you'll often hear about ops operations these are sort of changes to your dds's uh and the opposite we're gonna get back to you it's key to how we make sure that fluid framework scales and but the key point is dds is synchronized state um this is where you're gonna put your data when you make a fluid application next up data objects this is code that encapsulates one or more of the dds's and it's going to define the rules for handling changes to dds-r dds's raise events regular javascript events that you'll listen to and you'll modify the ui based on some change in state and this developer model is what we use to build the pros mirror example that you just looked at so some more common questions that we get does it scale i am very excited to say uh yes it does scale and it scales really significantly for some really um clear design decisions because of some clear design fluid is rate limited really only by apache kafka and if you've read about apache kafka uh you'll know that people use it for enormous workloads well beyond what a document you know one document with user created changes would have our algorithm is mostly moving processing to the client and so there's no service that would be the bottleneck for your collaborative experience this really reduces latency and massively increases our ability to scale i'm going to show you some photos of a little bit of why that works so well for us so what we've got on the page right now is a fluid application this is a container it's got a view a data object uh and some dds in it and it's hosted on concoso.com at a certain id that fluid application is communicating with the fluid service only by sending the changes to the dds's so all it's sending is little updates about the fluid service and then the fluid application is receiving those offs back what we can do is we can add one two ten a hundred we've done some demos with a thousand users um where all we're doing is we're taking operations in we're ordering them you can learn more about the fluid framework.com site and we're sending them back to the applications and then on your client machine you're reconstructing the state out of those ops so ops are kind of a key concept for us you won't have to work too closely with them but it's core to how we enable this low latency colon do i have to use fluid framework with react or angular view or any of these view frameworks um nope definitely not uh fluid is entirely view agnostic bring whatever library you love uh we've used react in some of our demos because some of the team had prior experience you might find more examples of that but we're really looking for more examples using all of the view libraries and this is a classic question this is a really interesting uh comment is the fluid framework different from web sockets uh you know maybe signalr socket io etc it is different and it's a pretty critical difference signalr is about moving data in real time between clients while fluid is a more abstract way to keep your data structures in sync so we actually can use signalr or socket io websockets in general to transfer those ops that we showed earlier on the presentation but fluid is going to be doing the work of keeping your data structures in sync and that's work that you don't have to do as a developer so that's mostly it for us today we open source in early september as i mentioned we are really eager to get your questions i'm eager to get your questions uh we're very interested in your feedback and we super want you to build stuff i've hosted fluent services in the works it's not been released yet but um just know that sort of uh that's sort of coming and then i wanted to leave these on the page for you all we have uh three repositories the left github microsoft fluid framework that's sort of our main repository we've got a group of examples that microsoft slash floating samples and we've got a hello world at microsoft float hello world you can reach me at uh twitter or on github with my username at sam broner or the flow team with affiliate framework and of course check out our documentation on the fluidframework.com website really looking forward to hearing from you very excited for your questions we in this live so put them in the chat uh beth and i are there ready beth you ready for the questions yes of course born ready awesome all right we're looking forward to it we'll talk to you there