├── webpack ├── .gitignore ├── src │ ├── fibonacci.js │ ├── worker.js │ ├── index.html │ ├── inline.html │ ├── app.js │ └── inline.js ├── package.json ├── dist │ ├── index.html │ ├── inline.html │ ├── 8326e76ae84e026da11a.worker.js │ ├── app-bundle.js │ ├── inline-bundle.js │ ├── 8326e76ae84e026da11a.worker.js.map │ ├── app-bundle.js.map │ └── inline-bundle.js.map └── webpack.config.js ├── worker.js ├── iframe-code.html ├── README.md ├── worker.html ├── iframe.html ├── iframe-crossorigin.html ├── inline-worker.html └── data-passing.html /webpack/.gitignore: -------------------------------------------------------------------------------- 1 | .npm 2 | node_modules/ 3 | *.swp 4 | 5 | -------------------------------------------------------------------------------- /webpack/src/fibonacci.js: -------------------------------------------------------------------------------- 1 | // https://gist.github.com/jfairbank/8d36e4bde9c16dc0bac7 2 | export default function fibonacci(n) { 3 | if (n < 2) { 4 | return 1; 5 | }else { 6 | return fibonacci(n - 2) + fibonacci(n - 1); 7 | } 8 | } 9 | 10 | -------------------------------------------------------------------------------- /webpack/src/worker.js: -------------------------------------------------------------------------------- 1 | import fibonacci from "./fibonacci.js"; 2 | 3 | onmessage = (e) => { 4 | const num = e.data; 5 | console.log(`Starting calculation for ${num}`); 6 | const result = fibonacci(num); 7 | console.log(`Finished calculation for ${num}`); 8 | postMessage(result); 9 | }; 10 | -------------------------------------------------------------------------------- /worker.js: -------------------------------------------------------------------------------- 1 | // https://gist.github.com/jfairbank/8d36e4bde9c16dc0bac7 2 | function fibonacci(n) { 3 | if (n < 2) { 4 | return 1; 5 | }else { 6 | return fibonacci(n - 2) + fibonacci(n - 1); 7 | } 8 | } 9 | onmessage = (e) => { 10 | const num = e.data; 11 | console.log(`Starting calculation for ${num}`); 12 | const result = fibonacci(num); 13 | console.log(`Finished calculation for ${num}`); 14 | postMessage(result); 15 | }; 16 | 17 | -------------------------------------------------------------------------------- /webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name":"parallel-processing-in-js", 3 | "version":"0.0.1", 4 | "scripts": { 5 | "build": "NODE_ENV=production webpack -p --progress --profile --colors", 6 | "watch": "webpack-dev-server --hot --inline --progress --colors --watch-poll" 7 | }, 8 | "dependencies": { 9 | }, 10 | "devDependencies": { 11 | "webpack": "1.13.1", 12 | "webpack-dev-server": "1.14.1", 13 | "worker-loader": "0.7.0", 14 | "html-webpack-plugin": "1.7.0", 15 | "babel-core": "6.10.4", 16 | "babel-preset-es2015": "6.9.0", 17 | "babel-loader": "6.2.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /iframe-code.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Web Workers using Webpack

7 | 8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Web Workers using Webpack

7 | 8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /webpack/src/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Inline Web Workers using Webpack

7 | 8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /webpack/dist/inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Inline Web Workers using Webpack

