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