Desktop Apps in JS × Electron and Tauri

I I've had my eye on Tory for a long time. Like, I mentioned, maybe even, like, And then if you want to dive into any of these issues more, You just select the issue, and you get so much more whether,

to launch this thing as a mobile app using WebText. So, Welcome to Syntax. On this Monday, hasty treat. We're going to be talking all about desktop apps using JavaScript or TypeScript, if you, prefer, using Electron or Tori, which are 2 of the,

I I did a,

a, like, We know it's going to be a desktop environment. You kind of know, you know, if if you're targeting Mac specifically, like, what exactly the user has at their fingertips.

That's what I'm going to be using Tory for right now.

we'll see. The app is in good shape. So once I get the app into it, a Tori app, I'll see what it's like to actually install on a native device.

React Native for it, obviously, because I like my self kit version of the site. So I was thinking, Man, this would be a great opportunity now that Tory has added mobile support 2 nights ago. So, fur is is not fun as Safari is to use on a daily basis.

I I I really literally just fired it up, installed it, and got the intro running meaning that you don't have to be like a Rust expert to use this thing.

where I was screenshotting things, and I was saying this is not electron. And people are like, what is going on? What is this thing?

to get up and running. I am only familiar with Electron here, so I'll speak to that.

users with this performance cost. Yeah. Just because we want to turn on some flags, then, you know, maybe that's not a great trade off. Last thing I have here is just tooling, Head on over to syntax.fm

is usually a pretty advanced build target compared to Safari. So, hey, shipping an app to, essentially, you know, file system or the stuff that you typically couldn't deal with on the client side in an Electron app. You are sending information back and forth essentially between Mhmm. The the back end and the front end. Yeah. That that seems like it could Be kind of annoying to to have to and, obviously, I guess, like, all desktop apps are like that, but imagine you didn't have to. Imagine you could, everything that you have to do on Apple's web UI that is, like, really bad.

Because, like, I'm looking at my desktop application right now, and I've got Notion

can't Electron just do this? Like, why is there not an option in Electron to just use the built in browser instead of shipping entire.

Chromium, which

iOS to the App Store. And and even, like, using Apple APIs, like the payment API is just a giant pain in the butt when you've used a lot of other better systems before. So, Yeah. We'll we'll see. My other question with Electron is, like, why

It performs super well on the m one max the m two or whatever Max. It performs oh, this this would be way better as a native iOS app because it feels fine.

But I I do you know, I I don't know. I am a little bit

That that feels like might be a little bit more

and Missive And I usually open up either hair.westboss.com

the supporting of multiple targets. Because in the past, when we've talked to folks who use Electron, concerned about, and it has a a Rust core with a TypeScript So I I've had my eye on it for a very long time, but I haven't necessarily used it for anything specifically.

And I have Chrome. I'm like, I probably have, like, 8 instances of Chrome running on my computer.

pain in the butt there, but I guess if you're saying, alright. We're going to burden all of our API,

to do

Overall

a web renderer within the app that essentially uses Safari or Chrome based on iOS or Android. So the this kind of thing has been around for a while, just not in the desktop space in the same sort of way.

Mhmm. To view your webcam. Like, that seems silly. Wouldn't it be better if you could just pipe in a browser into the frame,

And I think that is the whole thing about it. If you're building good apps using this tech, people aren't really care that it's not native native code, and you can truly then ship Tori and Electron.

folks on the podcast to talk about Missive. Once in that, that's a a web view based native app

face. So that's, like, really neat. Now one of the big things that you'll hear with Tori is that it's Rust, My name is Scott Talinski. Kim, a developer from Denver. And with me as always is Wes Bos.

you know, we we had the missive, really super well on the Apple Silicon. So, like, if you could get rid of using Chrome in favor of Safari for those types of things. Yeah. That seems like a perf upgrade almost instantly just because of how nice,

It's probably good to familiarize yourself with Rust before getting into this because there is an aspect of, you know, cargo and and those aspects of Rust where you're dealing with Rust packages.

And even though it's not using

Also, like, like, memory as well. Like, people are saying, like, yeah. Oh, you just You're shipping, like, 600 megs all of your APIs

