Web Worker Tutorial | Understand The Benefits of Web Workers

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024
  • In this video I demonstrate how to use javascript web workers. I also explain the benefit of using web workers and problem web workers are aiming to solve.
    Get 1 on 1 mentorship!! ▶▶▶ www.codingwith...

Комментарии • 62

  • @rafaelnavarrocanizarescorr7057
    @rafaelnavarrocanizarescorr7057 3 года назад +3

    I loved how you presented the problem first. You are a great teacher! Cheers from Brazil! =D

  • @nonamusaelian5493
    @nonamusaelian5493 3 года назад +9

    Best technique to explain something is comparision! Great!

  • @BuddikaChaturanga
    @BuddikaChaturanga 3 года назад

    so we can use asynchronous methods like promises, settimeout insted of webworker

  • @AbdelhameedG
    @AbdelhameedG 3 года назад

    Thanks Chaim

  • @paulcalebayibaemiotokolo
    @paulcalebayibaemiotokolo 8 месяцев назад

    thanks alot

  • @江村健治
    @江村健治 3 года назад

    Amazing explanation!

  • @VegasTamboriniYT
    @VegasTamboriniYT 2 года назад

    Thanks heaps for this. Very succinct and well explained. One question, it seems like webworkers are an alternative to async/await, and promises. Are there any advantages to webworkers over the other two options, or any situations where webworkers are preferred?

    • @CodingWithChaim
      @CodingWithChaim  2 года назад +2

      I think I’m gonna make a video about this. Been getting this question a lot and it’s hard to answer in a comment

    • @VegasTamboriniYT
      @VegasTamboriniYT 2 года назад

      @@CodingWithChaim Whoa, this is definitely the fastest response I've ever gotten to a comment I've left. I'll make sure to check back on your channel for relevant videos :)

  • @ToddDunning
    @ToddDunning 3 года назад +4

    Chaim I really like your idea to illustrate the problem first. This is the crucial element missing from hunting and pecking through Stack for example, where you get solutions to somebody else's problems that are not like yours. Keep going and you will take off into the big time.

  • @manjeshkumarsharma
    @manjeshkumarsharma 5 месяцев назад

    Very helpul video, very much informative. Thanks a lot for this

  • @oyatsukikagami1960
    @oyatsukikagami1960 2 года назад

    Can i use it with a that contain thousands of lines, ex 50 000 line ? THANK YOU

  • @gameplayerita5694
    @gameplayerita5694 2 года назад

    but what happen if I tell the worker to do some heavy stuff before it has finished previous heavy stuff?

  • @gilberttorchon1280
    @gilberttorchon1280 3 года назад

    Nice video. But I feel you speak a little too fast. Take your time.

  • @tribiec
    @tribiec 2 года назад

    Excellent man! very good video, thanks a lot

  • @jacktiebie3859
    @jacktiebie3859 2 года назад

    Hey, I saw this question online.
    Web Workers define an API for:
    A Publishing frequently updated works for syndication.
    B Running scripts in the background,
    C Bi-directional, full-duplex communications over a single TCP socket.
    D Distributing load across multiple web servers.
    They said the answer was A why is that? I thought the answer was B.

    • @CodingWithChaim
      @CodingWithChaim  2 года назад

      yea I agree with you A seems wrong. Can you link it?

  • @yogibobo1
    @yogibobo1 3 года назад +1

    hey, thanks for that video!
    one question though
    in minute 2:20 you show you activate an HTTP server and not explain about it, can you please explain how to work with it?
    for me when I code with you on VS-Code without doing so the worker throws an error and when I run the same thing on visual studio it doesn't and the worker runs nicely
    why is that?

    • @kabulzhan
      @kabulzhan 3 года назад

      ruclips.net/video/vnPemSnnJYY/видео.html

  • @aashayamballi
    @aashayamballi 4 года назад +3

    Wow! I didn't know about this. Thank you so much 🙏🏼

  • @jamesmwantisi5729
    @jamesmwantisi5729 Год назад

    The Andrew Tate of Web Workers lol

  • @MoisesConejo
    @MoisesConejo 3 года назад +1

    Diference web worker vs asyc functions?

  • @nhungduong9194
    @nhungduong9194 2 года назад

    have you code on github?

  • @PhilipDenys
    @PhilipDenys 3 года назад

    coolest dev jew i've seen 😅

  • @GauravYadav-rv7wx
    @GauravYadav-rv7wx 3 года назад +1

    This is great! Such an easy explanation, can you make some tuts on rust and webassmebly with JS

  • @tejasnikam3287
    @tejasnikam3287 4 года назад +1

    Understood 100% of what he explained !!!!!

  • @jandeswart1378
    @jandeswart1378 2 года назад

    Very well expained!

  • @dipteshmukherjee346
    @dipteshmukherjee346 3 года назад

    Best explaination

  • @learnmaziyyah473
    @learnmaziyyah473 4 года назад +1

    Love You Brother : Please make a tutorial on web sockets : how they work with nodejs

    • @CodingWithChaim
      @CodingWithChaim  4 года назад

      so this is not directly websockets, but I do have a video about socket io. Here is the link ruclips.net/video/E4V6nbP_NoQ/видео.html let me know if you find this helpful

  • @Opacity5
    @Opacity5 2 года назад

    just awesome

  • @rbt-0007
    @rbt-0007 2 года назад

    I needed this

  • @marodonthemorone
    @marodonthemorone 3 года назад

    Best video

  • @deicidemilan
    @deicidemilan 3 года назад

    love you :)

  • @kyleadams1131
    @kyleadams1131 4 года назад +1

    Nice! I've seen the worker file in React but figured it was complicated so I just haven't looked into it. You just explained it great! Thanks!

    • @CodingWithChaim
      @CodingWithChaim  4 года назад +2

      I should point out that the worker file you might see in a Create React App, is actually not a web worker, but instead it is a service worker. They are vastly different. At some point I hope to make a video about service workers as well

    • @antoniofuller2331
      @antoniofuller2331 3 года назад

      Hmm

  • @khiilara
    @khiilara 2 года назад

    Kudos! This was very insighful and helpful. Great teacher, really simplified the content

  • @iliketocode6986
    @iliketocode6986 4 года назад +1

    thanks man i had no idea what these are.

  • @maelstrom57
    @maelstrom57 2 года назад

    I wished I'd known about this sooner. I made this web app a while ago that returns all the anagrams of a string, which there can a ton of with longer strings. A Worker looks like the ideal tool for this task.

  • @hanibal43
    @hanibal43 4 года назад +1

    Awesome I didnt know about this! keep making these awesome vids man!

  • @neatpolygons8500
    @neatpolygons8500 3 года назад

    thank you mister lovely hat for the simple and good example

  • @mayursonawane2218
    @mayursonawane2218 4 года назад +1

    Perfect 👍

  • @lavdixit2267
    @lavdixit2267 3 года назад

    NICE explanation

  • @serjio8781
    @serjio8781 4 года назад +1

    Hey, Chaim! Great video as always ! I've got a few questions: 1) What would a real life example be? (like some feature on an actual website) and can it be used in react ? P.S. Sorry if the questions are somewhat trivial. I'm relatively new to coding.

    • @CodingWithChaim
      @CodingWithChaim  4 года назад +4

      Great questions! One use case would be to parse large csv files in the browser. In fact there is a tool called papaParse which does exactly that, and it has the option to use a worker when the files are really large. Another example that I have personally run into, was in my file transfer video using webrtc. The idea was to be able to share really large files from one peer to other peer, now if the file was really large it had to get broken down into chunks and then get built back up as a blob on the other side. This process of building the chunks of file back into one blob had to be done in worker because if not the browser would freeze.

    • @CodingWithChaim
      @CodingWithChaim  4 года назад

      Also, yes this can absolutely be done in react.

    • @serjio8781
      @serjio8781 4 года назад

      @@CodingWithChaim , awesome, thanks a lot :)

  • @pandakev
    @pandakev 3 года назад

    Great video! I understand them much better now

  • @dewinchy
    @dewinchy 3 года назад

    Man! Nice work, easiest explanation. 5 stars :)

  • @ranajoy2010
    @ranajoy2010 3 года назад

    Learnt something new! :) Very nice content, btw. Keep up the good work. RUclips is a long term game. ;)

  • @djneils100
    @djneils100 3 года назад

    this is super-cool - had no idea this existed - thanks!

  • @ninjaduck3534
    @ninjaduck3534 4 года назад

    Great, concise explanation. Thank you!

  • @nonamusaelian5493
    @nonamusaelian5493 3 года назад

    @Coding With Chiam But what if we write that long taking functionality inside the setTimeout function? Will it also block the main thread? Could you please explain? Or maybe make another video with the explanation the difference between web workers and setTimeout(asynchronous functions). Don't they solve the same problem? Thanks

    • @CodingWithChaim
      @CodingWithChaim  3 года назад +1

      See this SO post stackoverflow.com/questions/50737037/settimeout-vs-web-worker-when-to-use-what#:~:text=They%20don't.,and%20is%20just%20as%20blocking.

    • @nonamusaelian5493
      @nonamusaelian5493 3 года назад

      @@CodingWithChaim Thank you

  • @ВладимирТайдонов-я6л

    Thank you so much!