WarsawJS Presentation Template

Is JavaScript single threaded?

• Yes
• Kindof yes
• No

Lets find out...

Simple code

                console.log('Hey');
                sweat();
                console.log('There');
            

Run

Now with timeout

                console.log('Hey');
                setTimeout(function (){
                  sweat();
                }, 0);
                console.log('There');
            

Run the code!

So, is setTimeout not in main thread or what?

Lets process the 'click'

2. Web APIs

• Web APIs are a multi-threaded area of the browser that allows many events to trigger at once.
• Web APIs contains timers, XMLHttpRequest, DOM document,Web Workers...
• The click event propagates thru the DOM’s Web API
• Triggering click handlers during the propagation phases on parent and child elements.

3 - 4 Event queue and Event loop

• Next the event’s callback is pushed into one of many event queues
• Just as there are multiple Web APIs, browsers have event queues for things like network requests, DOM events, Timers, Web Workers...
• Then a single event loop chooses which callback to push onto the JavaScript call stack
• Basically it works like: if Call Stack is empty push the oldest task from queues to the Stack

5. JavaScript Runtime

Single threaded, Synchronous, Non-blocking

• Every function invocation including event callbacks creates a new stack frame
• These stack frames are pushed and popped from the top of the call stack, the top being the currently executing code
• When the function is returned it’s stack frame is popped from the stack

Web Workers does not have acces to:

• The DOM (it's not thread-safe)
• The window object
• The document object
• The parent object

Communication throught postMessage()

myWorker.postMessage(aMessage, transferList);
• aMessage - any value or JavaScript object handled by the structured clone algorithm(All primitive types, Blob, File, FileList, ArrayBuffer, ArrayBufferView(basically all typed arrays like Int32Array etc.),ImageData, Object, Array, Map, Set)

Communication throught postMessage() part 2

myWorker.postMessage(aMessage, transferList);
• transferList - optional array of Transferable objects to transfer ownership of. When transfer is done, it becomes unusable in contex transfered from, and worker can modify it. Only MessagePort and ArrayBuffer objects can be transferred.

Simple Worker doing much operations

Simple Worker
BlobWorker
noBlockButton

Worker Said?

Simple Worker Code

                var workerPar = document.getElementById('#workerPar');
                var worker = new Worker('bigLoop.js');
                worker.addEventListener('message', function (e){   
                  workerPar.innerHTML = e.data;
                });
            

bigLoop.js file

                self.addEventListener('message', function(e) {
                  for (var i = 0; i <= 1000000000; i++){
                      var j = i;
                  }
                  var x = e.data + j;
                  self.postMessage(x);
                });
            

Same worker using blobs

                var blob = new Blob(["String with code from file"]);
                var blobURL = window.URL.createObjectURL(blob);
                var bloWorker = new Worker(blobURL);
                blobWorker.addEventListener('message', function (e){   
                  workerPar.innerHTML = e.data;
                });
            

Error Handling:

                badWorker.addEventListener('error', function (e){   
                  console.log(e.lineno + ' ' + e.filename + ' ' + e.message);
                });
            

Error file code

                self.addEventListener('message', function(e){
                // y = undefined;
                  var x = e.data / y;
                  self.postMessage(x);
                });
            

Error example:

Simple Worker

Worker Said?

XHR

                importScripts('xhr.js');
                self.addEventListener('message', function(e){
                    var a = JSON.parse(e.data);
                    var request = makeRequest(a.method, a.url);
                    request.then(function (response){
                        self.postMessage(response);
                    }).;
                });
            

Promised XHR

XHR
Bad XHR

Worker Get?

Image processing

WThread
MThread

Libraries

• Operative
• Caitline
• Parallel.js