From 2eded43b542365804825fa7bd863f43b33f3f69e Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 18:14:10 +0200 Subject: [PATCH 01/18] Regenerate Makefile --- Makefile | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index c106d35..1a1fc32 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -.PHONY: clean test entangle py-deps start-redis stop-redis run-webservice run-celery-webapp run-webapp build-wasm host-files +.PHONY: clean test entangle py-deps start-redis stop-redis run-webservice run-celery-webapp run-webapp build-wasm host-files test-wasm py-deps: pip-pybind11 pip-flask pip-celery pip-connexion @@ -66,4 +66,7 @@ src/js/newtonraphsonwasm.js src/js/newtonraphsonwasm.wasm: src/wasm-newtonraphso emcc --bind -o src/js/newtonraphsonwasm.js -s MODULARIZE=1 -s EXPORT_NAME=createModule src/wasm-newtonraphson.cpp host-files: build-wasm - python3 -m http.server 8000 \ No newline at end of file + python3 -m http.server 8000 + +test-wasm: + npx cypress run --config-file false \ No newline at end of file From ce4c586513e8d836c4e8540beb26f5312b7f48f4 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 18:14:45 +0200 Subject: [PATCH 02/18] Added test for web worker --- INSTALL.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/INSTALL.md b/INSTALL.md index c83fcee..6b31d73 100644 --- a/INSTALL.md +++ b/INSTALL.md @@ -127,6 +127,15 @@ describe('src/js/example.html', () => { }); ``` +```{.js file=cypress/integration/example-web-worker_spec.js} +describe('src/js/example-web-worker.html', () => { + it('should render -1.00', () => { + cy.visit('http://localhost:8000/src/js/example-web-worker.html'); + cy.get('#answer').contains('-1.00'); + }); +}); +``` + The test can be run with ```{.awk #test-wasm} From 605ee1e98d9c54cda5706cc7c778273496bd7d5f Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 18:15:35 +0200 Subject: [PATCH 03/18] Complete and refactor web worker chapter Also kebabified anchors. Refs #13 --- README.md | 117 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 100 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 8be4f7e..de94e5c 100644 --- a/README.md +++ b/README.md @@ -780,10 +780,11 @@ The compilation also generates a `src/js/newtonraphsonwasm.wasm` file which will The WebAssembly module must be loaded and initialized by calling the `createModule` function and waiting for the promise to resolve. -```{.js #wasmpromise} -// this Javascript snippet is later referred to as wasmpromise +```{.js #wasm-promise} +// this JavaScript snippet is later referred to as wasm-promise createModule().then((module) => { - <> + <> + <> }); ``` @@ -791,8 +792,8 @@ The `module` variable contains the `NewtonRaphson` class we defined in the bindi The root finder can be called with. -```{.js #wasmcalc} -// this Javascript snippet is later referred to as wasmcalc +```{.js #wasm-calculate} +// this JavaScript snippet is later referred to as wasm-calculate const epsilon = 0.001; const finder = new module.NewtonRaphson(epsilon); const guess = -20; @@ -801,7 +802,7 @@ const root = finder.find(guess); Append the root answer to the html page using [document manipulation functions](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append). -```{.js #wasmcalc} +```{.js #render-answer} const answer = document.createElement('span'); answer.id = 'answer'; answer.append(root); @@ -817,7 +818,7 @@ To get the `createModule` function we will import the `newtonraphsonwasm.js` wit ``` @@ -836,23 +837,105 @@ The root finding answer was calculated using the C++ algorithm compiled to a Web Executing a long running C++ method will block the browser from running any other code like updating the user interface. This is not very nice for the user. To run the method in the background, [web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) have been defined. A web worker runs in its own thread and can be interacted with from JavaScript using messages. -Example of starting and interacting with a web worker +We need to instantiate a web worker -```js +```{.js #worker-consumer} +// this JavaScript snippet is later referred to as worker-consumer const worker = new Worker('worker.js'); -// Listen for messages from worker -worker.onmessage = (event) => { - console.log('Message received from worker'); - console.log(event.data); -} -// Send message to worker +``` + +We need to send the worker a message with description for the work it should do. + +```{.js #worker-consumer} worker.postMessage({ type: 'CALCULATE', - data: [{b: 3e-10, e: 1e+5}] + data: {epsilon: 0.001, guess: -20} +}); +``` + +In the web worker we need to listen for messages. + +```{.js #worker-provider-onmessage} +// this JavaScript snippet is later referred to as worker-provider-onmessage +onmessage = function(message) { + <> +}; +``` + +Before we can handle the message we need to import the Web Assembly module. + +```{.js file=src/js/worker.js} +// this Python snippet is stored as src/py/api.py +importScripts('newtonraphsonwasm.js'); + +<> +``` + +We can only handle the `CALCULATE` message when the Web Assembly module is loaded and initialized. + +```{.js #handle-message} +// this JavaScript snippet is before referred to as handle-message +if (message.data.type === 'CALCULATE') { + createModule().then((module) => { + <> + <> + }); +} +``` + +Let's find the root based on the data parameters in the message. + +```{.js #perform-calc-in-worker} +// this JavaScript snippet is before referred to as #perform-calc-in-worker +const epsilon = message.data.data.epsilon; +const finder = new module.NewtonRaphson(epsilon); +const guess = message.data.data.guess; +const root = finder.find(guess); +``` + +And send the result back to the web worker consumer. + +```{.js #post-result} +// this JavaScript snippet is before referred to as #post-result +postMessage({ + type: 'RESULT', + data: { + root: root + } }); ``` -> TODO add worker.js content +Listen for messages from worker and when a result message is received put the result in the HTML page like we did before. + +```{.js #worker-consumer} +worker.onmessage = function(message) { + if (message.data.type === 'RESULT') { + const root = message.data.data.root; + <> + } +} +``` + +Like before we need a HTML page to run the JavaScript. + +```{.html file=src/js/example-web-worker.html} + + + + + +``` + +Like before we also need to host the files in a web server with + +```shell +python3 -m http.server 8000 +``` + +Visit [http://localhost:8000/src/js/example-web-worker.html](http://localhost:8000/src/js/example-web-worker.html) to see the root answer. +The root finding answer was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker, executed by JavaScript with mesages to the web worker and rendered on a HTML page. ### Single page application From 2c68b2d7fcfaeebb31db715ac51ccfcdb02a9828 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 18:25:27 +0200 Subject: [PATCH 04/18] English --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index de94e5c..c146af6 100644 --- a/README.md +++ b/README.md @@ -837,7 +837,7 @@ The root finding answer was calculated using the C++ algorithm compiled to a Web Executing a long running C++ method will block the browser from running any other code like updating the user interface. This is not very nice for the user. To run the method in the background, [web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) have been defined. A web worker runs in its own thread and can be interacted with from JavaScript using messages. -We need to instantiate a web worker +We need to instantiate a web worker which will implement later in `src/js/worker.js`. ```{.js #worker-consumer} // this JavaScript snippet is later referred to as worker-consumer @@ -849,11 +849,11 @@ We need to send the worker a message with description for the work it should do. ```{.js #worker-consumer} worker.postMessage({ type: 'CALCULATE', - data: {epsilon: 0.001, guess: -20} + data: { epsilon: 0.001, guess: -20 } }); ``` -In the web worker we need to listen for messages. +In the web worker we need to listen for incoming messages. ```{.js #worker-provider-onmessage} // this JavaScript snippet is later referred to as worker-provider-onmessage @@ -883,7 +883,7 @@ if (message.data.type === 'CALCULATE') { } ``` -Let's find the root based on the data parameters in the message. +Let's find the root based on the data parameters in the incoming message. ```{.js #perform-calc-in-worker} // this JavaScript snippet is before referred to as #perform-calc-in-worker @@ -893,7 +893,7 @@ const guess = message.data.data.guess; const root = finder.find(guess); ``` -And send the result back to the web worker consumer. +And send the result back to the web worker consumer as a outgoing message. ```{.js #post-result} // this JavaScript snippet is before referred to as #post-result @@ -916,7 +916,7 @@ worker.onmessage = function(message) { } ``` -Like before we need a HTML page to run the JavaScript. +Like before we need a HTML page to run the JavaScript, but now we don't need to import the `newtonraphsonwasm.js` file here as this is done in the `worker.js` file. ```{.html file=src/js/example-web-worker.html} @@ -935,7 +935,7 @@ python3 -m http.server 8000 ``` Visit [http://localhost:8000/src/js/example-web-worker.html](http://localhost:8000/src/js/example-web-worker.html) to see the root answer. -The root finding answer was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker, executed by JavaScript with mesages to the web worker and rendered on a HTML page. +The root finding answer was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker (seperate thread), executed by JavaScript with mesages to/from the web worker and rendered on a HTML page. ### Single page application From 3521fba3322f867c5161cebe75299d656be0cc35 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 22:14:42 +0200 Subject: [PATCH 05/18] Wrong language --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c146af6..28b8906 100644 --- a/README.md +++ b/README.md @@ -865,7 +865,7 @@ onmessage = function(message) { Before we can handle the message we need to import the Web Assembly module. ```{.js file=src/js/worker.js} -// this Python snippet is stored as src/py/api.py +// this JavaScript snippet is stored as src/py/api.py importScripts('newtonraphsonwasm.js'); <> From d2437915b7a17f361fe2a9e6c547c6173f9b438f Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Thu, 14 May 2020 22:16:07 +0200 Subject: [PATCH 06/18] Wrong filename --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 28b8906..d6e34f8 100644 --- a/README.md +++ b/README.md @@ -865,7 +865,7 @@ onmessage = function(message) { Before we can handle the message we need to import the Web Assembly module. ```{.js file=src/js/worker.js} -// this JavaScript snippet is stored as src/py/api.py +// this JavaScript snippet is stored as src/js/worker.js importScripts('newtonraphsonwasm.js'); <> From 855f35e3781068c5e61abdfe617724f9b771a01f Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:15:18 +0200 Subject: [PATCH 07/18] Dont need to convert Makefile, --preserve-tabs makes it unneeded --- .github/workflows/main.yml | 8 -------- 1 file changed, 8 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index cae0739..dbb0311 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -23,10 +23,6 @@ jobs: with: args: README.md INSTALL.md - # Should not be needed anymore when https://github.com/entangled/filters/issues/2 is fixed - - name: Correct Makefile - run: perl -pi -e 's/ /\t/' Makefile - - name: Run C++ examples run: make test-cli test-cgi python: @@ -48,10 +44,6 @@ jobs: with: args: README.md INSTALL.md - # Should not be needed anymore when https://github.com/entangled/filters/issues/2 is fixed - - name: Correct Makefile - run: perl -pi -e 's/ /\t/' Makefile - - uses: actions/setup-python@v1 with: python-version: '3.x' # Version range or exact version of a Python version to use, using SemVer's version range syntax From 46ad9e24ca13432870268551034de0e4dafcdf2c Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:34:31 +0200 Subject: [PATCH 08/18] Add comment to test --- INSTALL.md | 1 + 1 file changed, 1 insertion(+) diff --git a/INSTALL.md b/INSTALL.md index 1a97433..28d7175 100644 --- a/INSTALL.md +++ b/INSTALL.md @@ -133,6 +133,7 @@ describe('src/js/example.html', () => { ``` ```{.js file=cypress/integration/example-web-worker_spec.js} +// this JavaScript snippet is run by cypress and is stored as cypress/integration/example-web-worker_spec.js describe('src/js/example-web-worker.html', () => { it('should render -1.00', () => { cy.visit('http://localhost:8000/src/js/example-web-worker.html'); From 384a775b2d665229c91e1b448a5db085a0d576c4 Mon Sep 17 00:00:00 2001 From: Faruk D Date: Fri, 15 May 2020 14:37:42 +0200 Subject: [PATCH 09/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 759b504..d07582d 100644 --- a/README.md +++ b/README.md @@ -837,7 +837,7 @@ The result of root finding was calculated using the C++ algorithm compiled to a Executing a long running C++ method will block the browser from running any other code like updating the user interface. In order to avoid this, the method can be run in the background using [web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). A web worker runs in its own thread and can be interacted with from JavaScript using messages. -We need to instantiate a web worker which will implement later in `src/js/worker.js`. +We need to instantiate a web worker which we will implement later in `src/js/worker.js`. ```{.js #worker-consumer} // this JavaScript snippet is later referred to as worker-consumer From 8192e807d3f98e99f947e017fa37ec634965ca03 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:42:04 +0200 Subject: [PATCH 10/18] Add anchor comment --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 759b504..1b1f3a8 100644 --- a/README.md +++ b/README.md @@ -847,6 +847,7 @@ const worker = new Worker('worker.js'); We need to send the worker a message with description for the work it should do. ```{.js #worker-consumer} +// this JavaScript snippet is appended to worker-consumer worker.postMessage({ type: 'CALCULATE', data: { epsilon: 0.001, guess: -20 } @@ -908,6 +909,7 @@ postMessage({ Listen for messages from worker and when a result message is received put the result in the HTML page like we did before. ```{.js #worker-consumer} +// this JavaScript snippet is appended to worker-consumer worker.onmessage = function(message) { if (message.data.type === 'RESULT') { const root = message.data.data.root; From a123b81c4a40e102eb976409034b6741fa2fa078 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:44:35 +0200 Subject: [PATCH 11/18] Update README.md Co-authored-by: Faruk D. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a3b9b7e..a81be4f 100644 --- a/README.md +++ b/README.md @@ -872,7 +872,7 @@ importScripts('newtonraphsonwasm.js'); <> ``` -We can only handle the `CALCULATE` message when the Web Assembly module is loaded and initialized. +We can handle the `CALCULATE` message only after the Web Assembly module is loaded and initialized. ```{.js #handle-message} // this JavaScript snippet is before referred to as handle-message From 1841bb54a1e856686f1767c810d2e54678cc9b27 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:46:44 +0200 Subject: [PATCH 12/18] Update README.md Co-authored-by: Faruk D. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a81be4f..68d90f6 100644 --- a/README.md +++ b/README.md @@ -884,7 +884,7 @@ if (message.data.type === 'CALCULATE') { } ``` -Let's find the root based on the data parameters in the incoming message. +Let's calculate the result (root) based on the data parameters in the incoming message. ```{.js #perform-calc-in-worker} // this JavaScript snippet is before referred to as #perform-calc-in-worker From 29d4fef4021f1149379df6f92f3b95da28aafc09 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:50:39 +0200 Subject: [PATCH 13/18] Rename data with payload --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 68d90f6..25b5823 100644 --- a/README.md +++ b/README.md @@ -850,7 +850,7 @@ We need to send the worker a message with description for the work it should do. // this JavaScript snippet is appended to worker-consumer worker.postMessage({ type: 'CALCULATE', - data: { epsilon: 0.001, guess: -20 } + payload: { epsilon: 0.001, guess: -20 } }); ``` @@ -884,13 +884,13 @@ if (message.data.type === 'CALCULATE') { } ``` -Let's calculate the result (root) based on the data parameters in the incoming message. +Let's calculate the result (root) based on the payload parameters in the incoming message. ```{.js #perform-calc-in-worker} // this JavaScript snippet is before referred to as #perform-calc-in-worker -const epsilon = message.data.data.epsilon; +const epsilon = message.data.payload.epsilon; const finder = new module.NewtonRaphson(epsilon); -const guess = message.data.data.guess; +const guess = message.data.payload.guess; const root = finder.find(guess); ``` @@ -900,7 +900,7 @@ And send the result back to the web worker consumer as a outgoing message. // this JavaScript snippet is before referred to as #post-result postMessage({ type: 'RESULT', - data: { + payload: { root: root } }); @@ -912,7 +912,7 @@ Listen for messages from worker and when a result message is received put the re // this JavaScript snippet is appended to worker-consumer worker.onmessage = function(message) { if (message.data.type === 'RESULT') { - const root = message.data.data.root; + const root = message.data.payload.root; <> } } From 6ab7d7a4984f47e3dd0cd32e2c49740e32cd8850 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:53:17 +0200 Subject: [PATCH 14/18] Use tangle anchors in comments --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 25b5823..5dc7c9d 100644 --- a/README.md +++ b/README.md @@ -781,7 +781,7 @@ The compilation also generates a `src/js/newtonraphsonwasm.wasm` file which will The WebAssembly module must be loaded and initialized by calling the `createModule` function and waiting for the JavaScript promise to resolve. ```{.js #wasm-promise} -// this JavaScript snippet is later referred to as wasm-promise +// this JavaScript snippet is later referred to as <> createModule().then((module) => { <> <> @@ -793,7 +793,7 @@ The `module` variable contains the `NewtonRaphson` class we defined in the bindi The root finder can be called with. ```{.js #wasm-calculate} -// this JavaScript snippet is later referred to as wasm-calculate +// this JavaScript snippet is later referred to as <> const epsilon = 0.001; const finder = new module.NewtonRaphson(epsilon); const guess = -20; @@ -840,14 +840,14 @@ Executing a long running C++ method will block the browser from running any othe We need to instantiate a web worker which we will implement later in `src/js/worker.js`. ```{.js #worker-consumer} -// this JavaScript snippet is later referred to as worker-consumer +// this JavaScript snippet is later referred to as <> const worker = new Worker('worker.js'); ``` We need to send the worker a message with description for the work it should do. ```{.js #worker-consumer} -// this JavaScript snippet is appended to worker-consumer +// this JavaScript snippet is appended to <> worker.postMessage({ type: 'CALCULATE', payload: { epsilon: 0.001, guess: -20 } @@ -857,7 +857,7 @@ worker.postMessage({ In the web worker we need to listen for incoming messages. ```{.js #worker-provider-onmessage} -// this JavaScript snippet is later referred to as worker-provider-onmessage +// this JavaScript snippet is later referred to as <> onmessage = function(message) { <> }; @@ -875,7 +875,7 @@ importScripts('newtonraphsonwasm.js'); We can handle the `CALCULATE` message only after the Web Assembly module is loaded and initialized. ```{.js #handle-message} -// this JavaScript snippet is before referred to as handle-message +// this JavaScript snippet is before referred to as <> if (message.data.type === 'CALCULATE') { createModule().then((module) => { <> @@ -887,7 +887,7 @@ if (message.data.type === 'CALCULATE') { Let's calculate the result (root) based on the payload parameters in the incoming message. ```{.js #perform-calc-in-worker} -// this JavaScript snippet is before referred to as #perform-calc-in-worker +// this JavaScript snippet is before referred to as <> const epsilon = message.data.payload.epsilon; const finder = new module.NewtonRaphson(epsilon); const guess = message.data.payload.guess; @@ -897,7 +897,7 @@ const root = finder.find(guess); And send the result back to the web worker consumer as a outgoing message. ```{.js #post-result} -// this JavaScript snippet is before referred to as #post-result +// this JavaScript snippet is before referred to as <> postMessage({ type: 'RESULT', payload: { @@ -909,7 +909,7 @@ postMessage({ Listen for messages from worker and when a result message is received put the result in the HTML page like we did before. ```{.js #worker-consumer} -// this JavaScript snippet is appended to worker-consumer +// this JavaScript snippet is appended to <> worker.onmessage = function(message) { if (message.data.type === 'RESULT') { const root = message.data.payload.root; From 0a8fd4ae5890a24df6b13a3b02f215a12ae0f224 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:56:53 +0200 Subject: [PATCH 15/18] Update README.md Co-authored-by: Faruk D. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5dc7c9d..f6a3c3a 100644 --- a/README.md +++ b/README.md @@ -918,7 +918,7 @@ worker.onmessage = function(message) { } ``` -Like before we need a HTML page to run the JavaScript, but now we don't need to import the `newtonraphsonwasm.js` file here as this is done in the `worker.js` file. +Like before we need a HTML page to run the JavaScript, but now we don't need to import the `newtonraphsonwasm.js` file here as it is imported in the `worker.js` file. ```{.html file=src/js/example-web-worker.html} From 185b05377fecf5aa24b6a77e34ded3922d6fb093 Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 14:58:27 +0200 Subject: [PATCH 16/18] Update README.md Co-authored-by: Faruk D. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f6a3c3a..8c72d50 100644 --- a/README.md +++ b/README.md @@ -936,7 +936,7 @@ Like before we also need to host the files in a web server with python3 -m http.server 8000 ``` -Visit [http://localhost:8000/src/js/example-web-worker.html](http://localhost:8000/src/js/example-web-worker.html) to see the root answer. +Visit [http://localhost:8000/src/js/example-web-worker.html](http://localhost:8000/src/js/example-web-worker.html) to see the result of the calculation. The root finding answer was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker (seperate thread), executed by JavaScript with mesages to/from the web worker and rendered on a HTML page. ### Single page application From a9a6b4dc76849298d2cb93d04215c455d50cd7ed Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 15:02:37 +0200 Subject: [PATCH 17/18] Use WebAssembly everywhere --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8c72d50..e9be42b 100644 --- a/README.md +++ b/README.md @@ -769,7 +769,7 @@ EMSCRIPTEN_BINDINGS(newtonraphsonwasm) { } ``` -The algorithm and binding can be compiled into a Web Assembly module with the Emscripten compiler called `emcc`. +The algorithm and binding can be compiled into a WebAssembly module with the Emscripten compiler called `emcc`. To make live easier we configure the compile command to generate a `src/js/newtonraphsonwasm.js` file which exports the `createModule` function. ```{.awk #build-wasm} @@ -863,7 +863,7 @@ onmessage = function(message) { }; ``` -Before we can handle the message we need to import the Web Assembly module. +Before we can handle the message we need to import the WebAssembly module. ```{.js file=src/js/worker.js} // this JavaScript snippet is stored as src/js/worker.js @@ -872,7 +872,7 @@ importScripts('newtonraphsonwasm.js'); <> ``` -We can handle the `CALCULATE` message only after the Web Assembly module is loaded and initialized. +We can handle the `CALCULATE` message only after the WebAssembly module is loaded and initialized. ```{.js #handle-message} // this JavaScript snippet is before referred to as <> From aac983ef901af415985665c0073f107006f40fce Mon Sep 17 00:00:00 2001 From: Stefan Verhoeven Date: Fri, 15 May 2020 15:03:30 +0200 Subject: [PATCH 18/18] Update README.md Co-authored-by: Faruk D. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e9be42b..d9f8da4 100644 --- a/README.md +++ b/README.md @@ -937,7 +937,7 @@ python3 -m http.server 8000 ``` Visit [http://localhost:8000/src/js/example-web-worker.html](http://localhost:8000/src/js/example-web-worker.html) to see the result of the calculation. -The root finding answer was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker (seperate thread), executed by JavaScript with mesages to/from the web worker and rendered on a HTML page. +The result of root finding was calculated using the C++ algorithm compiled to a WebAssembly module, imported in a web worker (separate thread), executed by JavaScript with messages to/from the web worker and rendered on a HTML page. ### Single page application