Tauri Vs Electron - Desktop Apps with Web Tech

all of that. But

And 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.

The built in web view of whatever UI, which is the apps are much smaller

like at any given point, you're probably running

it uses They're readable.

.org.

You can, in fact, 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, installs for Windows, macOS,

the ability to just like,

to run everything. But with with Tori, it just uses

in a Chromium web view, essentially. Yeah.

Electron having its own version of Chrome, but that's also a bit of a benefit. The downside is that it's huge

thing. And they each take up a couple 100 megs. Right. And they also ship their own instance of Node. Js as well.

of of writing apps in both of these.

process this is. This is less of a quick start and more of 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, It. With Tori, it's using a web view of electron out of the box can be encapsulated And, Send a text string it. To the Rust process and write that to a file, do you think? it. In a Chromium bundle that is tied to, It. It unifies Electrons build a tooling ecosystem it. By going to electronjs, streamlined information, 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.

it. G t So wkwebview, Get quite a bit done with the TypeScript stuff as well. Let's talk about the experience the server side language that you might be writing a some of the code in because, by all means, you can use node APIs But I will say after implementing because I did one of my my things that I like to do is implement the same app.

you're now kind of at the whim of you're you're instantly now at a situation where instead of bundling a Chromium browser

as a developer, it's kind of nice having

Everyone always complains about

it takes a memory. It's like running

Chromium because it's Microsoft Edge.

And

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

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 essentially, a A browser for Tory is not a WebKit browser a nicer developer get around that then. You know what? It's besides and Linux, automated publishing flow to cloud providers,

So the only reason it becomes a bit of a problem is that the web views that are on native platforms it. With Electron, guess what happens? explicit about what it is. Right? But it is, to quote them, a, 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.

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.

to go on. And it's not that big of a deal I actually found that when when I was doing Tori,

Again, you're at the the whim of

So it's kind of doesn't make a lot of sense to duplicate

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.

like 6 or 7 different electron apps on your NPM, installing a package to work with standardized web streams.

for Linux,

To support different browsers. Right? Because, like like, we're doing that as web developers already.

it. At a specific version, it. The the web view itself.

which And I think it's a really interesting approach save it. Automatic refresh stuff, you have to do no tooling, and it just goes, goes, goes.

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

instead of, like, a browser level. Yep. Mine doesn't. And I'm Beyond that, I'm not a 100% convinced templates for Webpack and TypeScript,

which is a a tremendous bummer, 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, you kind of know you're getting a specific Chromium release

that work well enough with macOS but there's more information.

CS. To accept those permissions on an OS level WKWebView.

W w w k WebView returns. Hey.

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 it. It's called WKWebView.

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, 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, a, A lot of people are saying, yeah.

The webcam and you're at a WebKit based for iOS.

instead of using git display media. But if I was already using git user media for the webcam stuff, which, believe me, Peace. Head on over to syntax.fm

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 it. That has it's not without its own challenges by any means.

That little window, Part of Safari.

That little window, it's part of Chrome.

I haven't The thing that that the essential experience as we said. And in Windows, it uses

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,

And the docs are more robust too. Granted the docs for Tory are easier to parse. It. The docs for

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, 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, your application

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, But also, And, Century who presents this podcast.

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 CSS using math where it. Which one of these would you prefer to keep working on? 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,

I published the app, and now all of a sudden, the app, So electronjs.org, the cool thing about Torey is that it uses

you end up having more solutions, 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 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 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 k r s, which is WebKit.

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

it. More demo code, more blog posts, more YouTube videos, whatever.

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.

I would easily say like, without question, say the Tory version. Really? 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 So And don't forget to subscribe in your podcast player or drop a review if you like this show.

easier. Elektron

Spitting it out from Rust to

Like, Electron

It's it's a really good app and having a back end in Node. That's one thing I ran into in like a back end node package,

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.

all of Node with your Tori app and then hot potato

that is not hard, Head on for 2 century dot I o

it would Tori is that like I'm a Node developer.

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

bundles a browser, so it's easier. But Tory a modern version of WKWebView you can probably really figure out a lot of things. Because it. Where electron is is coming with Chromium, desktop 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.

You could send that stream from the browser to your back end, and it's the same APIs to work with those web streams So there's this There's this project called 2F Hey,

as a novice in this stuff, I found Tori to be a nicer experience to work in and perhaps a good introduction Wondering if that's because I'm on a beta version of macOS

Like you can run like child processes, but then you're bundling I'm only targeting this one. You can literally turn on experimental features if you want, and it's your own little sandbox 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

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.

on the back end and on the front end. And that is really nice, especially when you're using other

Because it was

man,

then I was like, oh,

You are doing video recording.

the

You don't have to adapt it for

a child process in Node. And now that we're talking about all this isomorphic JavaScript like web streams is a really good example.

and not hard in terms of, like, You can once you get that going,

I was able to get by on some Rust, but as soon as I wanted to reach for

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, experience in many ways, and I'll get into that. It. It is faster.

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

