 Hello everybody, I want to introduce you, Kevin Jans, with a talk about CRDT framework for Shared Editing. Give him a warm welcome. Thank you. So yeah, I'm Kevin Jans, hello, first of all. I'm a contractor, wrap developer, mainly focusing on creating collaborative applications. And that's what YGS is for. It is a framework designed to specifically help you to make collaborative applications or make your existing application collaborative. But first, what is collaboration? You're probably familiar with collaborative text editing, collaborative drawing. Maybe I've seen that a couple of times. I'm personally really invested into collaborative whiteboarding. Like think about meeting rooms, multiple people coming together, working on the same problem. It really makes sense to provide tools that enable you to do all these things at the same time. So it really enables you to create stuff together. All these creative tasks, like drawing, like text editing, meeting rooms, these are best served doing as a collaborative application. You would be really hindered if you would use a Git application to do something like that because it's an asynchronous tool. You really wanna have real time shared editing in many applications. And this is what YGS does. So what's the problem that YGS tries to solve or does solve? It's automatic conflict resolution. It's kind of magic. So assume that two users are working on the same document. They have a text document in this example and both are inserting a character at the same time at the same position. They first apply their change on their own document and then they propagate the change to the other peers. So what happens is these conflict that occurs in this scenario here is automatically resolved and the documents are merged automatically. It's kind of magic. So both users will end up with the same document and that's really important in these kinds of applications. This is very much contrary to a Git application. So this is manual conflict resolution. This is what you have in Git. Two users are doing something concurrently, working on different branches and then they merge their stuff and they end up with a Git conflict. And this is perfect in my opinion because a Git application is an asynchronous application and therefore a lot of conflicts might occur that you want to resolve manually because well, if you would just automatically merge those changes, you would end up with weird stuff basically. And this is also a problem that Wider solves. Think about offline editing. So you have a colorative application that is supposed to also work offline. You wanna be on a plane, write a document and then later sink those changes to the other peers. Then you want to have manual conflict resolution and Wider is also a tool for you to do that. So it's very much like Git in a way. There are tons of existing solutions and there's a pattern there. All these existing solutions, they solve exactly one problem. They have their own editor implementation that they want to make collaborative or their own diagramming solution, drawing application that they want to make collaborative and there are so many existing tools that do exactly that and they all have a specific backend that you have to use and integrate into your application. They don't wear peer-to-peer and where's the fun if you don't have can implement a distributed application with this framework, right? You wanna integrate this shared editing solution into your own environment. Maybe you work at a company with an existing communication protocol already in place. Maybe you have something like web sockets already set up. You have a specific database set up and then you wanna use your own tools instead of relying on a separate server implementation and this is something that really bothers me and something that I wanna solve with YJS. I've been working on YJS for six years now. I've been here at FosterM six years ago talking about the same stuff but now I was really ready to do all these things that I'm talking about. YJS mission is really to provide a solution that is network-agnostic. It works with all the existing communication protocol set out there. It works peer-to-peer. It works on the data on IPFS. It integrates into your own existing environment. It's really awesome. This is, I named this network-agnostic because it doesn't care what the underlying communication technology is. Furthermore, I wanna support all the editors. At this time, I support five of the most prominent text editors, which text editors, code editors and they all work in combination with YJS but that's not the limit. I wanna make everything collaborative, drawing and maybe even interfaces. You can make react state collaborative that's all possible with YJS. And YJS gives you the benefit that it already solves all these complex things that happen in collaborative applications. For example, shared under redo. It's a really complex problem, think about that. I'm working on a document and I hit undo. I should not be able to undo the changes that you created. I should only undo the changes that I did. And that's a huge problem. There's a lot of state tracking involved and that's the problem that YJS solves. And it gives you under redo, collaborative shared under redo in all your applications just by using this framework. It solves the problems of propagating the awareness information that is information. For example, who is currently online? What are they currently selecting in the text? Where's their cursor? What is their name? These are all problems that are solved in YJS. YJS has many more features. For example, it does versioning, it does change tracking. You can track who created which content. This is very much like, get blame if you want. So you can select a portion of text and find out who created that specific text. It does offline editing really well with all the problems that are associated with offline editing and merging offline content. So yeah, pretty cool. But YJS itself, here, it's just a really small seeded implementation. It is based on the idea that there are shared types that you can use to manipulate data. Shared type is very much like a JavaScript type like the JavaScript array or JavaScript map with the only difference being that all the changes that you do to these types, these shared types are automatically propagated to all the peers that are out there. And they're automatically merged. And you can observe these types and see, okay, when did they change, what happened, and who did those changes. You can do transactions on these changes. This is how YJS tries to solve the problem of designing a collaborative application. And then there's a huge ecosystem of modules that work together with YJS. I put all these modules into three categories. And these are only the modules that are officially supported by YJS. And so they are the connectors. Basically, they are all about how you connect and share your data using different communication protocols. There are the persistence adapters that store the data in a database. This can be server side, for example, in level DB or browser side in index DB. And then there are the data bindings and this case here, only editor bindings. YJS supports five editors, including ProsMirror, Quill, and several code editors. And we are currently working on integrating YJS in Gutenberg, which is the official editor of WordPress. So you probably know about that. So it really integrates well into all these products. And I could talk hours for each of these modules individually. They do a lot of stuff. They allow you to scale your application. And I do actually, you can check out the podcasts we created around YJS. Later, the slides, there's a link to that. But I wanna pick out a few of these modules individually and give an example. So there's Y index DB in the persistence category which allows you to store all your document updates efficiently in the browser database. Index DB is a database that is available in all your browsers and all modern browsers. And Y index DB stores document updates incrementally efficiently in the database. So the next time you reload your page, you will already have the content there. You don't need to request it from a server. It's already there on your local computer and it will immediately load up. It's really fast. It also allows you to create offline ready applications because if your website is available offline, for example, using service workers, you can create an offline ready application. Then there is, and this is the coolest connector from of them all in my opinion, then there's Y WebRTC. It's a really ambitious project of mine. So WebRTC is a protocol basically that allows you to create a peer-to-peer connection from one browser to the other. And Y WebRTC is a method, a framework to create a completely, it's a method to create a mesh network of WebRTC connections of many peer-to-peer connections from browser to browser. There's no central server involved that does conflict resolution. All of this works peer-to-peer. Of course, YJ also integrates into existing projects, for example, the DAT protocol. This is something I'm currently working on also with them to make this happen. And yeah, I'm pretty excited about that. Now it's demo time and I invite you to not only trust what I say, just go on this website, yjs.dev, it's a website. I would be really happy if a lot of people would show up and we could try out this peer-to-peer application with a lot of browsers and mobile devices here. I'm gonna say beforehand, the FOSDEM network is not the most reliable, but even if a lot of connections break, the WebRTC network is kind of fault tolerant, so I think it might work. Okay, actually I'm gonna use this. So this is my website, the YJS website. There are a couple of examples here, many more examples available in YJS-Demos. It's a repository full of ready-to-use examples. And this website is completely available offline. So the next time you reload this website, all of the data is already there. Did nobody join or does it just not work? Well, that's what happens in demos, right? You just gotta have to trust my word on it, but I have a backup solution for this. So if you can see other user cursors, it will work. Apparently the network here is not strong enough. So the idea here is, and now I opened two browsers that you can work collaboratively, text. You see me typing on the left window, it's having stuff on the right window. And all of this, of course, works offline. Actually, I'm gonna go in this. Now that I have no network anymore, airplane mode. I can reload this website, it will still work. Even I can see my cursors here, which is really cool, I think. And it will sync even while offline. And the cool thing here is you can make versions. So I can create a version here and see all the differences that will happen that was created by different users. I can highlight them by the user who created them. And now think, imagine me writing a lot of content here while I'm offline. And I go back online and sync all my changes back to you. Like just imagine it would work. What would happen is that there would be a strange mishatch of weird words appearing on your site and on my site. Oh my God, there are a lot of users. Holy shit. Ooh, it does work. Cool, so it does work. So now all my changes are just synced back to you. But I wanna know what happened? What did you create in the meantime since I wasn't here? Apparently some people just copy paste the text and inserted some content. So I can really distinguish the users who did what, what happened here. And this is really important in offline editing. By the way, this live tracks all the changes that you make. So when you do an insertion here, I'm gonna see who did that. So yeah, this is really important in offline editing because you wanna be able to prove read the changes that you did to your document before you sync them to the other peers. And this is also something that YGIS allows you to do. It's all peer-to-peer offline. This uses Y WebRTC. This is the pro smear editor, but as I said, it's not limited to one editor. There's several editors that YGIS supports. And there's a drawing sample. You can coloratively draw. Let's have you guys draw something here. Oh man, okay, it might be a bit overwhelming. I think there, oh, there are a lot of users joining. This is basically my demo. I would really much like to have at least a few questions. So this is me. This is YGIS. Find us in the Gitter Community and Discussion Board. Work together with TechOne to provide professional services around YGIS, shared editing, collaborative applications, distributed systems. Write us at YGIS at techoneconsulting.com. If you are interested in something like that. Also we have tons of podcasts around YGIS and the ecosystem that we created around this framework. There's just one link. And yeah, that's basically it. Really happy you were there. And I hope you enjoyed the demo. Are there any questions? I think we have eight seconds. Thank you for your talk. Thanks too.