Tauri Vs Electron - Desktop Apps with Web Tech

Welcome to Syntax on this Monday. Hey, Steve Treat. We're gonna be talking about building desktop applications it. And, specifically, the difference between your options using web tech to build things with both Tori and Electron. You may have it. Heard of these options. We're gonna be talking about what they are and what the difference between both of them is. My name is Scott Chilinski. I'm a developer it. Denver with me as always is Wes Boss.

And with us as always also is Century who presents this podcast.

Head on for 2 century dot I o to learn why you need error and exception handling in your applications if you're pushing stuff out to users. So check it out.

Desktop applications. Wes, have you had any experience building desktop apps in any regard? Oh, yeah. Yeah. Like, we did a a Tori episode,

What, like 6 months ago when Tory first came out? And I had built a an app called, like, check my hair or something like that, where it was like I want to build a menu bar application where I just click it because often when I want to check my camera, I'll open up Photo Booth and switch the camera and Photo Booth props it weird, which is really annoying, so it doesn't show you the full frame depending on the aspect ratio of the video.

So I thought, let's just build something in web tech, right? So I built in an electron and then everyone's like, you should have used Tori. So I rebuilt it in Tori To just to learn how how it works. But since then, I have not built anything else in it. I know you've been fussing and fiddling with it as well. Right? Yeah. I've been I've been working on a a fun little side project for myself. You know, I'll go deeper into maybe this thing once

it's available, but I'm building on a nice little app it. Myself to scratch one of my own images of, some video needs that I have, and I figured this would be a fun option. The first thing I built was basically, again, very similar to the the Check My Hair app that you were doing where I wanted to make sure that when I framed up, it. Especially with multiple cameras. Right? I got camera 1, camera 2, and I'm thinking about adding a 3rd camera in here, Wes. I'll have to talk to you a little bit about that later. Not not a, expensive fancy camera. I'm gonna use an iPhone, just an extra iPhone. Right? But, You know, it's hard to make sure you're framed up for all socials and everything. So what I did is I built a little video, it. Window with just, you know, get user get user media.

Then I overlaid CSS using math it. To determine the 16 by 9 vertical frame that gets cropped, if you were to instead of it. Taking your camera and rotating it, many times what we do to avoid rotating your camera for vertical video, because it. We're oftentimes doing horizontal video too because we're just doing, like, a straight crop.

A straight straight crop can be kinda hard, it. To make sure you don't cut anything off. So what I did is I I put in essentially, like, a c CSS overlay that both cropped areas for, like, it. You know, the types of header and footer information that gets put in social apps, but also 16 by 9 and, both vertical and horizontal.

And and that way I could line myself up to make sure I was in the the right spot. But I'm doing a little bit more with it now, and I I'm doing it in Tori.

And because of that, I thought this was a good opportunity to maybe dive into the differences between Tori and Electron if you were looking into build a desktop app. Maybe some of these Modern things that have happened in both of these platforms was we're actually steadily approaching the release of Tori two point o, which includes a whole bunch of Stuff like mobile development.

So I I guess I wanted to take some time to maybe talk about, yeah, what's the difference and kind of what some interesting stuff that Electron has going on as well.

And some of my the bumps that I I felt when working with both of these platforms.

So, you know, a lot of the times when people hear, Tori, that's s t a u r I. If you've heard of it, you might be thinking, alright. This is the Rust version of Electron. I think that's what a lot of people think of Tori And and that's kind of how it's been built. But, really, the what's the big thing beyond it being, like, a Rust, a Rust connection to building, it. Desktop APIs and and using your system APIs.

Beyond that, the cool thing about Torey is that it uses it. The web views that come in baked into your OS.

So it. Where electron is is coming with Chromium, you kind of know you're getting a specific Chromium release it. In a Chromium bundle that is tied to, essentially, the the version of Chromium that you're shipping with Electron.

It. With Tori, it's using a web view that comes from the OS itself oftentimes tied to it. The install of the OS.

So because of that, your Tori apps are not only going to be it. Faster most likely because Rust can be very fast. But, also, they're going to be smaller because You're getting to use the web view that comes with whatever system that you're working on.

And I think it's a really interesting approach it. That has it's not without its own challenges by any means.

