json.rs source code with a separate chart and explanation for each test

(#7)
serde-rs · Jul 24, 2016 · f730540 · f730540
1 parent df8360c
commit f730540
Show file tree

Hide file tree

Showing 9 changed files with 225 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ This is a partial port of
 to Rust. The libraries tested are:
 
 - [serde\_json](https://github.com/serde-rs/json) 0.8.0-rc
-- [json-rust](https://github.com/maciejhirsz/json-rust) 0.9.1-rc
+- [json-rust](https://github.com/maciejhirsz/json-rust) 0.10.0
 - [rustc-serialize](https://github.com/rust-lang-nursery/rustc-serialize) 0.3.19
 
 #### `$ cargo run --release`

diff --git a/json.rs/.gitignore b/json.rs/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/json.rs/README.md b/json.rs/README.md
@@ -0,0 +1,13 @@
+# json.rs
+
+This is the source code of the [json.rs](http://json.rs) website.
+
+## Build
+
+You'll need Node.js installed with npm:
+
+```
+npm install webpack -g
+npm install
+webpack
+```
diff --git a/json.rs/package.json b/json.rs/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "benches",
+  "version": "1.0.0",
+  "description": "Plotting json-benchmark",
+  "main": "src/benches.js",
+  "author": "Maciej Hirsz <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "chart.js": "^2.2.0-rc.1",
+    "webpack": "^1.13.1",
+    "xhr": "^2.2.1"
+  }
+}
diff --git a/json.rs/src/benches.js b/json.rs/src/benches.js
@@ -0,0 +1,65 @@
+var chart = require('./chart.js');
+var xhr   = require('xhr');
+
+var patternHead = /=+ ([a-z_-]+) =+ parse\|stringify =+(?: parse\|stringify =+)?([^=`]+)/g;
+var patternLine = /data\/([^\.]+\.json)\s+([0-9\.]+)ms\s+([0-9\.]+)ms(?:\s+([0-9\.]+)ms\s+([0-9\.]+)ms)?/g;
+
+function cloneTemplate(obj) {
+    return Object.assign({}, obj, {data: []});
+}
+
+var parseTemplate = {
+    label: 'Parse',
+    data: [],
+    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+    borderColor: 'rgba(255, 99, 132, 1)',
+    borderWidth: 1
+};
+
+var stringifyTemplate = {
+    label: 'Stringify',
+    data: [],
+    backgroundColor: 'rgba(54, 162, 235, 0.2)',
+    borderColor: 'rgba(54, 162, 235, 1)',
+    borderWidth: 1
+};
+
+xhr({
+    uri: "https://raw.githubusercontent.com/serde-rs/json-benchmark/master/README.md",
+}, function (err, _, body) {
+    if (err != null) {
+        return console.error("Failed to load the results!", err);
+    }
+
+    var files = {};
+    var split = body.split(/```/g);
+    var dataToParse = (split[1] + "\n" + split[3]).replace(/\s+DOM(?:\s+STRUCT)?/g, '');
+
+    console.log(dataToParse);
+
+    dataToParse.replace(patternHead, function(_, name, results) {
+        results.replace(patternLine, function(_, file, sd, pd, ss, ps) {
+            files[file] = files[file] || {
+                labels: [],
+                datasets: [cloneTemplate(parseTemplate), cloneTemplate(stringifyTemplate)]
+            };
+
+            files[file].labels.push(name + ' - DOM');
+            files[file].datasets[0].data.push(Number(sd));
+            files[file].datasets[1].data.push(Number(pd));
+
+            if (ss) {
+                files[file].labels.push(name + ' - struct');
+                files[file].datasets[0].data.push(Number(ss));
+                files[file].datasets[1].data.push(Number(ps));
+            }
+        });
+    });
+
+    console.log(files);
+
+    chart('canada', files['canada.json']);
+    chart('citm_catalog', files['citm_catalog.json']);
+    chart('twitter', files['twitter.json']);
+})
+
diff --git a/json.rs/src/chart.js b/json.rs/src/chart.js
@@ -0,0 +1,23 @@
+var Chart = require('chart.js');
+
+module.exports = function chart(id, data) {
+    var ctx = document.getElementById(id);
+
+    var myChart = new Chart(ctx, {
+        type: 'horizontalBar',
+        data: data,
+        options: {
+            title: {
+                display: true,
+                text: 'Time in milliseconds (smaller is better)'
+            },
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero:true
+                    }
+                }]
+            }
+        }
+    });
+}
diff --git a/json.rs/target/bundle.js b/json.rs/target/bundle.js
diff --git a/json.rs/target/index.html b/json.rs/target/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Rust JSON Benchmark</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            line-height: 1.8em;
+        }
+        code {
+            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+            background-color: rgba(0,0,0,0.04);
+            border-radius: 0.2em;
+            padding: 0.2em;
+        }
+        a {
+            text-decoration: none;
+            color: #44a;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        section {
+            max-width: 800px;
+            margin: 0 auto 3em;
+        }
+    </style>
+</head>
+<body>
+    <section>
+        <h1>Rust JSON Benchmark</h1>
+        <p>This page is a visualization of the <a href="https://github.com/serde-rs/json-benchmark">Rust JSON Benchmark</a> results.</p>
+        <p>Libraries tested:</p>
+        <ul>
+            <li><a href="https://github.com/serde-rs/json"><code>serde_json</code></a></li>
+            <li><a href="https://github.com/maciejhirsz/json-rust"><code>json-rust</code></a></li>
+            <li><a href="https://github.com/rust-lang-nursery/rustc-serialize"><code>rustc-serialize</code></a></li>
+        </ul>
+        <p>For reference, the original <a href="https://github.com/miloyip/nativejson-benchmark">Native JSON Benchmark</a> is run on the same hardware for <a href="https://github.com/miloyip/rapidjson">RapidJSON</a>.
+    </section>
+    <section>
+        <h3><a href="https://github.com/serde-rs/json-benchmark/blob/master/data/canada.json"><code>canada.json</code></a> (2.15 MB)</h2>
+        <p>This file contains mostly numbers with fractions packed into two-element arrays inside a bigger array, representing a vector map. The test is thus mostly measuring processing of numbers.</p>
+        <canvas id="canada" width="800" height="400"></canvas>
+    </section>
+    <section>
+        <h3><a href="https://github.com/serde-rs/json-benchmark/blob/master/data/citm_catalog.json"><code>citm_catalog.json</code></a> (1.65 MB)</h2>
+        <p>This test contains a very large amount of small objects, contained in an object used as a list with keys being used for ids. This test can be stressful for implementations trying to optimize for key lookup performance.</p>
+        <canvas id="citm_catalog" width="800" height="400"></canvas>
+    </section>
+    <section>
+        <h3><a href="https://github.com/serde-rs/json-benchmark/blob/master/data/twitter.json"><code>twitter.json</code></a> (617 KB)</h2>
+        <p>This is a pretty standard API result containing arrays of objects with a lot of non-latin unicode text strings.</p>
+        <canvas id="twitter" width="800" height="400"></canvas>
+    </section>
+<script type="text/javascript" src="./bundle.js"></script>
+</body>
+</html>
diff --git a/json.rs/webpack.config.js b/json.rs/webpack.config.js
@@ -0,0 +1,37 @@
+const path               = require('path');
+const webpack            = require('webpack');
+
+const PROD = true;
+
+
+module.exports = {
+    entry   : {
+        bundle  : './src/benches.js'
+    },
+
+
+    output  : {
+        path        : path.join( __dirname, 'target' ),
+        filename    : 'bundle.js',
+        publicPath  : '/'
+    },
+
+    plugins : PROD ? [
+        new webpack.optimize.UglifyJsPlugin( {
+            minimize    : true,
+            compress    : {
+                warnings    : false,
+                drop_console: true
+            }
+        } ),
+    ] : [],
+
+    node    : {
+        fs          : 'empty',
+        console     : false,
+        global      : true,
+        process     : true,
+        Buffer      : false,
+        setImmediate: false
+    },
+};