Desktop Apps in JS × Electron and Tauri

Boss, and Scott

ghee.

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 would say, the the 2 platforms out there for doing this type of thing nowadays.

Hey, everybody. I am 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.

I was firing up a Tory up the other day. Yeah. I'm interested to hear, some of your thoughts in in, I've actually been having my eye on Tory since it was at, like, version 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.

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 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, 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, Especially if they're affecting a lot of users. You see it really happen just about instantly in their, 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.

You get all of this information really quickly and easily at a glance.

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, what browser, what operating system, what user in particular, or whatever type of data you want to attach this thing too.

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 use the coupon code tasty treat

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.

But the kind of cool thing about it is that, they make you focus on using slices, which is essentially, instead of making pages, you make components, and then you let the marketing folks just put those slices together, to output a page. That's awesome because the marketing folks are always thinking like, okay. What happens if we change this photo here or what happens if we add a, 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 you can 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/ syntax.

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, 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, in the past.

Yeah. I actually have a course on electron on level up.video.

So if you're out there interested in learning some of this stuff, I built in that course a it's essentially a note taking app that uses markdown files and saves them to your local file system.

And the UI was done in create react app, and the back end of it was done in Electron.

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

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.

But I found it really great to be able to really easily, reliably, you know, access things like the file system or, 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.

So, 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 to do so much.

I I've had my eye on Tory for a long time. Like, I mentioned, maybe even, like, maybe 2 years ago, I I did a, a, like, a social story 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? So I I've had my eye on it for a very long time, but I haven't necessarily used it for anything specifically.

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 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 to launch this thing as a mobile app using WebText. So, That's what I'm going to be using Tory for right now.

I I I really literally just fired it up, installed it, and got the intro running 2 nights ago. So, 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.

Awesome. Yeah. So the other day, after we had, the polypane, Killan from polypane on, it just it just Kept rattling around my brain.

Like, how sweet would it be to I just wanna build, an electron app and just try it out. So, I have this website hair.westboss.com, 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 camera.

And I usually open up either hair.westboss.com Or I open up, the it was a photo booth on the Mac. And the photo booth on the Mac is for some reason, with my Cam Link, 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, I know there's other applications that already do that there, but that was not, 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, 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 like it can be creative. It it could just be to learn something or to have fun. And I think that's That's the recipe to not burn out.

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, 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 this is really cool as well. So we'll talk about both of those, in this episode.

Let's real quick just go through, like, why would you wanna build a desktop app In JavaScript, 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 language, and a lot of people know JavaScript. So it's nice to be able to build desktop applications in 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

unless you're really doing unless you're really doing a ton of stuff with the, like, native platform itself, 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 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.

And those are often like I said, it's just just a wrapper around it. It's essentially a a web browser that's

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, you can have elevated permissions for access to the file system like Scott was talking about earlier. So they're also just like the 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, 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 what it does is it bundles Chromium inside of, inside of your application.

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.

I I don't know. Like, we build websites 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, and lots of plug ins to bridge to, like, native stuff. So when you do wanna start getting into native stuff on the user's computer, you can.

So that's a high level. We'll go into, it real In just a second, you wanna talk about what Tori

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

As a way to describe what Tori is is that Tori uses the built in web view that's built into whatever operating system that you're in. So for Linux, it uses something called WebKit GTK, which is basically just a WebKit renderer, and, 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.

So this is using the built in browser to the operating system, which is important to know because your apps can be quite a bit smaller.

With Electron, you're You're bundling in Chromium essentially into the app, where with this, you're saying, alright. Use whatever native browser is on the given system and use that as essentially a web view.

This concept has been around forever in mobile apps specifically Where if you ever think about you open something, a link maybe in an app, and it opens in what's called a web view, which is like a 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.

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.

Also, like, like, memory as well. Like, people are saying, like, yeah. Oh, you just You're shipping, like, 600 megs 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 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.

But, they did add recently, like, very recently, iOS and Android support, which means that you could truly write once shipped to all native platforms that exist.

