WEBVTT 00:00.000 --> 00:07.000 This is ghetto? 00:07.000 --> 00:08.000 Yes. 00:08.000 --> 00:10.000 Okay, perfect. 00:10.000 --> 00:11.000 So, yeah. 00:11.000 --> 00:18.000 If anybody joining on the stream, we talk basically to the points there. 00:18.000 --> 00:21.000 So, yeah, I will repeat all of it, sorry. 00:21.000 --> 00:26.000 And then, yeah, we have those high-level abstractions and we get things like the timeline, 00:26.000 --> 00:29.000 where you can say, I want to send a new event to the timeline, 00:29.000 --> 00:32.000 and it's immediately appearing in this reactive stream. 00:32.000 --> 00:36.000 And then, in the background, putting it into the send queue, if you don't have network, 00:36.000 --> 00:38.000 and then sending the event. 00:38.000 --> 00:44.000 And then, there is a last trait in this Rust SDK monorepo, and that's the FFI layer. 00:44.000 --> 00:50.000 And this is basically just to get Rust compatible with other programming languages. 00:50.000 --> 00:55.000 But it actually does a little bit more than what it would expect, so it actually has 00:55.000 --> 01:02.000 to be more abstractions to make it more accessible for actual developers in Kotlin or Swift. 01:02.000 --> 01:05.000 And it's using UniFFI. 01:05.000 --> 01:10.000 So, basically, the idea is you could just have this one set of instructions, 01:10.000 --> 01:14.000 how Rust code is mapped to other programming languages, and then it's just getting, 01:14.000 --> 01:19.000 it just generates finding for all kinds of languages. 01:19.000 --> 01:24.000 So, as of now, what kind of platform support do we have? 01:24.000 --> 01:31.000 So, as I said, before we have UniFFI with Kotlin and Swift, that's why it works with element X on Android and IRS. 01:31.000 --> 01:34.000 But there are currently no support for TypeScript. 01:34.000 --> 01:40.000 And as I said, or as a title says, like this talks all about getting the Rust SDK running with WebAssembly, 01:40.000 --> 01:49.000 and then building a web client based on the Rust SDK, which, yeah, as of now, didn't really work. 01:50.000 --> 01:55.000 Because most of it, UniFFI doesn't has bindings to TypeScript. 01:55.000 --> 02:00.000 And there is parts of the Rust SDK, which are already used in element web, actually, 02:00.000 --> 02:03.000 and that is the crypto-create. 02:03.000 --> 02:10.000 So, the crypto-create has specific web-assembly bindings, which are not UniFFI because you do your own thing, 02:10.000 --> 02:17.000 and that is what we use in element web, so that parts of element web actually already run on the Rust SDK. 02:17.000 --> 02:18.000 Cool. 02:18.000 --> 02:21.000 So, good, next thing. 02:21.000 --> 02:27.000 So, now I just go to like a very rudimentary introduction to WebAssembly. 02:27.000 --> 02:31.000 So, basically, it's just CPU instructions, as it says, WebAssembly. 02:31.000 --> 02:33.000 So, there is no such thing like a few developers, 02:33.000 --> 02:34.000 that's good. 02:34.000 --> 02:38.000 You have basically the whole browser API, which is almost like an operating system, 02:38.000 --> 02:43.000 and in WebAssembly, you really just have executable code without any environments. 02:43.000 --> 02:47.000 So, you're lacking all the common runtime features. 02:47.000 --> 02:51.000 This goes as far as you don't even have access to like system time, 02:51.000 --> 02:54.000 because it's really just executing code. 02:54.000 --> 02:57.000 So, and you also don't have any dumb access. 02:57.000 --> 03:03.000 So, all those additional things, you would need through some bind generation to some other programming language, 03:03.000 --> 03:06.000 which has native integration with the platform. 03:06.000 --> 03:10.000 There is a performance penalty to it, even though it's pretty performant. 03:10.000 --> 03:13.000 It is not compiled for one specific architecture, 03:13.000 --> 03:18.000 so the assembly format is relatively generic. 03:18.000 --> 03:21.000 Hence, there is a performance penalty. 03:21.000 --> 03:27.000 And if you want to have a dependency, since there is no such thing as like a standard library, 03:27.000 --> 03:30.000 or like a system, like your system integration, 03:30.000 --> 03:34.000 you need to ship all your dependencies inside the WebAssembly. 03:34.000 --> 03:36.000 Love you, you ship. 03:36.000 --> 03:41.000 But it's super versatile, and it is a compilation target. 03:41.000 --> 03:46.000 So, multiple programming languages can be used to then build for this compilation target. 03:46.000 --> 03:51.000 And just to bring this other word, which probably lots of you already have heard, 03:51.000 --> 03:52.000 also introspective. 03:52.000 --> 03:58.000 So, Bazi, which is the Reppes-Emily system interface, then fixes some of those things. 03:58.000 --> 04:03.000 So, basically then, you cannot just have this like executable environment, 04:03.000 --> 04:06.000 but you have a little bit more system interfaces. 04:06.000 --> 04:12.000 So, you need a slightly more complicated container, which can execute Bazi. 04:12.000 --> 04:16.000 And there they try to standardize specific requests to the outside world. 04:16.000 --> 04:20.000 So, they start really slow by just making at least something like system time available, 04:20.000 --> 04:24.000 and define a quasi-container needs to provide a system time API, 04:24.000 --> 04:27.000 and then we could do those kind of things. 04:27.000 --> 04:35.000 So, it needs a more sophisticated host knowing about all those specific API calls. 04:35.000 --> 04:39.000 And then, next slide. So, this is now the core two things we need. 04:39.000 --> 04:44.000 If we want to have the rest SDK run in the web, like entirely up to the UI create, 04:44.000 --> 04:47.000 where we have those really pretty abstractions. 04:47.000 --> 04:51.000 And the one thing is we, of course, first need to get it compiled. 04:51.000 --> 04:58.000 And that is not so trivial, because each compilation target in the rest has its own specificness to it. 04:58.000 --> 05:03.000 And then, the other almost hard of challenge is that we then have to do interfaces 05:03.000 --> 05:11.000 to the web environment. So, we can actually do something with the web browser with it. 05:11.000 --> 05:15.000 And those interfaces exist for the crypto create, and also the first aspect, 05:15.000 --> 05:17.000 compiling, exists for the crypto create. 05:17.000 --> 05:22.000 But if you try to do the full SDK, that doesn't work. 05:22.000 --> 05:28.000 And so, now we are in the section of compiling the SDK to web assembly. 05:28.000 --> 05:34.000 And since we do use things like time for generating standard times and so on and so forth, 05:34.000 --> 05:38.000 those need to be called in JavaScript. 05:38.000 --> 05:44.000 So, we need to have like, just calls or like binding calls to JavaScript to then get the time 05:44.000 --> 05:47.000 and then use that time in the web assembly thing. 05:47.000 --> 05:51.000 And then the web also don't has any parallelism. 05:51.000 --> 05:55.000 It's concurrent, but you don't have multiple threats, except with web brokers. 05:55.000 --> 06:01.000 And since Rust is very highly in the rest of the case, well, build around like actual parallelism. 06:01.000 --> 06:04.000 And there's like lots of centrates and synthrates. 06:04.000 --> 06:10.000 And this is all, it should all be trivial in web assembly, because you don't have this problem, 06:10.000 --> 06:11.000 if you don't have parallelism. 06:11.000 --> 06:17.000 But you still need to get all your code and traits working and you need a lot of config flags 06:17.000 --> 06:22.000 that if it's web assembly, you can treat it as if it would be sent and sync, 06:22.000 --> 06:26.000 even though, yeah, it's not, but you will never run into parallel situations. 06:26.000 --> 06:34.000 So there's just a little bit of work to be done, so it compiles probably to web assembly. 06:34.000 --> 06:37.000 And the cool thing for this is this has happened really recently. 06:37.000 --> 06:42.000 There wasn't too much work involved anymore to get it working, because since the work from the cryptocurrency 06:42.000 --> 06:47.000 already was ported a little bit into the main crates, it weren't too many changes. 06:47.000 --> 06:55.000 Like, time is something I mentioned a lot, and those, like, multi-fetting things. 06:55.000 --> 07:06.000 And even nicer, Jonas, a form element, I'm clearly got funded by filament to then also put it on the main branch of the rest SDK. 07:06.000 --> 07:16.000 So basically using the main branch of the rest SDK also is compatible with compiling it to web assembly, which is super cool, up to the UI layer. 07:17.000 --> 07:21.000 And then the second challenge is the interface challenge. 07:21.000 --> 07:24.000 So as I said, Unifified doesn't support JS and TS. 07:24.000 --> 07:26.000 There will be note later on. 07:26.000 --> 07:32.000 So this is, like, don't take this as a fact, it's just like what it was couple weeks ago. 07:32.000 --> 07:39.000 So currently the web assembly fine-gen needs its own implementation. 07:39.000 --> 07:43.000 So we have the Unifified fine-gen, which is already 10K lines of code. 07:43.000 --> 07:47.000 And for web assembly, we would need to do the same thing again. 07:47.000 --> 07:52.000 And that is, yeah, and then if we do, and that is just what it cryptocurrency, 07:52.000 --> 07:55.000 and then if we would do this for the full SDK, that would be even more work. 07:55.000 --> 08:00.000 So basically building specific web assembly bindings for the full UI trade would be insane, 08:00.000 --> 08:05.000 and the only way would be what that would make sense is through Unifified. 08:05.000 --> 08:08.000 And now I talk about different API cuts. 08:08.000 --> 08:13.000 So at what point do we actually do the transition from the rest SDK to the web bridge? 08:13.000 --> 08:19.000 And here's the example we currently do an element web. 08:19.000 --> 08:22.000 So we have the really big rest SDK isn't even used. 08:22.000 --> 08:26.000 We have the cryptocurrency, that is used and then we have the black box over here, 08:26.000 --> 08:29.000 which is then the binding layer to TypeScript. 08:29.000 --> 08:34.000 And then we have the JS SDK, and this binding layer to the cryptocurrency. 08:35.000 --> 08:40.000 And this is how we build the whole web app, and TypeScript has a direct interface to the browser. 08:40.000 --> 08:42.000 So that just works basically. 08:42.000 --> 08:46.000 So this is basically the architecture we have an element web. 08:46.000 --> 08:50.000 And based on this architecture, I did a couple of more graphs. 08:50.000 --> 08:58.000 So those are possible ways when could think of a solution to do a rest SDK based matrix client in the browser. 08:58.000 --> 09:01.000 So the top one, but it just introduced what element web is doing, 09:01.000 --> 09:06.000 then one could consider just only using the rest SDK, not the UI abstraction. 09:06.000 --> 09:14.000 And do pretty big bindings to a web app, and then build everything in TypeScript without the JS SDK. 09:14.000 --> 09:20.000 The next option would be even harder where you have the cryptocurrency, the rest SDK create, 09:20.000 --> 09:28.000 and then on top you have this UI create abstraction, and then you build really big bindings to then have TypeScript running and the browser. 09:29.000 --> 09:34.000 And the last solution would be that you just don't stop using rest here. 09:34.000 --> 09:40.000 But you would then also build your web app in rest, and represent the targets, 09:40.000 --> 09:45.000 and then to actually communicate to the browser, you use a sophisticated web framework, 09:45.000 --> 09:51.000 which just for its purpose already has all the system calls to the browser. 09:51.000 --> 09:55.000 Yeah, those are the four examples listed on the left. 09:55.000 --> 09:58.000 One of those web frameworks one could use is the access. 09:58.000 --> 10:04.000 And this is then also basically the example I'm bringing to you today. 10:04.000 --> 10:09.000 So this is just like a very short introduction to the access. 10:09.000 --> 10:15.000 It's a rough based browser front or web front and library. 10:15.000 --> 10:20.000 Here's like a little code snaplet from their documentation, which is like their basic example. 10:20.000 --> 10:27.000 It's very inspired by React or at least if your React developer looks familiar. 10:27.000 --> 10:29.000 It's inspired by multiple things. 10:29.000 --> 10:32.000 So you have use signal, which one can think of as use state. 10:32.000 --> 10:40.000 And then as soon as we use this signal object in this RSX, which is the equivalent to JSX, 10:40.000 --> 10:43.000 we subscribe to the signal. 10:43.000 --> 10:47.000 So this block is now subscribed to the state. 10:47.000 --> 10:51.000 And whenever that state changes, it just re-rends the specific RSX. 10:51.000 --> 10:55.000 And here we change the state, and it's all pretty nice. 10:55.000 --> 11:00.000 So in the background, this plus equals operator connects to the signal or sets the signal, 11:00.000 --> 11:08.000 and then emits functions, but it's all very beautifully hidden in this access thing. 11:09.000 --> 11:13.000 And then yeah, this is based on towering. 11:13.000 --> 11:15.000 That's something I still wanted to mention. 11:15.000 --> 11:18.000 And it already includes all the bindings to then taught directly to the browser. 11:18.000 --> 11:21.000 So technically it works that they only have their own weedon, 11:21.000 --> 11:24.000 and then based on that weedon, they just sync the DOM with the browser. 11:24.000 --> 11:28.000 And they also have something pretty cool, which I just wanted to note as a side note. 11:28.000 --> 11:35.000 It's called Blitz, which then uses their weedon and directly render it into their own DOM-like browser. 11:35.000 --> 11:39.000 But it's just GL code, so they don't use any like browser dependency. 11:39.000 --> 11:47.000 They just use their weedon and directly render it in like a native OpenGL canvas. 11:47.000 --> 11:49.000 Okay. 11:49.000 --> 11:54.000 So now we get to the demo, and it seems like I don't even have too much time anymore. 11:54.000 --> 11:58.000 But basically this exact project I did, and it wasn't even that big of a project, 11:58.000 --> 12:01.000 because the I layer is doing so many things already. 12:01.000 --> 12:05.000 So it was mostly hooking this up with the access. 12:05.000 --> 12:11.000 And this is now a matrix client you will see that is using the rest is decay in the browser. 12:11.000 --> 12:18.000 It's not too obvious that this is a browser, because it's like this weed root browser. 12:18.000 --> 12:20.000 But it is. 12:20.000 --> 12:26.000 And then yeah, you can see this is just a basic matrix browser. 12:26.000 --> 12:30.000 This is a client, I'm not even sure what I was planning to show here. 12:30.000 --> 12:33.000 So definitely sending messages. 12:33.000 --> 12:37.000 Yeah, I was in a short way, this isn't closing. 12:37.000 --> 12:39.000 There we go. 12:39.000 --> 12:41.000 So let's say hi. 12:41.000 --> 12:45.000 It's like the first example and it's sending it to the room. 12:45.000 --> 12:51.000 Then you can select different messages and then edit them. 12:51.000 --> 12:56.000 And there's like the really big advantage of using this timeline abstraction. 12:56.000 --> 13:01.000 So if I edit this message, it will update the timeline and it's all pretty easy to develop. 13:01.000 --> 13:07.000 And put it in the send queue and then send it to my other clients or anybody else in the room. 13:07.000 --> 13:14.000 And when I do something in a different client, let's say yeah, this should be like this room over here. 13:14.000 --> 13:16.000 And I say test. 13:16.000 --> 13:21.000 Then I'm also highly benefiting from the reactiveness of the. 13:21.000 --> 13:23.000 Oh, okay, fluent. 13:23.000 --> 13:27.000 So I tell you where we can see that it's immediately updating this one over here. 13:27.000 --> 13:33.000 Also in the timeline, because it's all those reactive primitives from the RSS decay, which is super, super nice. 13:33.000 --> 13:38.000 So this is like, I mean, it's like a project you would advocate as like a one-hour project. 13:38.000 --> 13:41.000 In reality it was more like 15 hours or 10 hours. 13:41.000 --> 13:44.000 But yeah, it's very, very little code. 13:44.000 --> 13:50.000 And I wanted to go and hoping this doesn't like entirely break the. 13:50.000 --> 13:52.000 Break the length of the talk. 13:52.000 --> 13:57.000 I want you to give you like a very short run through in how this code looks like. 13:57.000 --> 13:59.000 Oh, not sure what my. 13:59.000 --> 14:01.000 He's code student here. 14:06.000 --> 14:07.000 Oh, is this a problem? 14:07.000 --> 14:08.000 Oh, you're right. 14:08.000 --> 14:10.000 Okay, I was about to reload the window. 14:10.000 --> 14:13.000 So basically, I just want you to go through a couple of lines of code. 14:13.000 --> 14:16.000 So this is interesting where we set up the timeline events array. 14:16.000 --> 14:17.000 I'm using a. 14:17.000 --> 14:19.000 Get up the signal. 14:19.000 --> 14:21.000 And then. 14:21.000 --> 14:24.000 As the next thing. 14:24.000 --> 14:27.000 Sorry, this is super awkward to work like this. 14:27.000 --> 14:32.000 We have like the main rendering code or sorry, no, the main subscription code. 14:32.000 --> 14:36.000 So we use this dream primitive from the RSS decay. 14:36.000 --> 14:38.000 Which gives us a vector diff. 14:38.000 --> 14:43.000 And then the specter diff just gets applied to the. 14:43.000 --> 14:46.000 Like in this the object we have the timeline events. 14:46.000 --> 14:48.000 It's a little. 14:48.000 --> 14:51.000 Yeah, it's not too easy to read because I gave it such small names. 14:51.000 --> 14:53.000 But we take the diff. 14:53.000 --> 14:56.000 We apply it to our timeline object. 14:56.000 --> 14:57.000 Oh, sorry. 14:57.000 --> 14:59.000 The D object is the diff and the T is the timeline. 14:59.000 --> 15:02.000 And then that's basically all the code we need to do. 15:02.000 --> 15:05.000 And this is all the setup to connect everything to the RSS decay. 15:05.000 --> 15:10.000 And of course, I didn't even mention that this all does encryption and everything. 15:10.000 --> 15:14.000 And then we have this timeline events array. 15:14.000 --> 15:19.000 And with this timeline events array, we then just have to do the rendering. 15:19.000 --> 15:22.000 So here we are in this RSS object. 15:22.000 --> 15:25.000 And the rendering is pretty straight forward. 15:25.000 --> 15:28.000 So we just do. 15:28.000 --> 15:32.000 They are also added a little bit of analysis because I wanted to know what the last message is. 15:32.000 --> 15:34.000 So I'm doing this peekable iterator. 15:34.000 --> 15:37.000 But at the end, it's just going through the iterator. 15:37.000 --> 15:38.000 Mepping the iterator. 15:38.000 --> 15:43.000 Mepping the items to this message shall be which is just a function. 15:43.000 --> 15:48.000 Not even a adaptive component that is just like taking the item object, 15:48.000 --> 15:54.000 which is like a super high, like super easy to work with message item. 15:54.000 --> 15:57.000 And then converting it into HTML. 15:58.000 --> 16:03.000 And then the next bit is just going quickly through how we do editing. 16:03.000 --> 16:05.000 So we have a button on click. 16:05.000 --> 16:12.000 And the on click message then gets connected to this function. 16:12.000 --> 16:16.000 And here we again use this like super high, lot of timeline thing. 16:16.000 --> 16:18.000 And just do timeline.edit. 16:18.000 --> 16:20.000 And pass in the new message. 16:20.000 --> 16:23.000 And the new message we get from composer message. 16:23.000 --> 16:24.000 Like this is also signal. 16:24.000 --> 16:26.000 And then we just read whatever is in the composer. 16:26.000 --> 16:29.000 And that does all the things, like setting up the correct event, 16:29.000 --> 16:31.000 encrypting it, sending it, updating the timeline. 16:31.000 --> 16:34.000 So we have free time feedback and immediately see the updated change. 16:34.000 --> 16:38.000 So the developer experiences super super nice with this. 16:38.000 --> 16:43.000 So yeah, this setup is what I just demoed. 16:43.000 --> 16:48.000 And then there's like this one, this one big elephant in the room, 16:48.000 --> 16:51.000 which I also wanted to show you so basically if we. 16:52.000 --> 16:55.000 I'm trying to, there we go. 16:55.000 --> 16:59.000 So if I do a reload here and we type in wasn't. 16:59.000 --> 17:04.000 Now we can see that this is actually a. 17:04.000 --> 17:05.000 Oh, good. 17:05.000 --> 17:06.000 Oh, no, it is here. 17:06.000 --> 17:10.000 Yeah, actually a almost half a gigabyte web assembly binding. 17:10.000 --> 17:13.000 And that is of course super embarrassing and kind of annoying. 17:13.000 --> 17:15.000 But there are things you can approve this. 17:15.000 --> 17:19.000 So the first is you just don't build debug flags, but you actually do a release. 17:19.000 --> 17:21.000 And do some optimizations on it. 17:21.000 --> 17:24.000 So then you're down to 30 megabytes, which is okay. 17:24.000 --> 17:28.000 And then likely wasn't compresses really well. 17:28.000 --> 17:31.000 So if you just do a zip compression on it, you're down to four megabytes, 17:31.000 --> 17:33.000 which is still not the best. 17:33.000 --> 17:37.000 At least we improved it by 100x compared to the debug symbols. 17:37.000 --> 17:40.000 But it's definitely like with internet nowadays, 17:40.000 --> 17:44.000 it's a reasonable solution and not absolute insanity. 17:44.000 --> 17:48.000 And yeah, this is the deaf experience I actually did the order 17:48.000 --> 17:49.000 on there. 17:49.000 --> 17:53.000 So imagine I would have done the walkthrough through the code now. 17:53.000 --> 17:56.000 And then there's this other really big note. 17:56.000 --> 18:00.000 The news that the UniFFI and BiGen React native is a project, 18:00.000 --> 18:05.000 which tries to do UniFFI, but for React native, hence for TypeScript. 18:05.000 --> 18:08.000 And this makes this also working solution. 18:08.000 --> 18:10.000 So basically we have now three working solution, 18:10.000 --> 18:13.000 how you could use the rest as you can the web. 18:13.000 --> 18:16.000 So this works then that they take the rest as you I, 18:16.000 --> 18:20.000 where you have the really big binding layer for Swift and Kotlin. 18:20.000 --> 18:24.000 And they just expose the same binding layer to TypeScript. 18:24.000 --> 18:27.000 And then you could also use React or any other web front 18:27.000 --> 18:29.000 and based on JavaScript. 18:29.000 --> 18:31.000 And basically have this kind of architecture, 18:31.000 --> 18:34.000 because all the screen stuff, which I first said, 18:34.000 --> 18:35.000 it's like this huge project. 18:35.000 --> 18:37.000 One would take on if you use Basin Bionchen, 18:37.000 --> 18:41.000 you just get for free, through UniFFI. 18:41.000 --> 18:45.000 So the key takeaways do you have time for the key takeaways? 18:45.000 --> 18:47.000 Yes, that's fine. 18:47.000 --> 18:52.000 So it matrix webcline can be built now with the rest SDK using dioxys. 18:52.000 --> 18:58.000 And maybe in a week or I'm not sure what the current publishing state of the UniFFI is. 18:58.000 --> 19:01.000 Also with TypeScript and JavaScript. 19:01.000 --> 19:04.000 And you get lots of benefits from it. 19:04.000 --> 19:06.000 Like it's a very well maintained crypto. 19:06.000 --> 19:07.000 It has key backup. 19:07.000 --> 19:11.000 We have even widget support because of the element call work. 19:11.000 --> 19:15.000 And lots of it, at least, some would still need to be done. 19:15.000 --> 19:18.000 And there's actually something I tried to get into this demo. 19:18.000 --> 19:22.000 But then I just spend huge amount of time 19:22.000 --> 19:25.000 to getting the crypto feature. 19:25.000 --> 19:28.000 As or the widget feature, compile to WebAssembly. 19:28.000 --> 19:30.000 This network, but there were still some other issues. 19:30.000 --> 19:33.000 So lots of time spent there, which didn't improve the slides. 19:33.000 --> 19:36.000 So they still have pretty blank and little colors. 19:36.000 --> 19:40.000 But on the other hand, we do have progress on widget support now with Basin. 19:40.000 --> 19:42.000 So it probably takes me a week or so. 19:42.000 --> 19:44.000 But then there's also would be a thing. 19:44.000 --> 19:46.000 The event question isn't there. 19:46.000 --> 19:48.000 Almost there's no index db adapter. 19:48.000 --> 19:51.000 But that is also something which isn't too hard to do. 19:51.000 --> 19:53.000 And you have matrix RTC support. 19:53.000 --> 19:56.000 There's actually something I can show real quick because that's kind of cool. 19:56.000 --> 19:58.000 So if we look back in here. 19:58.000 --> 20:01.000 And then I take my. 20:01.000 --> 20:03.000 So matrix RTC doesn't mean that calling works. 20:03.000 --> 20:07.000 It just means that it is aware of of calls. 20:07.000 --> 20:12.000 So if I just go here and then call this guy like this account, 20:12.000 --> 20:15.000 it should say at some point. 20:15.000 --> 20:17.000 Yeah, that there's an ongoing call. 20:17.000 --> 20:20.000 So it detects the state and the abstraction we have about 20:20.000 --> 20:22.000 reactively showing the call. 20:22.000 --> 20:25.000 And then think we over, right? 20:25.000 --> 20:28.000 It has simplified sliding sync. 20:28.000 --> 20:31.000 And soon it's also possible to get all the same features with 20:31.000 --> 20:33.000 the unit of the pipeline. 20:33.000 --> 20:36.000 Cool, thanks for listening.