you're saying, alright. Use whatever native browser is on the given system

for Linux, it uses something called WebKit GTK, which is basically just a WebKit renderer, a social story and, mobile apps specifically

a application, a web version, a desktop version, an iOS version, Android version on the same code I would say, the the 2 platforms out there for doing this type of thing nowadays.

and then have a layer of APIs to do the native stuff. And that's exactly what what Tori is. And I guess the downside to that is there's you have to support multiple browsers, but, like, Newsflash, that's what we're doing on the web already. So and it it seems to be working okay. Yeah. There is some definite downsides there in terms of, like, your support targets.

Rust, not rust. Rust. Yeah. At first You might have to let no rust. Yeah. At first, I saw that because I was like, oh, this is cool, and it says it has a Rust back end. I was like, Then I'm sure that, like, very much like React Native has a lot of packages that allow you to talk to native, you can have elevated

that exist.

is that Tori uses the built in web view that's built into whatever operating system that you're in. So

I'll link to that in the show notes if you've never heard of that. Safari so it uses Safari for iOS and Mac. It uses WebView 2 for Windows, which is an Edge Chromium target.

This concept has been around forever in

But, they did add recently, like, very recently, iOS and Android support, which means that you could truly write once shipped to Via Cordova or whatever, but baked into the platform Safari is in that regard.

Like, I kinda like having Node. Js as my back end because that's what I know, and all my packages are a node and all that. You know? And, like, I'm like, am I gonna have to figure out, like, what's the equivalent of of Rust? And the answer to that is is no, surprisingly,

With Electron, you're You're bundling in Chromium essentially into the app, where with this,

back end API. Maybe we'll talk about that. So in electron,

As a way to describe what Tori is You can mark it as resolved. You can set it to be a GitHub issue and so much more. So if you want to try all of this, head on over to century.i0 And people can sometimes feel like a WebView based apps are less performant or less nice, but I gotta say, using Backbone,

your apps can be quite a bit smaller.

on what's called, like, a, the main process.

And I use that app every single day, and I never ever think to myself, So if you're out there interested in learning some of this stuff, I built

a link maybe in an app, and it opens in what's called a web view, which is like a So this is using the built in browser to the operating system, which is important to know because

One of the things I love about Sentry is giving me the confidence that if there are big issues affecting users that I can get on them really quickly,

a convince your boss section or all of that type of stuff. And, I think that is really cool way to approach marketing as you, the developer. You build the components that match up with all of the slices in the CMS, And then there is this 3rd file called preload,

While we have a new site launch, and that always brings about its own special type of bugs and special types of things you don't find. And me, personally, and use that as essentially a web view.

change this photo here or what happens if we add a, frameworks out there as Electron is probably the biggest one. Obviously, v s code is built in Electron. Polypaint is built in Electron. There's tons of really big applications out there.

and get 2 months for free. Thank you. Let's talk about our other sponsor, Prismic. Prismic is a headless CMS that let's talk about the marketing aspect of it because marketers love using it. Of course, you, the developer, are gonna love using it.

I was firing up a Tory up the other day. Yeah. I'm interested to hear, maybe 2 years ago, Where if you ever think about you open something, And and especially once breaking hits and, you know, next thing you know, It's gonna be like skateboarding or something. There's got there's there's definitely a market for that type of thing. So I'm gonna tune it up and and just get it on the App Store, and,

Monday. Monday. Monday.

soft skill, web development, the hastiest, the craziest, the tastiest TS web development treats coming in hot. Here is Wes, Barracuda,

0 point whatever in alpha. So to see it finally move along to this point is is very exciting. So let's, before we get into these platforms. Let's talk a little bit about 2 of our sponsors today. The 1st sponsor is Century at century.i0.

their issues because it shows you how many events, when it was last seen, how many users it's affecting, if it's an unhandled or handled error, an exception, if it's a new issue, if it's a regression.

and use the coupon code tasty treat all native platforms So because of that, like I said, you get smaller apps. They say that the, a Tori app can be less than 600 kilobytes shipped out the door. So, You know, just goes to show you that by, not including a whole browser, your app can be much smaller.

