MS Build SK107 Developing with the Fluid Framework

Key Takeaways

welcome to the developing with the fluid framework session at build 2020 my name is peter allensbach and i'm a program manager in the fluid framework team let me introduce my colleague hi i'm tyler butler i'm also a program manager on the fluid framework team so let me get started so the last time we talked to you tyler and i we were at the ignite conference last november in orlando and back then we still had a crowd we could see you in the audience and we could interact with you we could check if you're actually looking at our presentation or if you're checking your phone so the world has changed quite a bit so we're now both in our homes in the seattle area i'm recording this talk there is also some benefits to being at home and recording this one of them is at got a 6 a.m run through the queen and neighborhood out of it and then the other thing is both tyler and i don't really have to sweat about our demos it's all recorded and it will be all fine we can guarantee you that so let me write get right into the presentation so what is the key theme for fluid framework at the bill 2020 conference we will open source the framework and that will happen very very very soon so we're super excited that you can get to our bits and we will get your feedback and you will kick the tire on the fluid framework and uh we recommend that you are actually at the end of the session scanning our qr code so you'll so you will get notification uh when we are opening the fluid framework again the big call to action here is that we will open source the framework and we would like you to kick the tires on the on the fluid framework open source release so what is this talk about let me get to the to the table of content it has two different parts the first part i will give you an overview of motivated us to create the fluid framework for a new reality um i will explain you a little bit of where you can find the fluid framework how it integrates into the microsoft 365 experiences and then comes my favorite part which is i will give you a bunch of examples of what you can actually do with the fluid framework internal examples and also one external example from one of our isvs that we worked with very closely then tyler will fly at a much lower altitude he will explain you how you can code with the fluid framework he will explain you what you can do with the open source release he will walk you through how the data model works on a high level and he will also explain you how you can connect the ux layer to the uh to create an experience to the fluid framework so let me get started with the motivation of why we created the fluid framework in a new reality so here's a couple of trends that we've observed let me walk through these three trends the first one is a shift of work from individual to collaborative and but what i mean with with individual work is that it used to be that people spend a lot of time in their offices to get their content to almost perfection and a fairly late moment they would loop in other people within the team um to get it reviewed and then to go and do whatever the final step is maybe submit a request for proposing to a customer in the last decade or so we see this work shifting quite a bit um it will it happens the collaboration happens at a much much earlier moment so people are going out when they just have a raw table of content and they invite others to contribute to harvest their feedback to tap the diversity of the team and that means that these people actually need tools that support that and that's one of the core motivations for the fluid framework collaboration is one of the key assets that we can offer to you for a developer it's now never easier to go make your applications collaborative you can create experiences for single users and you can rely on the framework to make sure that multiple users can work together that's really the key attribute that the fluid framework can bring to your development so the second trend is one that all of you i'm sure are very familiar with data lives in a lot of different places and that takes a lot of manual work to actually copy it from these places so you may have data that lives in some back end you need to present it in a slide deck you may need to get it reviewed in an email message that's what i mean with it and typically that that will involve that you actually copy paste that information all the time one thing that the fluid framework can bring to the table is it can act as a single source of truth what we did is we're introducing components basically small bite-sized chunks of information so what you can do is you can basically put this information into these fluid framework parts and then you can just go and they're very versatile go and share them wherever they need to be you can embed them in a power presentation in a web page you can share them with teams and all of that so that's the second bullet that i go through here let me now explain you the third motivation or the third trend that we were observing people use a lot of special purpose apps for example they use word for writing documents and of course powerpoint for presentations and excel for spreadsheeting and all of that and then they have a lot of line of business applications typically if you want to finish one task you task switch between a lot of these different applications and so what we want to make sure with the fluid framework is that you can go and have an integrated experience we bring the tools to very ordinary work what that basically means is not only what i explained before does fluid have components but these components integrate into the microsoft 365 experiences for example can you go and get your work done in teams or in outlook and from end to end and i will show you a few examples a little bit later there about that and not only does it integrate into the microsoft 365 experiences the other thing we're also doing is we're integrating through the graph or whatever you would like to use into your data which basically means that your experiences are connected with both your data maybe your calendar your tasks your documents and it is integrated into the experiences where you spend a lot of time getting work done like teams or outlook so let me show you a different pivot of what what motivates us to create um what what motivated us to create the fluid framework the new reality has a lot of attributes that you're familiar with i think i can go pretty quickly through those attributes the first one is multi-app as i already mentioned is all of us use a ton of apps to get work done and that's one thing that we have to factor in the second thing is it's a multi-device reality all of you just like me are using multiple devices throughout the day and not only are these devices from one manufacturer with one operating system like you have all devices that are manufactured by different folks you have an android or an ios phone you have maybe a tablet maybe you have a surface book it's just a huge spectrum of different platforms that you're dealing with on a regular basis and then the fourth one which i already touched on the world is very collaborative virtually everything that you're working on at least that's the microsoft reality and i'm sure yours is very similar is involves other people so the tools that you want to hire need to be able to go and work in this environment very efficiently and that the last one which is super cool is also that the intelligence that has advanced a lot in the last years which basically means that you can go and hire intelligent assistant to go and help you with your work automate tasks translate stuff uh there's so so many different scenarios that you can imagine that an intelligent agent can go and assist you getting your work done so what does that mean for the fluid framework so the first thing as i already ment uh mentioned a little bit a few minutes ago is it's designed for collaboration so what we have is uh distributed data structures which tyler will go into more depth in a minute this is the power that fluid framework brings to the table these distributed data structures you can go and rely on these distributed data structures to go and ensure that all the different participating users will always have the same state they will always see the same thing and just like you're used to in in conference calls where you have the video feed and you listen to each other's at audio talk you can now do that with all kinds of content types for example can you collaborate together on an image you can go and draw it together you can go and design a graphical representation a visio flowchart or something like together there's just like no end to your imagination of what you can collaborate on with thanks to the fluid framework powering that at the speed of the network really industry leading speeds then the second thing that is a very important attribute for you is the fluid framework uses vector technology javascript a lot of you are familiar with with is what it powers you and we're very flexible also to be connected to any ux presentation layer and tile will show you a little bit of how you can use react and fluent to go and create user experiences for for the fluid framework so let me now transition into two more things that i want to talk about one is the component model i already mentioned this is allows you to deconstruct your information into small chunks this is one aspect of it and you can reassemble them these chunks into very flexible workspaces so you can for example create a workspace that represents a working session out of individual individual components for example it could have a table it could have a task list maybe it has a drawing in it so that's something that we're working on this is not yet available in the fluid framework experience that you can get to after the build conference but this will come really really soon and then the last but definitely not least one is you can go and develop intelligent agents that assist the users in their experiences so now i will go and transition into where you can find the fluid framework a lot of you have probably already started kicking the tires on the fluid framework going to fluidpreview.com but there's now more to come so the first thing i want to mention here is that teams and outlook both of them will go and enable you to go and use the power of the fluid framework one thing that you can do in those experiences is you can create a new fluid component out of it and i will show you in a second of how that could work in outlook but not only can you create a new component you can also go into an existing void document and you can copy paste that content into an email message or into a teams chat and in all of these cases the information is stored as fluid files in onedrive what you can also do i'm now going to the middle column of this slide is you can go to office.com or you can go to onedrive and what you can do there is you can just like for any other file you can create or open a fluid file and the other thing is you can sleep at night we're still working with our colleagues in the onedrive team to ensure that all that functionality will be ready also for floyd files but just as you're familiar with search and compliance and security will also apply to all the content that the fluid components and the fluid files encompass and in the future there is a lot more that we can do in order to integrate into the microsoft 365 experiences word excel powerpoint onenote edge and windows just as a few examples are all targeted experiences where we want to go and integrate fluid into so let me now quickly show you of how the fluid framework can go and expose itself into experiences this will also be available for you you have developers who want to go and provide these components there will also be a way that you can expose this functionality in the context of for example outlook or teams this is not final ui as you can see this is preliminary ui but it shows you conceptually of what you can do so here there's an email that somebody's sending about the monthly business review and what they will do is besides the static email content they want to go and integrate an agenda item and what that means is that that agenda is pre-filled with some items but all the people that receive that email can go and basically fill in the agenda topics they want to cover during the meeting this will help making the meeting much more productive but as you can imagine you can go and write your own component maybe one that targets a specific scenario within the company or maybe that's a generic scenario that applies to a lot of different companies but you basically you can go and write your own components and then you will have a way that your customers can go and install them and expose them to their users so let let me now get to my favorite part is i will show you a bunch of examples of what you can actually build with the fluid framework let me get started with what our colleagues at templify have done you may have already seen oscar at the keynote with rajesh jaw he provided an overview of his company they're located in denmark and they're a software vendor very popular in europe and beyond and what they actually prototyped and that's super cool and that's literally true is we gave them some instructions about the fluid framework and within a day they've wrote five different fluid components and i will show you one of them that they've built this is not the final component this is not a functionality that they will plan to make available to their customers but it's a prototype it's a hex to get a prototype of an idea that they had and we thought it was pretty cool so we wanted to show you that so this scenario that they picked is that somebody is working on a customer facing document maybe it's a document that has prices of goods that they want to sell to the customer but somebody goes and looks at the prices and thinks like maybe that price is not right we need to go and lower it in order to be competitive so somebody goes and changes the price from 6099 to six thousand eight hundred and ninety nine dollars and what that happens because that person is not authorized to change that it triggers an approval workflow so the person in this case wonder howard receives an email message and this shows the power of fluid she doesn't have to go to any other context she's already in ova and she receives this email message and in this particular case she has a way that she can approve it but as you can imagine she can also reject it or request more information but it shows the power of fluid just just a small chunk of that document has gets shared in in an email message and people can go and get work done in this very context and once you approved it the new price is valid and if the scenario is that this is the global price list all subsequent requests for proposal will go and inherit that so let me now get to the second scenario which is an intelligent agent what i will show you here is entity recognition of dates and people that's all powered by azure cognitive services so let me now show you how that works so in this example we will show you entity recognition of dates and people let me start out with dates as you can see i've wrote the date it got a green underline and now i picked the date this is not the final ui but you get it conceptually the same will happen with a person i type my name and it goes and resolves it you know into a person and what this does is very powerful so this is no longer just draw text this is this is actually now entities which means that we can go and do smart things with the document for example we can go and create something in your calendar on your task list regarding that date or we can go and assign a task to you or we can go and just send you a notification that somebody mentioned you into a document this scenario is very powerful and it's very timely so i'm pretty sure that you're familiar with that you can go and brainstorm on whiteboards in these times you want to be able to do that digitally and that's exactly what this does this is a real demo that our colleagues in the vizio team created this is a bunch of people in this case just two but you can imagine that this could be a dozen people or more that are brainstorming about the virtual employee meeting together in uh in the fluid canvas and not only can they go and brainstorm together but when they're done they can go and share that mind map in an email message with other people and if they choose to do so that mind map will remain active and interactive and people can go and continue to collaborate on that you can see here on the left hand side we have the fluid preview experience and on the right hand side you can see the production version of the planner service what they will now do is go and create a new task item and i will show you how it syncs to from the fluid document into planner and vice versa here i'm creating a new task item and i will assign it to the user and i will go and give it a due date i'm now going and opening a task in the planner service i will assign it to a new person and i will also go and update its due date so now i'm going back into my document and as you can see the date and the person just got updated in the task i updated in the planner service and as you can also see in the planner service the new item get a slide template shows up in planner as expected we got to do some performance work and some ux refinements this is real code but i think you get the concept let me now explain you how this task sync works behind the scenes what you can see here is a fluid component it talks to the fluid framework it updates distributed data structures those data structures send operations to the fluid relay and storage service and they also receive updates from the fluid relay and storage service so we added an extra trick here for the task sync there's now a fluid data sync bridge and it uses the microsoft graph to go and call into the planner servers but you can imagine that that works even differently you can imagine that that's not only connected to the microsoft cloud but it's actually connected to any cloud out there through the fluid data sync this opens up a lot of opportunities for fluid components by enabling them to talk to different sas backends in the cloud this concludes all the demos let me recap them quickly what i showed you is actually four different classes and that will actually explain even a fifth class of what tyler is about to show you during the coding demo number one is um templify what they did is a single source of truth they had their pricing table and they added an approval workflow to that the second one is an intelligent agent i showed you how entity recognition of dates and people work powered by azure cognitive services the third demo is a new content type mind mapping i believe that that's arguably the most powerful thing that should inspire you adding your own scenarios and all your own content types and then the fourth one is comp a component connected to a sas backend and what we demo do here is a component that was connected to the task fabric using graph calls and now let me actually introduce a fifth type because i believe that's also very powerful what tyler is about to show you is a badge component and that's a component that actually extends an existing experience the fluid preview experience so that's another class of components that you can go and write to go and use the fluid framework and to add value to your customers this concludes my talk let me now pass on to my friend tyler butler who will go and introduce you how to code with the fluid framework tyler the stage is all yours thanks a lot peter hi everyone i'm super excited to introduce to you the fluid framework at the code level we're going to actually get into some some code demos we're going to see some of these distributed data structures that that peter has mentioned in action but before i talk about those demos or go through those demos i need to explain a couple of concepts in a little more detail the first is a distributed data structure and the second is a fluid component distributed data structures are the primary building block that you use as a developer when when developing against the fluid framework and as their their name implies they are similar to data structures that you as a developer are familiar with strings maps sequences etc but they are distributed in nature and that brings with it a couple of cool capabilities that we'll talk about as i go through my demos we're actually going to see four of these distributed data structures in action today and you'll see how easy it is to to use them in in code and actually produce exciting demos and incredible apps for your customers the next thing we need to talk about are fluid components so if distributed data structures are the primary building block of the fluid framework fluid components represent a higher level with construct they are a way to combine these distributed data structures additional fluid components and business logic custom code to create reusable bits of data and user experience that you can reuse and embed across different apps so let's go right into a demo i'd like to show a sample component that i have here peter mentioned it earlier it's called the badge as you see here i have an existing fluid document and i've inserted this custom component called the badge into various sections here and the scenario behind the badge is it provides a lightweight way for me to indicate the readiness of a of a given section in the document so here i've indicated that this section is in drafting if i switch it you'll notice that it immediately switches on the right hand side as well and that's because this component is using the fluid framework to manage its manage its data so not only is this a lightweight way to indicate status there are a couple of additional features that the batch brings with it the first is there's a history of the status changes so as i make changes to the state those changes are remembered and recorded in this history in addition i can add my own custom states and i can assign those states to the to the badge component and when i hit save here this data is going to be distributed to all of the clients they're going to get the new custom status and it's going to be set in the drop down so the reason that happened is because we're using the fluid framework to handle all of the state that this component needs so let's talk about the distributed data structures that are being used here for the history we're using a shared object sequence so it's just a sequence of items a sequence of history items for the drop-down items here we are using a shared map it's a key value pair data structure and then finally for the actual selected item we're using something called a shared cell it's a distributed wrapper around an object let's look at what that looks like in code here i have defined my fluid component and you'll notice that it is extending a class called primed component the primed component class is optional you don't have to use it but it provides a couple of helpful features that are very useful when you're developing components the first feature that it provides is a set of lifecycle methods that you can overwrite in your component and you can use these lifecycle methods to create your data model so in the case of the badge remember i said we were creating three we were using three different distributed data structures this method here component initializing first time is where we create those data structures and initialize them and this life cycle method is called exactly once during the life cycle of the component so this is only going to be called one time in this line i'm creating a shared data structure a distributed data structure and then i'm setting some default options and finally we're storing that distributed data structure that we just created in this property called the root what is that the root is another piece of functionality that comes from the primed component base class this root is itself a shared directory a distributed data structure used for storing key value pairs very similar to a map and this route is available to you as a component developer when you subclass primed component that means that your component has storage has some place to store data and that data will be distributed for you because of the fluid framework so i mentioned before there are three data structures being used here and the pattern that you'll see is just simply repeated we create the distributed data structure and here in this example we create a cell and then we set some default values and then we store that distributed data structure in the root so one of the things you might notice here is that there's no explicit save step there's no we need to persist this data step and the reason for that is because fluid automatically persists the data stored within distributed data structures so the moment you set values in your shared map the moment you update content in a distributed data structure that data is saved and it is distributed to all of the other clients that happen to be connected at that time that's the first superpower that distributed data structures have that is that they are automatically persisted the data that is stored within them is automatically saved for you you don't have to explicitly save it or persist it it all happens automatically so let's drop down to another lifecycle method this life cycle method is called component has initialized and this is called every single time your component is loaded and this this method we're doing something a little bit strange we're setting some event handlers on these distributed data structures and the reason for that is because of the second superpower that distributed data structures have namely that they are distributed that may not be surprising seeing as that's in their name but what it means is that the data that you store within it could be changed by another client these are shared data structures so that means that if someone else changes the data you need to be notified as a developer so that you can either update your ui or or do something else depending on what the change was so in order to allow you to do that fluid provides event handlers excuse me raises events on distributed data structures so that means you can listen to those events and do and take whatever action is necessary in this case we're doing something really simple we're just re-rendering our ui every time the values change so we've talked a lot about the fluid component that is the the part of this overall experience that handles the data the fluid data but there's another piece to this and that is the ux layer the ux layer in this case is written in react using fluent ui but there's nothing in fluid that is that is react specific or anything fluid is very ux platform agnostic fluid is focused on data not not ux but how do we maintain that separation how can we have a ux component that doesn't know anything about fluid the answer is that we provide that ux component a set of of functions that it uses to get the data that it needs and to update the data as it needs excuse me and the way that we do that is shown here in this in this example badgeview is a react component and it takes a number of properties including functions to set the current selection add another option add an item to history etc using these functions the badge view react react component is able to excuse me is able to draw all of its ui and update data based on user interactions by calling these methods so by using this separation of user experience layer and data layer we're able to consolidate all of the fluid interaction all of the fluid code into a single into a single file and we're able to maintain a really strong separation between our ux layer and our data layer this concludes the demo of the batch component showing distributed data structures in the fluid framework in action everything i demonstrated today including the code is available as part of fluid's open source release peter and i are super excited about getting engaged with the community as part of that release we're looking forward to working with you to see what you can build what you can prototype it's really easy to get started and we're just really excited to start working with the community if you're interested in keeping up with the fluid framework i encourage you to check out a couple of additional talks that we have at build and if you want to learn more about the frameworks how it works under the covers please check out our ignite talk and finally scan the qr code if you want to stay up to date on the fluid open source release it's happening soon and we can't wait to see it thanks that's all i got anything else from you peter no thanks a lot for tuning in to our session and we're looking forward to hear from you and most importantly stay safe [Music]