Concurrency Programming

Concurrency Programming

• Concurrency is the notion of multiple things happening at the same time

Models for Programming Concurrency

• Sequential Programming
• Message-passing Concurrency
• Shared-state Concurrency
  • Mutexes, Semaphores, or Monitors

Concurrency in Java

• Processes
• Threads
• Locks and thread synchronization

How about the Web?

Concurrency Programming of Web

• Server Side
• Client Side

Server Side

• Powerful Framework
  • Spring, Node.js, Etc
• Use kind of operating system for development
  • Support for multi-core and multi-threading
    • Java
    • JavaScript (Node.js cluster, multiplexing)

Client Side (WebApp)

• In the Browser
• Use kind of browser interface for development
  • Support for multi-core and multi-threading
    • Single Thread concept of JavaScript running in browser

JavaScript Concurrency Model

UI Thread in Browser

• Single Thread Event Loop/Queue Mechanism
• UI Thread is responsible for both UI Updates and JavaScrtipt Execution

When Button Click Event

When Button Click Event

When Button Click Event

When Button Click Event

When Button Click Event

When Button Click Event

UI pending while JavaScript is executing

UI long pending while Heavy Weight JavaScript is executing

Unresponsive UI

Runaway Script Timer Limits

• IE: 5 million statements
• Chrome: Unknown, Self crash control
• Firefox: 10 seconds
• Safari: 5 seconds

Imitate Multi-Thread Programming

• JavaScript Timers
  • var id = setTimeout( fn, delay );
  • var id = setInterval( fn, delay );
  • clearTimeout( id );
  • clearInterval( id );

Timer delay is not guaranteed

function fun1() {
    console.log("fun1");
    setTimeout(fun2, 0);
    console.log("fun1-2");
    fun3();
}
function fun2() {
    console.log("fun2");
}
function fun3() {
    console.log("fun3");
}
fun1();
                        

Timer delay is not guaranteed

Multithreaded Programming to JavaScript is Impossible?

Possible to WebWorker.

Web Worker

• A web worker is a JavaScript running in the background, without affecting the performance of the page.
• Javascript executed on a separate thread ( background and not the UI thread)

Web Worker

Web Worker Demo

Find route without Workers Find route with Workers

Loading Route...

Good

• UI 와 Business Logic 분리가능
  • UI 는 항상 non-blocking 되어야 하는 환경
  • Heavy Weight Scripts (복잡한 산술계산)
  • AJAX 의 결과 값이 크고 이에 대한 parsing / filter 에 대한 workload 가 큰경우

Limited Access

• window, document, console, parent object 에 접근 불가
  • 공유 자원이 없기 때문에 thread 간 race condition이 발생하지 않음
• Shared Worker 는 Worker 내의 전역변수 공유가능

Communicate with Workers

• MessageEvent
  • postMessage API
  • Supports passing JSON structures
  • The parent and worker threads have their own separate space

Terminating Workers

• Workers are resource-intensive, They are OS-level threads
• Workers can terminate
• Workers can terminate themselves
• self.close();
• Parent thread can terminate a worker
• worker.terminate();

Kinds of Worker

• DedicatedWorker
  • 하나의 Worker 가 하나의 Thread 를 가지는 Worker
• SharedWorker
  • 하나의 Worker 를 공유하고 통신할 수 있는 Worker
  • All pages or scripts on the same origin can communicate with a shared worker

DedicatedWorker Tutorial

// index.html

                        

// worker.js
// importScripts( ‘library1.js’, ‘library2.js’);
onmessage = function ( event ) {
    // TODO:: Bussiness Logic
postMessage( data );
}
                        

SharedWorker Tutorial

// index.html

                        

// sharedWorker.js
var globalConnections = 0;
onconnect = function ( event ) {
    var port = event.ports[0];
    globalConnections++;
    port.onmessage = function ( event ) {
        port. postMessage( globalConnections );
        // port.close();
    }
}
                

Debugging SharedWorker

• Chrome Dev Tools
  • chrome://inspect

WebWorker Browser Support

SharedWorker Browser Support

Tizen 2.3 Browser Support

References

• Web Worker Spec
• Mozila Developer NetWork - Using web workers
• John Resig - How JavaScript Timers Work
• CapitolJS 2011 - High Performance JavaScript

Q&A

Thank you!