So now we have Orhan who's going to tell us about Ratatouille, Terminal UI.
Hello.
Okay, it's working.
Welcome everyone and thank you for being here for my talk and coming to this presentation.
Before starting out, we are already starting out a bit late, but I would like to ask you
some questions.
First of all, how many of you know what a terminal user interface is?
Can I see hands please?
That's great.
And how many of you built terminal user interfaces before?
Anything just in the terminal interface?
Cool.
The whole audience.
That's great.
I am Orhan Parmax's and today in a few minutes we're going to explore.
The fascinating world of terminal user interfaces and see how we can build terminal user interfaces
in Rust with a library called Ratatouille.
I'm an open source developer and you can find me on GitHub with the handle Orhan, which is also my name.
And I built the following projects and you might know me from Gitcliff.
It's a change of generator tool and I mostly work with command line tools using Rust and I pretty much live in the terminal, I would say.
And that's why in my free time I package some Rust tools for some Linux distributions, mainly Arch Linux and Alpine Linux.
So let's learn a bit more about terminals, right, before jumping into the user interfaces.
What is a terminal and how does it work?
I want to show you some terminal pictures.
Well, this is not looking like the typical terminal that we use these days.
This is IBM 2741 and this is one of the early user terminals that we had back in the day.
And this was used for something called telegraphy.
It's like a long distance transmission of messages.
And this is also called a teleprinter or a teletypewriter.
Shortly we call this TTY.
Let's keep them in mind because it will come important later in the slides.
Next we have VT100.
Now we have video.
We have a video display unit and we display some information on a screen rather than printing text on to a paper.
That's cool.
And VT100 was one of the widely used terminals back then.
And maybe there are people in the audience who use this.
I would highly respect that actually.
Next we have a text terminal or just a terminal.
Sometimes we call it a text console.
And it's a cellular computer interface for text entry and display.
And in the screenshot you can see now of him my preferred text editor and I'm editing some package file.
And yeah, this is how we like we can just imagine terminals these days because there's some text input.
Then we process something we see the output there.
And just to summarize things a bit more, we can say that we can just, you know, have this diagram here.
It's a POSIX schema of C standards like streams.
And you can see here there is a text terminal.
We get the input from a keyboard.
We process it.
Then we display something on a display or screen with a STDR or STDR.
Well, this looks pretty simple, right?
But under the hood things are a bit more complicated.
There's a nice blog post about how terminals work.
And if you want to like learn more about these, you can go check it.
They definitely check it out and learn more about it.
But just to give you a couple of ideas here, I want to point out TTY, which I mentioned in the first slides and also PTY.
TTY here is used for like a serial interface to a computer.
Whereas PTY is an emulated TTY, which enables us to emulate multiple terminal interfaces to a computer.
Well, you might ask, what does that mean?
I'll give you a very simple example.
Let's say you want to have like multiple terminal emulators open, right?
You want to have them side by side.
You want to have like multiple sessions.
In that case, you will have multiple PTYs basically.
So let's keep that in mind and move on.
If you want to see the current TTY that you are on for some specific terminal, you can run TTY command.
And you can see here I am on the fifth TTY here.
And also you can see the same from the PS output as well.
So these things we can access from Linux and get some information about.
Just to wrap things up, terminal is a physical device with a keyboard and a screen connected to a computer.
TTY is, it was used for a device, like for type messages, but now we use it for a term which describes an interface to a computer.
PTY is an emulated TTY.
That's cool. But we only talked about text for now.
Like we want to have some text on our terminals, right?
Well, in reality, we want to have more things like colors and like styling and then like cursor controls and everything.
How do we do that?
Like we don't want to just have text and we cannot really leave it this.
So let's say we want to have this exact text in our terminal.
What do we do?
We do this. This is very gibberish looking at first glance, but there's actually some magic going on here.
And VT100, the second terminal image that I showed, was one of the terminals which was able to do this.
We call this NC escape sequences.
Here are two examples.
First we have this example where we set the foreground color of some text and then we can also set the background color.
We can also do more stuff such as control and cursor, setting the graphics mode, like the screen mode and stuff.
And something that I want to also point out is that NC escape codes works like a session.
So what does that mean?
You set something, some terminal attribute that is set for the remaining session of the terminal.
So if you set your foreground color to white, the text, the remaining output will be white.
If you do something, then it will just stay.
So terminal simply has a state.
To get more information about the terminal state on Linux, you can use this STTY command.
And here I just get the state, set something, and then I can just revert to the original state of the terminal.
And then if you mess up your terminal output, you can just use the reset command, reset the defaults.
Okay, now we know what a terminal is, how to control it in a very basic way.
Now we are ready to talk about terminal user interfaces.
In the realm of terminal user interfaces, we use NC escape codes a lot to control the terminal.
And also we want to output some styled text to it and then have some mouse controls,
read input handle events, and we basically build our loop around this and form a UI.
Let's look at some examples.
We talk about too much about terminal user interfaces, but how does that look, right?
Well, we have H-top here.
Pretty much sure everyone, most of you know this tool.
It's an interactive process viewer.
You can see the running processes.
And it's a good example of a tree, actually, because we have some gauge and some list and then some style text going on here.
What you can also see from this screenshot is that we need to get a bit creative when it comes to building terminal user interfaces,
because we don't have the typical building blocks for having some UI.
We need to use symbols for blocks.
We need to have these pipe characters to form some kind of a UI.
So that's one of the good examples of a tree, I would say.
There are also a lot of use cases of trees.
H-top is a system administration tool, but we can also have text editors, file managers, miscellaneous stuff, multimedia, even games,
which I will talk about today, and even more stuff.
So they are good for productivity and efficiency.
One might argue that what's the difference between this and this, right?
This is a file explorer, which runs on a GUI, and this is another file explorer, which is on terminal.
Well, you can pretty much do the same thing in both of them.
Like, what's the difference apart from the light team?
Well, at the end of the day, you can choose whatever you want, but they both have some advantages,
and it's good to consider the advantages of Tweet when it comes to working with terminals,
and if you want to have some efficiency in your workflow.
I want to go over them briefly.
First of all, Tweet's are very resource efficient.
They consume fever system resources, and they are very suitable for resource constraint
environments, and you can navigate faster in Tweet's because you're on a terminal,
and you have some shortcuts and command inputs.
And if you like, let's say you want to connect to a server, right, for BISSH,
and you don't have X11 or Wayland in the server, you just have ATTY, basically.
In that case, Tweet's are good because they have text-only displays.
You don't have to have a display server running, so you can simply SSH into that server and run some Tweet,
and that's why they can be accessed with an over-end network connection as well.
When it comes to Glees, they are also pretty advantages in some cases.
If you want to have a very user-friendly interface, Glees are good because they have an intuitive interface for new or casual users.
They have user interaction enhancing features such as drag and drop, and there's something called what you see is what you get,
which means that in Glees, you have more immediate and visual representation of your changes,
which is also good for new users or someone who is not really into computers, I would say.
I asked the RataTweet community and also in my socials, what's your top picks when it comes to Tweet applications,
and these are the answers that I got. We have a couple of text-adders here.
We have some development tools, also some cool stuff such as Atwin.
We have the maintainer here. Shout out to her.
We have some process management stuff as well.
People like Tweet, and I would like to ask you a question here as well.
What's your favorite Tweet? Do anyone want to say?
B-top.
B-top. Good one.
What else?
F-C-F on the one hand.
F-C-F. Cool one.
Last one.
Alex.
Yeah.
Three years ago.
Yeah.
So, yeah, Tweets are very popular when it comes to development utilities, I would say.
So, yeah.
Next, I want to pay tribute here and mention some of the legendary legacy software that helped us come this far when it comes to building Tweets.
Starting off with the MS-DOS editor.
I see some smiles.
The OGEdit.com.
In 90s, these type of stuff were very popular.
And I especially like the aesthetics of this because you have some drop shadows there.
It looks very bad, but also really good.
So, yeah.
You have colors and mouse support and everything, so truly a masterpiece.
We have Borland Turbo C++.
This was very powerful back in the day.
And this was very language specific, but it's really, it's a really nice example of a Tweet that were used in the old days.
I mean, heck, we even have syntax silencing in there.
So, shout out to them.
I'll skip the slide.
Yeah.
We have Midnight Commander and Orthodox File Manager.
There are also a lot of other File Manager Tweets as well, but I picked Midnight Commander here because it's widely known.
It has a wiki page.
That's actually the reason why I picked it.
This is one of my favorite IRC clients.
And I honestly added this slide because I like the visuals and the aesthetics.
So, yeah.
Well, they all look very, very old, right?
And they're all stuff.
Every desktop and laptop runs on a graphical OS these days.
So, should we still care about Tweets?
Well, another example that I will give here is that it's about reduced resource consumption.
We don't have bloat in Tweets, basically.
Turbo C++ was 9 megabytes.
Helix is 16 megabytes.
And VS Code is 350 megabytes.
So, you make them out.
And yeah, VS Code will eat your computer for lunch due to electron rip.
Okay, let's talk about how to build those magnificent apps.
And let's talk about the other Tweet libraries before moving on to Rust.
We have N Curses here.
N Curses is one of the most popular Tweet libraries and most known ones.
And it's for C.
And you can just build Tweets using this.
I want to point out one thing here.
This refresh call is actually a performance trick.
So, if you want to have some performance benefits, you don't call this refresh
because your updates won't be rendered.
So, until you call refresh, your UI changes will pan for a moment.
So, we have these small tricks when it comes to building Tweets.
And these stuff actually improves performance and offers great flexibility.
You have CDK.
The reason why this exists is because N Curses, doing stuff in N Curses is pretty difficult.
And if you want to like complex UI, then it's really not possible and very difficult to have it in N Curses.
So, people created Curses development kits.
And this provides some widgets, such as dialogues and calendars and whatnot.
And Curses versus CDK will come later as an important point.
So, let's keep that in mind.
If you run the N Curses code that I showed you, you will get this text on your terminal.
And this is very boring.
So, we can take things upon us.
This is dialogue, a very small command line utility on Linux.
And you can show dialogues like this.
I added this because it can be counted as a Tweet as well.
You have drop shadows, you have this thing.
And yeah, let's press enter to this and take things upon us.
We have Textualize in our hands.
It's a Python framework for building Tweets.
We have the tool Dolphi here.
It's a Tweet for monitoring MySQL in real time.
It's pretty cool.
And Textualize can also run in browser.
We have Bubble Tea, a Go framework based on the Elm architecture.
And now, Go is mentioned.
Let's talk about Rust, right?
The moment that everyone was waiting for.
In Rust, we have Twee RS, created by Florian in 2016.
And it was maintained till 2022.
And this library is one of the most used libraries in the Rust ecosystem.
And then it was unmaintained after some point.
And in 2023, we created a community around it.
We forked the project and we rebranded it as Rata Twee.
And now, Rata Twee is the most used Twee framework in Rust.
And you can have these complex stuff in Rata Twee as well.
And I will briefly mention this.
And I will give you a demo of how to build apps in Rata Twee.
Just to give you a bit more about the history of the project.
First, there was a discussion about the maintenance of Twee RS.
Then in the discussion, it was not really leading anywhere.
So me and a couple of other interested people, we created this course server.
We talked about the possibility of forking the project.
And we let the maintainer know about this.
And we forked the project under the name of Twee RS Revival.
We had some meetings at the time.
And then after some point, the maintainer was not really able to respond to us.
He was probably too busy.
And then we started to create some merchants and continue development.
Someone came up with the coolest name ever, Rata Twee.
Someone made the logo, which I have stickers for here, if you want to have it after the talk, for sure.
And then we created some releases.
And after some point, Florian archived the two RS repository and just redirected people to us.
And that's when Rata Twee became the official successor.
And today, actually yesterday, we just created a new release.
Pretty cool stuff. Definitely check that out.
And I also wrote a couple of blog posts about the history of Rata Twee.
So you can read them on my blog.
When it comes to building Twee, we have a lot of options.
We have textualized, we have bubble tea.
But why Rust is very important for us?
I want to briefly mention a couple of points.
First, memory safety.
I'm pretty sure everyone is like familiar with this.
But Rust's ownership system ensures memory safety.
And it also eliminates security issues related to memory issues.
And we have a very performant language in our hands.
We have zero cost abstractions.
And all the controls, they allow you for us to build highly performant tweets.
And yeah, cost platform support is great.
We have great portability features when it comes to doing stuff in Rust.
Unless the cargo is just great, and we have a growing ecosystem of Twee libraries.
So if you want to have widgets that are not supported, not in the Rata Twee organization,
people create very cool third-party widgets that you can just use in your Twee apps.
Here's a demo of Rata Twee.
I'll give you a water break. We'll give you a wash this.
This was made for the Thousand Comet.
We just made this for celebrating.
And here you can see pixels are moved around to create this fade-away effect.
Rata Twee is very lightweight, customizable, flexible, and it has a very cool name.
So it is pretty much designed for developers and enthusiasts who want a lightweight alternative to graphical user interfaces.
And if you want to have an app deployed in constrained environments, like a server with limited resources, Rata Twee is for you.
And if you want to have full control over the terminal and have more customized and tailored experience,
definitely consider choosing Rata Twee.
And if you just appreciate the retro aesthetic of the terminal and the cool name, go for it.
If you remember the endcurses versus CDK example that I gave,
here you can see terminal is handled by endcurses and CDK is rendering the UI.
In the case of Rata Twee, terminal can be handled with a couple of backends.
You can choose between those options.
And Rata Twee is actually responsible for rendering some widgets, such as these ones, like block, tabs, and list.
And when it comes to these backends, we have three options.
We do not really dictate which one you choose.
They are all, at the end of the day, they just handle the terminal.
But cross-term is one of the popular options.
It's a purest terminal manipulation library, and it supports all of the platforms, basically.
Here's a cool diagram about which back-end you can choose.
Like I said, it does not really influence your...
If you go with like termists instead of cross-term, it does not really have an influence on your project structure,
because the core functionalities of the terminal handling stays the same.
Here comes the exciting part.
I will show you how to build a Twee with using Rata Twee very quickly.
We have a lot of tutorials on our website, so if you go to RataTwee.rs, you can find a JSON Editor application tutorial.
We have a counter-app and a bunch of other cool documentation about Twees and specifically Rata Twee.
So definitely go check that out if you're interested.
First, we start with creating a new project.
First, you need to check your Rust version.
Then in the project structure, you can see...
It's a very simple project, but I will just give a brief introduction.
CargoTomel is where you have your dependencies, and under SRC main, that's where you'll have your code.
Next, we can use the CargoAdd command to add Rata Twee and your preferred back-end to our project.
In our case, I run the CargoAdd, RataTwee and CrossTerm, and you can see in CargoTomel, we have the dependencies added.
The versions might vary based on the time that you're watching this presentation.
Next, we can go ahead and add some imports to our main file.
From CrossTerm, I imported some terminal handling types and methods and types and traits.
From RataTwee, I imported some widgets and also Prelude.
Prelude is a module which re-exports the most used types and traits and really simplifies the imports in our case.
Before going into rendering anything, we need to actually set up the terminal and restore it.
In this code, you can see I entered something called an alternate screen and enabled something called raw mode.
The alternate screen is something like a new buffer in your terminal.
If you run your Twee app, you want to switch to a new screen and have a clear page where you can render stuff.
In the raw mode, we also call this cooked mode. In this mode, you basically cook.
You just switch to it just to have more like the full control over the terminal.
In this mode, the I.O. is turned off and you just have to handle your stuff yourself.
Before exiting, when you exit, you have to restore the terminal because you don't want to mess up your output.
In this GIF, you can see that first I will run some Twee with alternate screen.
The text is printed there. When I quit, this cursor is back to where it's at.
If I run the same demo without alternate screen, you will see that the whole Twee is printed to a terminal as is without switching to a new buffer.
The cursor is shifted down. Alternate screen helps us to have a clear slate when you want to render some widgets.
The most important part when it comes to building Twees is the render loop.
First, you need to draw the UI. In this case, you can use the terminal's draw method, which takes a frame.
It's a closure and it renders the entire screen. Here, I just have this paragraph widget and I render some text.
Next, I need to handle some events. In this case, I am pulling some events from cross-term.
If Q is pressed, I just break from the loop. The reason why we have 16 milliseconds here is that 16 milliseconds is roughly 60 FPS.
We have to wait a bit just to make sure that UI remains responsive regardless of whether we have new event spending.
This is the full code. This might look a lot for just the Hello World application.
We are aiming to simplify this further. If you run it, you will simply see a Hello World Twee. That's how you build Twees.
You might ask what happens in case of errors. In case of errors, you might guess that the restore stuff that we added,
the leave and alternate screen won't be called. You will pretty much mess up your terminal output.
In that case, you can use some panic hooks. We have a couple of tutorials on how to do them.
Here, I have the code for setting up a panic hook using better panic crate.
When you panic, like when you just unwrap something, for example, this will be called and you will restore your terminal.
We have a couple of concepts. I will briefly talk about them just to further improve our understanding of how the Twee works.
We have an area. The coordinate system runs from left to right and top to bottom.
We have the origin on the top left. XY coordinates are represented by U16s.
In this area, you just basically say that you want to render something in that area.
In this example, we render a text and we manually calculate the area to render within.
We have a layout and layouts used for, if you want, for example, split your area into two like this and have rendered different things on these different areas,
you can do that. You can also have nested layouts and such as well.
You might have seen the constraints in the last slide.
Constraints helps us to have better control in the layouts.
For example, in this example, I want to create an area of 10 characters.
Then I want the next area to be 70% of the remaining.
The last one will be the remaining area, but just not bigger than five characters.
We have a good flex demo we recently added to our repo for demonstrating how to use those constraints.
In the world of UI development, there are two concepts when it comes to rendering.
The first one is retain mode rendering where you have your widgets and states and you just update states to render something.
We have immediate mode rendering which we don't have states and we just redraw everything on every frame.
Not to the user's immediate mode rendering approach.
You can see here that in every loop, in every draw call in this closure, everything is rendered.
This sounds like a bad thing, but it's actually a good thing because it gives us some flexibility.
For example, your UI logic becomes a direct reflection of your application state.
Also, if you want to hide a widget, then you just don't render it based on some condition.
It has those advantages.
Lastly, there are several patterns that you can use with your three applications.
I briefly mentioned the Elm architecture.
We have another actually, who library for building tweets using Elm architecture.
It's basically something like you define your models, handle updates and render the view.
We have a component architecture.
There are two good Rust projects.
You can check them out if you want to learn more about how they structure their project.
Also, we have a template repository which we have a component architecture template as well.
I will briefly mention that now.
You have a flux design pattern.
We can also use this flux architecture in our apps.
We have another cool Rust project which uses this architecture.
The templates that we have, you can just use Cargo generate to clone, choose between these templates
and bootstrap a 3rd to 3 application very quickly.
You can install Cargo generate and run this command to have a prompt where it asks you some questions like your project name, etc.
You can have one of these templates, like simple async or component.
It's a good way to start out with having another three projects, I would say.
Lastly, showcase.
Let's have a look at what people have built with 3rd to 3.
I will show off some widgets first.
We have paragraph, we have a block, we have calendar, we have chart, we have a table.
Those are the maintainers, by the way.
We have a bar chart.
If you want to have more stuff, we have some third-party widgets.
We have a retotree image widget where you can just use to render some images on the terminal.
There's also a couple of other ways for rendering images.
In this case, someone actually shared the snippet on a Discord.
They used the colored pixels to show some image.
This is also possible, very bad code, by the way.
Anyways, here's an album cover of Kendrick Lamar.
We have a pseudo-terminal widget, 3-term.
If you're building some text editor and have some integrated terminal, this is for you.
We have other stuff as well.
Go check them out for sure.
These are the stuff that people built.
We have Pokedex here.
It's a Pokedex Tui.
You can just browse, pokemons, show off to your coworkers.
Yes, it's pretty cool.
This is something that I discovered yesterday, actually.
Someone built a full-fledged game in retotui, and you can just have this, play this in your terminal.
It's about space pirates playing basketball across the galaxy.
You just choose some planet when you start the game.
You build your character, like the skin, whatever.
You select your spaceship, and this is the main menu.
You can just take a look at stuff.
I haven't played it, sorry.
It's pretty cool.
We have Outtwin, pretty cool project.
It replaces your existing shell history with Scala Database,
and a bunch of other cool features, shout out to them.
Lastly, this is one of my favorite full-stack projects.
This is a website which was built with retotui, with U framework,
and it provides two aesthetic in the browser.
The backend uses Axum and REST API, and it's just a Mongo database.
You can go to this blog to read more about how this blog was built, actually,
so definitely check it out.
We have other cool stuff at Altsum Retotui repository.
You can go check those cool stuff as well.
I'm running out of time, so I have to run a bit.
The feature, what we are going to do with Retotui,
we are improving upon feedback, so definitely let us know
if you have some feedback, if you tried Retotui,
and if you think something sucks or anything.
Just let us know.
If you don't think anything sucks, then consider sponsoring us.
Meeting this call will allow us to work Retotui on more,
maybe part-time or full-time one day.
Thanks goes to all these wonderful people who contribute to Retotui,
and we have a lot of contributors, and those are some stats.
We are just happy to have you as well, if you want to join our Discord
as questions or if you are interested in contributing, go for it.
Thanks to our team, which are building Retotui right now,
and thanks to Florian for creating 2RS in the first place,
which make all of this possible.
And lastly, if you like my open source efforts,
and my projects or anything, blog posts,
consider sponsoring me.
Let's hit that goal. Let's go.
Thank you for your time and attention, and I hope you enjoyed.
you