7 | 8 |
9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /webpack/dist/8326e76ae84e026da11a.worker.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var r=o(1),u=n(r);onmessage=function(e){var t=e.data;console.log("Starting calculation for "+t);var o=(0,u["default"])(t);console.log("Finished calculation for "+t),postMessage(o)}},function(e,t){"use strict";function o(e){return e<2?1:o(e-2)+o(e-1)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o}]); 2 | //# sourceMappingURL=8326e76ae84e026da11a.worker.js.map -------------------------------------------------------------------------------- /webpack/src/app.js: -------------------------------------------------------------------------------- 1 | const workerCode = require("worker!./worker.js"); 2 | 3 | const calculateFibonacci = (num) => { 4 | return new Promise((resolve, reject) => { 5 | const worker = new workerCode(); 6 | worker.onerror = (e) => { 7 | worker.terminate(); 8 | reject(e); 9 | }; 10 | worker.onmessage = (e) => { 11 | worker.terminate(); 12 | resolve(e.data); 13 | } 14 | worker.postMessage(num); 15 | }); 16 | }; 17 | window.calc = () => { 18 | for (let i = 1; i <= 4; i++) { 19 | const e = document.getElementById("result" + i); 20 | e.value = "Calculating..."; 21 | calculateFibonacci(40 + i).then((res) => { 22 | e.value = res; 23 | }); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /webpack/src/inline.js: -------------------------------------------------------------------------------- 1 | const workerCode = require("worker?inline!./worker.js"); 2 | 3 | const calculateFibonacci = (num) => { 4 | return new Promise((resolve, reject) => { 5 | const worker = new workerCode(); 6 | worker.onerror = (e) => { 7 | worker.terminate(); 8 | reject(e); 9 | }; 10 | worker.onmessage = (e) => { 11 | worker.terminate(); 12 | resolve(e.data); 13 | } 14 | worker.postMessage(num); 15 | }); 16 | }; 17 | window.calc = () => { 18 | for (let i = 1; i <= 4; i++) { 19 | const e = document.getElementById("result" + i); 20 | e.value = "Calculating..."; 21 | calculateFibonacci(40 + i).then((res) => { 22 | e.value = res; 23 | }); 24 | } 25 | }; 26 | 27 | -------------------------------------------------------------------------------- /webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 2 | 3 | module.exports = { 4 | entry: { 5 | app: "./src/app.js", 6 | inline: "./src/inline.js" 7 | }, 8 | output: { 9 | path: "dist", 10 | filename: "[name]-bundle.js" 11 | }, 12 | module: { 13 | loaders: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/ , 17 | loaders: ["babel-loader?presets[]=es2015"] 18 | } 19 | ] 20 | }, 21 | plugins: [ 22 | new HtmlWebpackPlugin({ 23 | template: "src/index.html" 24 | }), 25 | new HtmlWebpackPlugin({ 26 | template: "src/inline.html", 27 | filename: "inline.html" 28 | }) 29 | ], 30 | devtool: "source-map", 31 | debug: true 32 | }; 33 | -------------------------------------------------------------------------------- /webpack/dist/app-bundle.js: -------------------------------------------------------------------------------- 1 | !function(n){function e(r){if(t[r])return t[r].exports;var o=t[r]={exports:{},id:r,loaded:!1};return n[r].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var t={};return e.m=n,e.c=t,e.p="",e(0)}([function(n,e,t){"use strict";var r=t(2),o=function(n){return new Promise(function(e,t){var o=new r;o.onerror=function(n){o.terminate(),t(n)},o.onmessage=function(n){o.terminate(),e(n.data)},o.postMessage(n)})};window.calc=function(){for(var n=function(n){var e=document.getElementById("result"+n);e.value="Calculating...",o(40+n).then(function(n){e.value=n})},e=1;e<=4;e++)n(e)}},,function(n,e,t){n.exports=function(){return new Worker(t.p+"8326e76ae84e026da11a.worker.js")}}]); 2 | //# sourceMappingURL=app-bundle.js.map -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Parallel Processing in JS 2 | 3 | This repo contains a few examples how to do background processing in Javascript. 4 | 5 | These codes are demonstrations for a blog post. 6 | 7 | _Note_: The fibonacci calculation code is purposely left slow in order to demonstrate a long-running calculation process. 8 | 9 | * [Web Worker](https://sashee.github.io/parallel-processing-in-js/worker.html) 10 | * [Inline Web Worker](https://sashee.github.io/parallel-processing-in-js/inline-worker.html) 11 | 12 | To see some examples on how you could pass different types of data to and from the Workers: 13 | 14 | * [Data Passing](https://sashee.github.io/parallel-processing-in-js/data-passing.html) 15 | 16 | You can also see how to use the worker-loader in Webpack: 17 | 18 | * [Default](https://sashee.github.io/parallel-processing-in-js/webpack/dist/index.html) 19 | * [Inline](https://sashee.github.io/parallel-processing-in-js/webpack/dist/inline.html) 20 | 21 | And two examples, that shows the same can not be achieved with IFrames: 22 | 23 | * [IFrame](https://sashee.github.io/parallel-processing-in-js/iframe.html) 24 | * [Cross-Origin IFrame](https://sashee.github.io/parallel-processing-in-js/iframe-crossorigin.html) 25 | -------------------------------------------------------------------------------- /worker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 28 | 29 | 30 |