of back end front end,

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

I found was

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.

faster version of something is not the one that will always win. It's it's almost always the easier one.

It's faster, so it's easier. You know, we see this over and over again. It's like the, like,

And Electron

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.

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?

And like not to say like

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, There there's many times where bundling a version of Chrome that comes from the OS itself oftentimes tied to 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.

So Elektron's write my own OS level handlers to, You know, those are the things that are are wonderful about Tory.

the craziest,

Desktop applications. Wes, have you had any experience building desktop apps in any regard? Oh, yeah. Yeah. Like, we did a a Tori episode, web views that come in baked into 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, So if you wanna use git display media in wkwebview,

A straight straight crop can be kinda hard, in Tori as well. I wanna use FS to access the file system in Tori.

Monday. Mon Monday. Hey. Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflow, breakdancing, soft skill, web development, the hastiest,

Then I overlaid Totally. Yeah. And it felt very much like that. And if, So that's, like, one of the big difference between the 2 platforms I gotta tell you, whoever decided to name this quick start did not,

out? And I had built a

the tastiest web development treats coming again hot. Here is Wes Barracuda

And because of that, I thought this was a good opportunity to maybe dive into the differences which includes a whole bunch of Stuff like mobile development.

What, like 6 months ago when Tory first came

a Rust connection to building, it. Desktop APIs and and using your system APIs.

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,

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, 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, 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.

So I thought, let's just build something in 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

Boss and Scott

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

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.

But, especially when you're trying to build a screen recording app.

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.

to learn why you need error and exception handling in your applications if you're pushing stuff out to users. So check it out.

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 it. Faster most likely because so that anyone can jump into making Electron apps, So,

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

just an extra iPhone. Right? the 16 by 9 vertical frame that gets cropped, if you were to instead of

which is really annoying, so it doesn't show you the full frame depending on the aspect ratio of the video.

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 Electron is the tortoise in many ways. It's Chunkier. It's slower.

Welcome to Syntax on this Monday. Hey, Steve Treat. We're gonna be talking about building desktop applications K? So that's a WebKit based.

CSD.

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

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,

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.

as well. And it's something it's like a it was an Electron app. Now it's an Xcode You have to, like, copy paste it. And I find that to be really annoying because I love when I message autofills it right.

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 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

Yeah. And for something like that, that's where I'm like,

it. It's definitely my fault, but, And, again, with mobile, for all distributions 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 It's more difficult to get up and running. Like, I'm telling you, this this quick start, turtle turtle start, I suppose.

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

native app

you just watched that? So you could just Maybe I'll just write a note or just yeah, I'm sure it's,

you know, I'll I'll throw, a tool for packaging and distributing your OS.

Your database on your Mac is very easy to find. It's at library messages forward slash chat dot d b. Oh, So

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

and

honestly, it. To determine

and it apparently does it for Chrome and Brave and Firefox

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, Why? Well, You have to do some digging. There's not like a, is supposed to now it. Prompt the OS level to ask for permission Tory has Native Node JS module support and extensible it is a nicer platform to work in. And, they're they've they've reached

Yeah. Yeah. You think I should install this?

you know what? I I got as far as, like, 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.

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

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.

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, 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 solution to these types of things.

let me tell you. That'll be easy.

Here's what I got. I end up getting proposed solution from the the Tory team, and bless them for even,

Access to your local Imessage.

Forge 6, which it's new ish.

JavaScript plug in API. So it.

boilerplate

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 You're at a Chromium based for Android,

which Electron writing a file or anything. So Rust projects look at how how long of a A Chromium browser.

I did not get to try It it's it's

Now I would be remiss to talk about Electron Forge, You're basically 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 get user media also fails the permissions. Comes back with an error. Says there's no devices.

into a single extensible interface between Tori and Electron if you were are not as full featured as, let's say, Chromium is.

So us. If you are the type of person that likes It's a lot nicer than using some of the the native libraries that exist out there.

I I'm over WebKit. I'm just gonna say that right now.

Forge is in my experience, In macOS, it uses electron applications.

So

it. The

it. The install of the OS.

because which 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 the version of Chromium that you're shipping with Electron.

It's the WebKitWebView.

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

it. What is the web view in Microsoft, So because of that, I think the It is smaller. It is, you know, 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? for a full archive of all of our shows.

That's the that's the browser that a Tori app uses, And with us as always the Rust Electron is going to be harder, your Tori apps are not only going to be 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.

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.

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, honestly, you know, the Rust stuff to make it so it has those permissions on an OS based level.

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

the the hair, built in Rust.

You're getting to use the web view that comes with whatever system there is, like, even as far as even the the TypeScript stuff goes, there's permission space. So, you know, you have to enable 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.

that you're working on.

you know, okay, the WebView on macOS is web based. It is WebKit based. It's called, clicking on their docs, and then clicking on the quick start. It. Because

Into You want to use Git display media. Git display media on any browser has a pop up window that Selects fast. But, also, they're going to be smaller because 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.