What the Web Worker - Speaker Deck

Slide 1

Slide 1 text

Bingo 2013/05/19 1 Web Worker What the Sunday, May 19, 13

Slide 2

Slide 2 text

About Me • front-end Engineer at • http:/ /blog.blackbing.net • [email protected] • https:/ /www.facebook.com/blackbing 2 Sunday, May 19, 13

Slide 3

Slide 3 text

Hello Web Worker 3 Sunday, May 19, 13

Slide 4

Slide 4 text

In the beginning 4 if (heard?) if (heard? && used?) if (heard? && used? && frustrated?) if (heard? && used? && used_in_project?) Sunday, May 19, 13

Slide 5

Slide 5 text

Web Worker A web worker, as deﬁned by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of other, user- interface scripts that may also have been executed from the same HTML page. Web workers are able to utilize multi-core CPUs more effectively. http://en.wikipedia.org/wiki/Web_worker 5 Sunday, May 19, 13

Slide 6

Slide 6 text

Web Worker 6 http://en.wikipedia.org/wiki/Web_worker A web worker, as deﬁned by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG), is a JavaScript script executed from an HTML page that runs in the background, independently of other, user- interface scripts that may also have been executed from the same HTML page. Web workers are able to utilize multi-core CPUs more effectively. Sunday, May 19, 13

Slide 7

Slide 7 text

7 Sunday, May 19, 13

Slide 8

Slide 8 text

UI Blocking? • javascript is single-threaded • UI rendering • executing javascript 8 http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/ Sunday, May 19, 13

Slide 9

Slide 9 text

Boss said... 9 1+2+3+...+n Sunday, May 19, 13

Slide 10

Slide 10 text

That’s easy! function getsum(max) { var cnt = 0; var sum = 0; while (cnt <= max) { sum += cnt++; } return sum; } 10 Sunday, May 19, 13

Slide 11

Slide 11 text

11 getsum(1,000) getsum(100,000) getsum(1,000,000,000) ഋ۩ Sunday, May 19, 13

Slide 12

Slide 12 text

DEMO 12 http://blackbing.github.com/WorkerD/why.html Sunday, May 19, 13

Slide 13

Slide 13 text

13 Sunday, May 19, 13

Slide 14

Slide 14 text

14 Sunday, May 19, 13

Slide 15

Slide 15 text

1+2+..+n = 15 Sunday, May 19, 13

Slide 16

Slide 16 text

16 Sunday, May 19, 13

Slide 17

Slide 17 text

Don’t jump into Web Worker for using Web Worker. 17 If you just think it’s cool ,you’ll be frustrated. Sunday, May 19, 13

Slide 18

Slide 18 text

18 Sunday, May 19, 13

Slide 19

Slide 19 text

Expectation 19 It should be faster. It should be easy to use. It should avoid blocking UI. Sunday, May 19, 13

Slide 20

Slide 20 text

CAN I USE it on Desktop? 20 http://caniuse.com/#search=worker 100% Sunday, May 19, 13

Slide 21

Slide 21 text

CAN I USE it on Mobile? 21 http://caniuse.com/#search=worker Sunday, May 19, 13

Slide 22

Slide 22 text

CAN I USE it on Mobile? 22 http://caniuse.com/#search=worker 100%(!?) Sunday, May 19, 13

Slide 23

Slide 23 text

23 Sunday, May 19, 13

Slide 24

Slide 24 text

new Worker var worker = new Worker('worker.js'); worker.postMessage(something); worker.onmessage = function(e) { console.log('Worker said: ', e.data); }); 24 self.onmessage = function(e) { self.postMessage(e.data); }; Master Worker Sunday, May 19, 13

Slide 25

Slide 25 text

var worker = new Worker('worker.js'); worker.postMessage(something); worker.addEventListener('message', function(e) { console.log('Worker said: ', e.data); }, false); 25 self.addEventListener('message', function(e) { self.postMessage(e.data); }, false); Master Worker new Worker Sunday, May 19, 13

Slide 26

Slide 26 text

Worker cannot access • window • DOM • document • parent is undefined is undefined is undefined is undefined 26 Sunday, May 19, 13

Slide 27

Slide 27 text

Pass window object? worker.postMessage(window); 27 Master Sunday, May 19, 13

Slide 28

Slide 28 text

postMessage 28 worker.postMessage({ 'number': 1234, 'reg': /[\d]+/ig, 'boolean': true, 'object': { 'foo':'bar' }, 'array': ['foo','bar'] }) Master Sunday, May 19, 13

Slide 29

Slide 29 text

