Fundamentals - Web Workers and Service Workers

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to syntax, the podcast with the tastiest web development treats out there. Today, we've got rid. A fundamentals episode for you today, and we're going to talk about, web workers and service workers, what they are, where you might need them, rid How you how they work, how you install them, a bunch of examples. We'll go through examples nice and early so you can sort of frame this whole learning rid. Under some examples. So we are sponsored by 3 awesome companies today. 1st 1 is LogRocket.

JavaScript session replay. Sanity rid Is error exception performance tracking and FreshBooks cloud accounting? We'll talk about all of them partway through the episode.

With me, as always, is mister Scott Talinski. How are you doing today, Scott? Hey. I'm doing good, man. Doing super good.

We talked maybe a little bit about this, but, like, on Friday, I think it was. We got word that Landon got into Yeah. This public school of choice.

And, you know, to give you some some ideas here, the the way that it works in in Denver is that you have, like, your home school. And your home rid. The one that you're automatically get into, and then you can lottery into any other school in Denver. Public school that is. And there is a school, Like, a block away from us that were it's not our neighborhood school, but it's it's right across the street, essentially.

We have another one that's close, But it's like one of the best public schools in Denver. And we were on a wait list with, like, 200 other kids for that, and we had just been waiting All, like, I don't know, all summer long to get word. Like, I think it's been, like, the most stressful thing ever just to get word. Is he gonna go to this school? Because he got into another good public school, but it's like a 15 minute, 20 minute drive away. So we're like, okay. So do we Let him go to the homeschool that's not as good.

Could we have him go to the nicer school that's very far away? And, yeah, we got word on Friday that he got into the nicest school that's also close, and he was, like, One of, like, 5 kids pulled off the wait list, so they they hardly pulled anyone off the wait list. And, it was just about, like, a 0% chance that we are gonna get in there, And it feels so good, man. Oh, man. It feels so good.

Waiting to hear those things is always nerve racking, especially, like, rid. You have no idea. You gotta plan your life around it, and, we have the same thing with daycare as well. We're trying to get Kit into a daycare, and it's just like,

rid. They'll like, you you'll tell us? Okay. Thanks. Like Yeah. My house is so hard to find somewhere for my kid to go during the day. In in you know, the public school thing is kind of tough because, like, certainly, I don't I don't know what it's like where you guys are, but the public schools here are not all created equal To the point where, like, you you really gotta be, vigilant about it. You can't just be kind of willy nilly about Wherever the kid's gonna go to school and so much to the point where, like, we were considering private schools rid. Up into the point of at least even, like, touring them and then getting the sticker shock about, like, the college tuition that you'd have to pay to send your kid to a private school.

Rid We ultimately decided that that wasn't gonna be the right route no matter what for us. But it was man, it it was a whole, whole rid stressful thing, and it feels like a giant monkey off my back now. So In Denver, you're just allowed to choose any public school because, like, here, you gotta be you gotta live in the district, And that's why, like, people will buy a house

not for the house, but they'll buy a house just so they can get into the district.

Well, You have to lottery into them. So, like, the the school that we got into, like I said, like, what we did is we put it as number 1 on our Prefer school, and then we got put on the waitlist.

And then, you know, 1 of 200 kids trying to get into this Specific school, for that thing. We just got really lucky with our randomized spot on the wait list. So you can choice in, but They they take care of all the neighborhood kids first, make sure that the neighborhood kids are all able to get into the school. And then if there's open spots, Then they'll go into the wait list for the lottery system.

And and this this school is good enough where Courtney was, like, sending me houses even though we just moved. Sending the houses in that neighborhood to be like, please? Like, can we consider looking at houses in this neighborhood? Like Oh my gosh. What? No.

No. That's not gonna happen.

Alright. Let's get on into it. We're going to first preface this whole discussion of rid web workers and service workers with, talking about and explaining what threads are in programming and in JavaScript in general. So, rid. The idea of threads in programming is that when you are doing tasks that are compute intensive, rid. Resizing an image, generating a PDF, literally anything. When you're doing some work in a programming language, Sometimes you wanna do 2 things at once. Sometimes you wanna resize an image, send an email, and, generate a PDF rid all at the exact same time. And many programming languages have this idea of multithreaded, which means that you can run rid Multiple things in parallel. You can run 2 things, 3 things, 4 things all at the exact same time.

Rid JavaScript is not multithreaded, meaning that you can only do one thing at a time. So if you have a very rid. Resource intensive thing in JavaScript.

You are gonna use up the 1 thread that you have in JavaScript, and there, Well, there is a way to do it. That's the reason why we have this entire show.

And people often say, like, JavaScript is not re Multithreaded, but you you can do 2 things at once. Like Mhmm. You could you could send an email, and you can fetch a AJAX request. And they're saying, well, look, I can do it. And rid. There's a difference between that is that it's concurrent and not, parallel. So the difference between that is parallel. I found a really good explanation rid. Online, it says, a system is said to be concurrent if it can support 2 or more actions in progress at the same time. A system is parallel if it can support 2 or more actions executing simultaneously, which means that, rid A concurrent system in JavaScript will just, like it will queue up tasks.