Background calculation using a Web Worker

31 |

This example uses a Web Worker. Workers are inherently parallel, and you can see the 32 | calculations are running on different threads.

33 |

Click on the Calculate button, and you can see the UI is not affected by the calculations. It 34 | stays responsive, indicating the processing is running on different threads.

35 | 36 |
37 | 38 | 39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /webpack/dist/inline-bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";var o=n(3),r=function(e){return new Promise(function(t,n){var r=new o;r.onerror=function(e){r.terminate(),n(e)},r.onmessage=function(e){r.terminate(),t(e.data)},r.postMessage(e)})};window.calc=function(){for(var e=function(e){var t=document.getElementById("result"+e);t.value="Calculating...",r(40+e).then(function(e){t.value=e})},t=1;t<=4;t++)e(t)}},function(e,t){var n=window.URL||window.webkitURL;e.exports=function(e,t){try{try{var o;try{var r=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder;o=new r,o.append(e),o=o.getBlob()}catch(a){o=new Blob([e])}return new Worker(n.createObjectURL(o))}catch(a){return new Worker("data:application/javascript,"+encodeURIComponent(e))}}catch(a){return new Worker(t)}}},,function(e,t,n){e.exports=function(){return n(1)('!function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}var r=o(1),u=n(r);onmessage=function(e){var t=e.data;console.log("Starting calculation for "+t);var o=(0,u["default"])(t);console.log("Finished calculation for "+t),postMessage(o)}},function(e,t){"use strict";function o(e){return e<2?1:o(e-2)+o(e-1)}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o}]);\n//# sourceMappingURL=8326e76ae84e026da11a.worker.js.map',n.p+"8326e76ae84e026da11a.worker.js")}}]); 2 | //# sourceMappingURL=inline-bundle.js.map -------------------------------------------------------------------------------- /iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 35 | 36 | 37 |

Background calculation using an IFrame

38 |

This example uses an IFrame to offload the calculations. But because IFrames are inherently 39 | non-threadsafe, there are no parallel processing takes place.

40 |

Click on the Calculate button, and you can see the UI is practically frozen until the last 41 | calculation is completed.

42 | 43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /iframe-crossorigin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 35 | 36 | 37 |

Background calculation using a cross-origin IFrame

38 |

This example uses an IFrame that is loaded from a different origin. 39 | While the only allowed communication channel is via postMessage, the calculations 40 | are single-threaded.

41 |

Click on the Calculate button, and you can see the UI is practically frozen until the last 42 | calculation is completed.

43 | 44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /inline-worker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 53 | 54 | 55 |

Background calculation using an inline Web Worker

56 |

This example uses an inline Web Worker. It's the same as the previous, but it does not need 57 | the code to be loaded from a different file.

58 |

Click on the Calculate button, and you can see the UI is not affected by the calculations. It 59 | stays responsive, indicating the processing is running on different threads.

60 | 61 |
62 | 63 | 64 |
65 |
66 | 67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 |
77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /data-passing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 20 | 83 | 84 | 85 |

Passing data to/from the Web Worker

86 |

This example demonstrates a few ways you can communicate with a Worker.

87 |

Please check the console to see the different results.

