Fundamentals - Web Workers and Service Workers

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 rid. The work that I'm doing in the main browser, Rid JavaScript rid. It'll

Interview questions that people will throw out. It is funny because we often just hear,

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

Do you worry at all about blocking the main thread 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, misconception that, like,

aware of when you're running on a single thread.

as a as a developer to know the difference between the 2 of those things, but it is one of those sort of gotcha

It will, like,

struggling or broken.

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.

a feature of your CPU that exists

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, into any other school in Denver. Public school that is. And there is a school, whether or not

utilizing

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

the everything else that's being run on the main thread, The UI,

process a video and animate I was running a webcam,

in the In the main thread, rid I don't know. Let let's say you have an image, and you wanna, Well, there is a way to do it. That's the reason why we have this entire show.

fast enough,

and doing if statements.

somewhere else. I need to run them in a separate thread so that Alright. So that is parallel and multithreaded applications. We don't have it in JavaScript. So the question is if you are doing something these calculations

animations is a really big one. You don't want to slow those things down at all. So like if you're trying to 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 A shoe to flip on an ad, rid How you how they work, how you install them,

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

You loop over every single RGB value of it. And if it hits a certain threshold, so it was only doing it 4 or 5 times a second rather than, Meaning, if it's between this green and this green, 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, meaning that you can only do one thing at a time. So if you have a very rid. Resource intensive thing in JavaScript.

A hundred, meaning it's it's transparent.

then you can take that pixel out. You can set the alpha to that's rid. The the end game, it doesn't really matter to you that much 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.

And that can

Rid

we have the same thing with daycare as well. We're trying to get Kit into a daycare, and it's just like, is not multithreaded, many threads, generate a PDF rid all at the exact same time. And many programming languages have this idea of do green screen on that image. That or, actually, that's a perfect example. I did hit that at at one point. Rid. So slow down things. Like, you click something and it doesn't fire off immediately or, allowing people to click on things, specifically

One of, like, 5 kids pulled off the wait list, so they they hardly pulled anyone off the wait list. And,

Waiting to hear those things is always nerve racking, especially, like, rid. You have no idea. You gotta plan your life around it, and, simultaneously, So that that's very resource intensive because literally, Alright. Let's get on into it. We're going to first preface this whole discussion of rid web workers and service workers

like, you you really gotta be,

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.

And, yeah, we got word on Friday that he got into the nicest school that's also close, and he was, like, 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.

which means that, 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 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,

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

And people often say, like, JavaScript is not re Multithreaded, with, talking about and explaining what threads are in programming and in JavaScript in general. So, 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.

rid. Online, it says, ideally, the 60 times a second. So That is one example of is, okay. I need to run

and not,

parallel. So the difference between that is parallel. I found a really good explanation 2 big one, offline caching rid Ideally, rid And you can do that in in JavaScript with the thing called web workers. So web workers are the ability to offload work Literally millions.

You are gonna use up the 1 thread that you have in JavaScript, and there,

we were on a wait list with, like, 200 other kids for that, and we had just been waiting

Could we have him go to the nicer school that's very far away?

Like, a block away from us that were it's not our neighborhood school, but it's it's right across the street, essentially.

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.

JavaScript session replay. Sanity rid From the main thread in the browser onto another thread. It's called a worker, rid A concurrent system in JavaScript will just, like it will

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

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? Well, You have to lottery into them. So, like, the the school that we got into, in JavaScript ever when you're you're programming, Wes?

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

We have another one that's close, But it's like one of the best public schools in Denver. And

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.

rid. The idea of threads in programming 40, 50, 60 times a second, you are looping over millions of pixels 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 frame it. So there are

Sometimes you wanna do 2 things at once. Sometimes you wanna resize an image,

multithreaded,

and,

rid. Resizing an image, very resource intensive and as you start to see, we're doing a lot more stuff in the browser. If you have, queue up tasks.

generating a PDF, literally anything. When you're doing some work in a programming language,

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

is that a system is said to be concurrent

And and this this school is good enough where Courtney was, like, sending me houses 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

even though we just moved. Sending the houses in that neighborhood to be like, please? 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

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

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.

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 then, you know, 1 of 200 kids trying to get into this Specific school, 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 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

Like, can we consider looking at houses in this neighborhood? Like Oh my gosh. What? No.

No. That's not gonna happen.

but

Or who are working on, like like frameworks, like React that are, like, doing lots of rendering. They're very concerned about that.

I don't,

Rid. And if that's the case, you could literally when you are doing tasks that are compute intensive, what I was running into there was that I I can't run this

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

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

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.

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.