JavaScript Web Workers Explained

  Рет қаралды 92,747

DevSage

DevSage

2 жыл бұрын

A Web Worker is a script that runs in a background threads, separate from the main thread. Web workers enable the browser to execute multiple threads of JavaScript in parallel with each other. The worker thread can perform tasks without interfering with the user interface. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa).
📚Materials/References:
MDN Web Docs: developer.mozilla.org/en-US/d...
🌎 Find Me Here:
Twitter: / realdevsage
Ebooks: payhip.com/devsage
Discord: / discord
Merch: cottonbureau.com/people/devsage

Пікірлер: 101
@DevSage
@DevSage 2 жыл бұрын
💙 Twitter: twitter.com/realDevSage 📙 Ebooks: payhip.com/devsage 💥 Discord: discord.gg/BP8wPv6raA 👕 Merch: cottonbureau.com/people/devsage
@be2wa
@be2wa 2 жыл бұрын
Your way of explaining is probably the best I've seen on KZfaq. Your video on a certain concept pretty much leaves me with no questions to ask about it.
@DevSage
@DevSage 2 жыл бұрын
This comment made me smile. Yeah I try to set my videos apart by making them as simple as possible, ironically. Some other teachers I've seen on KZfaq are REALLY smart and knowledgeable about programming topics but are lousy communicators so the overall message gets lost and the tutorial becomes of little value.
@vijay_explorer
@vijay_explorer 2 жыл бұрын
I love your approach of explaining in a short consice and a simple manner. Thank you now I have an understanding of web workers. ❤️
@DevSage
@DevSage 2 жыл бұрын
You're very welcome!
@capnmorgs6195
@capnmorgs6195 2 жыл бұрын
A lot of these videos have been super helpful! Good length, good explanations. Thanks dude! Keep it up!
@DevSage
@DevSage 2 жыл бұрын
Glad you like them!
@paulbocostudio
@paulbocostudio Жыл бұрын
Best explanation I've heard yet. I'm ready to code some workers now. 👍
@itzazeez6662
@itzazeez6662 2 жыл бұрын
Short and to the point. Great explanation thanks man. new subscriber notification up.
@user-fi2ty4bm2n
@user-fi2ty4bm2n 2 жыл бұрын
clear and informative with an example. Thank you so much.
@MahmoudKhudairi
@MahmoudKhudairi 2 жыл бұрын
Thank you man, it was an intro of basics , but it was useful, it introduced me to the main concept of Web Worker API
@DevSage
@DevSage 2 жыл бұрын
No problem
@divijakatakam2803
@divijakatakam2803 2 жыл бұрын
this is so helpful especially for a beginner
@yinonelbaz5309
@yinonelbaz5309 2 жыл бұрын
Feels lucky I discovered your channel
@ashishagarwal3514
@ashishagarwal3514 2 жыл бұрын
Wow this is a great tutorial. I have seen like 20 videos of you in last 2-3 hours, your explanations are super easy to understand. Can you please also make a video on use cases distinguishing web worker vs service worker and web scokets? I am confused which one to be used for what type of use cases?
@harshgupta5799
@harshgupta5799 2 жыл бұрын
Nice example demo. Works perfectly.
@oz4549
@oz4549 Жыл бұрын
You Sir are a true hero. Thanks for this!
@anouarnouri2111
@anouarnouri2111 2 жыл бұрын
I've never heard about web workers before, this is interesting, thank you so much.
@DevSage
@DevSage 2 жыл бұрын
You're welcome!
@xmaxfuture
@xmaxfuture Жыл бұрын
you just earned yourself a subscriber. well done!
@hanifkhan2821
@hanifkhan2821 2 жыл бұрын
Simple and Perfect Keep it up!!
@gradientMesh
@gradientMesh 2 жыл бұрын
Very clearly explained! Thank you for sharing.
@DevSage
@DevSage 2 жыл бұрын
You're welcome!
@osvaldocarrillo1361
@osvaldocarrillo1361 2 жыл бұрын
Thank you. Very well explained 👍
@phxm7853
@phxm7853 2 жыл бұрын
Simple, Short and Clean 👍👍👍
@DevSage
@DevSage 2 жыл бұрын
Thanks!
@H2daB
@H2daB 2 жыл бұрын
Thank you for explaining this. It was very helpful!
@DevSage
@DevSage 2 жыл бұрын
Glad it was helpful!
@mohammadreza404
@mohammadreza404 2 жыл бұрын
That was sooooooooo clear and straight . Thank you very much
@DevSage
@DevSage Жыл бұрын
You're welcome!
@pixelloopy
@pixelloopy 2 жыл бұрын
Brilliantly explained, thank you!
@DevSage
@DevSage 2 жыл бұрын
Glad it was helpful!
@ashimov1970
@ashimov1970 2 жыл бұрын
super awesome explanation, man 👍👏
@depralexcrimson
@depralexcrimson 2 жыл бұрын
So very well explained, thanks.
@DevSage
@DevSage 2 жыл бұрын
No problem
@sadeqmousawi140
@sadeqmousawi140 2 жыл бұрын
Nice job boy , Thank you so much 🌹
@antonismavrakis5199
@antonismavrakis5199 2 жыл бұрын
Good work man, it really helped
@DevSage
@DevSage Жыл бұрын
Glad it helped
@darz_k.
@darz_k. 2 жыл бұрын
Yep - great stuff - subscribed.
@saikarthik658
@saikarthik658 2 жыл бұрын
Very lucidly explained!! Thank you....
@DevSage
@DevSage 2 жыл бұрын
You're welcome!
@abhishekpratap05
@abhishekpratap05 2 жыл бұрын
What if you need web workers to do multiple tasks and in different js files, how will they distinguish between msgs they pass among themselves. Like there is no indication apart from where it's called an instance of worker can have different name, but inside worker.js file how will they distinguish between multiple functions (performing different tasks)
@Crevulus
@Crevulus 2 жыл бұрын
Great explainer video. Loved the way you demonstrated. For your next videos can I request some things I often confuse with "web workers"? Service workers Web sockets Web components
@0xlkda
@0xlkda 2 жыл бұрын
great, I wonder if i can inject worker as code from server to hide my logic from public but still using client computation power
@ignjat4123
@ignjat4123 2 жыл бұрын
Great video. Thanks a lot, man
@DevSage
@DevSage 2 жыл бұрын
You're welcome
@user-sb7yh6gz9m
@user-sb7yh6gz9m 2 жыл бұрын
Thank you for your work!
@DevSage
@DevSage 2 жыл бұрын
My pleasure!
@ashy3r
@ashy3r 2 жыл бұрын
great video thanks! :)
@martinemanuel8239
@martinemanuel8239 2 жыл бұрын
Amazing explanation man !!
@DevSage
@DevSage 2 жыл бұрын
Appreciate it!
@quangpham-qs5oo
@quangpham-qs5oo 2 жыл бұрын
thank you so much for your sharing.
@DevSage
@DevSage 2 жыл бұрын
You're welcome!
@vatsalyasinghi438
@vatsalyasinghi438 2 жыл бұрын
Is it possible to pass the function and the params to the worker file and return the result ? So it can be versatile..
@ny9113
@ny9113 2 жыл бұрын
Great explanation !
@DevSage
@DevSage 2 жыл бұрын
Thank you!
@33lightheart
@33lightheart 2 жыл бұрын
Great video thanks! that helped me to understand web workers for the first time. Could you please also make a video about promise, I still don't know if there is any background work going on with promises, or is await promise also being performed on the main thread, blocking it until the promise is finished?
@DevSage
@DevSage 2 жыл бұрын
I do have videos on Promises and also await/async. Yes when you await a Promise you're effectively blocking the main thread of execution until that promise resolves (or rejects)
@forzahorizon8560
@forzahorizon8560 Жыл бұрын
Thank you!
@yadneshkhode3091
@yadneshkhode3091 2 жыл бұрын
Awesome man 👍
@DevSage
@DevSage 2 жыл бұрын
Thanks
@dealerkiller1
@dealerkiller1 2 жыл бұрын
Great video! I would like to know why don’t you save the worker listener inside the onClick function
@DevSage
@DevSage 2 жыл бұрын
Because I didn't find it necessary
@yurapekach7550
@yurapekach7550 Жыл бұрын
Thank you)
@rajansidhu5912
@rajansidhu5912 2 жыл бұрын
Thank you :)
@VuNguyen-ni4ex
@VuNguyen-ni4ex 2 жыл бұрын
Please do a video explain about service worker :) Great video by the way
@DevSage
@DevSage 2 жыл бұрын
I will put it on my radar
@gradientMesh
@gradientMesh 2 жыл бұрын
Yes, please!
@gameplayerita5694
@gameplayerita5694 2 жыл бұрын
but what happen if I tell the worker to do some heavy stuff before it has finished previous heavy stuff?
@CrazyCodingChannel
@CrazyCodingChannel 2 жыл бұрын
Very helpful, thnx
@DevSage
@DevSage 2 жыл бұрын
No problem!
@pupfriend
@pupfriend 2 жыл бұрын
Awesome!!
@DevSage
@DevSage 2 жыл бұрын
Thanks!
@jerecrack12gamer7
@jerecrack12gamer7 Жыл бұрын
i couldnt finish reading it but the first 2 sentences were inspirin LMAO
@alexanderm6187
@alexanderm6187 2 жыл бұрын
What the perfect explanation! Thank you for that! :) So technically said workers are calculated on a "virtual" threads of JS-engine, not on real CPU threads/cores?
@DevSage
@DevSage 2 жыл бұрын
Glad it helped! According to the Mozilla docs, workers are spawned using "real OS-level threads" developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#about_thread_safety
@alexanderm6187
@alexanderm6187 2 жыл бұрын
@@DevSage that's nice to know it! Thank you for the reply :)
@toanho7462
@toanho7462 Жыл бұрын
nice explain
@mirceahanghiuc4447
@mirceahanghiuc4447 2 жыл бұрын
Super cool
@DevSage
@DevSage 2 жыл бұрын
Thanks Mircea!
@easonhuang4031
@easonhuang4031 2 жыл бұрын
how to use it in ReactJS project?
@rajastylez
@rajastylez 2 жыл бұрын
Solid example
@pmsoxllc9501
@pmsoxllc9501 2 жыл бұрын
Thanks!
@DevSage
@DevSage 2 жыл бұрын
I really appreciate that Omar!
@ChickenMaster7
@ChickenMaster7 2 жыл бұрын
can I use it in react?
@Calebwaldner
@Calebwaldner 2 жыл бұрын
Great video
@DevSage
@DevSage 2 жыл бұрын
Thanks Caleb
@aaf2011
@aaf2011 2 жыл бұрын
Hi patrick, so web workers seems to be look like (async/await or promises) concept. eventually we defer specific task/s since it takes long time of response while in the same time we complete the other tasks so that we don't waste time in waiting. It is obvious that the main goal of these techniques is to control the outcome and performance of the application but I would like to see more details on the web workers and async/await concepts in real life example. Sync = Action A .. wait for the results of (A) Async = Action A .... wait for the results of (A) and keep doing other actions of (B), (C) and(D) This is how I understood Sync/Async/Web Workers .... Am I right ?
@DevSage
@DevSage 2 жыл бұрын
Yes, the underlying idea is all the same. Synchronous work is "blocking" while asynchronous work is "non-blocking"
@furkannarin2844
@furkannarin2844 2 жыл бұрын
Hey man thanks for the tutorial. I am getting an error for Worker constructor when I use it like this. It is not defined for me. Also, if I use the new syntax where you put in url in the constructor like this: ``` new Worker(new URL('path'), import.meta.url) ``` I dont get any errors like this but in this case, when I specify the onmessage function in the worker script, self and onmessage are both undefined again. Any ideas?
@DevSage
@DevSage 2 жыл бұрын
The first parameter of the Worker constructor should be a string
@furkannarin2844
@furkannarin2844 2 жыл бұрын
@@DevSage it is a string :/
@rxdrik1ng966
@rxdrik1ng966 Жыл бұрын
Nice
@stoncjoesperanto8632
@stoncjoesperanto8632 2 жыл бұрын
Not readable on smartphones :'-(
@tharidhuheshan
@tharidhuheshan Жыл бұрын
Classic
@fripickbot4043
@fripickbot4043 2 жыл бұрын
Great. And please stop repeating that javaScript is "single threaded" JavaScript is not single threaded. This is only confusing new comers.
@DevSage
@DevSage 2 жыл бұрын
So are you saying that the developers at Mozilla are incorrect? developer.mozilla.org/en-US/docs/Web/JavaScript
@divijakatakam2803
@divijakatakam2803 2 жыл бұрын
this is so helpful especially for a beginner
@abat_dauletbaev
@abat_dauletbaev 2 жыл бұрын
Great explanation!
@DevSage
@DevSage 2 жыл бұрын
Thanks!
Javascript Let & Const Explained Simply
10:42
DevSage
Рет қаралды 4,3 М.
PROOF JavaScript is a Multi-Threaded language
8:21
Beyond Fireship
Рет қаралды 272 М.
Son ❤️ #shorts by Leisi Show
00:41
Leisi Show
Рет қаралды 8 МЛН
НЫСАНА КОНЦЕРТ 2024
2:26:34
Нысана театры
Рет қаралды 1,6 МЛН
Stay on your way 🛤️✨
00:34
A4
Рет қаралды 27 МЛН
لااا! هذه البرتقالة مزعجة جدًا #قصير
00:15
One More Arabic
Рет қаралды 20 МЛН
🎣 Custom Hooks Meet Web Workers: Transform Your React Apps
12:30
JavaScript this Keyword Explained Simply
11:42
DevSage
Рет қаралды 14 М.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 179 М.
Intro To Service Workers & Caching
35:26
Traversy Media
Рет қаралды 233 М.
#1 DOM в WebWorker? Как? - Многопоточность и DOM
18:29
The Story of Next.js
12:13
uidotdev
Рет қаралды 560 М.
JavaScript Cookies vs Local Storage vs Session Storage
14:28
Web Dev Simplified
Рет қаралды 739 М.
JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue
12:35
Node.js is a serious thing now… (2023)
8:18
Code With Ryan
Рет қаралды 638 М.
Son ❤️ #shorts by Leisi Show
00:41
Leisi Show
Рет қаралды 8 МЛН