88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /webpack/dist/8326e76ae84e026da11a.worker.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///8326e76ae84e026da11a.worker.js","webpack:///webpack/bootstrap 8326e76ae84e026da11a","webpack:///./src/worker.js","webpack:///./src/fibonacci.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","m","c","p","_interopRequireDefault","obj","__esModule","default","_fibonacci","_fibonacci2","onmessage","e","num","data","console","log","result","postMessage","fibonacci","n","Object","defineProperty","value"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAvBA,GAAAD,KAqCA,OATAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,GAGAV,EAAA,KDMM,SAASI,EAAQD,EAASH,GAE/B,YAMA,SAASW,GAAuBC,GAAO,MAAOA,IAAOA,EAAIC,WAAaD,GAAQE,UAASF,GEpDxF,GAAAG,GAAAf,EAAA,GFkDKgB,EAAcL,EAAuBI,EEhD1CE,WAAY,SAACC,GACZ,GAAMC,GAAMD,EAAEE,IACdC,SAAQC,IAAR,4BAAwCH,EACxC,IAAMI,IAAS,EAAAP,cAAUG,EACzBE,SAAQC,IAAR,4BAAwCH,GACxCK,YAAYD,KFyDP,SAASnB,EAAQD,GAEtB,YGjEc,SAASsB,GAAUC,GACjC,MAAIA,GAAI,EACA,EAEAD,EAAUC,EAAI,GAAKD,EAAUC,EAAI,GH+DzCC,OAAOC,eAAezB,EAAS,cAC9B0B,OAAO,IAER1B,aGtEuBsB","file":"8326e76ae84e026da11a.worker.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tvar _fibonacci = __webpack_require__(1);\n\t\n\tvar _fibonacci2 = _interopRequireDefault(_fibonacci);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tonmessage = function onmessage(e) {\n\t\tvar num = e.data;\n\t\tconsole.log(\"Starting calculation for \" + num);\n\t\tvar result = (0, _fibonacci2.default)(num);\n\t\tconsole.log(\"Finished calculation for \" + num);\n\t\tpostMessage(result);\n\t};\n\n/***/ },\n/* 1 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t\tvalue: true\n\t});\n\texports.default = fibonacci;\n\t// https://gist.github.com/jfairbank/8d36e4bde9c16dc0bac7\n\tfunction fibonacci(n) {\n\t\tif (n < 2) {\n\t\t\treturn 1;\n\t\t} else {\n\t\t\treturn fibonacci(n - 2) + fibonacci(n - 1);\n\t\t}\n\t}\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** 8326e76ae84e026da11a.worker.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 8326e76ae84e026da11a\n **/","import fibonacci from \"./fibonacci.js\";\n\nonmessage = (e) => {\n\tconst num = e.data;\n\tconsole.log(`Starting calculation for ${num}`);\n\tconst result = fibonacci(num);\n\tconsole.log(`Finished calculation for ${num}`);\n\tpostMessage(result);\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/worker.js\n **/","// https://gist.github.com/jfairbank/8d36e4bde9c16dc0bac7\nexport default function fibonacci(n) {\n\tif (n < 2) {\n\t\treturn 1;\n\t}else {\n\t\treturn fibonacci(n - 2) + fibonacci(n - 1);\n\t}\n}\n\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/fibonacci.js\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /webpack/dist/app-bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///app-bundle.js","webpack:///webpack/bootstrap 0ce272c3333afc869b6d?9649","webpack:///./src/app.js","webpack:///./src/worker.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","m","c","p","workerCode","calculateFibonacci","num","Promise","resolve","reject","worker","onerror","e","terminate","onmessage","data","postMessage","window","calc","_loop","i","document","getElementById","value","then","res","Worker"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAvBA,GAAAD,KAqCA,OATAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,GAGAV,EAAA,KDMM,SAASI,EAAQD,EAASH,GAE/B,YE9CD,IAAMW,GAAaX,EAAQ,GAErBY,EAAqB,SAACC,GAC3B,MAAO,IAAIC,SAAQ,SAACC,EAASC,GAC5B,GAAMC,GAAS,GAAIN,EACnBM,GAAOC,QAAU,SAACC,GACjBF,EAAOG,YACPJ,EAAOG,IAERF,EAAOI,UAAY,SAACF,GACnBF,EAAOG,YACPL,EAAQI,EAAEG,OAEXL,EAAOM,YAAYV,KAGrBW,QAAOC,KAAO,WACb,IAAK,GADcC,GAAA,SACVC,GACR,GAAMR,GAAIS,SAASC,eAAe,SAAWF,EAC7CR,GAAEW,MAAQ,iBACVlB,EAAmB,GAAKe,GAAGI,KAAK,SAACC,GAChCb,EAAEW,MAAQE,KAJHL,EAAI,EAAGA,GAAK,EAAGA,IAAKD,EAApBC,KF8DH,CAED,SAASvB,EAAQD,EAASH,GGjFhCI,EAAAD,QAAA,WACA,UAAA8B,QAAAjC,EAAAU,EAAA","file":"app-bundle.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tvar workerCode = __webpack_require__(2);\n\t\n\tvar calculateFibonacci = function calculateFibonacci(num) {\n\t\treturn new Promise(function (resolve, reject) {\n\t\t\tvar worker = new workerCode();\n\t\t\tworker.onerror = function (e) {\n\t\t\t\tworker.terminate();\n\t\t\t\treject(e);\n\t\t\t};\n\t\t\tworker.onmessage = function (e) {\n\t\t\t\tworker.terminate();\n\t\t\t\tresolve(e.data);\n\t\t\t};\n\t\t\tworker.postMessage(num);\n\t\t});\n\t};\n\twindow.calc = function () {\n\t\tvar _loop = function _loop(i) {\n\t\t\tvar e = document.getElementById(\"result\" + i);\n\t\t\te.value = \"Calculating...\";\n\t\t\tcalculateFibonacci(40 + i).then(function (res) {\n\t\t\t\te.value = res;\n\t\t\t});\n\t\t};\n\t\n\t\tfor (var i = 1; i <= 4; i++) {\n\t\t\t_loop(i);\n\t\t}\n\t};\n\n/***/ },\n/* 1 */,\n/* 2 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = function() {\n\t\treturn new Worker(__webpack_require__.p + \"8326e76ae84e026da11a.worker.js\");\n\t};\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** app-bundle.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 0ce272c3333afc869b6d\n **/","const workerCode = require(\"worker!./worker.js\");\n\nconst calculateFibonacci = (num) => {\n\treturn new Promise((resolve, reject) => {\n\t\tconst worker = new workerCode();\n\t\tworker.onerror = (e) => {\n\t\t\tworker.terminate();\n\t\t\treject(e);\n\t\t};\n\t\tworker.onmessage = (e) => {\n\t\t\tworker.terminate();\n\t\t\tresolve(e.data);\n\t\t}\n\t\tworker.postMessage(num);\n\t});\n};\nwindow.calc = () => {\n\tfor (let i = 1; i <= 4; i++) {\n\t\tconst e = document.getElementById(\"result\" + i);\n\t\te.value = \"Calculating...\";\n\t\tcalculateFibonacci(40 + i).then((res) => {\n\t\t\te.value = res;\n\t\t});\n\t}\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/app.js\n **/","module.exports = function() {\n\treturn new Worker(__webpack_public_path__ + \"8326e76ae84e026da11a.worker.js\");\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/worker-loader!./src/worker.js\n ** module id = 2\n ** module chunks = 1\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /webpack/dist/inline-bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///inline-bundle.js","webpack:///webpack/bootstrap 0ce272c3333afc869b6d","webpack:///./src/inline.js","webpack:///./~/worker-loader/createInlineWorker.js","webpack:///./src/worker.js?f231"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","m","c","p","workerCode","calculateFibonacci","num","Promise","resolve","reject","worker","onerror","e","terminate","onmessage","data","postMessage","window","calc","_loop","i","document","getElementById","value","then","res","URL","webkitURL","content","url","blob","BlobBuilder","WebKitBlobBuilder","MozBlobBuilder","MSBlobBuilder","append","getBlob","Blob","Worker","createObjectURL","encodeURIComponent"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAvBA,GAAAD,KAqCA,OATAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,GAGAV,EAAA,KDMM,SAASI,EAAQD,EAASH,GAE/B,YE9CD,IAAMW,GAAaX,EAAQ,GAErBY,EAAqB,SAACC,GAC3B,MAAO,IAAIC,SAAQ,SAACC,EAASC,GAC5B,GAAMC,GAAS,GAAIN,EACnBM,GAAOC,QAAU,SAACC,GACjBF,EAAOG,YACPJ,EAAOG,IAERF,EAAOI,UAAY,SAACF,GACnBF,EAAOG,YACPL,EAAQI,EAAEG,OAEXL,EAAOM,YAAYV,KAGrBW,QAAOC,KAAO,WACb,IAAK,GADcC,GAAA,SACVC,GACR,GAAMR,GAAIS,SAASC,eAAe,SAAWF,EAC7CR,GAAEW,MAAQ,iBACVlB,EAAmB,GAAKe,GAAGI,KAAK,SAACC,GAChCb,EAAEW,MAAQE,KAJHL,EAAI,EAAGA,GAAK,EAAGA,IAAKD,EAApBC,KF+DJ,SAASvB,EAAQD,GG9EvB,GAAA8B,GAAAT,OAAAS,KAAAT,OAAAU,SACA9B,GAAAD,QAAA,SAAAgC,EAAAC,GACA,IACA,IACA,GAAAC,EACA,KACA,GAAAC,GAAAd,OAAAc,aAAAd,OAAAe,mBAAAf,OAAAgB,gBAAAhB,OAAAiB,aACAJ,GAAA,GAAAC,GACAD,EAAAK,OAAAP,GACAE,IAAAM,UACI,MAAAxB,GACJkB,EAAA,GAAAO,OAAAT,IAEA,UAAAU,QAAAZ,EAAAa,gBAAAT,IACG,MAAAlB,GACH,UAAA0B,QAAA,+BAAAE,mBAAAZ,KAEE,MAAAhB,GACF,UAAA0B,QAAAT,MHuFO,CAED,SAAShC,EAAQD,EAASH,GI7GhCI,EAAAD,QAAA,WACA,MAAAH,GAAA,spBAAwtBA,EAAAU,EAAA","file":"inline-bundle.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\tvar workerCode = __webpack_require__(3);\n\t\n\tvar calculateFibonacci = function calculateFibonacci(num) {\n\t\treturn new Promise(function (resolve, reject) {\n\t\t\tvar worker = new workerCode();\n\t\t\tworker.onerror = function (e) {\n\t\t\t\tworker.terminate();\n\t\t\t\treject(e);\n\t\t\t};\n\t\t\tworker.onmessage = function (e) {\n\t\t\t\tworker.terminate();\n\t\t\t\tresolve(e.data);\n\t\t\t};\n\t\t\tworker.postMessage(num);\n\t\t});\n\t};\n\twindow.calc = function () {\n\t\tvar _loop = function _loop(i) {\n\t\t\tvar e = document.getElementById(\"result\" + i);\n\t\t\te.value = \"Calculating...\";\n\t\t\tcalculateFibonacci(40 + i).then(function (res) {\n\t\t\t\te.value = res;\n\t\t\t});\n\t\t};\n\t\n\t\tfor (var i = 1; i <= 4; i++) {\n\t\t\t_loop(i);\n\t\t}\n\t};\n\n/***/ },\n/* 1 */\n/***/ function(module, exports) {\n\n\t// http://stackoverflow.com/questions/10343913/how-to-create-a-web-worker-from-a-string\r\n\t\r\n\tvar URL = window.URL || window.webkitURL;\r\n\tmodule.exports = function(content, url) {\r\n\t\ttry {\r\n\t\t\ttry {\r\n\t\t\t\tvar blob;\r\n\t\t\t\ttry { // BlobBuilder = Deprecated, but widely implemented\r\n\t\t\t\t\tvar BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;\r\n\t\t\t\t\tblob = new BlobBuilder();\r\n\t\t\t\t\tblob.append(content);\r\n\t\t\t\t\tblob = blob.getBlob();\r\n\t\t\t\t} catch(e) { // The proposed API\r\n\t\t\t\t\tblob = new Blob([content]);\r\n\t\t\t\t}\r\n\t\t\t\treturn new Worker(URL.createObjectURL(blob));\r\n\t\t\t} catch(e) {\r\n\t\t\t\treturn new Worker('data:application/javascript,' + encodeURIComponent(content));\r\n\t\t\t}\r\n\t\t} catch(e) {\r\n\t\t\treturn new Worker(url);\r\n\t\t}\r\n\t}\n\n/***/ },\n/* 2 */,\n/* 3 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = function() {\n\t\treturn __webpack_require__(1)(\"!function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p=\\\"\\\",t(0)}([function(e,t,o){\\\"use strict\\\";function n(e){return e&&e.__esModule?e:{\\\"default\\\":e}}var r=o(1),u=n(r);onmessage=function(e){var t=e.data;console.log(\\\"Starting calculation for \\\"+t);var o=(0,u[\\\"default\\\"])(t);console.log(\\\"Finished calculation for \\\"+t),postMessage(o)}},function(e,t){\\\"use strict\\\";function o(e){return e<2?1:o(e-2)+o(e-1)}Object.defineProperty(t,\\\"__esModule\\\",{value:!0}),t[\\\"default\\\"]=o}]);\\n//# sourceMappingURL=8326e76ae84e026da11a.worker.js.map\", __webpack_require__.p + \"8326e76ae84e026da11a.worker.js\");\n\t};\n\n/***/ }\n/******/ ]);\n\n\n/** WEBPACK FOOTER **\n ** inline-bundle.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 0ce272c3333afc869b6d\n **/","const workerCode = require(\"worker?inline!./worker.js\");\n\nconst calculateFibonacci = (num) => {\n\treturn new Promise((resolve, reject) => {\n\t\tconst worker = new workerCode();\n\t\tworker.onerror = (e) => {\n\t\t\tworker.terminate();\n\t\t\treject(e);\n\t\t};\n\t\tworker.onmessage = (e) => {\n\t\t\tworker.terminate();\n\t\t\tresolve(e.data);\n\t\t}\n\t\tworker.postMessage(num);\n\t});\n};\nwindow.calc = () => {\n\tfor (let i = 1; i <= 4; i++) {\n\t\tconst e = document.getElementById(\"result\" + i);\n\t\te.value = \"Calculating...\";\n\t\tcalculateFibonacci(40 + i).then((res) => {\n\t\t\te.value = res;\n\t\t});\n\t}\n};\n\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/inline.js\n **/","// http://stackoverflow.com/questions/10343913/how-to-create-a-web-worker-from-a-string\r\n\r\nvar URL = window.URL || window.webkitURL;\r\nmodule.exports = function(content, url) {\r\n\ttry {\r\n\t\ttry {\r\n\t\t\tvar blob;\r\n\t\t\ttry { // BlobBuilder = Deprecated, but widely implemented\r\n\t\t\t\tvar BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;\r\n\t\t\t\tblob = new BlobBuilder();\r\n\t\t\t\tblob.append(content);\r\n\t\t\t\tblob = blob.getBlob();\r\n\t\t\t} catch(e) { // The proposed API\r\n\t\t\t\tblob = new Blob([content]);\r\n\t\t\t}\r\n\t\t\treturn new Worker(URL.createObjectURL(blob));\r\n\t\t} catch(e) {\r\n\t\t\treturn new Worker('data:application/javascript,' + encodeURIComponent(content));\r\n\t\t}\r\n\t} catch(e) {\r\n\t\treturn new Worker(url);\r\n\t}\r\n}\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/worker-loader/createInlineWorker.js\n ** module id = 1\n ** module chunks = 0\n **/","module.exports = function() {\n\treturn require(\"!!/home/sashee/Desktop/webworkers/webpack/node_modules/worker-loader/createInlineWorker.js\")(\"!function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p=\\\"\\\",t(0)}([function(e,t,o){\\\"use strict\\\";function n(e){return e&&e.__esModule?e:{\\\"default\\\":e}}var r=o(1),u=n(r);onmessage=function(e){var t=e.data;console.log(\\\"Starting calculation for \\\"+t);var o=(0,u[\\\"default\\\"])(t);console.log(\\\"Finished calculation for \\\"+t),postMessage(o)}},function(e,t){\\\"use strict\\\";function o(e){return e<2?1:o(e-2)+o(e-1)}Object.defineProperty(t,\\\"__esModule\\\",{value:!0}),t[\\\"default\\\"]=o}]);\\n//# sourceMappingURL=8326e76ae84e026da11a.worker.js.map\", __webpack_public_path__ + \"8326e76ae84e026da11a.worker.js\");\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/worker-loader?inline!./src/worker.js\n ** module id = 3\n ** module chunks = 0\n **/"],"sourceRoot":""} --------------------------------------------------------------------------------