Beginners Guide to Tauri (Javascript Desktop Apps)

okay so Tori is a relatively new piece of software that allows us to actually use web codes to write desktop apps so if you know how to write web apps maybe you want to transfer a web app into a desktop application this is an example of some react code that is for my file explorer if you haven't checked out already I'll link it in the description so the way this works is it consists of a backend side kind of and a front end so the front end is going to be what everything that's displayed to the user the back end is going to be consisting of rust code and there's a bunch of apis that you can use in the back end so you can use HTTP you can use the clipboard dialogue all that kind of stuff all that fun stuff anything really you can do in Rust you can add to your front end using Zoom IPC but we'll talk about that in a minute just a quick note is Tori also provides a JavaScript API from most of the backend functions anyway so you don't technically have to use rust that's more for complicated features so you might be wanting to click off because of this is rust you don't actually need to know that much complicated rust in order to use this but I understand if you want to write good for us code on the roadmap is actually using bindings for going in Python C plus plus which is can be very useful because it means you won't have to write the back end in Rust it isn't just HTML and CSS you can use any of the popular Frameworks you can use you may have heard of electron before this is very similar to Tory and this is probably a bit more popular but the thing with electron is it can be very slow at loading if you've used Discord before it takes a while to load and it can use up a lot of memory if we actually look at the speed comparison between electron and Torah you'll see that Tor uses a significantly smaller installer size memory consumption is less than half and the launch time is a lot faster as well there will be some speed implications because you're writing web code which is technically a browser window but Tori minimizes this to a point where it's not so much a problem so we're going to start by installing everything getting the prerequisites down this is just going to be a plain HTML and CSS application but of course if you're using a framework you can also do that too so the first thing you want to do is make sure that you've got rust installed if you haven't got rust installed already you can go to the website press get started and follow the installation instructions I'll leave a link in the description for that okay so once you're inside a folder to contain your project we're going to open the command line so we're going to type in CMD which you can do on Windows to open the same folder and then we're going to use a tool to create the Tory project there is a menu way of doing this so you can find it in the documentation but for simplicity's sake I'm just going to be using this command so the command is npm create Tory Dash app at latest it might ask you to install the dependencies in which case you want to select yes and then once that has happened you can just type in the name so I'm going to put in tutorial it's going to be a JavaScript project and for simplicity's sake we're going to use npm this is going to be a vanilla project but you can do this in reacts felt whatever you like and we're going to be using JavaScript as well today so now we have this you'll see that the files inside this folder have been created for the project once that's there you want to CD into the project and then you just want to npm install the dependencies you'll see that a node of modules has been created here and now if we do npm rum Tory Dev it should open the desktop application for us it might take a while to install the dependencies but you only have to do it once so don't worry too much about it okay so you can see that the desktop window has now been opened so we know that this is working okay so now we have this we're going to open vs code in that folder you can use whatever ID you like I'm just going to open the terminal and do code dot to make sure it opens in that folder also I'm not too sure about other idus but you can install a Tory extension which will help with intellisense and stuff like that if we have a look at our structure here you'll see that we have a source story and a source folder so in the source folder this will contain all of the HTML CSS and JavaScript code this is where you can write JavaScript code anything like that as well as being able to put assets inside it I'm going to explain what this invoke thing here is in a minute but first I want to briefly show you the rust side of things so here is the main RS so in this file what we have is the basic code that can get the program running you can write as much rust code as you like here and this is really good if you want to really quickly process some data but you don't have to use this as I mentioned you can use the JavaScript API instead if you want to go a bit more advanced I'm going to demonstrate to you the IPC processing so what this allows us to do is send Communications between the Russ side and the front content side so I want to demonstrate to you what the app does exactly so we have an input here and if we enter the name kineticus and press greet it will tell us hello Connecticut as you have been greeted if you have a look inside the JavaScript side of things you'll see that when the input is submitted we actually call the Greet function in JavaScript and you'll see that this sets the text content of the message which is defined in the HTML file here to the result of this command so we call the Greet command and we pass in the input values so what's happening here is if you have a look inside the raw side of things you'll see that this greet is the same name as this invoke that's important we also need to maintain the same case when we do that so if we do it in snake case in Rust this invoke also needs to be in snake case you'll see that in the Tory side we have the Tory command attribute and this just defines that this is a command and can be invoked through the JavaScript side all we do is send a formatted string where it takes in the name that we provide just here and it adds it along with this string and you'll see that when we set the text content it's actually setting this text content here you'll see Hello Connecticut which is defined hello name you've been rooted from rust this is also an asynchronous function so we do need to call a weight hit one thing I also wanted to mention is that if this if this parameter here was called the name and note that this is in snake case and we put this to the name this would not actually work we would need to use camel case inside JavaScript even if this is in snake case here and that's because Tori likes to separate the practices of JavaScript and rust where Russ is usually snake case JavaScript is usually Channel case one more thing I want to show you is actually how to send events from the Rough Side to the front end so what we can actually do is take in an app here so what we do is we say app handle like so and we just want to make sure that we import that from Tori this will provide an amp object to us we don't need to provide any extra arguments here and the amp has a property called amp.emit or and this will emit to all windows of the program because obviously you can have multiple windows especially if you have dialogues we're going to call the event event name and we're just going to provide the payload event payload you want to make sure you also unwrap this which will check for errors unwrapping isn't always good practice and if you are new to rust I'd recommend looking into error handling but what this is doing is it's missing the event with event name and it's missing this payload this payload can be of any type it can be an object it can be a number anything you like and then this can be listed for in the front end so something I wanted to show you is the apis available which is shown in the documentation but it reconciled a long window.tory and this is something specific to vanilla you'll see that we get an object providing all the apis available to us this is some fun apis that you can use in the front end to enhance your application so you've got you know file system event clipboard anything like that in this case we want to use the event import so what we're going to do is we're going to do console listen equals window Tory dot event and this is a listen function it's going to be slightly different if you're using a framework instead of vanilla but you can check the documentation for how that works what we want to do now is add a listener so we're going to to say listen for event name because that's what we called it here the camel case doesn't apply which is a bit weird not entirely sure why that is you might be able to use it actually but you might want to check the documentation for that the second argument is going to be a callback so in this case it's going to be the event payload and we can call this whatever we want so this is actually just looking for the event payload to be provided here again you can provide any type you like and it will be serialized to something that JavaScript supports you might need to implement the serialize and potentially deserialized trait depending on what you're doing but that's for another time if we now console.log the event payload what this is doing is it's listening for event name taking in the payload which is event payload and then we're just console.logging it make sure you've refreshed your Tory application and it's reloaded and now what you'll see is that when we greet which is called here it will then fire back the event name and then this is listened for it doesn't matter where it's listened for So in theory when we press the submit button very shortly after it will console.log the data so if I say kineticus I press greet you'll see that we actually get the event and we get the event name and the payload is the payload which we provide just here this has been an introduction to making web apps with Tori if you would like to see more let me know and I will see you in the next video

Channel: Code with Con

Views: 25,392

Keywords: tauri tutorial, tauri, rust tauri, tauri rust, electron, electronjs, javascript, html, css, typescript, gui, gui tutorial, desktop tutorial, qt tutorial, c++ gui, rust gui, javascript gui, c++ desktop, rust desktop, javascript desktop, typescript desktop, programming, computer programming, computers, computer science, programmer, programming tutorial

Id: BGm0SCfY5Ak

Length: 8min 9sec (489 seconds)

Published: Wed Jun 28 2023