It will, like, rid. It'll fire off a fetch request and then go do something else, and then it'll come back to the fetch request when it comes back. And that's rid. The the end game, it doesn't really matter to you that much as a as a developer to know the difference between the 2 of those things, but it is one of those sort of gotcha

Interview questions that people will throw out. It is funny because we often just hear, whether or not like, we just run our code. Right? We just Yeah. Type our code. We we tell a promise to go off and do its thing. We wait for the promise to resolve. And you almost don't think about it because it you don't have to place things in specific red. Threads because that option doesn't exist. You just tell it to do the thing, and it's all just going to to work. But there is some, like, concept of thread Blocking that you should probably be aware of when you're running on a single thread.

Do you worry at all about blocking the main thread in JavaScript ever when you're you're programming, Wes?

I don't, but because it's very hard rid To write, that that's what's referred to as synchronous code in JavaScript. It's very hard to write code that will literally lock up rid The entire browser while you're doing other things. Mhmm. At least in in all of the coding I've done in 12 years, I've not actually run into a situation where that is. Rid. However, you do I think people who are a little bit more performance minded or who do a lot more resource intensive stuff in the browser Or who are working on, like like frameworks, like React that are, like, doing lots of rendering. They're very concerned about that.

Rid. And if that's the case, you could literally slow down things. Like, you click something and it doesn't fire off immediately or, rid. You know, like, when you you move to an application that's very snappy, you go, oh, this is this is faster. You didn't necessarily notice the other one was it slow. Mhmm. But that that is an issue that can possibly happen. Have you ever run into that as well? You know, I haven't done too much there. I know there's, like, kind of a

misconception that, like, async await blocks the main thread. I think some people would might think that, if they're newer to it or and and those things don't. I I never worry about it really at all myself personally.

Usually, what I'm doing is I'm just writing my UIs rid And then solving the the jank afterwards if there is jank or if if there's a a lag or latency somewhere, then I'll dive into figuring out what that is. But yeah. No. Me, Personally, I'm almost never thinking about am I blocking the main thread because I just never bought AM.

Yeah. That's one of the reasons why I use a web framework or, rid. You know, those types of deals. Yeah. Yeah. Exactly.

Alright. So that is parallel and multithreaded applications. We don't have it in JavaScript. So the question is if you are doing something very resource intensive and as you start to see, we're doing a lot more stuff in the browser. If you have, I don't know. Let let's say you have an image, and you wanna, do green screen on that image. That or, actually, that's a perfect example. I did hit that at at one point. Rid. So I was running a webcam, Every single pixel on the webcam. So basically, you take a snapshot of the webcam. You dump it into a canvas element. You take all the pixels out of the canvas element.

Literally millions.

You loop over every single RGB value of it. And if it hits a certain threshold, Meaning, if it's between this green and this green, then you can take that pixel out. You can set the alpha to A hundred, meaning it's it's transparent.

So that that's very resource intensive because literally, rid Ideally, 40, 50, 60 times a second, you are looping over millions of pixels and doing if statements.

And that can what I was running into there was that I I can't run this fast enough, in the In the main thread, so it was only doing it 4 or 5 times a second rather than, ideally, the 60 times a second. So That is one example of is, okay. I need to run these calculations somewhere else. I need to run them in a separate thread so that rid. The work that I'm doing in the main browser, allowing people to click on things, specifically animations is a really big one. You don't want to slow those things down at all. So like if you're trying to process a video and animate rid A shoe to flip on an ad, those 2 things could possibly make the animation slow down. So you what you wanna do is you wanna put that thing on a separate rid. Thread allow the computer to do the work on another thread because your CPU has many threads, rid And you can do that in in JavaScript with the thing called web workers. So web workers are the ability to offload work rid From the main thread in the browser onto another thread. It's called a worker, and that work can be done, again, on another thread. And then when it's done in. Or when you have information about how it's going, you can just send messages about the information back, and you're not having to Sort of do it all. Do we have a sandwich example here that I can think of? I was thinking like a highway. Right? You got one lane and you got an an express lane that's blocked off. And then all of a sudden,

by moving something into a worker, you're saying, hey. You can now go into the express lane, and that express lane can relieve some of the, rid The pressure of the system there, is specifically you know, I think the the one of the most important things is that you mentioned is that, like, rid. If you're doing something very resource intensive or very intensive on the main thread, the everything else that's being run on the main thread, The UI, the the JavaScript in general, any sort of interactivity Yeah. It's going to experience slowdown. It's going to feel worse for your users, And it's going to feel like it's struggling or broken.

And so by moving those things into that express lane, you're able to make your users rid. Tricked into feeling like this thing is more performant because it's utilizing a feature of your CPU that exists

that we've just never been able to take advantage of before, really. So let's go through some examples of what you might want to use a web worker for, rid and then we'll dig into how it actually works so that you can sorta frame it. So there are 2 big one, offline caching rid And notifications, I'm gonna shelf those. Just know that those are something they can do. Specifically, those are a type of web worker called a service worker. We'll talk about that in just a second.