There there's many times where bundling a version of Chrome Into your application would make things a lot easier. In fact, I I've had some some little weird things here and there with the the web view on on macOS, But also, you know, okay, the WebView on macOS is web based. It is WebKit based. It's called, it. It's called WKWebView.

It's the WebKitWebView.

That's the that's the browser that a Tori app uses, where a A browser for Tory is not a WebKit browser for all distributions because it. What is the web view in Microsoft, do you think?

Oh, oh, please tell me it's Edge.

It is Edge. Okay. Good. It's not like some like, I know that, like like, Microsoft Outlook still uses, like, a weird version of Internet Explorer. That's why HTML emails are so awful. That is. Yeah. And and so

you're you're instantly now at a situation where instead of bundling a Chromium browser it. At a specific version, you're now kind of at the whim of the OS in terms of what that WebView ends up being. It. And what's interesting about this is that it uses a platform called Wry, w r y, that's made by Tori. And they say it's a s cross platform, a WebView library built in Rust.

And for Linux, it uses it. G t k r s, which is WebKit.

K? So that's a WebKit based.

In macOS, it uses wkwebview, as we said. And in Windows, it uses Chromium because it's Microsoft Edge.

And, again, That's a little interesting. And now what's what's even more interesting with Tori two point o is it's getting into mobile.

And, again, with mobile, You're at a Chromium based for Android, and you're at a WebKit based for iOS.

Again, you're at the the whim of it. The the web view itself.

So that's, like, one of the big difference between the 2 platforms besides the server side language that you might be writing a some of the code in because, by all means, you can use node APIs in Tori as well. I wanna use FS to access the file system in Tori.

You can do that. It's not like it's not like at the moment you're interacting with the system, you have to write Rust code.

You can, in fact, Get quite a bit done with the TypeScript stuff as well. Let's talk about the experience of of writing apps in both of these.

I think the The thing that that the essential experience of electron out of the box can be encapsulated it. By going to electronjs, .org.

So electronjs.org, clicking on their docs, and then clicking on the quick start. It. Because I gotta tell you, whoever decided to name this quick start did not, look at how how long of a process this is. This is less of a quick start and more of a, turtle turtle start, I suppose.

It it's it's it. With Electron, you're you're most likely adding Electron to an existing project. You have a project up and running already, And you're attaching it so that it renders in a Chromium web view, essentially. Yeah.

A Chromium browser.

Everyone always complains about Electron having its own version of Chrome, but that's also a bit of a benefit. The downside is that it's huge And it takes a memory. It's like running like at any given point, you're probably running like 6 or 7 different electron apps on your thing. And they each take up a couple 100 megs. Right. And they also ship their own instance of Node. Js as well.

So it's kind of doesn't make a lot of sense to duplicate all of that. But as a developer, it's kind of nice having the ability to just like, I'm only targeting this one. You can literally turn on experimental features if you want, and it's your own little sandbox to run everything. But with with Tori, it just uses The built in web view of whatever UI, which is the apps are much smaller to go on. And it's not that big of a deal To support different browsers. Right? Because, like like, we're doing that as web developers already.

So the only reason it becomes a bit of a problem is that the web views that are on native platforms are not as full featured as, let's say, Chromium is.

So, For instance, this is a a small personal example.

You want to use Git display media. Git display media on any browser has a pop up window that Selects which desktop you're screen recording. That's the API for working with screen recordings. K? So I do get display media on the web. A little window pops up. That window allows me to select. That window is not a part of WKWebView.

That little window, Part of Safari.

That little window, it's part of Chrome.

So if you wanna use git display media in wkwebview, guess what happens? W w w k WebView returns. Hey.

Permission denied. Why? Well, the browser and the WebView support supports it, it. But there's no interface to accept that permission, or there's no interface to Oh. Choose the screen. So you know what? Because it's returning a false for that interface, we're just gonna act like the permissions denied. So what you end up having are situations like that, it. Where I have an application that works better in Safari than it does in with w t k web view even though they're essentially the same version of Safari, which is a a tremendous bummer, especially when you're trying to build a screen recording app.