But the kind of cool thing about it is that, This app to Tori just to

really quickly unless

It's a great place to See all of your errors and exceptions happen in your application. In fact, like I said, in previous ad reads here, we've been using this pretty substantially lately considering

some of your thoughts in in,

I've actually been having my eye on Tory since it was at, like, version

They have a fantastic landing page. You have to go check it out. Even if you're not Interested in this. Just check out the landing page. It's awesome.

Yeah. Alright. Let's get on into it.

So building desktop applications, Awesome. Yeah. So the other day,

what browser, what operating system, what user in particular, or whatever type of data you want to attach this thing too.

Especially if they're affecting a lot of users. You see it really happen just about instantly in their, native components like React Native does, that's, like, the big difference there. It's essentially just rendering a website,

instead of making pages, you make components, and then you let the marketing folks just put those slices together, on the user's computer, the entire

and easily at a glance.

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

Yeah. I mean, in my short time using it, I haven't done any rest with it whatsoever, but that doesn't mean you won't necessarily. Yeah.

for getting file paths, for spawning off processes.

support. And I was like, well, what's the sidecar? So sidecar is just the ability to

like, remember, meteor was had the, like, ability just to save,

for saving files to the file system for copying the clipboard, for reading reading from the clipboard,

All of those things are just JavaScript APIs that you run-in your it real In just a second,

you could just run that as, like, a a shell script directly from the client. So it doesn't look like you need to know very much rust at all. It seems more of just like config And, like, for for one example for my application is I was, It's just like I have to switch it to another webcam then switch back to make it work, and I got frustrated by that. So I was like, how sick would it be if I just had a menu bar application? I click on the icon, and it pops down my webcam, and I can select from it. Pretty simple little application. And, sending notifications,

back to Killan from polypane on, it just it just Kept rattling around my brain.

Honestly, like, this This seems a lot better. So, like, let's go for, thing that your platform used to be built on? Why am I blanking on that? Meteor. Meteor. You know,

Yeah. Do you wanna know what you wanna know what else Meteor was ahead of the game on? What? Baked in the Meteor was like a one click deploy as mobile app even though used web view, it was still. Yeah.

and then somebody was like, oh, like, that's kinda weird, the back end's in Russell. Like, yeah. They said maybe Dino, but he says They said, no. We have, like, sidecar because of 2 things. 1st, permissions for access to the file system like Scott was talking about earlier. So they're also just like the Electron.

client, which is wild to me. And that kind of reminds me of,

way ahead of it. And then the other thing I found out is because, like,

Or even if you need to do something like git commit,

as well if you use that or there's I know there's other things out there, but I think that these are the the 2 big contenders going forward.

for me. I I'm it's a Supabase based app, so I'm interested in that as well. It it's fun. I had, basically, I if my breakdancing app that I've been working on for a long time and now that breaking is gonna be in the Olympics, I'm like, you know what? Yeah. I bet there is actually a market for this app if I just tuned it up.

Let us know your thoughts

Tori to see to see just how how that feels,

Cool. Well, I hope you found this to be interesting. If you have, like, any cool apps that you wanna make for desktop, hit us up on Twitter. Let us know what kind of types of thing you're you're thinking about or what types stuff you would make with these tools. Face.

So that it was pre the last time I used it. So, yeah, interesting. Yeah. It worked out well. I it's it's kinda fun to just keep poking on it. I'm kinda think I wanna try and move messaging between the 2, which is really nice.

yeah. I'm not really using any too many custom APIs, so it'd a fun experience, right, to be able to move it over and see how that works as well. Yeah. I'm I'm really particularly excited to get my app up on And it's it's sort of a blessed environment where you can do both, and that it was a little bit to get up and Up and running. I was having, like, these phantom processes where it would like, vid is a process, but then electron is like a child process. And it wasn't like killing the child process. So I had, like, 18

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

for a full archive of all of our shows.

just to try it. You know? Like, I'm not using any

I built that desktop app. It was really fun, and it made me, like, really Excited to be like, oh, yeah. With web APIs only and Electron, I'm able

in that course ghee.

So, More recently, I've been working on my my dance app that I've been working on, And I really don't want to do

