WEBVTT 00:00.000 --> 00:11.000 Welcome everybody, first of all, thanks to my hotel for sponsoring the water. 00:11.000 --> 00:14.000 We're just going to start in a second. 00:14.000 --> 00:18.000 I hope you have your popcorn ready because it's going to be fun. 00:18.000 --> 00:22.000 I'm going to show you some cool, aesthetically pleasing stuff 00:22.000 --> 00:26.000 that runs on the terminal and also on the web. 00:26.000 --> 00:29.000 So let's just jump right into it. 00:29.000 --> 00:31.000 I hope I'm in the scene right now. 00:31.000 --> 00:32.000 Let's see. 00:32.000 --> 00:33.000 All right. 00:33.000 --> 00:36.000 So where am I and why am I giving this talk? 00:36.000 --> 00:42.000 First of all, my name is Orhan Plan Maxis and I've been involved in open source 00:42.000 --> 00:45.000 for some time now for a couple of years. 00:45.000 --> 00:49.000 And I've been just writing rust, enjoying that endeavor, 00:49.000 --> 00:52.000 and also creating some command line tools, 00:52.000 --> 00:55.000 tools, terminals, tools, libraries, and so on. 00:55.000 --> 00:59.000 Most prominently I am maintaining the Rotatory Project, 00:59.000 --> 01:03.000 which will be actually the topic of today. 01:03.000 --> 01:07.000 Also the other projects that I have, including Getcliffe, 01:07.000 --> 01:10.000 Insider, came on and so on. 01:10.000 --> 01:13.000 You can just check out my GitHub for what I have built, 01:13.000 --> 01:15.000 and what I'm building right now. 01:15.000 --> 01:19.000 And just in my free time, I am trying to package your favorites, 01:19.000 --> 01:22.000 rust, so far for Ashlinics, by the way. 01:22.000 --> 01:24.000 Just putting them in the offshore repose, 01:24.000 --> 01:27.000 so you have easier accessing, you can just install them 01:27.000 --> 01:29.000 with Peckman and so on. 01:29.000 --> 01:32.000 So yeah, if you want to learn more about me, go to my website 01:32.000 --> 01:34.000 or go to my GitHub, which contains everything. 01:34.000 --> 01:39.000 Also, I've been live streaming, just putting my stuff out there 01:39.000 --> 01:44.000 by going live on YouTube and building whatever I want to build. 01:44.000 --> 01:47.000 So you can just check out my YouTube channel as well. 01:47.000 --> 01:50.000 Now I'm doing that too. 01:50.000 --> 01:51.000 All right. 01:51.000 --> 01:58.000 So, chapter one, we'll be about putting the web onto the terminal 01:58.000 --> 01:59.000 just to disclaimer. 01:59.000 --> 02:03.000 I'm not talking about the whole functionalities of the web applications 02:03.000 --> 02:04.000 or anything like that. 02:04.000 --> 02:06.000 I'm talking about only the aesthetics. 02:06.000 --> 02:11.000 So we're just going to try to modernize the terminal UI applications 02:11.000 --> 02:12.000 habits. 02:12.000 --> 02:14.000 So this is going to be the chapter one. 02:14.000 --> 02:16.000 Let's just jump right into it. 02:16.000 --> 02:20.000 So let me talk about aesthetics and terminal and UIs. 02:20.000 --> 02:24.000 We need to talk about relatively, and you might be asking, 02:24.000 --> 02:27.000 what is relatively, maybe you have seen my previous talk, 02:27.000 --> 02:29.000 or you have seen some stuff on the internet. 02:29.000 --> 02:31.000 But just to give you a quick description, 02:31.000 --> 02:33.000 it's a rust library. 02:33.000 --> 02:36.000 That's all about cooking up terminal user interfaces. 02:36.000 --> 02:38.000 That's why I'm wearing this app around right now. 02:38.000 --> 02:39.000 It's not a cooking library. 02:39.000 --> 02:41.000 It's a terminal cooking. 02:41.000 --> 02:44.000 Anyways, so we have this demo here. 02:44.000 --> 02:48.000 If you're new to terminal UI applications, 02:48.000 --> 02:52.000 I'm just going to run this demo to show you what 02:52.000 --> 02:54.000 property applications look like. 02:54.000 --> 03:00.000 So you can simply use the two widgets to build or compose this UI 03:00.000 --> 03:02.000 UI in the terminal. 03:02.000 --> 03:04.000 Right now this is running entirely in the terminal. 03:04.000 --> 03:08.000 And in case you're asking all the slides are also running in the terminal. 03:08.000 --> 03:10.000 So just switching back and forth. 03:10.000 --> 03:13.000 So whatever you see right now, it's all in the terminal. 03:13.000 --> 03:20.000 And with the three, you can simply have widgets like the tabs on the top. 03:20.000 --> 03:22.000 We have the list here. 03:22.000 --> 03:26.000 We have some table, some map-looking thing, 03:26.000 --> 03:29.000 some sparkline widgets, some, I don't know, 03:29.000 --> 03:32.000 bar charts, progress bar, and so on. 03:32.000 --> 03:35.000 So those are all possible to build, which is a three, 03:35.000 --> 03:40.000 and you can just use this widgets to build whatever you want in the terminal. 03:41.000 --> 03:45.000 And yes, we have, like I said, a lot of widgets, 03:45.000 --> 03:47.000 and also a lot of concepts as well. 03:47.000 --> 03:49.000 If you want to learn more about these concepts, 03:49.000 --> 03:52.000 just go to the Retreatives website. 03:52.000 --> 03:54.000 We just explain everything there. 03:54.000 --> 03:57.000 We also have some tutorials, videos, 03:57.000 --> 03:59.000 I don't know documentation overall. 03:59.000 --> 04:01.000 So just check out those things. 04:01.000 --> 04:04.000 Today I'm going to mostly focus on the buffer concept, 04:04.000 --> 04:07.000 and also the backhand concept of Retreatory. 04:07.000 --> 04:10.000 And we're just going to use those concepts a little bit to 04:10.000 --> 04:13.000 just go outside of the terminal applications a bit, 04:13.000 --> 04:16.000 and try something new at the end. 04:16.000 --> 04:17.000 All right. 04:17.000 --> 04:23.000 So today, if you want to build a simple, like a minimal terminal UI application 04:23.000 --> 04:26.000 with Retreatory, this is how it looks like in Rust. 04:26.000 --> 04:32.000 This is basically the most straightforward way of building it. 04:32.000 --> 04:35.000 I'll explain these in a brief moment, 04:35.000 --> 04:40.000 but just to give you an idea, most of the three applications 04:40.000 --> 04:45.000 today built with Retreatory use the underlying techniques 04:45.000 --> 04:49.000 like the same approach, but in a different architecture, 04:49.000 --> 04:51.000 like in a different way. 04:51.000 --> 04:54.000 So if you want to take a look at these, 04:54.000 --> 04:56.000 first one is you got to initialize the terminal. 04:56.000 --> 04:58.000 This will give you a terminal object, 04:58.000 --> 05:02.000 which will be the entry point to the terminal for interacting 05:02.000 --> 05:03.000 with the terminal. 05:03.000 --> 05:05.000 And then you need to create a loop. 05:05.000 --> 05:09.000 This loop is required, because there's a two is a immediate 05:09.000 --> 05:13.000 mode rendering library, which means you need to render everything 05:13.000 --> 05:15.000 for each frame. 05:15.000 --> 05:18.000 And then you got to just draw whatever you want to draw. 05:18.000 --> 05:20.000 And you can do this in a separate function. 05:20.000 --> 05:22.000 We usually recommend that. 05:22.000 --> 05:26.000 And in this separate function or whatever you want to render, 05:26.000 --> 05:31.000 you can just render anything that laments the widget trait. 05:31.000 --> 05:34.000 And you basically just handle events in a loop. 05:34.000 --> 05:37.000 You just read whatever you get. 05:37.000 --> 05:39.000 And then based on that, you just perform an action. 05:39.000 --> 05:43.000 In this case, I'm just breaking from this loop and just 05:43.000 --> 05:44.000 exiting the application. 05:44.000 --> 05:46.000 And then you got to restore your terminal, 05:46.000 --> 05:49.000 which means you got to go back to where you started. 05:49.000 --> 05:54.000 Since two applications usually make you switch to a new screen, 05:54.000 --> 05:56.000 a new buffer, so to speak. 05:56.000 --> 05:58.000 You just want to restore your original terminals. 05:58.000 --> 06:01.000 So you can go back to whatever you were doing. 06:01.000 --> 06:04.000 So yeah, you basically, let's say you have this prompt. 06:04.000 --> 06:05.000 You run this tree. 06:05.000 --> 06:06.000 You go to a new screen. 06:06.000 --> 06:09.000 And then you basically press a key here. 06:09.000 --> 06:10.000 And then go back. 06:10.000 --> 06:13.000 That's the whole minimal application that we see here. 06:13.000 --> 06:15.000 And you will see just the Hello World Text. 06:15.000 --> 06:17.000 If you run this, it's not very exciting. 06:17.000 --> 06:21.000 But this is just for the purpose of giving you 06:21.000 --> 06:26.000 an idea of how minimal strategy applications look these days. 06:26.000 --> 06:30.000 I want you to memorize this or remember this, 06:30.000 --> 06:34.000 because I'm going to show you something at the end. 06:34.000 --> 06:38.000 And I'm just trying to catch the same straight forwardness 06:38.000 --> 06:40.000 and same simplicity. 06:40.000 --> 06:44.000 So just keep in mind this structure. 06:44.000 --> 06:48.000 So now that we know how the code looks like, 06:48.000 --> 06:51.000 let's talk about how the terminal UI is actually look like. 06:51.000 --> 06:55.000 Because I think there is something called the Tweet Look 06:55.000 --> 06:59.000 when you use the Tweet or any Tweet library. 06:59.000 --> 07:04.000 And we can just pinpoint down some of these things together. 07:04.000 --> 07:07.000 I will show you some example applications for that. 07:07.000 --> 07:09.000 The first one is the television project. 07:09.000 --> 07:11.000 This is a general purpose. 07:11.000 --> 07:13.000 If you find their project, if you use nail them, 07:13.000 --> 07:16.000 you probably know what this is. 07:16.000 --> 07:18.000 It's like a telescope app. 07:18.000 --> 07:22.000 So when you run it, you basically have these blocks 07:23.000 --> 07:25.000 that are separating different views. 07:25.000 --> 07:26.000 You have a list here. 07:26.000 --> 07:28.000 You have the preview. 07:28.000 --> 07:32.000 I don't know, some cool logo on the top and so on. 07:32.000 --> 07:35.000 And some place where you can actually perform a search. 07:35.000 --> 07:39.000 So when you build a system tool or anything like this, 07:39.000 --> 07:44.000 you're probably going to end up with an UI that looks like this. 07:44.000 --> 07:49.000 And another thing which goes beyond the traditional Tweet Look 07:49.000 --> 07:52.000 is this tracker application. 07:52.000 --> 07:57.000 It's a real time satellite tracking and orbit prediction in the terminal. 07:57.000 --> 07:59.000 So when I run it, you'll see a map. 07:59.000 --> 08:02.000 And wait, I don't have internet right now. 08:02.000 --> 08:05.000 I don't have this will work one second. 08:05.000 --> 08:07.000 Okay, demos. 08:07.000 --> 08:10.000 So yeah, you'll see a map. 08:10.000 --> 08:13.000 And then you will have the list of satellites here. 08:13.000 --> 08:15.000 Let me just connect one second. 08:15.000 --> 08:18.000 Let me just not expose my good password, please. 08:18.000 --> 08:21.000 Thank you. 08:21.000 --> 08:23.000 All right, scanning for networks. 08:23.000 --> 08:27.000 I'm just going to try to make this really quick. 08:27.000 --> 08:34.000 And yeah, you're basically going to, oh my god. 08:34.000 --> 08:39.000 Yeah, you have the basically what I'm basically saying here is you have a map. 08:39.000 --> 08:45.000 And when you select the satellite here, it will show you the objects from that 08:45.000 --> 08:46.000 satellite. 08:46.000 --> 08:49.000 Do we have the first them that's worked by any chance? 08:49.000 --> 08:50.000 That's it. 08:50.000 --> 08:54.000 Connectible. 08:54.000 --> 08:58.000 All right, thank you. 08:58.000 --> 09:03.000 This is definitely the part of the talk, by the way. 09:03.000 --> 09:05.000 Just connect. 09:05.000 --> 09:07.000 All right, there we go. 09:07.000 --> 09:09.000 Finally. 09:09.000 --> 09:12.000 All right, so you can select the satellite here. 09:12.000 --> 09:13.000 Let me select something. 09:13.000 --> 09:15.000 By the way, you can't use your mouse. 09:15.000 --> 09:17.000 So you why not? 09:17.000 --> 09:20.000 It's a terminal app, but you can just select with your mouse. 09:20.000 --> 09:23.000 And then it will show you the satellite on the world map. 09:23.000 --> 09:26.000 You can click one of these objects. 09:26.000 --> 09:29.000 And it will show you the object information real time. 09:29.000 --> 09:33.000 In the terminal, it's altitude, latitude, speed, and so on. 09:33.000 --> 09:38.000 So it goes beyond a little bit of what you would expect from a three app. 09:38.000 --> 09:42.000 Since the font size is really big, it's not really showing its value. 09:42.000 --> 09:47.000 But you got the idea, so that's what you can build with your three as well. 09:47.000 --> 09:53.000 And let's see what are these like the typical features of the two ease. 09:53.000 --> 09:58.000 The first one I would see most of the time is the pain-based layouts. 09:58.000 --> 10:00.000 So these are like the blocks. 10:00.000 --> 10:05.000 You have different blocks that are designated for some functionality. 10:05.000 --> 10:07.000 For example, you have some services. 10:07.000 --> 10:10.000 You have the list widget in that. 10:10.000 --> 10:15.000 Or you have some text that is in another block. 10:15.000 --> 10:21.000 Another thing you have pop-up menus, which override the other widgets. 10:21.000 --> 10:24.000 In this example, you see these actions menu. 10:24.000 --> 10:28.000 And we just make use of the colors, like highlight colors. 10:28.000 --> 10:33.000 Extensive, like a lot of times, a lot of times, 10:33.000 --> 10:38.000 and just say that something is focused or something is selected. 10:38.000 --> 10:42.000 But those looks actually look like, you know, those two ease stuff. 10:42.000 --> 10:48.000 It just look like they belong to something like this hardware, which really fits the theme. 10:48.000 --> 10:51.000 There's this little hardware. 10:51.000 --> 10:54.000 Minitile, maybe you guys know about this. 10:54.000 --> 10:56.000 There's any crunch in the audience. 10:56.000 --> 10:59.000 It's from 1980s. 10:59.000 --> 11:04.000 And somebody just decided to run with a tree on this old terminal hardware. 11:04.000 --> 11:06.000 And they just made it. 11:06.000 --> 11:09.000 So, you know, you can just run there with a tree widgets. 11:09.000 --> 11:13.000 Here, you have the map, the tabs, everything. 11:13.000 --> 11:16.000 And it's just running on this screen. 11:16.000 --> 11:17.000 Works fine. 11:17.000 --> 11:23.000 It looks like, you know, these, these widgets really look like they belong to this type of hardware, 11:23.000 --> 11:25.000 which is, I think, amazing. 11:25.000 --> 11:28.000 But this is not what we really want today. 11:28.000 --> 11:31.000 We really want them to have a more modern interface. 11:31.000 --> 11:34.000 We don't want to look like we're in the 80s. 11:34.000 --> 11:35.000 At least that's the goal. 11:35.000 --> 11:39.000 It's fine if you want to, you know, look like belong to 80s. 11:39.000 --> 11:42.000 I like the aesthetics of those terminals a lot too. 11:42.000 --> 11:48.000 But just wanted to, you know, challenge myself a bit here today and have something looking better. 11:48.000 --> 11:50.000 So, how can we achieve that? 11:50.000 --> 11:53.000 Let me show you what you can do with the tree. 11:53.000 --> 11:57.000 You know, not using something else, just the role, like widgets and everything. 11:57.000 --> 12:00.000 So, you can have this hello world text. 12:00.000 --> 12:02.000 This is like the simplest form. 12:02.000 --> 12:08.000 And if you go one step further, you can wrap this thing in a paragraph and enable word, 12:08.000 --> 12:09.000 we're wrapping. 12:09.000 --> 12:13.000 This will make it a little bit more fancy because when you hit a handle flying, 12:13.000 --> 12:15.000 it will just, you know, go to the next line. 12:15.000 --> 12:18.000 And it's going to be, you know, looking better. 12:18.000 --> 12:21.000 But you can just add, like, a block too, you know, 12:21.000 --> 12:27.000 the, like, a surrounding block with some rounded borders and titles and so on. 12:27.000 --> 12:29.000 So, there's another option. 12:29.000 --> 12:33.000 You can go once the further add emojis and colors and, I don't know, 12:33.000 --> 12:36.000 center the text and stuff like that. 12:36.000 --> 12:38.000 And then at the end, it looks like this. 12:38.000 --> 12:42.000 And this is like arguably better, but still we look like, 12:42.000 --> 12:45.000 we just, you know, trying so hard to make it look good. 12:45.000 --> 12:49.000 So, yes, not really enough still. 12:49.000 --> 12:59.000 We'll take a look at this. 12:59.000 --> 13:02.000 So, what just happened there? 13:02.000 --> 13:13.000 First of all, the borders look different. 13:13.000 --> 13:17.000 There's some, some animation going on in the borders. 13:17.000 --> 13:20.000 And when you, you know, start to use this thing, like, 13:20.000 --> 13:23.000 there's some stuff happening, right? 13:23.000 --> 13:24.000 What the hell is going on? 13:24.000 --> 13:25.000 How did we end up here, right? 13:25.000 --> 13:28.000 This is all built with the three and rust, by the way. 13:28.000 --> 13:35.000 And let me just show it to you again, actually, because it looks so satisfying. 13:35.000 --> 13:39.000 And this looks like, you know, we passed the eighties and, like, 13:39.000 --> 13:42.000 two thousands, and we just end up very futuristic at this point. 13:42.000 --> 13:44.000 How did this happen? 13:44.000 --> 13:48.000 Well, there's a library called Tech Unifacts, 13:48.000 --> 13:53.000 which enables you to render these shader-like animations for refugee applications. 13:53.000 --> 13:57.000 So, it is like, you know, you just add this library to your project. 13:57.000 --> 13:59.000 And this works like any widget. 13:59.000 --> 14:02.000 And just render, you can choose what animation to render. 14:02.000 --> 14:03.000 And you can just render them. 14:03.000 --> 14:07.000 There's another demo of this library, which you can see here. 14:07.000 --> 14:14.000 It shows a different animations, you know, transitions with different things and so on. 14:14.000 --> 14:17.000 So, this is not possible. 14:17.000 --> 14:22.000 You might be asking, how this is possible, because we only have a terminal, right? 14:22.000 --> 14:23.000 Well, this is possible. 14:23.000 --> 14:25.000 Thanks to the trees, buffer type. 14:25.000 --> 14:28.000 So, buffer is a super simple type. 14:28.000 --> 14:33.000 It contains all the cells that you would need to render these type of things. 14:33.000 --> 14:38.000 First of all, we have an area, super simple, just coordinates and size. 14:38.000 --> 14:42.000 Also, content, this contains the cells. 14:42.000 --> 14:46.000 And cells mean that, you know, little pixels in the terminal. 14:46.000 --> 14:50.000 And, you know, we have a symbol, which is like a single character. 14:50.000 --> 14:51.000 Let's think it that way. 14:51.000 --> 14:55.000 And we have just foreground and background colors for those symbols. 14:55.000 --> 14:57.000 And also some modifiers as well. 14:57.000 --> 15:04.000 So, you can just use this mechanism to make it seem like you're rendering and animation. 15:04.000 --> 15:07.000 And tech unit effects is actually doing something like that. 15:07.000 --> 15:11.000 When you see those animations, those little like borders, animated borders. 15:11.000 --> 15:15.000 They are actually just, you know, like, cell by cell, rendering. 15:15.000 --> 15:19.000 And at the end, you have those cool looking effects. 15:19.000 --> 15:21.000 The underlying buffer looks like this. 15:21.000 --> 15:26.000 When you render a text, for example, you have a hello world there. 15:26.000 --> 15:29.000 And, you know, each character is the cell. 15:29.000 --> 15:31.000 They have a symbol and some style. 15:31.000 --> 15:36.000 So, yeah, there's a more documentation on the website, if you want to learn more about it. 15:36.000 --> 15:39.000 There's another application called tech. 15:39.000 --> 15:43.000 And this is making use of the buffer extensively. 15:43.000 --> 15:48.000 And at the end, it doesn't even look like something that was built with the tree. 15:48.000 --> 15:50.000 And this is actually a music making program. 15:50.000 --> 15:52.000 So, you can just make music in your terminal. 15:52.000 --> 15:54.000 Let me run it. 15:54.000 --> 15:58.000 You just have, like, something looking like FL Studio here. 15:58.000 --> 16:02.000 And you can just, you know, use this to place some modes. 16:02.000 --> 16:06.000 And then, at the end, yeah, just making music in the terminal. 16:06.000 --> 16:08.000 And these custom views here. 16:08.000 --> 16:12.000 They're entirely built with the, like, the buffer type. 16:12.000 --> 16:15.000 And, you know, custom cell manipulations and so on. 16:15.000 --> 16:20.000 So, at the end of the day, you can just build stuff like this with the tree. 16:20.000 --> 16:23.000 Okay, let me quit. 16:23.000 --> 16:27.000 So, conclusion of the chapter one, what do we have? 16:27.000 --> 16:29.000 We have aesthetics in the terminal. 16:29.000 --> 16:33.000 We have more modern look and feel for terminal applications. 16:33.000 --> 16:40.000 Thanks to tech and effects and other, like, underlying features of the tree. 16:40.000 --> 16:46.000 And you can just, you know, have these web-like, modern and animated trees. 16:46.000 --> 16:49.000 And, like, you know, running in the terminal. 16:49.000 --> 16:53.000 The question is, which I'm not going to answer today, is, is this the future? 16:53.000 --> 16:55.000 Or, is this really needed? 16:55.000 --> 17:00.000 You know, when you have a terminal, you can basically, you know, get your job done by running something. 17:00.000 --> 17:03.000 And it's, like, doing its thing. 17:03.000 --> 17:06.000 Like, why do we need animations and why do we need these fancy things? 17:06.000 --> 17:07.000 Not going to answer that. 17:07.000 --> 17:12.000 There's some debate about that, but my, so, yeah, I'm okay with having animations. 17:12.000 --> 17:13.000 Why not? 17:13.000 --> 17:20.000 I'm just, I just enjoy looking at a terminal and seeing some, some stuff happening there, which looks like, you know, something from the future. 17:20.000 --> 17:23.000 So, yeah, just, just a question for you, I guess. 17:23.000 --> 17:25.000 All right. 17:25.000 --> 17:31.000 I hope you still have some popcorn left because we're going to move to a terminal to web section now. 17:31.000 --> 17:34.000 It's a chapter two going to be absolute cinema. 17:34.000 --> 17:38.000 We're going to try to, yeah. 17:38.000 --> 17:39.000 All right. 17:39.000 --> 17:45.000 When you want to run their, like, run their terminal on web, you, you have some options. 17:45.000 --> 17:49.000 And the first one that comes to mind is X term JS. 17:49.000 --> 17:51.000 And this is not a JavaScript talk. 17:51.000 --> 17:55.000 So, I'm not going to talk about this too much today. 17:55.000 --> 18:00.000 But the, this library is actually pretty good because you can just run their, like, any, 18:00.000 --> 18:04.000 any landscape code in, you know, HTML page. 18:04.000 --> 18:09.000 And they, they provide a API that, then, you know, run these, 18:09.000 --> 18:12.000 Ancestcape codes and just give you the result. 18:12.000 --> 18:17.000 So, you can basically, like, host terminal applications on a browser. 18:17.000 --> 18:21.000 But, like I said, this is JavaScript and we're in the Rust, they're room. 18:21.000 --> 18:24.000 So, just kind of move on from that, but this is an option. 18:24.000 --> 18:25.000 All right. 18:25.000 --> 18:29.000 So, what, what we want is, actually, we want to use the repository here. 18:29.000 --> 18:32.000 So, how can we use it? 18:32.000 --> 18:37.000 Let's say you have a platform where you need to render something. 18:37.000 --> 18:42.000 And in that case, you want to implement the back-end trade from repository. 18:42.000 --> 18:46.000 And back-end trade is, like, in theory, if you implement this trade on anything, 18:46.000 --> 18:51.000 you can just, you know, render widgets, like the stock widgets, 18:51.000 --> 18:54.000 or you can use the registry internals on that thing. 18:54.000 --> 18:56.000 So, that's the idea. 18:56.000 --> 18:59.000 And this trade consists of some functions. 18:59.000 --> 19:02.000 The mainly, we have the draw function. 19:02.000 --> 19:05.000 And this is, like, the most important one. 19:05.000 --> 19:10.000 This draw function gives you an iterator of items and items that, like, 19:10.000 --> 19:12.000 cells and coordinates. 19:12.000 --> 19:18.000 So, if you somehow put these cells into, you know, the appropriate coordinates, 19:18.000 --> 19:22.000 and, like, colors, you basically end up with a, with a tree. 19:22.000 --> 19:24.000 So, that's the idea. 19:24.000 --> 19:27.000 If you want to see how this might look, 19:27.000 --> 19:30.000 you can just check out the test back-end of repository, 19:30.000 --> 19:37.000 which we used to assert the rendered content in our unit tests. 19:37.000 --> 19:39.000 So, we basically have the test back-end. 19:39.000 --> 19:41.000 This gives us a string. 19:41.000 --> 19:45.000 And then we just assert the buffer in that string. 19:45.000 --> 19:47.000 So, just that. 19:47.000 --> 19:51.000 And what we are doing here is taking the content, like, the cells. 19:51.000 --> 19:54.000 Putting them in an intermediate buffer. 19:54.000 --> 19:57.000 And later on, we just assert the string. 19:57.000 --> 19:59.000 And it's quite simple logic there. 19:59.000 --> 20:02.000 So, maybe this could be implemented. 20:02.000 --> 20:03.000 You know? 20:03.000 --> 20:05.000 Actually, this was implemented before. 20:05.000 --> 20:09.000 And there are some projects which attempted to run their 20:09.000 --> 20:11.000 RT on web. 20:11.000 --> 20:14.000 One of them is e-gwe, RTT project. 20:14.000 --> 20:16.000 And this is a RT back-end. 20:16.000 --> 20:18.000 That is also an e-gwe widget. 20:18.000 --> 20:20.000 We have the demo here. 20:20.000 --> 20:22.000 We can just check it out. 20:22.000 --> 20:24.000 And this works well. 20:24.000 --> 20:27.000 There are, like, not many issues with it. 20:27.000 --> 20:28.000 You can just have the, you know, 20:28.000 --> 20:31.000 a repository demos running on web. 20:31.000 --> 20:33.000 But, you know, e-gwe. 20:33.000 --> 20:35.000 And we'll be assembly probably. 20:35.000 --> 20:39.000 And you can just check out the other examples as well. 20:39.000 --> 20:41.000 You know, everything is being run there. 20:41.000 --> 20:42.000 They are fine. 20:42.000 --> 20:44.000 Quite good project, actually. 20:44.000 --> 20:47.000 You can also use the bevy back-end with this project. 20:47.000 --> 20:52.000 So, there is this another example, which will give us a desktop app 20:52.000 --> 20:54.000 that runs bevy. 20:54.000 --> 20:56.000 And also it was a three window. 20:56.000 --> 20:59.000 You know, this is basically the block widget that you, 20:59.000 --> 21:01.000 this can be from what happened. 21:01.000 --> 21:03.000 Yeah, this can be resized and so on. 21:03.000 --> 21:05.000 So, this is quite cool. 21:05.000 --> 21:07.000 Well, what's the problem with it? 21:07.000 --> 21:08.000 Well, there's a problem. 21:08.000 --> 21:11.000 But my problem with this project is basically, 21:11.000 --> 21:14.000 I want to have something simple enough. 21:14.000 --> 21:18.000 So, when you use this project, you get to know about the bevy 21:18.000 --> 21:22.000 internals and also e-gwe and also with the three. 21:22.000 --> 21:28.000 So, like, you get to know many things to be able to build something for the web. 21:28.000 --> 21:33.000 If you look at some examples, you'll see that you got to use this app thing 21:33.000 --> 21:37.000 in your app to be able to initialize the terminal and so on. 21:37.000 --> 21:39.000 And there's something called with a glee back-end here. 21:39.000 --> 21:41.000 So, you got to learn about that. 21:41.000 --> 21:43.000 You got to learn about the plugins and so on. 21:43.000 --> 21:46.000 And if you look at the internals of this project, 21:46.000 --> 21:50.000 you'll see that there are some like abstractions or some players 21:50.000 --> 21:51.000 to it. 21:51.000 --> 21:54.000 We have input back-end for rotate glee back-end. 21:54.000 --> 21:57.000 And also e-gwe widgets for rotate glee back-end. 21:57.000 --> 22:00.000 So, just getting deep into the abstractions. 22:00.000 --> 22:03.000 And it gets quite hard to build something simple. 22:03.000 --> 22:07.000 Another attempt to making this happen was web-3 project, 22:07.000 --> 22:08.000 which was quite good. 22:08.000 --> 22:11.000 I had so many inspirations from this project. 22:12.000 --> 22:16.000 It's an integration between the U framework and Resetree. 22:16.000 --> 22:21.000 And, in case you don't know, U framework is a web application building framework 22:21.000 --> 22:26.000 in Rust, which gives you like a react-like features. 22:26.000 --> 22:28.000 Or, yeah, something like that. 22:28.000 --> 22:29.000 I don't know. 22:29.000 --> 22:30.000 I don't know. 22:30.000 --> 22:33.000 And you can just use this project to have this 22:34.000 --> 22:37.000 integration between these two libraries. 22:37.000 --> 22:40.000 And basically build web applications. 22:40.000 --> 22:42.000 And I have a demo here. 22:42.000 --> 22:43.000 Let's see. 22:43.000 --> 22:45.000 It's going to run. 22:50.000 --> 22:53.000 And this is the blog of the author of web-3. 22:53.000 --> 22:57.000 He basically decided to write a library and also build this blog 22:57.000 --> 22:58.000 using this library. 22:58.000 --> 23:00.000 And you can see that it's looking like a tree. 23:00.000 --> 23:02.000 It's interactive. 23:02.000 --> 23:04.000 So you can just click these things. 23:04.000 --> 23:07.000 And there's a blog post here about the blog. 23:07.000 --> 23:08.000 And you can just read it. 23:08.000 --> 23:10.000 And it works in the browser. 23:10.000 --> 23:11.000 Quite fine. 23:11.000 --> 23:12.000 Build photography. 23:12.000 --> 23:14.000 And it's a good project. 23:14.000 --> 23:20.000 And the cool thing about this thing is when you look at the HTML, 23:20.000 --> 23:25.000 it's basically like pre-regids and like spans. 23:25.000 --> 23:27.000 Like, you know, basic dom stuff. 23:27.000 --> 23:29.000 And just at the end of the day, this looks like a tree. 23:29.000 --> 23:32.000 So this is where I got inspired from. 23:32.000 --> 23:37.000 Because this is quite straightforward approach, right? 23:37.000 --> 23:38.000 So, yeah. 23:38.000 --> 23:42.000 Well, again, what's the issue with this? 23:42.000 --> 23:47.000 Yeah, there's another actually a thing that I want to show hold on. 23:47.000 --> 23:51.000 Yeah, there's this another thing which is like, you know, a counter app. 23:51.000 --> 23:53.000 So, yeah, what's the issue with this? 23:53.000 --> 23:56.000 Well, again, too many layers. 23:56.000 --> 24:00.000 If you want to build something with this, you got to first create a structure. 24:00.000 --> 24:02.000 That will hold your apps logic. 24:02.000 --> 24:05.000 Implement something called terminal app for this thing. 24:05.000 --> 24:08.000 And you're going to run the whole thing with the run tree function. 24:08.000 --> 24:10.000 So like, you know, three steps. 24:10.000 --> 24:13.000 And just remember what I showed you in the beginning of the talk. 24:13.000 --> 24:14.000 The minimal example. 24:14.000 --> 24:16.000 And just compare it with this. 24:16.000 --> 24:19.000 Like, it's too far from that. 24:19.000 --> 24:23.000 And you're going to just at that point know about how you framework works. 24:23.000 --> 24:27.000 How, you know, the UI is updated, how you manage the state. 24:27.000 --> 24:29.000 And other bunch of things. 24:29.000 --> 24:34.000 So, this is not really what I like about whether it's we. 24:34.000 --> 24:40.000 Also, about the interactions that, you know, when you click something on the browser. 24:40.000 --> 24:42.000 How does that happen? 24:42.000 --> 24:45.000 Well, there's this lifecycle of a web-a-tree app. 24:45.000 --> 24:48.000 You basically have to do something called hydration. 24:48.000 --> 24:51.000 And this is like another step in your app. 24:51.000 --> 24:54.000 You're going to just manually code these. 24:54.000 --> 25:00.000 So, the hydration step basically attaches those callbacks to those dumb elements. 25:00.000 --> 25:04.000 So, just going to, just going to, you know, create a style. 25:04.000 --> 25:06.000 Mark it as to hydrate. 25:06.000 --> 25:11.000 And then later on, you get all the dehydrated spans. 25:11.000 --> 25:13.000 And attach some action to them. 25:13.000 --> 25:16.000 So, you know, it's too many stuff happening. 25:16.000 --> 25:24.000 So, much effort, you know, it's not really easy way to build applications, I think. 25:24.000 --> 25:27.000 So, this is what I don't like about web-a-tree. 25:27.000 --> 25:32.000 But it's totally fine if you want to use you, then it's a good choice. 25:32.000 --> 25:36.000 Alright, so, I feel like I'm just constantly complaining, right? 25:36.000 --> 25:38.000 Like, what do you want, actually? 25:38.000 --> 25:40.000 So, we want no JavaScript. 25:40.000 --> 25:43.000 Only rust, obviously. 25:43.000 --> 25:47.000 We want to only depend on Resetui, not other libraries. 25:47.000 --> 25:51.000 Like, know you, know E-Gui, baby, anything. 25:51.000 --> 25:53.000 Right? Just Resetui. 25:53.000 --> 25:55.000 It should be easy to set up. 25:55.000 --> 26:00.000 I don't want to run MPM creates or MPM install or anything. 26:00.000 --> 26:06.000 I just want to convert the existing applications very easily to this web form. 26:06.000 --> 26:09.000 And, yeah, that's basically what I want. 26:09.000 --> 26:11.000 I know, I want so many things. 26:11.000 --> 26:15.000 So, write rust once, run everywhere. 26:15.000 --> 26:18.000 You basically build your three ones, running in your terminal. 26:18.000 --> 26:21.000 You switch the web, runs into web, right? 26:21.000 --> 26:25.000 So, I started cooking, basically. 26:25.000 --> 26:27.000 I've been live streaming. 26:27.000 --> 26:33.000 These efforts took around 15 hours or something. 26:33.000 --> 26:38.000 But, we basically ended up with a new library, actually. 26:38.000 --> 26:41.000 So, I put together this diagram. 26:41.000 --> 26:44.000 I was thinking, okay, I'm going to just steal or 26:44.000 --> 26:49.000 Get inspired from web-toe about the spans thing. 26:49.000 --> 26:52.000 You know, I want to run their cells as spans. 26:52.000 --> 26:53.000 That's good. 26:53.000 --> 26:54.000 I'm just going to take that. 26:54.000 --> 26:59.000 And, for handling the events, because web-toe is just using the hydrated stuff. 26:59.000 --> 27:00.000 I don't want to do that. 27:00.000 --> 27:04.000 I just want to use maybe gelascript to handle the events. 27:04.000 --> 27:08.000 That turned out to be unnecessary because in the web-systems, 27:08.000 --> 27:11.000 create that which I used for interacting with the browser. 27:11.000 --> 27:15.000 There's actually some callbacks or like listeners that you can just set up. 27:15.000 --> 27:17.000 And, they just work out of the box. 27:17.000 --> 27:22.000 So, no gelascript that diagram is outdated. 27:22.000 --> 27:27.000 And, for setting your web assembly application, I wanted to use trunk. 27:27.000 --> 27:31.000 If you have used wasn't bind gen, you maybe know that you've got to 27:31.000 --> 27:36.000 annotate your functions or like there's some other stuff that you need to do to set up your app. 27:36.000 --> 27:39.000 But, trunk is super straightforward. 27:39.000 --> 27:41.000 It works with your main function. 27:41.000 --> 27:45.000 You just have a fan main, run trunk server and it works. 27:45.000 --> 27:49.000 Only thing that you need to do is you need to add a index HTML. 27:49.000 --> 27:50.000 Something that looks like this. 27:50.000 --> 27:53.000 And, this is quite straightforward as well. 27:53.000 --> 27:56.000 Because you need some entry points to your app, right? 27:56.000 --> 28:00.000 So, you just add this index HTML, run trunk server. 28:00.000 --> 28:04.000 And, there you have a web assembly thing. 28:04.000 --> 28:08.000 Web assembly app running in the browser using Rust, right? 28:08.000 --> 28:16.000 So, about rendering, this was quite tricky actually because we don't have like an easy, easy sleep 28:16.000 --> 28:20.000 or something like that in the browser in the web assembly context. 28:20.000 --> 28:24.000 Correct me from wrong, but you can't have the loops. 28:24.000 --> 28:28.000 Well, how do we like wait for the next frame, right? 28:28.000 --> 28:32.000 There's no such thing as sleeping. 28:32.000 --> 28:36.000 So, you can use like async, JavaScript to wait for some time. 28:36.000 --> 28:40.000 But, I wanted to use a more native way. 28:40.000 --> 28:45.000 Basically, Martin from the livestreams, he came up with this. 28:45.000 --> 28:51.000 This is, believe it or not, an endless loop using a request animation frame call in the browser. 28:51.000 --> 28:58.000 So, what happens here is that you create a closure and you call the closure using request animation frame. 28:58.000 --> 29:02.000 And then you, in the closure, you call it again. 29:02.000 --> 29:04.000 So, it's like an endless loop. 29:04.000 --> 29:06.000 And this runs at 60 FPS. 29:06.000 --> 29:07.000 Quite fine. 29:07.000 --> 29:13.000 I was like, okay, let's just use this because this feels native and you can just, you know, create a loop this way. 29:13.000 --> 29:14.000 So, yeah. 29:14.000 --> 29:18.000 For the back ends, like I told you, you can use the DOM. 29:19.000 --> 29:22.000 Back end, with like, you know, spans and everything. 29:22.000 --> 29:25.000 Or the canvas, canvas is another one. 29:25.000 --> 29:27.000 It has some drawbacks though. 29:27.000 --> 29:31.000 Like in DOM, back end, you can basically have high pullings. 29:31.000 --> 29:34.000 For the canvas, you don't have those abilities. 29:34.000 --> 29:37.000 You can have more like flexible drawing stuff. 29:37.000 --> 29:41.000 But, yeah, just two options that we came up with so far. 29:41.000 --> 29:43.000 For the events, we don't need JavaScript at all. 29:43.000 --> 29:46.000 Just use, you know, event listeners, you know, 29:46.000 --> 29:49.000 when there's a key down, just call this closure. 29:49.000 --> 29:51.000 So, works well. 29:51.000 --> 29:55.000 So, at the end of the day, this is the result. 29:55.000 --> 29:58.000 And I want you to compare this with the minimal example. 29:58.000 --> 30:03.000 It's quite easy to just convert your existing tree up to this now. 30:03.000 --> 30:06.000 Because what you have is simply just the back end. 30:06.000 --> 30:07.000 Like, you choose a back end. 30:07.000 --> 30:09.000 You create a terminal from this. 30:09.000 --> 30:11.000 Using a terminal new. 30:11.000 --> 30:16.000 You just, like, listen for key ones using this closure. 30:16.000 --> 30:20.000 And on this draw web function, this is like the request animation frame that I mentioned. 30:20.000 --> 30:22.000 It's going to create a loop for you. 30:22.000 --> 30:24.000 And you can just run there your frames in there. 30:24.000 --> 30:27.000 So, that's the result and this the end. 30:27.000 --> 30:30.000 I'm going to show it to you how it looks like now. 30:30.000 --> 30:37.000 And ladies and gentlemen, I'll like to introduce you a new library. 30:38.000 --> 30:43.000 Say hi to Ratsula. 30:54.000 --> 30:57.000 And this is running at 60 FPS. 30:57.000 --> 31:00.000 And, you know, there's some glitches, but that's fine. 31:00.000 --> 31:04.000 So, yeah, we just basically built this. 31:04.000 --> 31:10.000 And it's a, you know, it's a library for building thermal teams, 31:10.000 --> 31:13.000 applications using Rust and WebAssembly. 31:13.000 --> 31:15.000 The source is available there. 31:15.000 --> 31:17.000 You can go ahead and try it for yourself. 31:17.000 --> 31:20.000 The demos are deployed onto the internet. 31:20.000 --> 31:24.000 And yeah, it's quite early in this project still. 31:24.000 --> 31:26.000 I mean, I started building this a month ago. 31:26.000 --> 31:29.000 So, PRs and issues welcome. 31:29.000 --> 31:33.000 And, you know, I like to announce another thing. 31:33.000 --> 31:37.000 This, this thing has a website built with Ratsula. 31:37.000 --> 31:41.000 So, we already have some users of the library, which is me, 31:41.000 --> 31:43.000 but doesn't matter. 31:43.000 --> 31:45.000 So, yes. 31:45.000 --> 31:52.000 So, me and the author of Village, we wanted to have a meetup, 31:52.000 --> 31:55.000 like a community for thermal enthusiasts. 31:55.000 --> 31:58.000 You know, people who like terminals or who build 31:58.000 --> 32:03.000 thermal software, we just, you know, created this website and the discord. 32:03.000 --> 32:06.000 So, we will have meetups soon, hopefully. 32:06.000 --> 32:10.000 And if you want to just pick it, this new hot event, 32:10.000 --> 32:12.000 just reach out to us. 32:12.000 --> 32:17.000 And the website looks something like this. 32:17.000 --> 32:21.000 You know, we have the links and everything. 32:21.000 --> 32:23.000 Oh, you didn't see that. 32:23.000 --> 32:25.000 We have the links and everything there. 32:25.000 --> 32:28.000 You can just join this court or like, you know, 32:28.000 --> 32:31.000 check out GitHub for things. 32:31.000 --> 32:34.000 So, yes, if you're interested just join us, 32:34.000 --> 32:38.000 basically what I'm saying. 32:38.000 --> 32:41.000 Yeah, we're going to see what will happen next, 32:41.000 --> 32:43.000 but hopefully some good things. 32:43.000 --> 32:48.000 I have some ideas about what's a build that's Ratsula. 32:48.000 --> 32:53.000 Actually, I want to have something more interactive, like a blog maybe. 32:53.000 --> 32:54.000 So, let's see about that. 32:54.000 --> 32:57.000 Also, we're experimenting with other stuff as well. 32:57.000 --> 33:00.000 There are some issues you can just check them out. 33:00.000 --> 33:03.000 Some extras, if you want to go full circle, 33:03.000 --> 33:05.000 there are some projects which you can check out. 33:05.000 --> 33:09.000 Coral is a CLI frontend for servo. 33:09.000 --> 33:13.000 So, it's like you run servo on the terminal, 33:13.000 --> 33:14.000 which is a tree. 33:14.000 --> 33:17.000 So, you can just, you know, build a app, a web app, 33:17.000 --> 33:19.000 and just serve it on web. 33:19.000 --> 33:23.000 And then just check that out on the terminal in the turn. 33:23.000 --> 33:26.000 Yeah, you've got the ideas, like full circle. 33:26.000 --> 33:28.000 And there's some other projects as well. 33:28.000 --> 33:33.000 Carbonyl is a terminal of browser built with chromium and, yeah. 33:33.000 --> 33:36.000 On a personal note, before I end my talk, 33:36.000 --> 33:38.000 you know, I have some ambitious goals, 33:38.000 --> 33:41.000 and one of them was this, basically. 33:41.000 --> 33:43.000 I was, this is me, a year ago. 33:43.000 --> 33:45.000 Exactly, year ago, maybe. 33:45.000 --> 33:46.000 I don't know. 33:46.000 --> 33:48.000 Yeah, talking about Ratsula 3 once again. 33:48.000 --> 33:53.000 But the difference is, I was sad, unhappy, overweight, 33:53.000 --> 33:55.000 broken inside. 33:55.000 --> 33:57.000 Today, I am a much different person, 33:57.000 --> 33:59.000 but mentally and physically. 33:59.000 --> 34:03.000 So, I'm just trying to like spread this motivation a bit around. 34:03.000 --> 34:04.000 So, I build this website. 34:04.000 --> 34:08.000 You can just go and check out what happened. 34:08.000 --> 34:11.000 And why it happened and so on. 34:11.000 --> 34:17.000 And, basically, my motivations to keep moving towards these goals. 34:17.000 --> 34:19.000 Also, there's some merch in there. 34:19.000 --> 34:22.000 So, if you want to get this courtesy appron, 34:22.000 --> 34:23.000 just check out the merch. 34:23.000 --> 34:25.000 This is like the low quality one. 34:25.000 --> 34:27.000 There's some very stuff in there. 34:27.000 --> 34:28.000 So, yeah. 34:28.000 --> 34:29.000 Thank you, everybody. 34:29.000 --> 34:32.000 Check out Ratsula and join our collective. 34:32.000 --> 34:33.000 Thank you so much. 34:33.000 --> 34:43.000 Thank you.