Hello everyone, thanks for joining me. I'm Vitor Norton. I'm going to tell you about the code behind collaborative components, a little bit about design patterns as well as web sockets. So let's get this party started, right? So just a brief introduction about myself. I'm Brazilian. So excuse any English, mistakes. I'm 10 time winner of Microsoft MVP. I'm also a developer advocate at SuperViz. and, but this is my professional background, the real deal for this talk is that you need to know is that I'm a In love. I'm passionate about connecting people together. I'm also highly t of my productivity tools like Notion, Figma, Google Docs, Microsoft Office. I really depend on them. My whole brain is inside Notion right now. If I lose my account on notion, I'm dead. and I love the idea of working anywhere in the world. I got to travel a lot. Because of my work and I had the benefit of doing some code while I'm still on Rio de Janeiro and hanging out there. So this is amazing. but today I'm not talking much about me. This was just a quick introduction to myself for you to understand how this is important thing for me, that we have collaborative components, collaboration components. What is Collaboration Component? you know the name. You may have an idea of what it is. But let's see. exactly what it is. So we have four, I bring, four examples of collaborative components. A form element that syncs what you're typing and what other people are seeing when you're typing. so you can use this, let's say, in a customer support that, The support is helping someone while on the phone or something like that to fill a form. The other one is the who is online. It's a presence indicator that someone is in the room together with you. Someone is looking at this document, is looking at this page and you can see Who is online? The. The other one is the mouse pointer. Where you can see, where people are pointed out. this is really important for if you're teaching someone, if you're assisting someone. and you can also, merge them together, like use who is aligned with mouse pointers at the same time. you can click on. The Anna, for example, and go to her or follow her and see where her mouse pointer is. Okay, another component that we have is contextual comments. So you can add annotations at any part of your web page or an element or perhaps even a 3D environment. But this, of course, you can have more components like this. I just bring some of them for you to see what we are talking about. Okay, so you have seen this before, right? You have seen this on Mario, on Figma, on, companies are building this because if you don't, if your application is pushed to the world for everyone to use and you are not using collaborative components, Then you are missing something, extraordinary. today, specifically, we are going to break down the code of MousePonders. We are seeing each level, of its code, so you can build your own, but mostly to understand what, what is happening. Of course, there's some codes that I will bring, it's not the final code, it's more a magical demonstration code. It's not something that Google is using, the source code of Miro or Figma, but the idea of it, okay? So let's break it down. Let's go to definition and break down what is mouse pointers. Oh, it's a hacked element. At least, this is what you should expect to add in your environment, in your application. You can just say, oh, I want to add these mouse pointers and this to just be attached to this element. So every time a mouse moves inside this element, it shows across everyone. Okay, this is what you expect to use. What is behind this component? let's see. This is the thing behind it. and we'll break down this even more in a little bit. But let's see this concept of a room. A room at line 1 is a group of people. So you have a RealD that can be, let's say if you are on Google meets, it's the idea in the your L or if you are on a Figma file. It's the idea of the document. So you can bring, say everyone, it's in that page, in that URL, in that document. This is the rule, okay? So everyone that is logged into this same ID, in the same developer key, and stuff like that, You can have participants and everyone in there will be together in this room. But what is going on in this room? nothing. Until now we don't have anything. But we are constructing a mouse pointer on line 15 and then we add it to the room. So when I add it to the room, I can see everybody, everyone's mouse pointer in there. Of course, you can have a conditional here and say like The host doesn't see the mouse pointer or something like that But the general idea is this So let's keep moving and let's break down the mouse pointer itself now, because of course I needed to explain a little bit about the room. if you're using a react application or something like that, you mostly would use this room as a provider and then a mouse pointer inside of it. But I'm just, like I said, this is not, Actually, this code will work, but, this is not, it's a demonstration purposes. Okay. So what is inside this mouse pointer? it's the logic to see who, when someone moves their mouse, you need to see in your front end, you also need to update your position to everyone. and you can have, you need to make it really fast and smooth. So this is the three key points, while building mouse pointers. Okay, so let's break it up. So when someone moves their mouse, I use here a little bit about a little bit of react, but you should be able to use this with any framework, any library that you want. Even in vanilla Javascript, okay? here in line 1, I have a mouse position that I'm saying X and Y, 0. Okay, so it starts on 0. and then on line six, I have a channel and I will talk more about this channel later on, but the most important thing is the subscribe. I'm subscribing and I'm listening to an event called Mouse Moved. it works a lot like add event listener to an HTML element. So I say. I'm listening to this mouse move and when I listen to this, when it happens, please call me, call this callback function on the mouse move. On mouse move, we will receive a message and we'll get this message data. And set the mouse position at X and Y. Okay, so this is pretty much it. You listen, and then you set the position, and everything was working out. of course, you may tweak it a little bit. You may add something else. You may only show the mouse, if you have, the first message. After the first message you receive, you may tweak a little bit. But The idea is that counts here, okay? let's go to the next challenge. To update your position for everyone. like I said, the subscribe works like the add event listener. And we're pretty much doing this here. So we listen to the document event. And we listen to the mouse move event. Okay. It's almost the same thing, but instead of using channel, we are using document, to see where, when the mouse move. Okay. So it goes to the callback function, all mouse move, go over here, we have the event, then we have the client X, the client A. Y, and then we put this in a simple, simpler object called position, and then, this is new, we publish it. We say, oh, I'm going to tell, So everyone that's listening, everyone that's subscribing, everyone that is observing this mouse move, that we have a new position for this. Okay? So this is how it works. This is the code. Let's go to the third challenge. how can I make it really fast and smooth? Oh, this is pretty much just to say that you may want to use. And native browser API called request animation frame that would update it according to your computer or your browser settings, mostly 30 FPS, 30 frames per second. so this way you guarantee that you are not breaking or violating any rate limits. Of your application, of having much data transferred than what's needed, okay? That's pretty much it. We have only a few more objects and stuff like that just to make this work. but you get the point. Okay, I told you about the channel. What is this channel? What's going on there? what tenure is this? Okay. So remember when I told you that we are adding mouse pointers to the room? we now add this real time, it's a real time dating giant that works as an event broker as our PubSub, I'm going to tell you more about it later. And this real time that we add, we can connect through. A lot of channels. You can create your own channels here. I'm creating this mouse handler channel so you can have a channel for listening to the participants that is typing, a channel for listening to, let's say, a live location. Some, something like that. We can, unleash your creativity on this one. Okay. We add it to the room and then we have the channel. so let's see the definition of the channel. mostly we have more than this of course, but the main things that you need to understand is this. event static, the subscribe and the publish. So we have this empty object that we'll have a graph, going on here. And then you have the subscribe and the publish. Something just fall off my desk, but that's okay. You have the subscribe and this publish, function that we've seen before. the subscribe, we have two parameters, the event that receives a string, a callback that receives a function, we'll have data, and then the publish that we receive a string, that's the name event, and the data. That is any object you want. Okay. So this is a pub sub. This is a publish subscriber. how does this work? What is this? I don't, I'm not following you. I'm not understanding you. Okay, I'm here with you. I'll call you back. what it is? the PubSub is a design pattern that you can see and you can see more about it. I will have links in. resources for you later on this talk, but you can watch and learn this on the guru. I don't remember the website name right now. guru, refactor guru, something like that. You can just type guru pubsub on Google. It will work. but the pubsub works mostly like the observer pattern. and I will tell you more about this later, but this is a design pattern that's commonly used for a lot of things like React Redux, for example. how does this work? What is the subscribe function? What's the definition? we have the event name, we have the callback, what's going on? it will see, okay, this may be confusing for now, so let me just break it down even more and do a hard code event name to make it easier to understand, okay? So this is the same code, I'm just not using the event name as a variable and using it as A hard coded value. So it makes it easier to understand. Okay? so we have this check, this condition that we'll see if we have an event called mouseMoved on our static events that we had added previously. If we don't have it, then we initialize it as an empty array. Okay? So we have an empty array. why? Because It will, if has, if doesn't have, it will add and actually it will push the callback that we want. It will add this callback that we are receiving to the list of this event name. The publish works almost, works with these events as well. and I'm doing this hard coded thing once again to make it. Looks simpler. Okay, so I'm here receiving the mouse move, and I'm receiving the data. What happens is that I go to the mouse move, remember this is an array, okay? the object that this returns is array, the event is not an array, the event is a graph. but the mouse moved, it's already, and I go for every single callback functions that, that I have added, added there. And I go and say, Oh, call the callback with the data that I'm passing right now. So this is one, it's going on over that. So this is the PubSub. Okay. Pretty simple, right? This is it. Yeah. it is this, but we're missing something important. we're, there is, this works locally. This works on your instance of your application, because remember that when you do the pub sub, you're not specifically saying for every device connected into the room. We skipped the code behind the room that I showed you before. so I'm going to tell you the secret for having this, working with any device in any IP hardware, anything like this. We have one more thing to say. What's going on? What is making sense on all of this? it is a WebSocket. We're using WebSocket to build this connection between my application running on my computer and the application that you are using on your end. what is WebSocket? Okay, WebSocket. Provides a protocol that allows for a continuous two way communication channel between a client and a server. why? Because let's go into more specific details about WebSocket. It persists connections. So, the difference between between HTTP requests and WebSocket is that when you open a request for HTML or HTTP, let's say, a REST API post on some endpoint, you open this connection, you receive this, post, you push this post, you receive the return, the response, and you And then the connection is closed. Okay? So if you want to get something, then you push a get, then you receive the response, and so on. you need to open, do the request, pick the response, close the request. Imagine doing this for every, third times per second on the frame rate that we are using for this example. you can do this, but, it's not the ideal. You may break the, your server at some point. What you need to do is that you use a connection that stay opens. For, stay open, for continuous data exchange. I open it, I'm sending, I'm receiving, I'm sending again, receiving, sending and receiving. And then, once I'm completely finished, once I close the browser, once I go do something else, Then I close it. This makes it a low latency. So it's ideal for this real time applications, especially for gaming, something with live updates, stock options. low latency is really a big deal here. Also, it works both ways. For the client and for the server. Okay? okay, I told you the secret behind the room. I told you what the room does. I told you the PubSub. Where can I see this? Where, what people are doing with this? I have a, a few slides, a slide deck for you. Who's using this, right? Let's see. Let's ask Sharjeepti. okay. I did not ask Sharjeepti. I just copy and paste some print screen, some screenshots from my mobile device, but that's okay. So he's using this, Uber is using these or an application that you can track, someone, on your mobile. so WhatsApp also does this for when you share live locations. so the person like on Uber example, the driver pushes and publish the location. every second, every. Any seconds or something like that, then you subscribe to it and you update it, update your map accordingly. Okay? Another place that you may use, that people use a lot is Microsoft Teams. Of course, for video conferences, of course, for chat applications, I'm going to tell you. About short applications and video conference later, but this is something that is pretty neat about Microsoft Teams that Tells you a lot that you can receive related content of the meeting and the current status of a person has Accepted or declined, if the person is online, if it is not, you have a summary of the meeting right on your hands and you want this to be updated every time something happens. because you don't want people to refresh, the page every time. Okay. And this is pretty neat because I'm really anxious and I'm really nervous on every meeting that I tend attend that. At least for me, it's really important to see who is already on that meeting. so I'm not the first one to enter it or to see Oh, I don't know anyone that's inside this room. I will wait someone that I know to be here. So this information is. It's pretty important for people like me, with anxious, please let me know if you have some of this too, okay? Also another use case scenario is the live chat application and any other chat applications, that you publish a message and you receive a message, something that's pretty, yeah. It's not that simple, or at least you would not expect in a glance, but the chat applications also use this, is that when, let's say, Brian starts writing, so the mobile phone, the iOS, the Android, Or the computer, the browser will listen to the type event and will publish it to me. And I do not receive what the person is typing, I'm only receiving if it is true or false or some data like this. And then I say, update the interface for everyone that it is in this channel, saying, oh, Brian is typing. This is not seen in a glance when we talk about shared applications used by people. In pub sub and real time communication data, but it's also something, that is being used here. Another application, a lot of applications actually is the whiteboard collaborative. so I bring him my role, that I hope that you have been using this for a while. that you know this tool at least, but if you don't know this, it's mostly like Figma or I'm missing names of whiteboard collaboration tools right now, but there's plenty of this. But the thing is, you look at this and you understand what it's doing, right? If, if you move this card to the left, it's moving to everyone. If you click on, let's say, Bea, you click her, in her, and then you're gonna see, you following, her mouse pointers, stuff like that. So this is pretty much easy to understand, this whiteboard. Bye. And you really needed to have this synced together. Another one, and this is one of my favorite ones, is that you can build your own interactive workspace. so this GatherTown, if you don't know this, I love this platform. they use this concept of Chibia or maybe a Habu or something like that. To create a working environment. So we have, everyone will have a table. They will have a common space, room, a conference room, a meeting room, something like that. They can style with, but you'll see who is online. You have this video conference. So when you start approaching to someone like this, again, we can. walk with your characters around and When you get closer to someone, you start seeing their image and listen to the audio, just like in real life. So this is pretty much, an amazing tool for remote work, for engaging in remote events, for, everything. I have this with my friends, I use it a lot. And this is a lot of these WebSockets and PubSub. I think I will just wrap this thing up by telling you some resources that I have for you. the main resource for everything here is the JavaScript Design Patterns, the book from Eddie Osmani. it's an amazing, simple to read book. I love it. Also, I use this as reference, an article by Vibhali Joshi. I hope I'm saying this right. I don't know her, but thanks for your article on how you can use WebSockets with Flutter. so this can give you more data about WebSockets itself. You don't need the Flutter part, of course, but I thought the way she wrote, the About WebSockets put in it. And then we have this article about understanding and implementing event driven communication front end development by me. You can find this as well on DevTools. Just search by my name or search by the name of the article. Also on tab two, I have a few articles about design patterns. If you want to understand more about Observer, Pubsub, even other, design patterns. This is it. Thank you so much for being here with me. Please follow me on my socials. if you have any questions, if you want to ping myself or anything, just follow me and reach out. Let's connect and stay together. Thanks so much. See ya.