Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Text User Interfaces in Rust (with Orhun Parmaksız)
2.9k Plays2 months ago
For some kinds of application, there is no faster or cheaper way to build a user interface than in the terminal. Sure, it’s not going to suit every kind of user out there, but for those of us that are happy on the command line, rich Text User Interfaces (or TUIs) open all the exploration and discoverability benefits of a GUI are a fraction of the development time.
This week we’re looking at a Rust TUI library with the excellent name ‘ratatui’. We’re joined by Orhun Parmaksız, one of the lead developers and a huge TUI enthusiast on a quest to see how far Text UIs can be pushed.
–
Ratatui: https://ratatui.rs/
Ratatouille Tutorials: https://ratatui.rs/tutorials/
Tui Realm: https://github.com/veeso/tui-realm
Awesome Ratatui: https://github.com/ratatui/awesome-ratatui
RTL SDR: https://www.rtl-sdr.com/about-rtl-sdr/
Rust Snake AI: https://github.com/bones-ai/rust-snake-ai-ratatui
SystemCtl-Tui: https://github.com/rgwood/systemctl-tui
GitU: https://github.com/altsem/gitu
…and GitUi: https://github.com/extrawurst/gitui
GitCliff Changelog Tool: https://git-cliff.org/
ATAC (Postman in the Terminal): https://github.com/Julien-cpsn/ATAC
BubbleTea (TUIs in Golang): https://github.com/charmbracelet/bubbletea
Imgcat (images in the terminal): https://github.com/danielgatis/imgcat
TachyonFX: https://github.com/junkdog/tachyonfx
ASCIITheatre: https://ascii.theater/
Rio Terminal: https://raphamorim.io/rio/
–
Support Developer Voices on Patreon: https://patreon.com/DeveloperVoices
Support Developer Voices on YouTube: https://www.youtube.com/@developervoices/join
Kris on Mastodon: http://mastodon.social/@krisajenkins
Kris on LinkedIn: https://www.linkedin.com/in/krisjenkins/
Kris on Twitter: https://twitter.com/krisajenkins
Recommended
Transcript
Different User Interfaces
00:00:00
Speaker
There are broadly three schools of user interface. At the top of the tree you've got web pages. You might not want them to be at the top of the tree, but they are. They're the dominant species of user interface on the planet today.
00:00:15
Speaker
They're nearly as popular as that. You've got the native app, the one that's running directly on your desktop or on your phone. And weirdly, even though that often has fewer moving pieces than a two-tier or three-tier web app, it's usually more expensive to make.
00:00:31
Speaker
That's a paradox I shall not seek to explain this week. But then, hidden in the corner, unloved by the world, but loved by us programming types, is the command line app, the simplest user interface you can get. Type in commands, get answers, what more could you need, provided all you need is text.
00:00:51
Speaker
Well, this week we're going to look at a fourth and somewhat forgotten category. We're going to stay in the terminal, but we're going to make it work harder. And we should make it work harder, because provided your expectations center around text, a terminal is a surprisingly rich rendering engine, especially the modern ones.
00:01:09
Speaker
And there's a lot we can build if we have a surprisingly rich user interface library making the most of it. So that's this week's topic text user interfaces or to ease as they're known. It's not a new idea but it's about time we rediscovered it and gave them a new lease of life.
Introduction to Ratatouille with Orhan Parmaxis
00:01:27
Speaker
Joining me for this is Orhan Parmaxis. He's one of the lead developers on the Rust 2e library called Ratatouille. And he's going to explain Ratatouille's architecture, what you can do with it, and how far its users are pushing the idea. They've got fun projects from aeroplane trackers and games to useful stuff like really rich Git clients. So let's dive into the text user interface.
00:01:54
Speaker
I'm your host, Chris Jenkins. This is Developer Voices, and today's voice is Orhan Palmaxis.
00:02:13
Speaker
Joining me this week is Orhan Palmaxis. Orhan, how are you? I'm good, how about you? I'm very well. i am I'm looking forward to you taking me through what in some ways feels kind of retro, and yet you might be able to convince me it's the future of user interfaces. Absolutely. You've been working on um a library for terminal user interfaces, right? That's that's true, sorry.
00:02:42
Speaker
Tell me about that. how why terminal Let's start with the why. Why terminal user interfaces? okay so I need to tell you a bit of a story first. um yeah Obviously, I'm not i'm not like super old in in the like the computing scene. and Don't take it personally, by the way. but um ah port I wasn't about to until you said that. I mean, I don't have much experience is basically what I'm trying to say. And, um, I, like, I started using Linux like maybe six or seven years ago. And, um, while I was doing that, I realized the terminal is, is, is something life changing for me, um, during my, um, daily day-to-day operations and so on. And then, um,
00:03:33
Speaker
You know, I started writing command line tools and at some point I started writing tweets and I was like, Wait a minute. Are we really using the full potential of the terminal? Because now you can draw stuff in the terminal, but maybe we can do things like do more things and take things up a notch and so on. And then um over the years, ah now there is something called Rets-A-Tui and um we we are trying to push the boundaries, basically.
00:04:08
Speaker
Okay, well, let's talk about those boundaries because I would imagine most people who've dabbled in writing terminal apps have got as far as really nice print F layout, maybe with some color escape strings, right? What you're talking about is taking it far beyond that.
Advancements in Terminal Graphics
00:04:28
Speaker
um Yeah, so basically um when you think about the history of the terminal back then that was BT 100 NCS Cape Coast colorful programs and so on but um these days I started seeing like music players things that you can ah Run in the terminal which helps you for example read PDFs um Colorful games and like many many more things like this and What I mean by pushing boundaries is basically ah taking this limitations and finding workarounds and then like.
00:05:09
Speaker
using terminal as, as like a, as something graphical rather than just text. Of course, at the end of the day, it's just text, but, um, we are, we are finding ways to, um, using that technology to basically, uh, render various things. So yeah. Uh, even images. Okay. So let me pick up on the PDF thing. I wouldn't have thought it's reasonable to render a PDF in a terminal window.
00:05:40
Speaker
How are you doing that? how How successful is it and how are you doing it? um I don't quite remember the name of the project, sadly. um I can check it out later. But um there's one um project actually written in Rust and uses Ratatouille. And it's basically like you know you run it and then you get the PDF output with images and everything. And you can scroll it and you can basically do whatever you're doing in the terminal without you know running something else and then using the program, learning about that program and so on. It's just everything is there. so It is a super reasonable ah thing to do, I would say. and Now, you know now since since you're already in the terminal, you know certain things probably and those certain things like key bindings and so on apply to those applications.
00:06:35
Speaker
So, for example, if you use VIM, you probably can use the same but key bindings in those applications as well, because everyone usually follows the same standard. so yeah yeah Yeah, I'm one of those people that uses VIM-like key bindings watching YouTube, so that definitely appeals. Yeah, absolutely. But how can it work? Because, like, you mentioned VT100, right?
00:06:59
Speaker
I think of the terminal as a thing that pretty much just displays text or maybe be colored text or bold text. So how do you get an image into that into that standard?
00:07:15
Speaker
um First of all, I'd like to mention something um kind of interesting because, you know, i was I was thinking, yeah, of course, back then we were just rendering those type of simple text and so on. But then I discovered this VT100 art and animations website, which contains a list of uh animations and like list of very cool art made in like 80s and 90s by some random people and there's just you know like I don't know 90 files which you can run and then it just contains NC escape codes but you can see like
00:07:53
Speaker
like a like a scene or something or like some fun animations going on in there. There are like very cool effects actually that I kind of kind of get inspired from. And I'm like, people were actually doing these things um back then, but it was just for fun, you know.
00:08:12
Speaker
Yeah, but today it's a bit different. We take the same technology and um we apply some kind of abstraction to it and at the end of the day you get just one API and um you can use those calls to um draw certain things in the terminal and then um maybe render images if your terminal supports that. And you can basically have like a full-fledged app running inside a terminal. One example of that is there is one project
00:08:46
Speaker
called token effects which i try to contribute a bit ah so it's a shader library like ah effects library for the terminal which allows you to render different effects and you can like combine those effects for example you can have like fade fade in fade out glitch and then some other stuff in there so basically when you use these apis ah along with the library you can Pretty much like combine different things like use different widgets for image rendering, use something for inputs, use something for effects. And then at the end of the day, you have, you have some stuff happening, which you can, you can't really tell it's in the terminal. It's, it looks like a real like app, even like a, even as close to as like a website or something. And I still get my terminal style key bindings. Yeah, you you get everything. And then it's in the terminal.
00:09:44
Speaker
Also, there's another aspect of this, which is like um taking the same approach and applying it to web. so Basically, you get You get the um same same like terminal output, but you can render it on web. Someone actually made a website which is in the same style as as your terminal. like you know yeah It has these ah Unicode blocks and everything, but he hooked it up to the and web
00:10:20
Speaker
we're branding back end somehow, if I but recall correctly, and then you hooked it up to the mouse events and so on. So you can just... you know, your terminal app branded in web, like in in a website, but you can just navigate it using mouse and whatever, like clicking on things. So like it's a two way thing. You can either like make the terminal like, like a website, or you can just have the terminal app and then put it on a website. So yeah, those both things are now possible with, with the stuff that I'm working on. Okay. We have to get into the, cause
00:10:59
Speaker
We have to get into the details of this because, um, like I can remember since like early 2000s, maybe, maybe even late nineties, people were doing like, okay. ASCII art has always been a thing, but also people trying to mock up a, uh, windows 3.1 style operating system in the browser. And there've been hacks for that for a while. What surprises me is the thought that a terminal app would be able to support something like you saying it's supporting something like open GL.
00:11:30
Speaker
um Yeah, essentially, we're moving towards something like that. Right now, it's not um so they're like, first of all, their terminals will use OpenGL for rendering, um you know, GPU powered terminals, such as electricity, best term and so on. I'm giving rust examples, but there I'm sure there are like others too. And um we can probably in the future hook hook it up those like GPU calls and then like use the like GPU for actually rendering something in the terminal. It's a matter of...
00:12:05
Speaker
time I see it because um now you don't really really expect anything to see when you work on just one project. For example, I work on this TUI library, right? And then people just come up with really crazy stuff. And I don't know what to expect at this point. So I'm like, tomorrow might might be the day that we have GPU rendering or tomorrow tomorrow might be the day that we have this crazy thing. So, right yeah.
00:12:30
Speaker
So what you're saying there is that modern terminals are going to use um the GPU to do their rendering anyway, so we could crack that open and put some support for that into if not user space in programmer space. Yep, essentially that's what I'm trying to say and.
00:12:50
Speaker
um Right now I'm trying to like contribute to different terminal projects. There's one terminal called Rio, which I met the author is a really cool guy. And he's like open to new ideas and so on. And I was like, maybe if I start learning learning the internals of the terminal a bit. and I and i'd like try to communicate communicate this in a like a good way. if If everyone agrees, maybe we can have this thing even like sooner than we expect. so um yeah I'm really like trying to push the boundaries at this point. I'm um i trying to you know
00:13:27
Speaker
render effects in my free time, I like live stream on YouTube and I'm like trying to render some cool stuff on the terminal. Basically, that's that's what I'm working on these days. Oh, cool. Okay, well, in that case, let's get into the architecture of it.
Building Text-Based UIs with Ratatouille
00:13:42
Speaker
um give me Give me the overview of how your library ratatouille works if I want to develop a text based UI. Yep. So In the world of rendering, there are like two approaches. One of them is immediate mode rendering, and the other one is retain mode. In the traditional GUI apps, it's usually retain mode. So um you set up your UI once, you have everything in place, and then when you want to update something, you go to the specific widget and you tell it to update whatever it has. right
00:14:22
Speaker
um yeah in In the terminal side of things, in the rery side of things ah we use immediate mode rendering, which means um you have a render loop and everything is rendered from scratch for every every call, like every frame on every step. so um This is how it works, basically. um you get and So you get like um you get some types to work with, and you get a um ah closure, we say in Rust. So in that closure, whatever you you do is being rendered um just once in that loop. And in that loop, you can like have a state. And based on the state, you render everything from scratch.
00:15:05
Speaker
well um This sounds a bit bad when you just you know say this. It sounds like we are basing resources or like it's too much work to render everything from from scratch. But um in reality, it's it gives us actually a bit of.
00:15:19
Speaker
a ah flexibility because as I said you have a state and you want to change the state you just modify it and on every render call the whole UI changes instead of you know um changing like specific parts so it's super simple logic in there.
00:15:38
Speaker
And um for event handling you have a couple of options but it's very similar to and the render loop as well. You have um like some backends and in those terminal backends you can pull some events and when you get the events you just base based on that you do some operations.
00:16:00
Speaker
So it's just you know essentially two parts, or maybe let's say three parts. And the third one is just you know actual rendering of the widgets, which you know consists of characters, Unicode characters, and like box druming-drawing characters, which you can like check out. It's basically constants all over the place. And we take those constants and like you know have some logic there. And we just draw something.
00:16:25
Speaker
um you want to have a list and we just get the items and render them. You want to have like a chart. We have characters for that. They're just rendered. So yeah, just three parts essentially.
00:16:40
Speaker
Right, yeah i want I want to dive into that part specifically, because I can imagine um ah can imagine writing an app that says um I'm going to print lines for my user display. So I send the VT100, clear the screen, go to the top left of the screen, three print lines, and repeat as necessary.
00:17:07
Speaker
i you But but you've layered on you've laid on quite a lot of stuff in addition to just printing text. So there's a lot of stuff that comes out of the box for, as you call them, widgets. yeah Tell me a bit about those. What good is do you offer for creating an actual UI rather than just some printed strings?
00:17:31
Speaker
so um we have A lot of widgets, actually. And those, like I said, those consist of um basically characters. And um for example, um you want to, let's say, have some tabs in in the terminal, right? you you like um You just construct those types, like these structs. And these structs have some um fields or like some properties that you can change.
00:18:04
Speaker
And you use those like things to pretty much set up what you want to show. And it just all happens in code. So we have like some some level of abstraction there. You don't have to deal with a lot of things. You just you know create the struct. And then you give that struct to, or let's say, that struct implements a trait. And that trait basically means that that thing is renderable in the terminal.
00:18:33
Speaker
So we apply the same abstraction for every widget, you know, for tables, charts, gauge and canvas. I don't know. And and we just basically render those things. And if you want to create a custom widget, which I mentioned briefly, you know, by by saying there is this thing for rendering shaders, there's this thing for rendering images, right? So they're like a lot of third party widgets which all actually implement this trait.
00:19:03
Speaker
And um by just pulling those libraries in your app, you basically can render um whatever you want to have in and the terminal. So we just basically work like that. And it's actually like super simple under the hood, just a combination of Unicode characters. OK.
00:19:30
Speaker
I'm trying to think in my head how that's going to be composited up. Because haven't you got a problem? you have Do you have to build an intermediate model? Because you've got to worry about um going top left to bottom right, filling out the tab widgets and then filling out the lists correctly. And if you've got different panes, how are you going to How are you going to render those? Do you render them separately or do you try and figure out what the left to right order of the final characters would be?
00:20:03
Speaker
So um we use something called buffer. It's an underlying type. And buffer is basically consists of the cells in the terminal. Those are the little parts that you have. And um if you want to, so for for fun, I kind of slowed that down the rendering process to see what it looks like. And it basically goes from left to right and then the next line and the next line and then at the end of the day, it's rendered like that. so um you so we we get you know At the end of the day, we get a a vector of cells and then we just go through each coordinates in the vector and then render whatever there is. like
00:20:49
Speaker
let's say you have a table and the top left corner of the table is just one Unicode character, right? And um we basically render that and we render the style. So it's just three things. And um we just give that to the backend that we have. And the backend can be changed based on whatever you want to do. We support multiple backends. The The recommended one is something some library called crossturn. So we just give everything to crossturn, and then crossturn renders that thing for us. And that's pretty much it. And if you want to have another backend and like control ah some things, you know have maybe some maybe have some intermediate layer where you want to inspect things. You can just implement the backend traits on your type, and then you can have control over the spectral cells.
00:21:43
Speaker
because this gives you the ability to implement the render logic. So that's basically how it works. OK. Is that way you jump in and do things like having a virtual terminal for rendering tests? You could actually test the display. Absolutely. So we have and a back end called test back end, which you can use in your unit tests and it gives you So it has some additional methods which like which can be used to get the buffer, like underlying buffer as like row of text. So you want to write unit tests for your TUI application. It's super easy. You just have these unit tests and then
00:22:27
Speaker
you have the role like string like representation of whatever you want to render space like strings right because we have like characters and nothing more and you just copy paste that and like have assertions based on that and you can just change the.
00:22:44
Speaker
like size of the test buffer so you can test for different uh terminal sizes for example i usually go with something very small so that i won't have like huge strings in tests but you can like oh yes yeah have like snapshots of the terminal itself and then just assert based on that so that's that's how it's testing works Okay.
Testing and Implementation in Terminal UIs
00:23:08
Speaker
So when I render out my widgets, they go to a logical buffer and you can just splat them without worrying about, you'd splat the stuff on top without worrying about compositing. And then once you've got the final buffer, then you can render it out as just a string to attest to. I'm wondering if you could get hold of one of those old, uh, you know, the flick boards, you get a train station sometimes. Could you render a text UI to one of those?
00:23:37
Speaker
um that's That's actually one of my goals, but I haven't really got the chance to do it. I want to have a very small LCD or something, very small screen, like something embedded maybe, and try to implement a backend on that and like render and the you know whatever widget I have on that little thing. um yeah I think it should be, in theory, it it should be possible because um The backend trades, basically um gives like it wants you to implement, for example, the rendering logic, which like you know gives you the cells and everything. You just render it based on whatever logic you have, and then ah clearing the screen, setting the cursor positions, and you know stuff like that. so Basically, all the backend functionality is wrapped in this trade. If you implement this on something, it will just work out of the box for Rota 3.
00:24:34
Speaker
OK, I have to hark back to a previous point, then. If you've got this buffer, which is essentially this character goes here um with these properties, like this color, how do you fit something like web ah with OpenGL shaders into that model? um It's a good question, actually. I think ah the the shader library that I'm using is um is using like different characters or different styles under the hood for doing that. Because, for example, I realized when I do some like like fade or like move animation or something, it it actually uses the little cells to create a bit of like ah like an animation. And they like like you know the shadows and so on are there actually like
00:25:29
Speaker
um like black colors and like little ah boxes and so on. So I think it's just some some special logic in there. It's not like um I don't think it's super like advanced right now. So it's just you know, some some I don't know some Something that looks looks like an animation, but at the end of the day, it's just rendering on the cells, I think. um That's my observation, but I need to check that again. I'm not really sure how is that happening. Okay. Sounds like it's something is still evolving. Yep.
00:26:12
Speaker
So let's let's climb up a bit more into developer space for this. I'm thinking, OK, so I want to write a text UI for something. I grabbed this library. I've got a bunch of widgets. Do you have any thoughts on the right way to architect a text UI once it gets complex? I mean, are we doing things like, are you trying to do things like React style?
00:26:41
Speaker
management or Elm? or but How is it put together in the large? um so we don't we don't like dictate how you structure your app. While you are you know reading a documentation, you can kind of see that. you know We just let you decide whatever whatever you want to do. But we have some templates for quick starting something. And um it's actually funny because in 2019 or 2020,
00:27:14
Speaker
I put together this very simple TUI template for Rust. And for a while, everyone kind of used that because that that was the only thing. Sorry, everyone. um And then yeah once we have brought the TUI, we kind of expanded on that a bit, added like async template, then component template, and so on.
00:27:37
Speaker
but um Today, when you want to structure your app, I would say you can either go with the simplest one, which I kind of crafted, um but that does not really scale well. um I would say use like the component template that we have, which is similar to React components. So everything like every UI widget, ah essentially, they they are in their own file, and then they have like have these update and whatever state methods. like So it's big pretty much like reactive. okay yeah That's how we like structured the application. Or you can use ah something like
00:28:19
Speaker
like twee realm so this is another library built on top of roto twee which tries to use the elm architecture and um and gives you the freedom to use that basically there are like other ones too there is one um project which uses flux i think flux architecture is there um but um these days it's kind of there isn't There isn't a standard, so everyone is kind of you know coming up with their own way of structuring it. But for me, um the the most the one that I liked is is the one that I crafted in in the the first place. So what I do is I usually have
00:29:04
Speaker
ah Some channels for sending the events and then um I can use async or not. It does not really matter but um and then you know, I use those events to um Handle handle them in the loop and then and so on so it's super simple and this gives me to flexibility to send like custom events so for example, I UI loop, um I can check some properties in the UI and then create an event and then handle that um somewhere else. and you know This way, kind of gets a bit um you know everything gets like everything gets connected.
00:29:47
Speaker
And so on um but i saw people using the component template and like sometimes i'm architecture as well the problem might be that,
00:30:00
Speaker
When you use like when everyone has has their own way of structuring their apps, it makes it harder to integrate them because we are all in the same ecosystem, right? And you can actually like import another tree app in your tree app and then use that. It's it's possible. So yeah. So while whilst I would initially assume these are largely standalone text UI apps, you're thinking about i embedding them. Is this going to end up like some kind of giant text based control panel for all the things that you want on your laptop?
00:30:38
Speaker
um I'm aiming for that, yes. that um So it's actually a bit sneaky, like to be honest, because you know I was working on this tool called Binsider. It's for for analyzing binaries. And I started this project like a year ago, and I wanted to add a hex dump feature to it.
00:31:00
Speaker
And I was like, yeah well, ah do I have to write this from scratch? Someone should have made this before. And I looked up and there's one very cool but the to app, which does exactly what I want. So I basically contributed to that project. And now it is usable as a library. So I basically import that project in my project. And then I hooked up to its like event handling logic.
00:31:27
Speaker
And like I basically used the same yeah UI in that app, in my app. So it's it's a bit sneaky, because and and then I realized I can do this for more stuff, so I do the same for another app. But then I accidentally end up becoming the maintainer of those two projects. Yeah, the curse of contribution to open source. yeah But so you are actually going beyond building like terminal interfaces into potentially building like, uh, at the analog to the web world where you have like a a library of stuff you would download, like a date picker for your website.
00:32:13
Speaker
Yeah, I want to dive into this more a bit. I don't really don't have time for working web stuff right now. But there are like a lot of different projects which allows you to render things on the web. And they are just, you know, for in first, but in first place, they are made for the terminal. There's one for V GPU. And there's one for um like,
00:32:40
Speaker
there's there's one for actually for um for a glee like the for a glee widget but then the glee widget can be compiled to WebAssembly so that you can also render it on web and so on. So there are like different projects which try to focus on different areas of of web and then I want to at some point ah just you know sit down sit down and like have ah some library on top of Rotaty which kind of allows you to do web stuff without even like you know worrying about
00:33:17
Speaker
the compatibility and so on. and um I think it it should be possible because there are like a lot of apps these days. There's one game called Cartofuls, Potato in German, which is like a arena thingy and you can just run this thing on the web and from SSH. It's basically the same UI and it's playable by key bindings. and I want to like have more projects like this in my life because it's super fun. um You don't have your browser, then it's fine. You can just SSH into it. It's the same thing anyways, right? So super great. So you could be in a situation where you if you're mainly making a text-based UI, you can still make it available to the broader world. ah Because for most people, the one user interface kit they have is their browser.
00:34:13
Speaker
Yep, exactly. OK, so you you could live a life largely based in the terminal without excluding yourself from other users. Yep. OK, that would be huge fun.
00:34:27
Speaker
um So maybe we should talk about other places this can go, because give give me some more examples of good. where Where does it shine? Where does building a text UI shine? Who's doing this well?
00:34:43
Speaker
Um, system tools, I would say, um, you know, this was the thing and anyways, like, you know, you, you, we had these three, uh, tools for monitoring and doing certain things in terminal. And this, this is really one of the areas that is, um, that is still, you know, very important. And we are kind of still, still seeing improvement, uh, in those areas. For example, there is one, one really cool, um,
00:35:13
Speaker
really cool app, which allows you to monitor your GPU from the terminal. And like, you know, there's another one, there's a project called a twin, which allows you to ah see your like shell history. And then like, it's actually just more than that. But it uses like tweet to, you know, and like to to give you How it looks like and so on we can just post stuff but recently um so these are old system tools but recently i came across something which is which was super amazing so.
00:35:50
Speaker
I have this little little thing in my desk. This is like a little USB chip microcontroller thing. Yeah.
Applications and Efficiency of TUIs
00:36:00
Speaker
So this is RTLSTR. This picks up the signals, basically, like the waves or something. I don't know the details, so i'm I'm super, super, like, beginner to this. And i I have some antenna, right? And I just hooked this up to my computer.
00:36:19
Speaker
And with some some magic and with using some tools, I can simply ah see the airplanes around me right now by just picking up their signals or something. And it's just in the terminal. And I can see them on the map. And I'm like, this is very cool. like but you're You're using the aerial to pick up what they transponder signals.
00:36:46
Speaker
Yeah. And then you're you're mapping it onto a map in the terminal. Yeah. And um because you can like, like zoom in or zoom out. And then it's like tracking them real time. So you you see the their routes and everything. And I'm like, well, this is Not useful, but it's super interesting, right? I mean, yeah it's it's a good use case for for doing things like this. I never thought that this was actually like possible. So, um the project is called AD SP Deku, or just rather Twi.
00:37:26
Speaker
And it's just using rotatory widgets basically for rendering all of this. It uses a canvas for rendering the map and like some lists and some tables and so on. So you can see how far is the airplane from you or where is it going or what's the speed and so on. So things like that are super mind-blowing to me these days. I'm not really like mashing the the importance of the system tools and the the entertainment and games and so on. But this is just a whole new era for me. So yeah. Yeah. I mean, you say you say it's not a big deal, but I can imagine
00:38:07
Speaker
I think probably around the world, there are like, um, flight control towers using software that basically hasn't changed since the seventies and eighties and the thought that we could develop something new that wasn't a world away from what they're already using. Like new terminal apps for, for plane management. I can believe someone out there would get very excited about the possibilities of that. Absolutely. I mean, as well as being cool. Yeah.
00:38:37
Speaker
Um, so it's all possible due to, you know, I mean, I mean, we, we have very simple stuff in the terminal and we, you want to render a map. It should be possible, right? It's just characters and so on. It's, it's like doable. And, um,
00:38:55
Speaker
It's also like super efficient. Like you don't have to rely on a lot of libraries or a lot of like glee stuff running in in the background to to be able to do this. It's just in the terminal, it does not really use any resources almost. um So in that sense, it's also possible to do things that will take more resources in in other cases.
00:39:22
Speaker
For example, um there's one project called snake Rust Snake AI Something. So it's basically, I don't remember the full name, sorry, if if the author is watching this episode. I'll put a link to the show notes, we'll find out. and yeah But the author is called Bones, I remember that, Bones AI. And um it's basically like,
00:39:46
Speaker
a snake AI learning to like, you know, AI just learning to play snake in the terminal at the old mobile phone game snake. Yeah. Yeah. And then you can just see, see how it's learning, how it's doing, and some statistics and like, it's rendering the parts and like,
00:40:02
Speaker
It's basically trying to like learn things. And when you think about it, if you wanted to visualize that in some other way, it'd probably take more resources. Like if you wanted to have a glee to ah have all these statistics, like have you know the the the actual game and then ah some some charts and so on, it will probably take more resources. But since we use basic widgets and just basic like text characters, it almost takes like no resources. I was thinking if I needed any resources to run this on my computer, I clone the repo and I run cargo run and it just started started running. And I was like, okay, sure, I'll take it. So, yeah. This is actually an interesting thing, right? Especially if you're a backend developer.
00:40:53
Speaker
thinking I've got some data, I've got a process I'm working on. I want some kind of better visualization of the output. Most of us just default to tailing a log file because it's easy and fast. And probably the next step up feels like, okay, I've got to stand up a web server and build a REST API and then build a web interface and I need someone who does react to do that just to get some kind of visual feedback that's more than log files.
00:41:24
Speaker
And if you can make that leap very small but still much more useful, I think you're on to something. Absolutely. um I saw something similar to that um just last week. I think there is one Rust project called Deoxys, and it's it's for full stack development. um I haven't used it, by the way. um but It's kind of popular and I i saw that they're actually building a 2D right now for they're like for the development tool. So basically I tried this out and I packaged it for Arch Linux and it works super well. um
00:42:08
Speaker
Basically, when you run something, um so it's live reloading, right? And you can just basically disable many, like you can like tweak the settings, app settings, see the logs and everything. And all you need to do is just run this tree, and it will be there while you're working on your thing. And you can see the logs, you can see what's what went wrong, and then your basically other settings and so on. You don't need to like run cats or tail or whatever command to get what's what what what went wrong and so on. so yeah it's It's actually super cool when you think about it from the development perspective. I like those type of things, basically. they They are really useful at the end of the day.
00:42:56
Speaker
um One other example is i don't I don't like System D. It's kind of kind of hard to manage some services sometimes. yeah And um I discovered System CTL2E, which is basically now the lifesaver for me. um I can see the services there, the logs and everything. Otherwise, you know when you use System, they you have to run System CTL, whatever, or Journal journal CTL to see the logs and so on.
00:43:24
Speaker
um So right now i I don't do any of those. I just run system CTL to get all the logs and stop or start services. It's super easy. Yeah, yeah. Because there is something wonderfully discoverable about user interfaces. they They can often be like showing you what's possible, what the options you have are when you run them. And if we could just get, there are places where we need to get that without dragging people away to some web-based tool.
00:43:54
Speaker
because the data's right there in the terminal, so why can't I see it in more rich ways right there? yep Did I see there was someone who'd done something for um managing Git as a text UI?
00:44:09
Speaker
um Yes, there are actually a couple of ones. um should have guessed there' be more yeah by ah there's one one called ah get you um There's one called one called GitUI. There's another one. what What was the name? This one was actually kind of cool ah because you you could see the like the commit graph and like you know when you use like git log it shows you the relationship between branches and so on. This one was able to do that I don't quite remember the name but we'll share links in the ways I guess and um I looked into it it's actually like branding images for that part you don't really have to do that like you can probably like use some text based characters to show that thing
00:44:58
Speaker
But it's actually like a still image and it's just rendered on the terminal. So it was kind of cool to see that happening. So yeah.
00:45:10
Speaker
There are a lot of Git stuff. um There is one that I'm building, actually. yeah So I have this tool called Gitcliffe. I have the logo over here on my t-shirt. It's for changelog generation. So you just give it the Git history to this tool. It gives you like a pretty changelog. And right now, I'm building a tweet for this, ah which lets you explore different formats or configs.
00:45:37
Speaker
And in real time, you can um like see your change lock rendered in the terminal as marked down. And if you edit the config, it's being reloaded and it changes on the terminal. So you can pretty much like experiment with different things and find the best config for your application. And um it all happens in the terminal. It was a CLI tool, but now I'm like,
00:46:04
Speaker
Why not a tree right so yeah yeah yeah absolutely i can imagine how that's architected right like i can imagine writing some rust code that watches certain file time stamps changes or something is there any means by which i can live reload the app i'm developing so my rest to eat code. Can i live reload that running beyond just like doing a watch on the files and doing cargo run.
00:46:35
Speaker
um Do you mean for seeing the UI layout change or? Yeah, yeah, yeah. Like, if all your code you want to probably see the UI so that you can like ah have a better understanding of how things rendered and so on, right? Yeah, yeah. um Yeah, I can. Yeah, I did that once or twice. It's possible. Basically you can use a tool called CargoWatch and you basically run this tool.
00:47:03
Speaker
And then when you save it just reloads everything reruns it and you can see the ui change um but i have to worry about getting the to eat back to the same state right yes um that's ah that's something.
00:47:20
Speaker
that is not supported right now. I don't think anyone like really worked on this, um but it's a really good idea. I sometimes need this thing, especially while while I'm starting out a new 2D project. um It's just very easy easy to do cargo watch and then see the updates, but at some point you want to like do more things. Maybe you have some menus and so on. So you want to reload those and stuff like that. Um, it's not currently supported, but it's a good idea. I'll actually bring this up to the team. Okay. That that sounds like a fun project to, uh, to go into. Um, I guess it would come back to this idea of having the state of the app separate from the rendering and then being able to serialize that perhaps. Um, yeah, I think signing out loud.
00:48:13
Speaker
Yeah, I think youll be it be, it would work like that, yes, I think. Maybe, you know, supporting that out of the box would be nice because right now we want to improve the user experience a bit. We want to have tracing inside a recipe apps um as as default or like as as a feature because there's no logging as of now you have to edit yourself. But if we somehow add tracing and and get an idea of
00:48:46
Speaker
what is but is going on, like which which widget is being rendered, and what what's what's why is it so slow, or why is it not running correctly, and so on. It would be nice. And also, live reloading would be a nice feature as well. There are a lot of work to do, basically. So yeah. Yeah. I am impressed with how far you've got already, because I i will admit, I've been been playing around with the library myself and building some stuff up. And it's nice not to have to, to build a user interface that's usable to someone like me, but has my favorite key bindings and doesn't force me to think about how I'm going to serialize all my data to Jason and back before I can get anything working. Yeah. I am.
00:49:36
Speaker
One thing i'm wondering right so looking at a library like this i'm thinking one of the great places for ideas for things you could build with it will be to look at women emacs plugins.
Integrating TUIs in Various Environments
00:49:49
Speaker
And say hey they're trying to push the boundaries of what you can do while you stay in your editor.
00:49:57
Speaker
yeah know And then I'm wondering, right? So a thing I do a lot in VIM is I've got VIM open and I can pop in an embedded terminal within that. And I can do some terminal stuff within VIM, which is running in a terminal, right? I'm wondering, can I build a Ratatouille app and have something that pops up an embedded terminal in it? Or is that too meta for your library?
00:50:23
Speaker
um It is possible. There is one widget which you can just use in your um your app. It's called sudo term. So basically, you can just you know have that thing rendered, and then you basically have a terminal inside the tree. And I kind of did that. like I used that widget for one of my recent projects. I was trying to ah render the art and animations that I mentioned these VT 100 stuff But I was having trouble Rendering like antsy stuff. So I was like what happened what happens if I just you know Throw those things into a terminal because if I do that in normal Circumstances they all work like I just cut the file and then the antsy escape codes are being rendered they look okay, so I just added a pseudo terminal inside my twee and then
00:51:19
Speaker
I basically like chat chat at the, the ANSI escape codes and then it rendered perfectly fine. So, okay. Yeah. Are you able to communicate between the main TUI app and the pseudo terminal you've got running inside it? Um, yeah, exactly. So you can actually run Vim inside, uh,
00:51:46
Speaker
I have VIM running a shell, running a TUI running another shell running VIM. Okay. So after this, this call, we probably started working on multiplexer together, right? Yeah, that'd be cool. Cause I have worked in jobs where they like, so I used to work at a place where the first thing they do in the morning was open like nine different terminals to have all their different logs tail.
00:52:11
Speaker
And just an app that can lay out a bunch of logs being tailed and maybe something a bit richer would be good. Yeah. There's, so there are two other big things I want to ask you about. Um, you've mentioned this several times and I haven't picked you up on it is async rust for two ease. Where would that come in? So, um, let's say you want to.
00:52:40
Speaker
build something that makes some network requests right you want to you want that to be a sink of course so you can basically like user on time cold maybe maybe something like tokyo or some other on time use that in your tweet app.
00:52:58
Speaker
And in that case, only thing that you need to do is change the event handling to async and it's not super hard. So you handle the events async as well. And um you you can basically use async Rust in your app. I don't usually need this when I don't make network requests or something that requires async, but, um, it's, it's like super simple to do. Okay. So you're literally you're just switching it over to a reactive app. yeah That's cool. I can see that working for like, we've been talking about log files. When they get to a certain size, maybe you would want the processing to happen in the background.
00:53:43
Speaker
Yeah. Okay. Yeah, that's cool. and The other thing I wanted to ask you is like, um, so you got it running in the web as well. Is that just for call points? Or is it just to check out whether Wasm's going to be able to support a terminal or is there more to it than that? So everything started with, with one project, uh, someone one day woke up and decided, Hey, let me let me have a like a like a terminal app running in in a website and I want to have my blog as a as a tree app right and um
00:54:24
Speaker
This guy just basically, have right now, he can probably go to his website and browse it. It's it's a retortee app. You can see from from the from the look, but it's in the web. Also, it's a blog. and In the blog, he mentions how he managed to do this.
00:54:42
Speaker
so it's just it's just his website at this point and it's all you know rotatory and like some other rust framework which helps you to you know do some web stuff and so on so it's actually something usable and usable in practice not just ah you know something fun, but it's actually a full-fledged website, ah which I really appreciate his work on this. It's just super inspiring. In the blog post, the he goes goes into detail and you you're like, while you're reading the blog post, you're like, okay, I see how this works because I'm right now looking at it. I'm just scrolling the website and
00:55:30
Speaker
it It's a TUI app. It has the same look in the terminal, but it works in the web. right It's it's super super nice, super cool thing. um so yeah there i mean I hope to see more websites like this. The only thing that I shouldn more should look into more is... um so He made this thing.
00:55:53
Speaker
but I guess there was some rough edges about rendering and so on. And then somebody or so you know or he just need to follow up with things. So I was ah kind of interested in offering some help to make this thing more polished so that more people can do what he did.
00:56:14
Speaker
um So yeah, it's just a matter of time and effort. Hopefully I will have some time to work on it. so yeah Yeah.
TUIs in Data Management and Beyond
00:56:23
Speaker
And is that what like your future largely holds, just pulling on these interesting threads and seeing what's possible? um Right now, yes, I would say so because I want to see how things can be improved and I want to like really push this thing and see what what is possible right now. um i use like I use many 3D apps in my life and I'm slowly you know switching switching from glaze to tweeze. Everything is becoming like that. ah At some point, I don't want to use the browser if possible. So we're going to see how that will go. It should be really fun.
00:57:06
Speaker
Um, so yeah, um, you know, uh, you know, maybe a good starting point would be, I can just switch my blog from, from an actual website to the, to the just terminal so that you can just SSH into my blog and read my posts.
00:57:23
Speaker
ah yeah That would that would would be a niche audience, but you'd know you'd found your people when they start doing that, right? Yeah, yeah, totally. um
00:57:35
Speaker
and not sure I'm not sure how many people I know I could get to SSH into my blog, but that would be cool. I have another project ah running in my server right now. It's not Freta 3, but it's actually kind of our competitor. It's it's a library for Go called Bubble Tea. Hey, guys, if you're if you're watching. And um it's it's for basically a Git server. And I hooked it up to ah hook this up to my GitHub profile so you can SSH
00:58:07
Speaker
ah Git or on Dev and then browse my projects from GitHub in your terminal. You can see the read me's and you can see the comments, branches, PRs, everything. Not PRs, but you know just Git stuff. But you can simply like browse my projects. It's super cool. I want to have more apps like this if possible. so Yeah. yeah yeah One thing that's been on my mind is, could I make a decent... um I was thinking of the potential of having something like SQLite or DuckDB bundled with the user interface in one place, and I can just define queries and have them magically show up in my um in my text UI as seemingly menu items.
00:59:01
Speaker
I think I saw something like this a couple of days ago. Sort of meant to be hoping you might. Yeah. yeah um there There are some projects like that. There's one um project which I really like. It's um it's called Rain Frog. And it's it's essentially for for Postgres right now. But they recently added MySQL supports.
00:59:25
Speaker
So that might be interesting um because this this project has so much potential and they are really working on this to make it polished. um so yeah i I sometimes come across these database, uh, twist stuff. Um, it's really good to see all of these, like, you know, all of these fields being conquered by. three stuff so yeah yeah Yeah. Yeah. Yeah. And it's been possible for a long time, but I think the key is making the tools to build up rich interfaces much more accessible. So we've been, yeah, we've just been focusing on the web for so long. We've forgotten that we can do these things.
01:00:08
Speaker
Yeah, I mean, I mean, first step, I think we can just get get rid of these bloated GUI apps. um For example, um um um I know that I'm like throwing throwing some app names, again and again, but this one's super cool. So ah this one, ah so there's What was its name? I kind of forgot it because I stopped using it. ah Yeah. Postman, right. there There's, there's this testing thing. Um, and there is a, now a project called a tag, um, 80 AC. And, um, it's basically postman, but in the terminal, like every functionality of postman is in, in there, you can import your files and everything. And the UI is.
01:01:03
Speaker
It's super rich. so you can just you know In Postman, you have these collections and you can just click on those collections and and select something and then do some stuff. It's the same basically, but in the terminal. Why would I use Postman?
01:01:18
Speaker
right right yeah yeah yeah so okay I'm totally going to try that one out. yeah okay Perhaps then there's a final point. If someone wants to if someone's now tempted to put a text-based user interface on something they're writing,
01:01:32
Speaker
how would you recommend getting started with Ratatouille? So sometimes people turned off by the idea of writing Rust, especially if they are new to the language. But at the same time, I saw a lot of people actually started started writing Rust because they want to build Ratatouille apps. So it's actually super simple.
01:02:00
Speaker
Let's say you never wrote Rust. Simply go to our website. We have tutorials for that. um They are like very clear, very understandable, super simple stuff. So it should be very straightforward. And um you can learn Rust on the side almost. like you don't have to Of course, it's it's a bit difficult because of the learning curve. But it's still very doable.
01:02:27
Speaker
And um you know we have tutorials and so on. And um we have community we have a community in Discord matrix. And so you can just you know come around, ask questions, we help everybody. um So yeah, that that should be the way. um And yeah after some point, you you kind of realize it's actually like,
01:02:51
Speaker
Super simple. I mean, at this point, for me, it's it's like somewhat boring almost because i um I know what to do. So I'm like a bit lazy to do it. But but yeah, I mean, should be fairly straightforward, I would say. OK. Well, i've um ill I'll endorse that. I've been playing around with um very simple text UI for managing things like um information from the game Dungeons and Dragons. You know, you've got hundreds of spells and you can flick through a reference book or you can go to a web page, which doesn't really work when you're um out and about. And so having like having an easy way to navigate lots and lots of structured data has been fun for me. And I've enjoyed using the library to make that happen.
01:03:42
Speaker
Yeah. So the screenshot you sent me, it's a, it looks super cool actually. Yeah. Hopefully I'll do something with it eventually. yeah Except I'll have to worry about copyright for the underlying raw data I've got. Yeah. I mean, right. Who cares?
01:04:02
Speaker
i'll I'll shout fair use and hope I survive. At which point I think we should probably get back to coding. Orhan, thank you very much for joining me, and I hope the future of the terminal is bright in your hands.
01:04:16
Speaker
Thank you for having me. It was great talking with you. I really respect your show and I'm happy to be here. Very grateful. Thank you. Cheers. Thank you, Orhan. Do you know, I think that episode must have set a new record for referenced projects. So go and check the show notes if you want to find them. Probably your best start is awesome ratatouille, because that's just a big long list of inspiring and interesting text UI projects.
01:04:43
Speaker
But obviously, check out the library too, ratatouille.rs, because it's quite fun to build stuff with. I mentioned this briefly at the end there, but recently I built myself a UI for searching through Dungeons & Dragons interface, just for me, just for my audience. And I built it first as a web app, because that's my go-to approach for UIs. And in hindsight, I think that was a mistake.
01:05:08
Speaker
doing it client-server was doing it the hard way so i ended up rewriting it in ratatouille and the code base is so much smaller because none of the code base is about rest interfaces or standing up servers or jason serialization or any of that and it's so much easier to use because i can navigate the whole user interface with all my favorite key bindings. Obviously it's not the right solution for every situation but if the target audience is tech,
01:05:36
Speaker
I think it might be the cheapest and fastest way to put together a UI. And I'm very glad I've added it to my toolkit. In fact, on this note, I'm going to go and put in a fuzzy finder for spells. So if you've enjoyed this episode, please give it a like, maybe share it with a friend. If you want to support future episodes of this podcast, check out our Patreon page. And thanks to those of you who have already signed up and make sure you're subscribed because we're back next week with another look at another corner of the programming world.
01:06:06
Speaker
I've been your host, Chris Jenkins. This has been Developer Voices with Orhan Parmaxis. Thanks for listening.