JS and Parallel Processing(!?)

For a long time, JavaScript was missing any kind of processing threads. While the single-threaded model added to developer comfort, it also made the platform unable to do serious and time-consuming calculations, and the only way to circumvent it was to do it on a remote server.

Luckily, with the introduction and widespread adoption of Web Workers, we can now do resource-intensive calculations on background threads. A Web Worker allows you to run JavaScript in the background, without affecting the performance of the page. Even if you are running really resource intense code in the browser, you can continue to do whatever you want: clicking, selecting things, etc., while the Web Worker runs in the background.

In this talk, we will explore:

Web Workers, how and when you can use them, and their peculiarities.
Polyfilling for naughty browsers
Future: WebGL, Canvas2D, and other marvels browser vendors are cooking up.

Transcript

1. @JoeKarlsson1 ! 1 JS + Parallel Processing(!?) www.joekarlsson.com
2. @JoeKarlsson1 ! 2 Joe Karlsson @JOEKARLSSON1 @JOEKARLSSON JOEKARLSSON.COM
3. @JoeKarlsson1 ! 3 How is this going to work?
4. @JoeKarlsson1 ! 4 JavaScript was designed to run on a single thread
5. @JoeKarlsson1 ! 5 Can Do Anything Multithreads Can do Easy to Program Easy to Port Code *For non-data intensive operations *Faster Than Multithreads Easy to Debug/Test Why Single Threads?
6. @JoeKarlsson1 ! 6 What’s the problem?
7. @JoeKarlsson1 ! 7
8. @JoeKarlsson1 ! 8 Single thread is SHARED with the browser
9. @JoeKarlsson1 ! 9
10. @JoeKarlsson1 ! 10 • Parsing large JSON set • Image Processing • Sound Processing • Real Time Analytics Things that take a lot of time
11. @JoeKarlsson1 ! 11
12. @JoeKarlsson1
13. @JoeKarlsson1 ! 13 This even is worse on mobile
14. @JoeKarlsson1 ! 14 So, how do we deal with slow processes?
15. @JoeKarlsson1 ! 15 We could send the CPU intense process to a server
16. @JoeKarlsson1 ! 16
17. @JoeKarlsson1 ! 17 Web Workers Multiple Threads in the browser!
18. @JoeKarlsson1 ! 18 Background scripts that run on a different thread
19. @JoeKarlsson1 ! 19 • Faster • More Responsive • Battery efficient • Support in every major browser (IE 10+)
20. @JoeKarlsson1 ! 20 Web Workers cannot directly access the Window Object or the DOM
21. @JoeKarlsson1 ! 21 How do Web Workers work?
22. @JoeKarlsson1 ! 22
23. @JoeKarlsson1 ! 23 Each Web Worker you create === a new thread
24. @JoeKarlsson1 ! 24
25. @JoeKarlsson1 ! 25 They communicate via Message Channel
26. @JoeKarlsson1 ! 26
27. @JoeKarlsson1 ! 27 Web Workers operate in a different context They cannot directly access the Window or DOM
28. @JoeKarlsson1 ! 28 But they can do pretty much everything else the main thread can do
29. @JoeKarlsson1 ! 29 Let’s look at real code Code: https://github.com/JoeKarlsson/live-code/tree/master/web-workers
30. @JoeKarlsson1 ! 30
31. @JoeKarlsson1 ! 31
32. @JoeKarlsson1 ! 32
33. @JoeKarlsson1 ! 33
34. @JoeKarlsson1 ! 34 /js/bigLoop.js
35. @JoeKarlsson1 ! 35
36. @JoeKarlsson1 ! 36 How do we stop a Web Worker?
37. @JoeKarlsson1 ! 37
38. @JoeKarlsson1 ! 38
39. @JoeKarlsson1 ! 39
40. @JoeKarlsson1 ! 40 Errors?
41. @JoeKarlsson1 ! 41 js errror
42. @JoeKarlsson1 ! 42
43. @JoeKarlsson1 ! 43 How to check for browser support?
44. @JoeKarlsson1 ! 44 browser
45. @JoeKarlsson1 ! 45
46. @JoeKarlsson1 ! 46 Future of Web Workers
47. @JoeKarlsson1 ! 47
48. @JoeKarlsson1 ! 48 WebGL and Canvas2D
49. @JoeKarlsson1 ! 49
50. @JoeKarlsson1 ! 50
51. @JoeKarlsson1 ! 51 • Web Workers are relatively heavy- weight, and are not intended to be used in large numbers • Web Workers are amazing but hard to manage
52. @JoeKarlsson1 ! 52 Questions ?
53. @JoeKarlsson1 ! 53 Thank You!
54. @JoeKarlsson1 ! 54 Let’s Stay In Touch @JOEKARLSSON1 @JOEKARLSSON JOEKARLSSON.COM
55. @JoeKarlsson1 ! 55 Additional Resources 1. Code: https://github.com/JoeKarlsson/live-code/tree/master/web-workers 2. Slides: 3. Web Workers: https://developer.mozilla.org/en-US/docs/Web/API/ Web_Workers_API/Functions_and_classes_available_to_workers
 4. Web Workers: http://techslides.com/html5-web-workers-for-ajax-requests
 5. Workers: https://html.spec.whatwg.org/multipage/workers.html#shared- workers-introduction
56. @JoeKarlsson1 ! 56