And even though it's not using native components like React Native does, that's, like, the big difference there. It's essentially just rendering a website, And people can sometimes feel like a WebView based apps are less performant or less nice, but I gotta say, you know, we we had the missive, folks on the podcast to talk about Missive. Once in that, that's a a web view based native app using Backbone, And I use that app every single day, and I never ever think to myself, oh, this this would be way better as a native iOS app because it feels fine.

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 a application, a web version, a desktop version, an iOS version, Android version on the same code face. So that's, like, really neat. Now one of the big things that you'll hear with Tori is that it's Rust, and it has a a Rust core with a TypeScript API, meaning that you don't have to be like a Rust expert to use this thing.

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.

But for the most part, you could get by without having to know any rest whatsoever.

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, 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, because of 2 things. 1st, the entire back end API. Maybe we'll talk about that. So in electron, the whole back end runs on what's called, like, a, the main process.

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.

But with this, Tori, all of your APIs for, sending notifications, for saving files to the file system for copying the clipboard, for reading reading from the clipboard, for getting file paths, for spawning off processes.

All of those things are just JavaScript APIs that you run-in your client, which is wild to me. And that kind of reminds me of, what's the thing that your platform used to be built on? Why am I blanking on that? Meteor. Meteor. You know, like, remember, meteor was had the, like, ability just to save, from the client directly to the database.

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.

Via Cordova or whatever, but baked into the platform

way ahead of it. And then the other thing I found out is because, like, 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 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 support. And I was like, well, what's the sidecar? So sidecar is just the ability to spawn off a process on the user's computer, 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.

Or even if you need to do something like git commit, 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 needs to be done in rust. Yeah.

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.

Honestly, like, this This seems a lot better. So, like, let's go back to Electron.

So Electron has a process that runs in node, and then you have a 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 there is this 3rd file called preload, and that is run that allows you to set up stuff where you can set up communication between your front end and your back end.

And, like, for for one example for my application is I was, You wanna, like, listen for dark mode change, and you wanna send that.

Or if if I need to 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, insane clown posse, that will send the data between the 2 processes. And I thought, oh, that's that's really cool. But with with Tory, 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 messaging between the 2, which is really nice.

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

in the same, 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, 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, And it's it's sort of a blessed environment where you can do both, instead of having to go back and forth. So, honestly, this story seems fantastic.

Like, I don't I don't really know what the the downsides are just yet.

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

And, like, I I think, like, the community, like, if you needed some oddball connect to Apple Maps or, you know, you need some oddball integration with with the actual desktop system, Then I'm sure that, like, very much like React Native has a lot of packages that allow you to talk to native, stuff. I'm sure that Electron has a lot more than Tory does.

Yeah. And, you know, 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, 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

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,

to do everything that you have to do on Apple's web UI that is, like, really bad.

Overall shipping an app to, 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

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.

Because, like, I'm looking at my desktop application right now, and I've got Notion and Missive and v s code. And I don't know if Slack is still or not.

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

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,

fur is is not fun as Safari is to use on a daily basis.

It performs super well on the m one max the m two or whatever Max. It performs 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, Safari is in that regard.

But I I do you know, I I don't know. I am a little bit concerned about, the supporting of multiple targets. Because in the past, when we've talked to folks who use Electron, 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, Chromium, which is usually a pretty advanced build target compared to Safari. So, hey, That that feels like might be a little bit more pain in the butt there, but I guess if you're saying, alright. We're going to burden all of our 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,

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

Out of the box is just node in HTML.

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.

So I converted it to ES build, just to quickly convert the output from TypeScript to JavaScript and then reran it.

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.

I found a plug in called Veepe plug in electron, 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 electron apps in my 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, It wasn't killing the apps. I had to write some custom code around there. But, like, the electron, v plug in worked really well. It's is amazing because you could write TypeScript front and back.

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

Yeah. I I didn't it's been a little while since I I have used Electron.

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 This app to Tori just to just to try it. You know? Like, I'm not using any 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

Tori to see to see just how how that feels, 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.

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,

who knows? You never know. Well well, that is our look into desktop applications in JavaScript.

Let us know your thoughts 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.

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.

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.