1. Obsession with Airports
I'm weirdly obsessed with airports. I thought the same about airports. That's not true because then I went to Luton and my life changed for the worst.
So, let's dive in. Okay, so I don't actually have to do anything on the computer so we can just — yeah, there we go. That's my mouse, as you can see, and I want to say that I am — I'm not an expert in obsessed with airports. I'm weirdly obsessed with airports. I'm still waiting for people, so I'm just going to talk about airports for, like, a minute. So, like, I know there are some people here from Portugal and when you're from Portugal, you kind of assume that everything your country does is kind of, like, below average of other EU countries, so I thought the same about airports. That's not true because then I went to Luton and my life changed for the worst. It was like a realisation moment. I thought, oh, Portugal isn't that bad. I mean, I still left, but sure.
2. The Unlikely Friendship between React and Rust
Okay. Give me some time for people to come in. But, yeah. So, I'm going to be talking about the unlikely friendship between React and Rust.
So about six months ago, let me just introduce myself. So my name is Sarah, or Sarah, but if you call me Sara, I will answer you in Portuguese and you'll have no idea what's happening so please call me Sarah. That confuses my brain. My name is Sarah and I'm, again, originally from Portugal. I'm a founding engineer at Axo.dev. Axo.dev is a very small company. We are fully... I forgot my phone. Nathaniel, can you bring me my phone? Nathaniel is not there. Sir? Can I get my phone? I need my cheat! I was trying to be an adult and be like, I'm not taking my phone to a talk.
Okay. So, we both... We basically do a lot of like... I mean, you can... If my mom asks, I say I work on computers. I say we do development tools mostly for the Rust community. So, I've been doing Rust. And Rust isn't that bad. Like, I'm not gonna say that it's easy. But you get used to it. You get used to how good it is in terms of... If something builds, then it's most likely gonna work. And that's nice. Right? That is very nice.
So, what is my purpose here today? I am here to make you look at Rust code. I'm here to make you look at it and be like... What the fuck? And be like... Oh, so that's how she fell when she went to Luton. Yeah, that's how I fell when I went to Luton. I have not gone back to Luton. I refuse to go back to Luton. I know there's a tram now, and you don't have to take the bus. I don't care. I will not go back to Luton. Okay. So, we're gonna talk about Tari.
You use Rust. So, what is nice about it is that, first of all, Rust is fast. But also, Rust has a really good integration with your OS, because Rust is a systems-level language. So, you know what that means. But the point is, it's nice.
So now we're gonna be live coding. Because I don't like listening to my own voice for 20 minutes. So we're gonna do some live coding. And basically we're gonna make a small... This is my talk.md. There we go. We're gonna make a small app that tells you some system information from my computer. Yeah. I mean, that's about it. So I have pretty bare-bones Tari app here. I've downloaded a couple of packages for the frontend. I've downloaded mostly... The thing that's important that I downloaded was... For the frontend, I downloaded Mantine UI so that you don't have to look at me writing CSS, and shit, stuff doesn't look like crap. And I made some components so that stuff doesn't look like crap. So that it sounds more incredible. And they're like, oh shit, she did that on stage. Yeah. I've also downloaded Serde.
4. Downloading Sysinfo-rs and Serde
I downloaded two things: Sysinfo-rs and Serde. Serde is like JSON.parse with superpowers and types that will kill you. Rust doesn't have any like TypeScript. The two files I need are in the source and sourced Tauri folders.
So, as you can see or you can't see... Wait. How is the... Should I put it bigger? Thanks. Okay. Should I put a light theme to scare everyone? Wait. Let's go. Color theme... Night owl light. There we go. I'm not doing this. I don't hate myself. This much. I have self-esteem issues. But they're not that big.
5. Installing Rust Extension and Running the App
Install the Rust extension for VS Code. So let's start up this app. Run Yarn Tari Dev. It will run your dev server on Tari. Now it says hello, React Advanced. We have a function called getInfo that returns a string saying hello from Rust. But how do we return this? Also, strings are painful in Rust.
Install the Rust extension for VS Code. Otherwise your life will never... Just please... For the love of God. For everything. It's the one that tells you all of this stuff. What are the types that come back and all that kind of stuff. So if you're gonna use Rust, please do that. And yeah.
6. Calling Rust Functions with Invoke
We'll get to that part in a part that's actually kind of just absurd, but strings in Rust are painful. So how do we call this? We make a use effect. This is all in honor of Super Mario Wonder. Okay, so I'm going to create a use effect. And I'm going to create a function called get info. So how do we actually call Rust functions? There is a thing called invoke that comes from Tory that you can use to call Rust functions. Let's first create some state. So const info set info equals use state. And then what I want to do is say okay, so const a whatever await invoke. And I'm going to say okay invoke system info. And let's console.log. Oh, I call it i for some reason. Let's return info which we're not using. And get info here. That sounds about right. Let me call get info here. Let me now run this every time everything changes. Oh, there's another difference. It uses Firefox under the hood instead of Chrome. And now I actually need to call it here. So const info equals it's like this. Info. Equals use info.
We'll get to that part in a part that's actually kind of just absurd, but strings in Rust are painful. There are like four types of strings, and yeah, that's it. Also, writing this is the same thing as writing this. If your last line does not have a semicolon, Rust assumes you're returning it.
So how do we call this? We make a use effect. This is all in honor of Super Mario Wonder. All of these voices. Okay, so I'm going to create a use effect. Why am I going to create a hook? Because that's how you hide your shame. Const use info. There we go. And I want to call a use effect on the start of it. And I'm going to create a function called get info. So const get info equals. And this needs to be async. There we go. Okay, cool. So how do we actually call Rust functions? And why is there an error in my Rust function? Oh, because I left this. Okay, cool. Okay, how do I actually call Rust functions? So there is a thing called invoke that comes from Tory that you can use to call Rust functions. So all invokes are by default async. So that's why this is async.
7. Returning System Info
Did I call it use info? I did. And we get a low from rust. That's cool. Should I return this? Probably. Just ignore all the errors, because I have no idea what they are, and we're not talking about them now. I have a purpose, and I'm finishing this.
Did I call it use info? I did. Look at that. Coming up with the same names. And we get a low from rust. That's cool. Should I return this? Probably. Okay. So I'm going to do set info equals I. And then I can just do this. So instead of saying a low React advance, I don't know why I put two. I apologize. How dare I? There's still two on this side. Oh, my God. And now it says a low from rust. Okay. Cool. Just ignore all the errors, because I have no idea what they are, and we're not talking about them now. I have a purpose, and I'm finishing this. Okay.
8. Serializing Data in Tari: A Practical Guide
9. Retrieving and Displaying System Info in Rust
Let's create a variable called system to get the system info. We can retrieve the host name, kernel version, OS version, and other details using the 'sys' object. Finally, we can return the system info and display it using the 'System Info' component.
10. Retrieving Disk Information
System Info and disks. I'm going to show you the beauty of Rust. If I get this.name, this will actually return something called an OSString, which I can turn into a STR, which is not a string, but it's a string slice. So to STR, and that will return me an option, which means there may not be a string, so I need to be aware that they may not exist. So I can't return this. And what I want to do is be like, okay, if this doesn't exist, just ignore it, just like burn my old app. So I need to unwrap it, and this still returns an STR, which then I need to be like, okay, that's cool. And I need to be as string. I think it's as string. It's not a string. It continues. It never ends. Oh, it's toString. I'm so sorry about that. How dare I? ToString, and now that's a string. And I think in my country that's beautiful. This is how we show love in my 50 seconds. Okay, cool. So now I just return the disks, right? That should be okay. I should... Yeah, no errors. Cool. And no errors shows up. So that's cool. So let me just do a little pre here. I have bad hearing. I have no idea what that was or if I was supposed to hear it. json.stringifyInfo.Disks.
System Info, and let me do the same thing for disks, so we don't have to do this in a beta again, because it's awkward. Someone's standing in here, it's very awkward. So yeah, there we go. So we have my computer info with all of that stuff, and the last thing that I want to do, the creme de la creme, that's all my French. That is not even French. That was English with a French accent. Show you my disks. I only have one disk, now what's in my disk. I don't know what the hell that was. So we have this in every computer, and that returns, okay, so that returns an array, right, and what is an array in Rust? It's a Vect. Vect. So let's say let's mute, and if you say mute, it means this thing's going to change. Please do not yell at me. This equals, okay, so Vect, like this. This is a macro, it's just a nicer way of writing Vect new. I don't know if you can see my hands. But yeah, so now let's do, let's go for each disk, so I'm going to say for disk in sys.disks, I want to do something, and what I want to do is say disks, disks.push. Yes, that is exactly what I want to do. And what do I want to push into it? I want to push a vect, a disk, so that's the type, and let's put this here, and I have all of this stuff, right? This makes sense. So I have some sheets for that, because you don't deserve to watch me write that. So that's pretty much all of it, except one, because I think this one is really funny. Okay, you guys, you're all going to love this. Okay, cool. So we need to get the name, right? And you would think that would just be like disk.name, but I'm going to show you the beauty of Rust. So if I get this.name, this will actually return something called an OSString, which I can turn into a STR, which is not a string, but it's a string slice. So to STR, and that will return me an option, which means there may not be a string, so I need to be aware that they may not exist. So I can't return this. And what I want to do is be like, okay, if this doesn't exist, just ignore it, just like burn my old app. So I need to unwrap it, and this still returns an STR, which then I need to be like, okay, that's cool. And I need to be as string. I think it's as string. It's not a string. It continues. It never ends. Oh, it's toString. I'm so sorry about that. How dare I? ToString, and now that's a string. And I think in my country that's beautiful. This is how we show love in my 50 seconds. Okay, cool. So now I just return the disks, right? That should be okay. I should... Yeah, no errors. Cool. And no errors shows up. So that's cool. So let me just do a little pre here. I have bad hearing. I have no idea what that was or if I was supposed to hear it. json.stringifyInfo.Disks.
11. Disk Cleaning and Info Retrieval
Is everyone enjoying this? I hope so. Does anyone know what the first null does? We have two disks. MacBook by default has two disks. One of them isn't a real disk, just a partition. I had a function that cleans this. Let me show you. I.disks. Now I have info.disks. I have a disk with 59 gigabytes free. The crème de la crème, now I have a getInfo.
Is everyone enjoying this? I hope so. Null 2. Okay, cool. Does anyone know what the first null does? And we have two disks. And the reason for that, I'm going to show you my disk utility, is because MacBook by default has two disks. And one of them isn't a real disk. It's just a partition on your disk. And I don't know why, but Linux does the same thing, so I had a function that just cleans this. Because we deserve better.
Okay, so I'm going to say, setInfo equal to System. And that is I.system. Oop, no, not like that, boy. I.system. And then, I'm just going to say, like, disks equals, I think it's called clean disks. Yeah, that comes from utils. It basically just removes this trash. It's beautiful. I know. I write amazing, amazing functions. I.disks. And this should make the disks, you know, one disk. Oh, no, actually, it makes it no disks. That's also an op. Wait, wait, wait. Why? Wait, why was that async? There is not, it's a filter. Okay. I fixed that. So, that's good. That was dope.
Okay. So, I have info.disks and I have a couple, I have a little component that does the same thing. So, let me just say info.disks. I have zero seconds. .map, let's speed run this. Okay. D. Okay, there we go. No, no, no, no. I don't need that. I can't speed run it. I'm sorry. I failed you all. And then I need to do, okay, so this is the disk. Close it and I should have a disk in here. There we go. I have 59 gigabytes free. Wait, wait, wait. Thank you. Thank you. The crème de la crème now, I have a getInfo.
12. Creating a Button and SD Card Reader
I'm going to make a button real fast. It says refresh. This is a very terrible SD card reader. I put this little bad boy in here and it works on my computer. It is from one of my retro handheld consoles. If you want to check out the code, it is on the QR code, because QR code's made a comeback, and it is on my GitHub. Please feel free to download it. The code looks better on it, I promise. Thank you and have a great day.
I'm going to make a button real fast. I'm going to speed run a button that onClick, that's not a click. Okay, onClick runs getInfo, right? So, what this means is that it will reload all the stuff and get me all the new stuff because and, oh, beautiful. Did I save? Yes, okay, cool. It says refresh. Okay, cool. You probably cannot see this, but this is a very terrible SD card reader because I lost the one that was good that I had. Why is it orange? I don't know. But it has an SD card in it, and an SD card is a removable device that if I, I mean, everyone knows what an SD card is. So, if I put this little bad boy in here and it works on my computer, apparently, okay, let's go. Do the thing. No? No? Yes. Okay. It is from one of my retro handheld consoles. Yeah, I have like five of them. We don't talk about it. I'm great with cash. But the thing is, it's not showing up in here. So if I refresh now, we have two disks, just to make sure that it works. And this one has a little icon on it. I tried to look out of like a, eject them and I don't know how. But that's about it, yeah. So with 0.0 seconds to go, I just want to say, if you want to check out the code, it is on the QR code, because QR code's made a comeback, and it is on my GitHub. Please feel free to download it. The code looks better on it, I promise. And yeah, thank you and have a great day.