Hello and welcome, to yet another episode of tag, one team talks, I'm your host pressed, and so editor-in-chief, here, at tackle and consulting, and the author of decoupled, fruitful in practice, today, we're going to be talking about. Yjs. Offline, apps with. Indexdb, during this webinar in podcast series about emerging, web technologies, of course one, of the things that we always like to mention on the show at the very beginning is you can check out our past talks that tag Wong calm slash tag team talks and if you'd like this webinar. Session today please please, remember, to upload subscribe, and share, it with your family and friends today, we've got an amazing cast, of characters on our, webinar. First, of all I'd like to introduce our special guest kevin yonks the creator of yjs. He's based out of Berlin Germany currently he's, the founder, and project. Lead of yjs, in the real-time collaboration. System, sleep at tag one we've. Also got with us our dear friend Fabien France senior. Technical architect and performance, lead at tag one Fabien is of course one of the five Drupal, seven core branch maintainer, he's, also one of the top 50 contributors, to Drupal 8 and maintainer. For several drupal 8 core subsystems, including, big pipe dynamic, page cache and themed api and finally. We're joined by our good friend Michael Myers managing, director at tag 1 Michael. If you want to kick us off with a little bit of a description. About tag 1 and why we're all interested in this topic. Awesome. Thanks guys I really appreciate you being. With here, with us today. So tag one is a web, development consulting. Company specialized infrastructure. Software, development, we've. Been doing a lot of projects, that involve real, time collaboration, we're. Excited to be doing more work with Kevin on these projects, I think, we're going to see real time collaboration, become a key part of web applications. Or all applications. For that matter moving, forward enabling. People in a workforce to, work. Together in real time is, how. Business gets done so. For, example with, content, management systems, like Drupal, and WordPress which, we do a lot of work with enabling. Content. Editors to edit rich, text, you know to create documents together. In real time to, work on layouts. And page setups in real time together so, this should be a component of every modern CMS, system and. So that's the stuff early to be talking about today is how, we're making that happen I. Absolutely. I think that being, able to edit offline is a huge feature that a lot of CMS's, need and here, to join us today to talk about this a very, important topic is Kevin yawns hey Kevin, so such a pleasure to see you again on the program can. You tell us right away, what is an offline app and why is this so important. Right. Thanks for that hi. Yeah, so ever since the web was created we, have misused, the web to create web applications right, we use web applications, because they are always available on all the devices and, they. Sync to the cloud which, is really comfortable, and. But. A huge disadvantage of, the web was always that it is, not available, offline, so, when you are in a train and on plane you. Just have a bad, connection. At a bad place you can't access your favorite web site or your favorite documents, just. Imagine, like you, are flying and you really need to see. What's in this Google. Docs document you, can't really see it because it's not available offline so. That's a huge advantage of, offline apps and there, are some apps, Malc emerging. From. The web that are also work offline and there's, a technology service, workers that, makes, this possible. And. These. Apps get more and more complicated. So there for example sun block. Blocked. Websites, that. Fetch, the data in the background and just store them for you to see when you don't have internet connection, so, you can weak your article. You. Can read the next article even without an internet connection which, is really comfortable, and there. Are also more complicated apps like, Twitter that.
Work. Offline fetch, data at the background, and you can treat. Away and these. These. Tweets that you create while offline they're just later, sync. As soon as you have an internet connection again, so, for, me this is really interesting, time, right now. So. One of the things I think a lot of tag. Wanting, toxins, viewers have seen is that you. Know there are a lot of there's a proliferation of, online applications. On the web really emerging, but we're also hearing, you. Know this new marketing technique I hear, a lot of people not, only in my spheres but you know I've done this myself as well talk about a lot. Of the frameworks that are out there or apps that are out there as as offline, first, but what. Does offline first really mean is that different from offline, enabled, yeah. I think so, I think, you can categorize, them as following like offline. Enabled or, like offline, as a progressive. Enhancement, just. Means that some, part of the application still work while offline, and a. Good example for this is a, lot. Of website that just show a different, website when, you are offline for example and sorry. We are offline, right now we can't really do anything for you but, some. Of them show limited, functionality, and. Some. Handle, the case of offline, really. Great graciously. So. For example Twitter on the, website when, you open the Twitter website, and. You. Lose internet connection, and you, post. A treat the, street will, be stored. In. A local database. When. You don't have the internet connection and later when you are online it, is sent to the server but, the whole Twitter app of course with all these treats is not available, offline. But. Some of the tweets are fetched and you can even see, a lot of retreats while offline, you don't need an internet connection for that so there's limited functionality. Offline. First in comparison. Is your. Whole application, works. Offline, as, well as it does online and that's. How I would categorize it a good, example for that is maybe, Google. Docs with, a native plugin or Chrome, OS for example, you can use Google, Docs while offline completely. There, is not a problem it's really cool, even the changes, that you do are later, synced, to, their platform and. Blocks are often, they. Are so simple because it's just a website that you show, so. There's, basically a background, drop that checks. If you have internet connection, it will serve the latest content to you and if. You don't have internet connection, it will save the content, that is stored or in the local database to you or, even yeah so. Yeah. This is how it categorize. It and here's a fun, thing they're also offline. Only, applications. Just. Search with their. Applications, that only work while offline to. Keep you from all the distractions of the internet, well. I for one can certainly use an, offline the only application. What I have. Trouble focusing, okay. So I think that this really helps us you know there's this spectrum, between offline enabled offline. First and offline only, very. Very interesting, I think that this emergence. Of all of this spectrum is going to be really. Important to the next few years but. Let's talk a little bit about how this actually works from the technical standpoint when, we say offline, and we're talking about a web application, how, does offline. Actually work on the web and, let's. Talk a little bit about some of the technologies, involved there right. So the technology, that makes as, possible. Is of. Service. Workers and, indexeddb. Indexeddb. Is a local, database in, the browser that you can use to store, anything, for. Example websites the content of a website and a service worker is a really interesting technology. It. Basically sits in the background of your website. And. Can.
Intercept, All the requests, or the network requests. That you do from the website so, this is a browser technology, it. Has started one, process, for. Each website and. It. Can intercept, all the network requests, and it can do anything with it so, for example you can check if you have internet access and then. Grab the, latest state of your website just fetch all the content, with all the dependencies, the CSS, stored. In the database and, then sir. The quantum that you have. To. The website so your. Website will still work and if, it doesn't support service, workers and but. If service, workers are supported, and it. Will intercept, the requests, and so. A few different content or even the same content, but also offline, another, advantage is if you, configure this Service Worker correctly. You, can make you a much. Faster and. There's. For example this first. Cache. First technology like, the idea here is instead. Of always, using the network requests. You, always serve what you have in a local database first, and you, update your local database and. This. Is for, example something I use on yjs, death and it's. A cache first website, so, in the background it always fetches, the latest state but, as soon as the. Website really notes, very fast, because it. Preserves the continent, that it has on offline. In a database, so. That's, basically it this. Is the technology that we that. We have but, of course there's so many problems, that we need to figure out um. For example the UI patterns. And, how that works the sinking, of the background, data. Yeah. Yeah. I quickly, want to go go, into. That topic again it's. In. In, caching, it's. We. Validate, while, staying. That's. How it's called and, it's taking control that. Means whenever. Someone, comes to you in once data you sent on whatever you have and. Then your checklist. Within. A CDN. Like fasting, like vanished, like. Elf. Layer and, then why you're. Doing this and the. User is very happily browsing, the website with all the things that set where you check hey server. Might, be a new version of this and then service a yes there is and then, you've stored in the cache the. Next time the user comes you, get a bit they get automatically, the fresh version. So. Of course, usually. There's. Formication. Perspective, just like a time out and that like you don't want to sell content for more than 24, hours or something, that we just think, very few confusions. In that but. That's generally the idea of revalidate, by a state, that. If you still have a version and as long as you have many visitors. It's. The. New cached. Version ten seconds faster than someone else, everyone. Will still have a fast experience. While. The. Server in the background is, heavily we're, producing, we creating, the website and, is, then giving out new information and. This is basically the idea of putting. So. It's for, those really always want to see the entrance etc, you, can also think of the service worker as your own personal, CDN is, in the, browser of the user it. Actually cloud for a support service workers of the cloud that's, kind of funny they can it exists force, approach and put it back in the city and so it's even more connected now.
But. Yeah that's how you can think about it you have your own CDN. Basically, as a layer within. The users browser and you can do whatever you want. You. Said index CB some. Kind of database technology. I assume it's not like Oracle embedded in your browser is, this you, know there's a sequel database where. How do you query it you tell a little bit more about that, yeah. Index. DB is an object, storage it, is basically. An. Evolved. Version of level TB that will. Develop. Just. For. Not. Really a database. If you start on your own but in database. That is embedded, in your application, and in this case it is embedded, into the browser and each, website has. Access. To. One. Index, DB database and, it can Crowley. It, has limited travel functionality. It is not as powerful as SQL. But, it is very fast and you can implement, basically anything with it and. Yeah and, in. The serviceworker uses, indexeddb, in. The background to store the website so it has a context. To store websites. Or resources, basically, anything and. It. Can access, this database, to. Retrieve. Other. Content, and serve it to the to, the client. When. We did our web, RTC. Webinar. You know tag team talked last week you. Talked about end and encryption, and how, with, WebRTC it's, encrypted by default. It. Sounds like you know with indexdb, I can't access databases. For other sites, how. Is that information stored on my local. Computer though is it encrypted, by. Default can, it be encrypted what. Kind of security, mechanisms, are in place for that, honestly. I don't know I think, on. Your local computer and. Probably. Everyone can read it who has access, to your account. So. It is protected, by your. Operations. System. And whatever. Encryption. Mechanism, you use or if you use any. But. Aside, from that of course the browser doesn't encrypt, the database, and. You. Could if you want create. Your own encryption mechanism. There, are examples, for that. For. Example, some. Password. Managers. Use. Index, DB to store the, passwords, and make. Them available while. Offline but. You need a key to process, that and index. DB is really really. Interesting, technology. Because, you can, even, store. Keys. Like. Our. H, keys. In. A very, secure, manner so that your, application can't. Access, the content, of the key and can't send the key to other people, but, you can store, the key. So. You can have access it, and decrypt. Things, so they're like there's a lot of thought put into this and I am NOT an expert on that but, I, can, certainly say that you. Can implement secure, applications. With it wonderful. And one of the things that I think is, really, important to stress for our, audience, today is that. Not. Only are we talking about offline. First.
Applications. As being something where. You. Have access to all, of the Stata offline, it also improves the end-user, performance, because. You're constantly fetching from the cache I think that's just a very important thing to call out for the. Audience who might be less familiar with how, this. Can enable that really quick time to first paint as well in the browser so let's. Let's move a little bit to topics, that we know about that. We really really play with on a daily basis like, yjs. As, I understand that yjs is, a topic we've covered many. Times on this channel on this on, this series and it's, a real-time. Collaboration, framework that's, open source how. Does it support offline editing, yeah. So yeah, the idea is just stores the document, offline right and and. There's even, more there's. A lot of interesting things with. Indexdb. And yjs because. Well. To start again I. Created. Recently the, Y index DD DB adapter. For. Yjs which enables, you to store. Your. Document, in, the, local index DB database but. Also store. Document, updates very, efficiently, so you. Can weave retrieve, it very fast and also. Handles, the case of concurrency, when you have multiple pages, open. That, access, the same database. They. Can all access the same database, retrieve. The information, share. The content, through, the database, which, was really interesting and, something that you want because. Often. You. Want to have. Often. You have different browser tabs, open accessing. The same content, and, they. Need to be able to communicate with, each other so, and this, is what why next, enables, you even. While offline. Your. Browser tabs can communicate, with each other and store, document, updates and instead. Of storing the whole document, as a big. Binary blog every, time you make a change you. Only store. Small, increments. Of the data to, the database and, when. You reload your page it. Just accesses. It makes to be database, and retrieves. The document, again. Just. To give a very practical, example assume. You have 3500. Tabs open. In. A browser and, you've. Worked a lot with your, CMS, and you do things and, you. Edit. Content, and, then you go away and. Have. A nice day outside and, he, came back and you continue, working and he totally forgot that you had this article in, your, Drupal CMS and. Then. You go back to your CMS login, editor. Content, and, it's. All there everything. You've changed already on the content is all there automatically. You, don't need to do anything and even, if you know change, it here and save it then. You go back to your basically, your other draft in that then automatically. It has will changed already, you already see all your changes saying that and that, you already saved it etc so. Even. If you forget kinda, you don't have conflicts you don't have things to oh how, did I do this I, need to grab producers, here etc and, even. Another. Case. Assume. We would, have had this for like, drupal. All issues, you're. Working on a few issues writing. Long text etc, computer. Crashes, browser crashes, power. Goes off whatever. Happens, all. Is lost in, that you haven't submitted yet, in different. Freaking, out on it and. If, you had attached, this to why in a senseless, way. By, it next, to be is well there you, just come back you can continue working like like, you, never had been been away, in that so. I'm it can also help safe, data. That. That. You never lose any any content, in that and, that's. Very very break in that because, it's a it's, problem, I mean we, have also safe and rueful for example, as a module, which frequently, saves like many. Things that is face to server so, what happens, when you're on the fly and you can't say for that and, obviously we also have some really tried to put it in like, local storage in there and, it works a little bit but it doesn't really help. Us the cases, of you. To make up this other tab of the same content, etc and, its, really nice that this wisp, ideas, can just work just works right. And these another use case and, you talked about the crashing. Of your, local browser or, like losing your internet, connection. Just imagine, to go, in a plane and oh man, I need to have this tab open no until I can sync the content, to the server now. What you can do is. Because. Service workers also have access. To your index DB database as, soon as you have access to the Internet again, it. Can it, the, browser will start, your service worker even, when your website, isn't open, and. You. Can sync the content, to your server and persist, it as so. Other applications. Can also see, what you created, so.
What This really allows you is to create. Offline, first applications. That. Create fully, sync, but also enable you to. Progressively. Enhance. Your application, because now your, content, will be available immediately. After. You open, the web site in the, case of a drupal document, that is collaboratively, edited, and. Like. You. Start. Your CMS, and you immediately, see, the, content, popping up because it is it doesn't need to wait for the. Server it, will, serve, it from a local database and, also the. Amount, of data that needs to be synced, as reviews. Because, yjs. Already, supports. Differential. Synchronization. So, instead. Of exchanging, the whole, Tremont, it will only exchange. The parts that changed, so, the server will send you a small update of the content that was created by other users and, you, will send to the server the content, that you created, so. On that, regard and. Indexdb. Y and x TB is a really, nice enhancement, to your application, regardless if, you want to use a create an offline application. It is just there to improve. Your the. Performance, of your web application, so. Yjs, is basically perfect, for James bond-like, click, in this scenario they, they. Need to send some very important, information they have to that but there's no engine but. They know this. Track. Will eventually. Have internet, even if James Bond has been gone off the rails already because but this laptop, is still there as, soon as it gains back the Internet content it will sense data. Analyses. Alright. Awesome example. Watch, as is for James Bond let's, keep it at there I. Think. We can all agree that some, of these features. Are very much secret-agent features, and very, futuristic. So. We've. Talked a little bit about why indexdb, in. Terms, of that. Adapter. For yjs. How. This is exactly tie to webworkers, though i mean. It. Is not really time to it it does work in conjunction with. Service. Workers. So. Ok. Sorry yeah, no we should cut that and we should cut that question out. Because. There, are also web workers, which is a completely different thing and, ok. Well, serviceworker is a job that sits in the background and intercepts. Your, HTTP. Requests. But. Web. Workers, are just background drops, that you can start and. For. Example to do, heavy calculations. And, with. Indexeddb, and web workers, actually. Accidentally, this is an awesome question you. Can do really awesome things, for. Sample if you, want to do some heavy calculations. On your y2s, document, you can start a web worker that. Fetches. The yjs, document. From. The index. DB database and, then, does these calculations, maybe. Do, a very, expensive, sync, job with a server or I don't, know for. Example you want to render an HTML. Page based. On the. Data. That, is in the. Ygs document, and then. Send it back to the main thread so. Web. Workers allow you to do heavy calculations. And indexdb, allows you to, exchange data, with service. Workers or the, web worker and very, efficiently, basically. With all the browser contexts. Because. Index. DB is shared between all the broader contexts. It's basically, the ideal. Database. That. Multiple. Processes. Can access, concurrently, and. They. Can use it to do, different, things for example the service worker might, want, to create a WebSocket, connection, to the server to. Sync. The data or. Even use a different technology to, sync the data to. Persisted. In the web and the cloud wherever and, the. Main thread, your website, doesn't. Really need to do that much and it doesn't need to be open, to sync, the content yeah. So. The. Thing how they're purposed, falange, to this is set synchronization. Especially, if you have lots of changes, and lots, of changes on your logo they, all need to be assumed, conflict-free.
Which, Yjs, can do it, still takes a while interesting. As as, user you don't want to wait closer. By it so you don't want to have like to move circle. Sending. Data, you can't start working in ten minutes you can start working in nine minutes we can start working your aprons away, then they tied one but anyway, you get here, so. If you put all the side of web worker then, you can already start working, on your document here from life changes, are already happening in that. That. Happens in and, that. All happens in the backgrounds, basically, about, job gives, you a different strength and the main strengths we are all the interactions. That happen so, that. Workers are basically for not blocking, the user interaction, which is very very important, because as we speak about real-time and, all of that one. Of the most important, things here is the responsibility. The. Response, of. Responsiveness. That means that. The. User really gets feedback would be fast on every keystroke so. It's not like I click a key. And, it gets sent to serve as a service station yes you can write the key in, terms of X and then it can take the next key in, that because, it's even, so how. If. You try and similar, as a technology, cycle for dogs and others over. Low latency, connection, it can happen in that I have this happen in one of my, tests. That I did originally, when I was preparing by Jeff with Google Docs suddenly. I had a very very very slow - Jarvis look, Nicky, you did you like and. I know I think it took three or four seconds I did that keystroke was registered, I click, the next key and. So. In, that regard, the. Focus in xtb serviceworkers, they play. Like perfect. Triangle, of things. That. Are now available for, us to those great, of -. It. Gave me flashbacks, baby, into, writing. An, email in Gmail. And. You try and send it when you're offline it gives you an error or when I want to check my mail and it's like we're going to retry and five four. You know, so. Could, yjs. An able. Gmail. To work offline like I could write my emails, store. Them for submitting, later when I'm back online I mean. I think, you. Can do that without yjs. But as soon as you have a collaborative document you. Need something like wedges because. So much can happen while, offline and. Other. Clients, can edit documents, so you basically need a very, involved. Synchronization. Framework. In, the case of Google Docs document I also remember, that I remember, all the forms that I lost because. My. Post request wasn't performed. On the server because the server is unavailable or. Whatever, and. I get a 404, and, all. The content that I created is lost now with service, workers what you can do is instead. Of losing that content, the service, worker will store the document, their. Request, offline, send, it later as soon as you have internet access and, the, same goes for YG's documents, for collaborative, documents. For for. You react app you. Can share state. With yjs, basically. Anything for your drawing, up just. Store it and indexdb, and that's a serviceworker and figure. Out when, to sync the content, to, the server and. Basically. That brings us to a very very, very important, point yes, wisp ideas, technology. Is changing, from a traditional, client-server. Model to, one of synchronization, and that. It's very very very very key in all of this and, I'll explain, why, the. Reason why this is so key is that. Ask, em inside usually. When we have a traditional. Application. And builders react with whatever you're. Doing. State, changes, in those state changes, eventually, go to the server and that's usually done by supposed, and. If. They pay is okay the application, can try again etc but. Imagine, that you would need to not. Need to deal with any other you will just use like the, v-j as primitives, like oh my array whilst all that in and you would now eventual, it Wilson - there's. Connection. When there's anything in that that's, different, way to think about data it's so long I have such data I stored. To the server and I get my new state back from a server but, it's just I put my data in here it's synchronized automatically, there's. A completely, different, way, of thinking about applications. Or thinking about data. How it gets in how it gets out etc and that's, why. Offline, first which. My Jas is Sookie and here not my days as a text cooperation, tool but, it's a tool that's, built around data types, so, that you can have a collaborative, to-do, list basically just, by having a dangerous, predator that's collaborative, as. Soon as you put an item in there it gets tuned to so it gets showing to the other users, that are correlating on the to-do list automatically. And. This. Is in. Its own way a kind of resolution. Well. Put. Absolutely. I think, that the. Use cases of this enables, will really. Reinvent, the. Way that we interact with, probably. The vast majority of the applications, we use that involve some level of collaboration. Really. Really easily I mean I can just think of so, many ways in which for, example scheduling.
Collaboratively. Could become easier with. This kind of model, very. Very exciting and, so. Last. Time we got, together as a group we, talked a little bit about this, new communication. Protocol that, allows. For browser-based, communication. Called WebRTC. And. For those of you who are in the audience who are who, are watching this or listening to this do. Check out our web RTC webinar, web of the Y WebRTC, webinar, episode. Because that goes into a whole lot of detail about some of the really, interesting features coming out because of that so. One question I had for you feet on one, question I had for you Kevin was how. Does this work in conjunction with why WebRTC. And. What. Sorts of ways when we combine these really. Interesting technologies. Together, yeah. That's. An awesome question I. Think. The only downside, of why web RTC, which. Allows you to basically without, a server, create. A peer-to-peer network, because between all the clients, that are interested in the same document and, the, only downside, of this is that, it takes some. Time to create. A connection to the other peers and it, takes some time to synchronize. Because, where, are see, as. Soon as the connection, is established it, is very fast but. Creating. Connection, and like, establishing, in that connection sometimes. Takes a while especially, on bad. Internet connections, so, and. This fits, together with why. Indexdb got maybe. Because it allows, you to store the document offline and serve, it immediately. Without. Waiting for the other peers and. It. Also allows you to do some very, interesting things, just imagine. Our, video. Chat application right now there. Are a lot of web RTC. Based. Chat. Applications, on the web for the web that are accessible. For everyone and. Some. Of them allow you to collaborate. On documents, actually. I only, know of one and. So. With index TV now we can store the document, on offline. So the next time you open this, the. Chat room that you created for collaborating. For chatting, and it. Is still there and you don't need a server for this because, it. Is persistent locally, and among. All the other clients, and you can even sync with them. As. We discussed even, if they don't have. If. They, don't have the website open because there, are background drops, that can do that and, so. This allows for a lot of interesting technology. Especially, with. Why web RTC I think, it is necessary, to have faster. Access to the document, and. How. You can do that is now quite, indexeddb. Very. Interesting, let's talk a little bit about. Some. Of the kind, of, byproducts. Of all. Of this how. Does this not result in in an overload, of garbage you. Know I think that this is a very important topic for when. It comes to performance, and scalability, right. I, mean. There's. There, are two aspects here the. First one is how. Can you actually resolve. All these conflicts, and. Yeah. I think we got we. Made a deep dive I think that the second deep dive we go into detail how the conflict, resolution, actually.
Figures, Out this stuff he. Didn't figure out that we, didn't explain it in full, detail or, prove it but there's a paper just. Go to the wires github repository, on the bottom there's an explanation on how the conflicts. Are resolved, and, here. Very, very important, is why. Jazz was always, an, a. Framework, that. Does not need a server connection, it, is, network. Agnostic. And doesn't, need, a unique order. Of the messages, that are sent it. Basically only listens to document updates so, it can always sink as soon as your. Local document. Gets all the updates from the other peers, it is synced and there. Is no central. Instance, that manages. How. Your conflicts, are resolved, this is all decentralized. And. Just. To remind, our audience a little bit about what. We talked last time you said and when we have about you see we can have also a practitioner, that means. We. Are crossed connected, across the ocean, Michael. In New York Kevin, in Europe. Connection. Gets severe, there's no connection anymore between us and then basically we. Are at, least from, relative, standpoint out of each other offline. And. So. Um that's. Why I basically, YJ has already handled, the Orion case it, must. Every. Peer-to-peer application. That. Is is working in a way that, it can serve changes, after connectedness. We established, is, basically, offline, in. A way and. This. Just takes us further. That. If we, will close our connections, down the, document is not lost because. Every one of us even have a copy of it in that so. Let's. Say we're working on this document across, the ocean and the network, cable goes down and, we also frustrating, the old clothes no brothers, so. And now we started, up again and, no one would have a copy anymore no one would have the changes anymore in that but. If I have my own copy and kevin has his own cubby and my glasses own copy then, we can all swim gap again as soon as hey networks, back, okay let's fire it up again and it. Automatically, self, so. I'm really am this. Way indexdb is just like. It complements. The, by. A web RTC approach, is basically, even. In a way for me myself, a requirement. That we. Have not only deacon ability, to swim, in real time this, is really nice for video, but. Also to store. Whatever. That's. Right yeah. I think, the, second part of Preston's question, was. Like. As soon as you sink, there's. Also, garbage. That, is there, like for example if I created a lot of content you created a lot of content there is a wrong garbage. Possibly, possibly, and how. Do you actually, figure out how to make, a proper sink that makes sense to the human. In. Get terms. Yeah. How like, if there are conflicts, how do you resolve them if I fixed, a typo. In the, document, and Fabian, while, offline or why, not, having a connection to me also, fix is the same issue and. When. The documents, merge we. Might end up with garbage, right, we. Just discussed. This in the pros mera channel briefly. And. One. Of the arguments against. Er the keys is that. You. Well. You don't want to have that that garbage you want to have a central, instance, that, manages, and only serves, one version, of the, document that makes sense and that was well. Proven to be correct by a human and. There. Is something, that you can do against that and that's why. J's versions, and. Which. Allow you to assume. You sink with the other clients. You can show the differences. That happened. While. Others, were offline or while you were offline, and then, with, by, showing the differences, between the, the.
Changes, That just came in you, can figure out okay. Fabian also thinks this issue now, we have, fixed. Two times a flight which doesn't make sense anymore I. Can't, I need to revert, his change. Or. I can, just edit his change and this is basically the same thing that you want to do, when. You do a git merge. You. Just figure, out the differences, and you, apply. The, changes, that happen curve currently, and, in. A, way that makes sense for the new state of the application. So. Basically. What what yjs can do just in a much, more broader, term in that this but, we've didn't talk about that that is so exciting it's basically if, you know Drupal it's revisions, and, you know it basically, and every, time we do a change we have act like a revision, metal YJ is called a state vector so, we have over, the industry of all time so, absolute universe, was built on my chance and we could fall back to every, point in time of the whole universe it's, time machine basically if you make fan. Where. Was time machine you can also go back to every state that, you are hardest, was ever in as, long as your space when you're back in, West so. Because. We have like all the history of all time of that and. In. A more practical example, Michael. And me are working on a document together, it's. Important, and Hebert, offline, and, then in. I work offline then our changes, soon and. We. Have two paragraph, that really them fit. Together too well in that and for that we need someone like Preston whose intended for and. You do in chief, who. Can then untangle. The mess basically but. What happens if it's within the sentences, and it's, really it. Really gets to garbage. So. And that's what versions, come in basically because. Michael. Can see how, my changes, affected, his version and I can see how his changes, affected, my versions, meant. You know the nicest, thing about that isn't an implement that can. Probably do it is. You. Could also be write history, think, about like it gets free based interactive. Maybe, basically, we write in the history so, Michael, says hey this. Whole lot that Fabian he wrote and this cool, but I don't really need it so he could go back to basically my version, in.
Theory At least, take. Out that copy of somewhere, else like stash it for. Later usage and some other document, then delete, it so that, I've never made, this changes, basically and, many would we apply basically, those changes, and that basically. Would allow to to. See that and, it. Was my Genesis. It's. Nearly impossible because. We have all the changes, from everyone, now what everyone, changed what character, they changed and, even if you type like, total, garbage in that Michael, just say hey this. Change, let's. Just take. This version for me and this, is now another version again and we just apply, whatever come came in there manually, in that so. There's a lot of possibilities. Even this outer central, server to, do that and I. Think that that's. Much more important, because um. I do think in the end every, get conflict, hope, is offset it's a human it's. A human emotions, doing that because, they can't understand, it machine learning is a of X approach, in that but, in the end it's a human and. I think it's much more important, to give a human, the, tools to, do that in white as well and as such a tool they, can see all of this has changed since you last cent. And, that's a way we available, there it's from the website you can see it it's great it's, really fantastic you can even see how your dog house document, is changing, things, you've been away in real time it's it's really freaking, awesome, it's one of the coolest features I've seen in that and we, are definitely, link it in that. But giving the human, the tools is in my opinion the way the nice thing is whenever we cannot, make this and we will but, a man ever be can't we can still involve, the human and, I think that's much more empowering than to, say, it. Needs to be a human anyway so. We. Do just to get like we constellation, about. Right. Well. But by, the way this, is really available on the white restored F website just. Give a quick overview here. YJ. Is the deaf now works with what web RTC so, there's, no central, instance that manages the content, and, also. It. Has versioning, support, for, the examples, or at, least for the pros for example, so. You can click on one of the versions you can create, versions and you can actually see the differences, that happened, while. You were offline, so, all of this is actually possible the. Only thing that is missing is, like, create, a UI. For your application, to show. Those differences, so, for, text, documents and, for rosemary, this, has almost. Been solved. Basically, but. I, think. There are some new icons. Things. That you need to consider to do that right it's mostly an UI thing, but, the, framer, possibilities. Are all there they're all source, and they are ready to use right now, wonderful. And I think that's, one of the things that I'm looking forward to checking out as soon as we hop, off this, episode, one. Of the things I wanted to ask, was are, there any other challenges. In offline, sharing, that we haven't already mentioned, what. Are some of the other sorts. Of hidden or, lesser-known. Shredding. Use cases that, this. Particular, approach, around why indexeddb enables oh yeah. I think the. Trickiest. Thing, about, offline editing, is. Garbage, collection. So. Um we talked about versions, and that, we want to jump back to previous versions, we want to save virgins, and. But. How does that tie and. Like if we store all the content, that was ever created and, our. Documents, would blow up, in. The case of my. The. Website widest of death and. If. I would store all the content, that all the users that visit this, website. If, I would store that in. The document, the document size would get huge, there are people who, copy Wikipedia, articles, and just put it there like a thousand, times and the. Document, can be really loud as soon, as you delete content, again the, content should be afraid but, if. We have versions if we store all the content that was ever created we. Can never delete that content from the wide rest document, and, now there's. A, method. That, allows you, to. Garbage collect the content, that. Was created in, between, versions. So. This is really cool right now. You. Go on the website you. Create a version the, version the. Content of that version it will never be garbage collected but. If you insert in Wikipedia, article, or and. Some, yet somebody, else deletes, that Wikipedia, article, again, the. Content is basically garbage, collected, and not be stored in the largest document. So, there's. Finely. Grained. Granularity. That you can have, on. What content, is actually deleted. From the content, from. The document, yeah. Basically it's something we talked about earlier, on of what optimizations.
My Days make that makes here duties feasible, and. That's one of them, basically. And, to give it an example, from the Drupal world here, is. To. Plate now have forward, revisions, this workspaces, that, means in Ellicott can work on some, article a long long long long time and once I'm finally ready to publish it. They'll. Publish this. Article mmm. It goes basically last so, but, now that they have like, 20. 30 or whatever how many provisions, in between that might have been important, by writing. But, I no longer important, ones the new. Version, of the article is published actually. So. Basically when that article goes, from draft stage to publish or they, take an existing out it change, it again and goes, back from draft to published, in that so. All of those versions. At. Least for example in the content preview system, workspace, it could be implemented as well we. Automatically. Garbage collect because those, are no longer important, so, one of the things we found in. Terms of Drupal, how do Purdue, desings, and how a tool. Like zip or Google, Docs those things like it's, very very important. For the user to be able to publish, something. To. Click. On a button it will say this is a version I want to save this. Is something that then needs to be how to save etc, etc etc this. Is a state I really want to save the state I want to preserve this. Is data Mountain publish and by. Changing. This over to have those not, be every keystroke is like a new version in that and. Then you basically compress, them a little bit or. But. Really by saying when. I click publish in your revision is created. This. Allows this kind of garbage collection to feel much, more natural, in that of course, you can still like hold the back up like you say hey for, the revisions. I still, keep them for 30 days for 90 days or whatever your data retention policy, is that's. A possibility that's, basically what we're doing for. The content review system, in practice. That. If an editor says. Everything. Something I've published it but, in my cleaner had something I need that back in, 20 days you can have it back afterwards probably, not, relevant anymore. Kimmy here whatever it, depends on how much data space. You are willing to sacrifice for, justice based be always the, same thing in that that. Is a trade-off between having, all the history and, using. All the space but. If you're really paranoid you could also think, that my Jess document, put it on the tape it seems to still be the. I'm, cheapest. Way to store data right, now so you could do that I mean no one would hold, you from. That. Kevin coach hard all the Wikipedia articles, that you does ever clean. For. All of history of how. Humans, attack this right is death. The. Main takeaway. Here is basically. Versioning. Are not just a baterry like every screen and milliseconds, from whatever but they're deliberately, created breast user and whenever. There's no reason, created, we can at least after some point. Garbage. Collect them and, this was a huge, problem of. Data. Editing in general, even in, that and that's. Overall you want on history, but on the other hand you don't you. Write. A very. Good illustration of that conflict. No. Pun intended by, the way I, think that this. Is this is very interesting we're running at a time though so I wanted, to jump to one final question just for our. Audience who might be considering, adopting. Yjs. And why index TV and and all. Of these this. Incredible, suite of technologies are, there, any companies already using, why index TV for offline ending are there any people, out there already we, can use of this in production. So. The, new implementation, of why index to be which is created for version. 15. It's. Pretty fresh and not aware of anyone using it. Except. The widest depth website, but. For building, 12 there, was a similar project by, indexeddb but, for the previous, version which is now pretty, old but, I know, a lot of people who used it just by default because, it made their website, faster, and it, didn't really cost anything and it, works, the same way it has a different API and.
But. Now you can do more, stuff and yes. There are these. Two companies I know who, use them, I'm. Not sure if I can name them right now but, yeah. Basically it's just some progressive, enhancement and, you should always use it if you and, although. I want to add I'm not aware of any. Offline. Only. Or offline first application. That. Uses yjs, and why indexeddb and this is something that i would be interested in seeing, a lot more, and. Also I want to add why do tests of death is completely, offline first, just. Visited, while offline. There, is no difference in the online and offline version. Wonderful. And for people who want to dig into the code and, and report issues and look at some of the way that the that, yjs, actually, works where, can they find the source on github. Just. Go to, github. / yjs. This, is a organization. For. Y JS there, are lots, of repositories. Wide us - demos, is. Should. Be your go-to resource, for figuring, out how to create, examples how, to use web RTC index, to be pros mirror-like, all the things are there there's. A lot of documentation, in the Whitney on what. Is /white. Yjs. And. Yeah. If you're interested, in the inner workings, watch our previous, webinars, and also. There's a paper at the end of the Whitney and. Yeah. Please. Come visit us. Well. I know I'm gonna be telling all my friends I have been every week that we've been able. To have you on the show Kevin, to try out yjs, in, fact I'll probably tell some of my colleagues that work later today that we should be looking at yjs so. With. That unfortunately, we're out of time but. I'm really glad to share this time with our. Good friends on, a tag one team talk show today by, the way we, post all of these talks at tag, 1.com slash tag team talks all the links that we mentioned today including, all the github links, and all of those examples that we mentioned are gonna be posted online would, talk and as, always if, you enjoyed this episode of traveling team talks we'd love to hear from you and get your feedback about things you want to hear about please remember to upload subscribe. And, share it with your friends and family and as always if you have any topics, you want to hear about or anything you to talk, about on the show or hear about on the show please, write to us the tag team talks at tag one consulting.com, and, I, want to thank Kevin Michael and Fabian today three of my dear, good friends, on, the show thank. You so much for your time today, I learned, a lot I hope that our audience, did I'm sure our audience did as well and, we'll. See you next time on Taiwan team talks.
2020-02-14