reliably, you know, access things like the file system or,

And it really blew my mind to be able to say, alright. We're in this fixed environment.

it's essentially a note taking app that uses markdown files and saves them to your local file system.

to do so much.

up.video.

just in general. It it felt like a very different world than building for the web. Right? Because you have a little bit more control over the entire system, but you also have a home base to store things on, which is the user's computer.

really easily, Yeah. I actually have a course on electron on level just a wrapper around it. It's essentially a a web browser that's

But I found it really great to be able to you know especially Kilian, you know, from Polypaint said he can enable flags. He just turns on features. He can turn on features, and you can build features just for, Yeah. I I didn't it's been a little while since I I have used Electron.

Or

which basically pulls in all your webcams and shows you them. And, I use that a lot. Before I start recording, I check, like, the framing and and whatever of my I watched the whole intro video from Tory, and they said, yeah, the back end is in Rust, but, like, It could be in Dino one day, and I said, like, that's cool. Like

after we had,

like it can be creative. It it could just be to learn something or to have fun. And I think that's

Like, how sweet would it be to I just wanna build, and web apps to work on all the browsers as well, so I don't know if that's as big of a a benefit as as we're saying. It's pretty mature. There's lots of tutorials, lots of documentations, the it was a photo booth on the Mac. And the photo booth on the Mac is for some reason, with my Cam Link,

which is amazing. And I thought, like, wow. This is actually a really nice process.

And then once I posted it, a lot of people, like, you guys check out Tory, and I was Oh, this is to output a page. That's awesome because the marketing folks are always thinking like, okay. What happens if we

That's the recipe to not burn out.

or after I built it, a lot of people are like, oh, that already exists. Like, dummy.

And I was like, there's so many people that Don't understand that coding doesn't have to be

the But with this, Tori, syntax.

an electron app and just try it out. So, and that is run that allows you to set up stuff Like, how is there not, like, just use the default one or scare them amongst. I'm sure that's security issue. You know? But, like, they have to be thinking of that. If you and one big thing too is, like, man, connect to Apple Maps or, I know there's other applications that already do that there, but that was not, stuff on the user's computer, you can.

I open up,

So I built it, and I built an Electron. I had never in my life built an Electron application. I built it in just over an hour, And that's where your app is running, and you can communicate to the browser via style. We'll talk about that in a second.

camera.

It almost feels like you you have a website, and you just put a wrapper around it. Yeah. And you can see that with a lot of electron And the UI was done in create react app, and the back end of it was done in Electron.

whatever it is that you want. You could build the front end in Svelte or or React or whatever, and you can build all the back end stuff in Node. That's a stack that a lot of people are, familiar with. And it also if it also I should say it often feels like Boss, and Scott Out of the box is just node in HTML.

in Send some information about something changing from the back end to the front end or vice versa. There's this thing called IPC or ICP,

And those are often like I said, it's just a

The ability to have something in your menu bar or in your dock is simply the the reason for a lot of why people do these types of things Because it's just sometimes nice to have it instead of having it as a a tab, which sometimes seems silly. So the the 2 big, Hey, everybody. I am using Tori here. So Oh, that'd be cool. Yeah. That that's another thing I heard from a lot of people. They said, like, Building the app is fun. Like, the bundling and signing and shipping process is apparently very painful. It always is, though. If you've ever done any signing with Apple, the The process is painful to generate the certificates, in the same, spawn off a process

style apps, whether that's like Notion or your some of your to do apps or whatever that are the exact same app on the the website as they are in the actual app.

constantly pointed at 1 URL. Yeah. And and there's just often, there's a couple native things that people want, notifications. And I know the browser will do notifications, well, updates. And,

And what it does is it bundles Chromium

you're really doing unless you're really doing a ton of stuff with the,

language, and a lot of people know JavaScript. So it's nice to be able to build desktop applications and v s code. And I don't know if Slack is still or not.

like, native platform itself,

the idea is is that you can build an app in the stuff that you already know. Like, a lot of us, JavaScript is the universal

Yeah. That was, like, the not like the hardest part about Electron, but we did definitely get into that quite a bit. Like, because anytime you're dealing with You get all of this information But for the most part, you could get by without having to know any rest whatsoever.