So, get around that then. You know what? It's a modern version of WKWebView is supposed to now it. Prompt the OS level to ask for permission instead of, like, a browser level. Yep. Mine doesn't. And I'm Wondering if that's because I'm on a beta version of macOS and not the the full release. So, unfortunately, I'm waiting for this full release to come out Before I'm submitting a bug report to see if that's the proposed solution from the the Tory team, and bless them for even, taking the time to talk to me about this it. Because we've had long conversations on the Discord about it. The proposed solution was essentially write my own OS level handlers to, Like, kind of trick the OS to say, yes. I I really do accept this permission, and, ultimately, what I might end up doing, which I haven't Had the time yet. What I might end up doing is going with a Rust level library to do the screen recording aspect Okay. It. In abandoning the browser APIs to do the screen recording because there's plenty of, Rust projects that work well enough with macOS CS. To accept those permissions on an OS level instead of using git display media. But if I was already using git user media for the webcam stuff, which, believe me, It's a lot nicer than using some of the the native libraries that exist out there.

I I thought, like, oh, I could just keep it all web web based. But Yeah. Yeah. I could see that. That's that's interesting that that would you would run into that, but I guess it makes sense. And if you're running a desktop application,

You shouldn't have to be confined by the limitations of the browser. Right? Right. Yeah. And there's a lot of interesting things like that where, You know, you will have to do some digging. For instance, another little hiccup I had was I published the app, and now all of a sudden, the app, The webcam get user media also fails the permissions. Comes back with an error. Says there's no devices.

Why? Well, You have to do some digging. There's not like a, checklist. It doesn't tell you what went wrong. You have to do some digging, and then you have to add some, it. Permissions, some info dot, p list files to your application to make it so it has those permissions on an OS based level.

So And, end of the day here, you're you're having to do a lot. And because the Tory audience is smaller, because the amount of people who have published large applications on Tory is it. Smaller. You end up just like you would with any project that has less of an audience, you have less of a userland Found solutions. Right? Electron, tons of people have been using Electron. There's a lot of versions for it, and that is really One of the big bonuses of Electron. Because Electron is more mature, you end up having more solutions, it. More demo code, more blog posts, more YouTube videos, whatever.

And the docs are more robust too. Granted the docs for Tory are easier to parse. It. The docs for Electron cover a lot more. Yeah. So that that's in in my opinion, comparing the 2 is a complete, I wanna say novice in both of these because I've used them both.

Tory has a nicer developer experience in many ways, and I'll get into that. It. It is faster.

It is smaller. It is, you know, the the hair, and Electron is the tortoise in many ways. It's Chunkier. It's slower.

It's more difficult to get up and running. Like, I'm telling you, this this quick start, has more words in it than, you know, it it's It's a like a tome, the quick start, where the quick start in Tori is NPM create Tori app, and then it has a wizard walks you through it. Would you like a, oh, excuse me, sir. Would you like a a Svelte app? And and with that Svelte app, would you like TypeScript? It's like, yes. Sure. Absolutely. I would love all of that.

And and and it does a really good job. Would you even like to write Rust in this project, or do you wanna just keep it in TypeScript? It. You can tell it all of these things in the wizard. The app it spits out for you is great, fires up in no time. The, save it. Automatic refresh stuff, you have to do no tooling, and it just goes, goes, goes.

So those are the things that are are wonderful about Tory.

Now I would be remiss to talk about Electron Forge, which Electron Forge is they're they've they've reached explicit about what it is. Right? But it is, to quote them, a, a tool for packaging and distributing electron applications.

It. It unifies Electrons build a tooling ecosystem into a single extensible interface so that anyone can jump into making Electron apps, Which sounds like the solution for the thing that I was just talking about. 1, getting up and running, doing this stuff like the CLI stuff that makes it. Working in electronic pain, the kind of stuff where you're doing release processes or signing or those types of things. And And so it it says that it does application packaging and code signing, customizable installs for Windows, macOS, and Linux, automated publishing flow to cloud providers, boilerplate templates for Webpack and TypeScript, which I I'm over WebKit. I'm just gonna say that right now.

Native Node JS module support and extensible JavaScript plug in API. So it.

I did not get to try Electron Forge 6, which it's new ish.

And by new ish, it came out last year, But they still have a banner up for saying it's, like, it's announcement. Here's the big announcement, Electron Forge 6.

