Skip to content
Permalink
Browse files

Update webapp

  • Loading branch information...
marcomontalbano committed Feb 26, 2019
1 parent d3e2c89 commit 73b2719e0110cae164504c9b9f03730d60188054
Showing with 90 additions and 39 deletions.
  1. +13 −23 public/index.html
  2. +55 −0 public/main.css
  3. +11 −9 src-js/main.js
  4. +6 −3 src-js/web/chart.js
  5. +3 −3 src-js/web/utility.js
  6. +2 −1 webpack.config.js
@@ -1,32 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
#root {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
}
.chart-container {
margin: 0 auto;
max-width: 90vw;
width: 180vh;
height: 100vh;
}
.chart-container canvas {
width: 400px;
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
<title>WebAssembly vs Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div id="root"></div>
<script src="./bootstrap.js"></script>
<footer>
<a target="_blank" href="https://marcomontalbano.com">Marco Montalbano</a>
<a target="_blank" href="https://github.com/marcomontalbano/wa-vs-js-benchmark">
<svg height="14" width="14" viewBox="0 0 16 16" version="1.1" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg> GitHub
</a>
</footer>
</body>
</html>
@@ -0,0 +1,55 @@
:root {
--color-link: #2196F3;
--color-link-hover: #1565C0;
}

body {
margin: 0;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
letter-spacing: .1em;
}
a, a:link, a:hover, a:visited {
text-decoration: none;
}
#root {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
}
.chart-container {
display: block;
margin: 0 auto;
max-width: 90vw;
width: 180vh;
height: 100vh;
}
.chart-container canvas {
width: 400px;
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
footer {
position: fixed;
bottom: 15px;
right: 20px;
z-index: 1;
}
footer a {
margin: 0 10px;
color: var(--color-link);
transition: color .3s;
}
footer a svg {
fill: var(--color-link);
transition: fill .3s;
}
footer a:hover {
color: var(--color-link-hover);
}
footer a:hover svg {
fill: var(--color-link-hover);
}
@@ -1,11 +1,13 @@
import { createBenchmarkChart } from './web/chart';
import { promiseSequential } from './web/utility';

// createBenchmarkChart({
// method: 'get_primes',
// args: [100000]
// });

createBenchmarkChart({
method: 'multiply',
args: [500, 500]
});
promiseSequential([
createBenchmarkChart({
method: 'get_primes',
args: [100000]
}),
createBenchmarkChart({
method: 'multiply',
args: [500, 500]
})
]);
@@ -91,14 +91,17 @@ const _runBenchmark = (payload, chart, times = 5) => {

export const createBenchmarkChart = payload => {

let element_chartContainer = document.createElement('div');
let element_chartContainer = document.createElement('a');
element_chartContainer.id = `method--${payload.method}`;
element_chartContainer.classList.add('chart-container');

let element_chartCanvas = document.createElement('canvas');
let chart = _createChart(element_chartCanvas, `${payload.method}`);
let chart = _createChart(element_chartCanvas, `${payload.method}(${payload.args.join(', ')})`);

element_chartContainer.appendChild(element_chartCanvas);
document.getElementById('root').appendChild(element_chartContainer);

_runBenchmark(payload, chart);
return () => {
return _runBenchmark(payload, chart);
};
}
@@ -36,13 +36,13 @@ const createPromiseWorker = Worker => {
const rsWorker = createPromiseWorker(RSWorker);
const jsWorker = createPromiseWorker(JSWorker);

const _cloneArrayElements = (arr, times) => {
export const cloneArrayElements = (arr, times) => {
return arr.reduce((accumulator, currentValue) => {
return accumulator.concat(Array(times).fill(currentValue))
}, [])
}

const _promiseSequential = fns => {
export const promiseSequential = fns => {
return fns.reduce((promise, fn) => {
return promise.then(results => {
return fn().then([].concat.bind(results));
@@ -51,7 +51,7 @@ const _promiseSequential = fns => {
};

export const runBenchmark = (payload, times = 5, eachTime = value => value) => {
return _promiseSequential(_cloneArrayElements([
return promiseSequential(cloneArrayElements([
() => rsWorker.postMessage(payload).then(eachTime),
() => jsWorker.postMessage(payload).then(eachTime),
], times));
@@ -10,8 +10,9 @@ module.exports = {
plugins: [
new CopyWebpackPlugin([
'./public/.nojekyll',
'./public/index.html',
'./public/favicon.ico',
'./public/index.html',
'./public/main.css',
])
],
module: {

0 comments on commit 73b2719

Please sign in to comment.
You can’t perform that action at this time.