like, in one line, you could run an alert. In the next line, you could save the file system. And in the next line, you could copy the clipboard and,

Seems like oh, I guess the downside for me It's like the guides and the documentation is pretty sparse.

fantastic.

You wanna, like, listen for dark mode change, and you wanna send that.

basically, just a index dot HTML, which is your app. And in that index HTML, you load in script tags just like you would a regular website.

and then you have a convert the output from TypeScript to JavaScript and then reran it.

where you can set up communication It wasn't killing the apps. I had to write some custom code around there. But, like, the electron, needs to be done in rust. Yeah.

between your front end and your back end.

like, I I think, like, the community, like, if you needed some oddball stoked to talk about both of these things today. Like, actually, I think it's it's really cool. Yeah. I'm stoked too. I'm actually in the same universe right now.

with the actual desktop system, Let's real quick just go through, like, why would you wanna build a desktop app In JavaScript,

Yeah. And, you know,

And,

stuff. I'm sure that Electron has a lot more than Tory does.

Yeah. The biggest downside to Tori is that it's fresh. It's that it's new. And in fact, before, the biggest downside of Tori for me was just that it wasn't released yet. It wasn't that version 1. So now that it's at version 1 yeah. I'm gonna be really excited. Yeah. I think maybe we can do a follow-up on this after I get my app in the App Store. Store. Because I I fully intend on on getting my app into the App Store

you know, you need some oddball integration the whole back end runs

tutorials. Yeah. I mean, That's not a not a small thing, the fact that, like, that content exists out there for 1 and not the other. I do think that,

I found a plug in called Veepe plug in electron, and then you can what's the this is really cool as well. So we'll talk about both of those, in this episode.

front and back.

Everything just auto reloaded. You change the back end TypeScript. It'll reload the application is pretty sweet.

ES build, you wanna talk about what Tori electron apps in my who knows? You never know. Well well, that is our look into desktop applications in JavaScript.

And I just built a quick little app, and then I I said, okay. But now I want this to be typescript because they you have that, like, oh, this is not as nice when you don't have the autocomplete or or whatever.

in my dock. So I had to write some custom code to hunt down the process and kill it whenever you know, when you hit control c in your terminal to kill your process,

So I converted it to instead of having to go back and forth. So, honestly, this story seems v plug in worked really well. It's is amazing because you could write TypeScript Or if if I need to Like, I don't I don't really know what the the downsides are just yet.

And then I was like, okay. Now I want, like, I want live reloads in the app as I change my styles in JavaScript and all that stuff. And Mhmm.

in the past.

inside of your application.

to, like, native stuff. So when you do wanna start getting into native with why don't we just start with, like I know you just mentioned you're kinda dipping into it. Like, what's your experience with building desktop apps, polypane, So Electron has a process that runs in node, the reason behind it. It's actually funny. Like, I was like, I wanna build this, and I had, like, like, 40 people being like,

I I don't know. Like, we build websites

and lots of plug ins to bridge just to quickly

And a lot of people like that because you have a single target. A lot of people like, yeah, you have a single target to to

it's just 1 version of Chrome, and that's really, really nice.

So that's a high level. We'll go into, they make you focus on using slices, which is essentially, I have this website hair.westboss.com, You know, you can mix and match just to kind of stuff. And you're they're allowed to do that because it runs in, like, a sandbox environment, from the client directly to the database.

is? Yeah. So the big so Tori, I I guess the biggest difference between

It it seems like it all just happens in in the client. Like, I might be wrong about this, but it seems like a majority of the stuff will just happen, run-in the client, and there's no inside of,

insane clown posse, basically just collect all of the components and output a page in whatever framework you're you're probably using, React or Svelte or Vue or Nuxt or you name it. It's awesome. So check it out. Prismic.i0forward/

that will send the data between the 2 processes. And I thought, oh, that's that's really cool. But with with Tory, and that process can run literally any language. So you can just spawn off a Dino process Mhmm. Or spawn off a node process or whatever. So, like, you really could if you need to run stuff on the server. I'm using air quotes here. You really could.