postMessage 29 worker.postMessage({ 'number': 1234, 'reg': /[\d]+/ig, 'boolean': true, 'object': { 'foo':'bar' }, 'array': ['foo','bar'], 'func': function(){ //this is a function } }) Master Sunday, May 19, 13

Slide 30

Slide 30 text

30 http://ajaxian.com/archives/an-implausibly-illustrated-introduction-to-html5-web-workers Sunday, May 19, 13

Slide 31

Slide 31 text

Worker can use • navigator • location(read-only) • XMLHttpRequest • setTimeout/setInterval • Basic Javascript data Structure and Function(Math, Date, Array, etc.) 31 Functions available to workers : https://developer.mozilla.org/en-US/docs/DOM/Worker/Functions_available_to_workers Sunday, May 19, 13

Slide 32

Slide 32 text

32 Web Workers in IE10: Background JavaScript Makes Web Apps Faster Sunday, May 19, 13

Slide 33

Slide 33 text

Debug 33 worker.addEventListener('error', function(error){ console.error(error.message); console.error(error.filename); console.error(error.lineno); }); Master Sunday, May 19, 13

Slide 34

Slide 34 text

Import Scripts 34 importScripts("http://underscorejs.org/underscore.js") no jQuery, Backbone, etc. Worker Sunday, May 19, 13

Slide 35

Slide 35 text

Release Worker 35 worker.terminate() self.close() Master Worker Sunday, May 19, 13

Slide 36

Slide 36 text

Cost 36 Sunday, May 19, 13

Slide 37

Slide 37 text

Use Case Prefetching and/or caching data for later use • Code syntax highlighting or other real-time text formatting • Spell checker • Analyzing video or audio data • Background I/O or polling of web services • Processing large arrays or humungous JSON responses • Image ﬁltering in • Updating many rows of a local web database 37 Sunday, May 19, 13

Slide 38

Slide 38 text

front-end is more and more • upload image: resize/rotate/ﬁltering • upload/download ﬁle format: use a format for the server, translating other format in client side. 38 powerful Sunday, May 19, 13

Slide 39

Slide 39 text

Client-Server 39 Client Server Server Server Server Sunday, May 19, 13

Slide 40

Slide 40 text

Client-Server 40 Master HTML Worker Worker Worker Worker Sunday, May 19, 13

Slide 41

Slide 41 text

Background tasks run while user interacting • auto save the draft of article • syntax highlighting • log user’s behavior(mouse tracking, clicking, etc...) • prefetching data • predicting user behavior • Generate complicated html template 41 Sunday, May 19, 13

Slide 42

Slide 42 text

Mobile • Limited capability on mobile • Multicore CPU 42 Sunday, May 19, 13

Slide 43

Slide 43 text

Real world usage • Syntax highlighting : ace code editor(Bespin) • Crypto : SHA1 Checksum Calculator • Graphics/image • snowCam • arborjs: http:/ /arborjs.org/ • A User-Driven Web OS: http:/ /grimwire.github.io/grimwire • parallel.js: http:/ /adambom.github.io/parallel.js/ • Post huge data to server 43 Sunday, May 19, 13

Slide 44

Slide 44 text

Wanna Try? • http:/ /webworkersandbox.com/ 44 Sunday, May 19, 13

Slide 45

Slide 45 text

Brief Summary • What is web worker? • Basic usage • onMessage/postMessage • Debug • Use case and real world usage 45 Sunday, May 19, 13

Slide 46

Slide 46 text

Known Issue • create worker in worker, but it is currently not support in Chrome • Crash when trying to use many Webworkers 46 Sunday, May 19, 13

Slide 47

Slide 47 text

Problems • Break dependency • Hardly debug • Troublesome on postMessage 47 Sunday, May 19, 13

Slide 48

Slide 48 text

Break dependency 48 worker = new Worker('/worker_path/my_worker.js'); define (require)-> require 'jquery' car = require 'lib/car' plane = require 'lib/plane' break requirejs dependency Master Sunday, May 19, 13

Slide 49

Slide 49 text

inline Worker 49 var jscontent = require('text!workerScript/inline_worker.js'); var blobWorker = new Blob([jscontent], {type:'application/javascript'}); var blobWorker_url = URL.createObjectURL(blobWorker); URL.revokeObjectURL(blobWorker_url); inlineWorker.terminate(); var inlineWorker = new Worker(blobWorker_url); require text plugin Master Release resource Sunday, May 19, 13

Slide 50

Slide 50 text

Hardly debug 50 worker.addEventListener('error', function(error){ console.error(error.message); console.error(error.filename); console.error(error.lineno); }); no console !? Master Sunday, May 19, 13

Slide 51

Slide 51 text

Troublesome on postMessage 51 var worker = new Worker('worker.js'); worker.postMessage({'type': 'task1', data:'blabla'}); worker.postMessage({'type': 'task2', data:'blabla'}); worker.postMessage({'type': 'task3', data:'blabla'}); .... self.addEventListener('message', function(e) { var data = e.data; var type = data.type; if(type === 'task1') //blablabla else if(type === 'task2') //blablabla //......etc }, false); Master Worker Sunday, May 19, 13

Slide 52

Slide 52 text

Passing Massive Data 52 worker.postMessage({ //it is a very very complicated JSON }) Worker UI still block! Master Sunday, May 19, 13

Slide 53

Slide 53 text

Solution • Split the data • Transferable Object 53 Sunday, May 19, 13

Slide 54

Slide 54 text

Split data 54 Worker Sunday, May 19, 13

Slide 55

Slide 55 text

Transferable Object 55 worker.postMessage({ 'number': 1234, 'reg': /[\d]+/ig, 'boolean': true, 'object': { 'foo':'bar' }, 'array': ['foo','bar'], 'ref_object': object_from_closure, }) worker.postMessage('this is a string'); Worker structured cloning Freeeeze!! Master Sunday, May 19, 13

Slide 56

Slide 56 text

pass Transferable Object 56 worker.postMessage(arrayBuffer, [arrayBuffer]); var SIZE = 1024 * 1024 * 32; // 32MB var arrayBuffer = new ArrayBuffer(SIZE); var uInt8View = new Uint8Array(arrayBuffer); var originalLength = uInt8View.length; for (var i = 0; i < originalLength; ++i) { uInt8View[i] = i; } worker.postMessage(uInt8View.buffer, [uInt8View.buffer]); Master Sunday, May 19, 13

Slide 57

Slide 57 text

Feature Detection 57 var ab = new ArrayBuffer(1); worker.postMessage(ab, [ab]); //If the buffer is transferred and not copied, its .byteLength will go to 0: if (ab.byteLength) { alert('Transferables are not supported in your browser!'); } else { // Transferables are supported. } http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast Master Sunday, May 19, 13

Slide 58

Slide 58 text

Expectation? 58 It must be faster. It should be easy to use. It should avoid blocking UI. Cost of creating Worker Hardly to set up dependency if we need to pass massive data Sunday, May 19, 13

Slide 59

Slide 59 text

WorkerD 59 https:/ /github.com/blackbing/WorkerD bower install WorkerD Sunday, May 19, 13

Slide 60

Slide 60 text

Why D? 60 Sunday, May 19, 13

Slide 61

Slide 61 text

Beneﬁts worker.send('count', {s:1, e:10}) syntax sugar self.on('count', function(data){ //data is {s:1, e:10} }) Master Worker Sunday, May 19, 13

Slide 62

Slide 62 text

62 console console.log/error/time/etc... require([ "./car" "./wheel" ], (Car, Wheel) -> car = new Car('red') wheel = new Wheel('iron') ) require Worker Worker Beneﬁts Sunday, May 19, 13

Slide 63

Slide 63 text

Example 63 jscontent = require('text!inline_worker.js') $('#sum_with_worker').on('click', -> loading() worker = new WorkerD(inlineWorker_js) worker.send('getSum', sumMax) worker.on('gotSum', (event, data)-> log "gotSum: #{data}" loaded() ) ) @on "getSum", (max) -> sum = cnt = 0 while(cnt<=max) sum += cnt++ self.send('gotSum', sum) Master Worker Sunday, May 19, 13

Slide 64

Slide 64 text

console 64 @on "getSum", (max) -> console.group 'getSum' console.time 'getSum' console.log 'getSum' console.log max sum = cnt = 0 while(cnt<=max) sum += cnt++ console.log sum self.send 'gotSum', sum console.log 'inlineWorker send message' console.timeEnd 'getSum' console.groupEnd 'getSum' Worker Sunday, May 19, 13

Slide 65

Slide 65 text

Live Demo 65 http://blackbing.github.com/WorkerD/sandbox.html Sunday, May 19, 13

Slide 66

Slide 66 text

Real World Example 66 Sunday, May 19, 13

Slide 67

Slide 67 text

67 https://c9.io Sunday, May 19, 13

Slide 68

Slide 68 text

68 http://antimatter15.github.io/js-typed-array-sha1/ Sunday, May 19, 13

Slide 69

Slide 69 text

69 http://arborjs.org/ Sunday, May 19, 13

Slide 70

Slide 70 text

70 https://start.htc.com Sunday, May 19, 13

Slide 71

Slide 71 text

71 http://adambom.github.io/parallel.js/ Sunday, May 19, 13

Slide 72

Slide 72 text

72 લ୺ᏈೳఏঋํҊ Web Worker ਆث Web Worker࿝໦!? ၏!बሣྃ! Sunday, May 19, 13

Slide 73

Slide 73 text

More Reading 73 http://www.html5rocks.com/en/tutorials/workers/basics/ http://social.msdn.microsoft.com/Search/en-US?query=web%20worker&ac=5 Sunday, May 19, 13

Slide 74

Slide 74 text

Thank you 74 Sunday, May 19, 13

Slide 75

Slide 75 text

We are hiring front-end Engineer 75 https:/ /www.facebook.com/blackbing Sunday, May 19, 13