But, however, this came this came out over a year ago. Right? It. It it kind of encapsulates part of what's wrong with with Electron. Right? You have the behemoth that is Electron. It. The Behemoth Inn, they released this thing to make the process of getting Electron easier to get up and running, but it's not part of their install or their quick start or any of this stuff. It's like a it. A side banner to click on this thing, and Electron Forge started out as a userland solution to these types of things.

So us. If you are the type of person that likes streamlined information, Electron is going to be harder, but there's more information.

So Elektron's easier. Elektron bundles a browser, so it's easier. But Tory

It's faster, so it's easier. You know, we see this over and over again. It's like the, like, faster version of something is not the one that will always win. It's it's almost always the easier one.

And like not to say like it would Like, Electron is awesome. And Versus Code is Electron, right? Versus Code is as fast as heck. I know people are like, oh, it's slow and whatever, but man, It's it's a really good app and having a back end in Node. That's one thing I ran into in Tori is that like I'm a Node developer.

I was able to get by on some Rust, but as soon as I wanted to reach for like a back end node package, then I was like, oh, Like you can run like child processes, but then you're bundling all of Node with your Tori app and then Spitting it out from Rust to a child process in Node. And now that we're talking about all this isomorphic JavaScript like web streams is a really good example.

You are doing video recording.

You could send that stream from the browser to your back end, and it's the same APIs to work with those web streams on the back end and on the front end. And that is really nice, especially when you're using other NPM, installing a package to work with standardized web streams.

You don't have to adapt it for Rust or anything like that. So, like, that's why Electron is so popular, and I don't think it's going anywhere. Oh, yeah. Certainly not going anywhere.

But I will say after implementing because I did one of my my things that I like to do is implement the same app.

Yeah. It's a great way to learn. Right.

So I implemented the same app in Tori and Electron. And at the end of, like, a couple of days of working in both of them as a novice in both of them. If you were to if you were to say, Scott, it. Which one of these would you prefer to keep working on? I would easily say like, without question, say the Tory version. Really? Because it was it is a nicer platform to work in. And, honestly, you know, the Rust stuff A lot of people are saying, yeah.

It's great until you have to work into the Rust stuff, but the Rust stuff isn't that bad. And, honestly, once you once you get a little of the Rust Under under your belt. Yeah. It feels pretty good. And if I wanted to even just, let's say, basic stuff, it. What you do, you send some a a text string from a Svelte application.

Send a text string it. To the Rust process and write that to a file, that is not hard, and not hard in terms of, like, You can once you get that going, you can probably really figure out a lot of things. Because to connect from the UI portion of it it. To the back end portion of it, you're running just essentially an invoke command. You import an invoke function.

You're basically telling it what you're invoking the name of the thing and the data you're passing in there. Bingo. Bongo. That information is sent to Rust. You can do anything with it. That function's just straight up defined in Rust. And then You you can do whatever Rust stuff you need to do from there, writing a file or anything. So in my experience, Especially, let me say, especially with chat GPT to help me out, to say, if I'm if I'm working in Rust here, what should I be looking at to do x, y, and z? You know, I'm looking at doing this in Rust. I wanna write a file.

And it's really easy to reason about, and then eventually you get comfortable. You solve the red Quicklies and you get your process going.

I actually found that when when I was doing Tori, the hot potato of back end front end, I found was much more streamlined. It didn't feel like I was trying to throw stuff from the front end Back end and the back to the front with RPC. I felt like I was just calling functions on the front end. That's true. Right?

Totally. Yeah. And it felt very much like that. And if, there is, like, even as far as even the the TypeScript stuff goes, there's permission space. So, you know, you have to enable what types of things the application's able to do. Even if you're writing that code in in TypeScript, you'd say, alright. This application does give me access to the file system, it. So then I can write that code and note to do an FS or whatever.

And the the Torey dogs are good. The sir they're searchable.

They're readable.

I think they you know, if if I wanted to find out how to do simple stuff, like, let's talk. I wanted to figure out how to replace the app icon. That was incredibly easy. In fact, there was a little plug in where you you gave it a path to an image, and it spit out all of all of the stuff that you need for that without you having to do anything. So, it. Like, if we're talking wizards and and CLI tools and stuff like that, I found the Torrey project to be light years ahead. That said, it. I I know I'm omitting the fact that I did not get to work in, Electron Forge, because, again, it it felt like an entirely separate project is really why. And, like, if I'm learning 2 projects, I'm gonna stick maybe to the the cores of things instead of, like, alright. Next thing I wanna learn it. The extension to the extension. So Mhmm. If I'm way off base here on the electron stuff and and you're an electron pro it. Who has experience with Electron Forge and and you have a lot of positive things to say about that experience, I I would love to hear from you because it. I had a harder time getting up and running with it. So in my limited experience as a novice in this stuff, I found Tori to be a nicer experience to work in and perhaps a good introduction to working in a Rust based system. So if you're looking it. To build an and and you want a nice little starter kit kick you out a a Svelte app, and you can build a little desktop app and say, voila, I made a desktop app.

Hey. It doesn't it doesn't get a lot easier than this these days. That's for sure. Because I even tried believe it or not, Wes, I tried to implement this app Using Xcode and, native Apple APIs.

And, you know what? I I got as far as, like, Here's what I got. I end up getting a select list style interface because it's not a select list, but a select list style that could it. Choose which webcam I was looking at and display that webcam. What I couldn't get was I couldn't get multiple webcams at once For some reason, it and it it's entirely my fault. I'm not a, I'm not a c Prognus. It was swift. It was like all sort I I was a complete fish out of water in that universe, so, it. It's definitely my fault, but, Yeah. It was tough. It was tough to get that running. So either way, these are 2 really great options. If if you're looking to build desktop applications, honestly, you could use either of these things and be totally happy. And if you wanted it. Maybe, like, a very specific Chrome API that only exists in Chrome and a later version of Chrome or something.

You could a ship in Electron app knowing that every single one of your users is not going to have a problem. If I were to ship this app with Tory, I'm not a 100% convinced it. That every single one of my users would be on the right version of Mac OS to have the right version of that w k web view and, like, that that does make me a little uneasy. Now granted, it's Personal projects, I'm not super concerned about that, but food for thought. Right? You know, it's another project I was just looking at the other day that Moved from Electron to native was this thing called 2 f Hey,

which Mhmm. I haven't installed it yet Because I feel a little uneasy, but you know when you're on Safari on your phone and you get a 2 factor token texted to you? I I know you're not supposed to use text messages for 2 factor token.

So many services don't have anything else other than texting.

So You have to, like, copy paste it. And I find that to be really annoying because I love when I message autofills it right.

So there's this There's this project called 2F Hey, and it apparently does it for Chrome and Brave and Firefox as well. And it's something it's like a it was an Electron app. Now it's an Xcode native app and It's open source, which is cool. And then you you can pay for it as well, which is I think it needs to be an open source if you're letting them run Access to your local Imessage.

But Yeah. Yeah. You think I should install this?

I don't know. I don't know if I Seems sketchy.

Yeah. And for something like that, that's where I'm like, you know, I'll I'll throw, You know, a little bit of red flags there. I'm sure it's fine, but in the same regard, for some reason, stuff like that. I wonder if I could just make something myself.

Your database on your Mac is very easy to find. It's at library messages forward slash chat dot d b. Oh, you just watched that? So you could just Maybe I'll just write a note or just yeah, I'm sure it's,

edge cases all the way down. But dude, that's not how my brain works. My brain works like this. I hear of a problem, And I think that will be easy. Let let me tell you. That'll be easy.

Alright. I'm gonna I'll do it.

Yeah. It. Awesome. And I'm gonna I'm gonna work hard on this this video app. I'm gonna try to get a solution done. The Apple event is going on right now, so chances are the it. The full version of the OS will be out, then I can discover if my thing is actually, working. What I wanna do, Wes, and I'll I'll get you a working build of this app. It. You can try it on your machine too, and we'll see if it's a me thing because it could be a me thing. We're all installed on Courtney's computer or something.

It. Because, you know, you never know with these permissions anythings if it's a me thing or a a what thing. So Mhmm. But y'all will like this app. I'm gonna make it I'm gonna make it big, and then we can talk all about we can do a a little post debriefing of,

lessons learned. Alright. Sounds good. Thanks, everybody, for tuning in. We'll catch you later.

Peace. Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.