googlearchive · dfreedm · Jul 11, 2013 · Jun 17, 2013 · Jun 18, 2013 · Jun 18, 2013
diff --git a/.gitmodules b/.gitmodules
@@ -1,6 +1,7 @@
 [submodule "third_party/ChangeSummary"]
 	path = third_party/ChangeSummary
 	url = https://github.com/rafaelw/ChangeSummary.git
+	branch = master
 [submodule "third_party/mocha"]
 	path = third_party/mocha
 	url = https://github.com/visionmedia/mocha.git

diff --git a/README.md b/README.md
@@ -137,6 +137,7 @@ MDV is designed to as two primitives which could eventually become standardized
 MDV is mainly concerned with being robust and efficient in interacting with application data and keeping the DOM in sync , but more advanced behaviors can be accomplished via one or both of the following:
 
 * [A Custom Syntax API](https://github.com/Polymer/mdv/blob/master/docs/syntax_api.md)
+* [Expression Syntax](https://github.com/Polymer/mdv/blob/master/docs/expression_syntax.md)
 
 ### Advanced Topics
 

diff --git a/benchmark/index.html b/benchmark/index.html
@@ -0,0 +1,223 @@
+<html>
+<!--
+Copyright 2013 Google Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<head>
+  <title>MDV Benchmarks</title>
+  <meta charset="utf-8">
+  <script src="../mdv.js"></script>
+  <script src="../node_modules/handlebars/dist/handlebars.js"></script>
+  <script src="../third_party/ChangeSummary/benchmark/chartjs/Chart.js"></script>
+  <script src="../third_party/ChangeSummary/benchmark/benchmark.js"></script>
+  <script src="mdv_benchmark.js"></script>
+  <style>
+    * {
+      font-family: arial, helvetica, sans-serif;
+      font-weight: 400;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: rgba(0, 0, 0, .1);
+    }
+  </style>
+</head>
+<body>
+<h1>MDV Benchmarks</h1>
+
+Width: <select id="widthSelect">
+  <option selected>2
+  <option>3
+</select>
+
+Depth: <select id="depthSelect">
+  <option>2
+  <option selected>4
+  <option>8
+</select>
+
+Decoration: <select id="decorationSelect">
+  <option>0
+  <option>4
+  <option selected>8
+  <option>16
+</select>
+
+Instance Count: <select id="instanceCountSelect">
+  <option>1
+  <option>5
+  <option selected>10
+  <option>15
+</select>
+<br>
+<span>Binding Density (%): </span>
+<input id="bindingDensityInput" style="width: 200px" value="0, 1, 2, 4, 8, 16, 32, 64, 100"><br>
+
+MDV: <input id="mdvCheckbox" type="checkbox" checked>
+Handlebars: <input id="handlebarsCheckbox" type="checkbox" checked>
+
+<button id="go">Run Benchmarks</button><br>
+
+<span id="statusSpan"></span>
+
+<section style="width: 100%">
+  <article>
+    <div style="display:inline-block; padding-bottom: 20px">
+      Times in ms
+    </div>
+    <div style="display:inline-block">
+      <canvas id="times" width="800" height="400"></canvas>
+    </div>
+    <div style="display:inline-block">
+      <ul id="legendList">
+      </ul>
+    </div>
+  </article>
+</section>
+<h3 style="margin-left: 440px">Binding Density</h3>
+
+<div style="display:none">
+  <div id="testDiv"></div>
+</div>
+<script>
+var benchmark;
+var goButton = document.getElementById('go');
+
+var widthSelect = document.getElementById('widthSelect');
+var depthSelect = document.getElementById('depthSelect');
+var decorationSelect = document.getElementById('decorationSelect');
+var instanceCountSelect = document.getElementById('instanceCountSelect');
+
+var mdvCheckbox = document.getElementById('mdvCheckbox');
+var handlebarsCheckbox = document.getElementById('handlebarsCheckbox');
+
+var bindingDensityInput = document.getElementById('bindingDensityInput');
+
+var statusSpan = document.getElementById('statusSpan');
+
+var timesCanvas = document.getElementById('times');
+var benchmarkSelect = document.getElementById('benchmarkSelect');
+var configSelect = document.getElementById('configSelect');
+
+var testDiv = document.getElementById('testDiv');
+
+function changeBenchmark() {
+  benchmark = window[benchmarkSelect.value];
+  configSelect.innerHTML = '';
+  benchmark.configs.forEach(function(config) {
+    var option = document.createElement('option');
+    option.innerHTML = config;
+    configSelect.appendChild(option);
+  });
+}
+
+var ul = document.getElementById('legendList');
+var colors = [
+  [100,149,237],
+  [220,20,60],
+].map(function(rgb) {
+  return 'rgba(' + rgb.join(',') + ',.7)';
+});
+
+goButton.addEventListener('click', function() {
+  goButton.disabled = true;
+  goButton.innerHTML = 'Running...';
+  ul.innerHTML = '';
+
+  var bindingDensities = bindingDensityInput.value.split(',').map(function(val) {
+    return Number(val) / 100;
+  });
+
+  var testTypes = [];
+  if (mdvCheckbox.checked)
+    testTypes.push('MDV');
+  if (handlebarsCheckbox.checked)
+    testTypes.push('Handlebars');
+
+  testTypes.forEach(function(testType, i) {
+    var li = document.createElement('li');
+    li.innerHTML = testType;
+    li.setAttribute('style', 'color: ' + colors[i]);
+    ul.appendChild(li);
+  });
+
+  function benchmarkComplete(results) {
+    if (Observer._allObserversCount > 2)
+      alert('Error. All Observer Count: ' + Observer._allObserversCount);
+
+    datasets = [];
+
+    timesCanvas.setAttribute('height', '400');
+    timesCanvas.setAttribute('width', '800');
+    timesCanvas.setAttribute('style', '');
+
+    var labels = bindingDensities.map(function(density) {
+      return (density * 100) + '%';
+    });
+
+    var timesArray = [];
+    for (var i = 0; i < results[0].length; i++) {
+      timesArray.push(results.map(function(result) {
+        return result[i];
+      }));
+    }
+
+    var ctx = timesCanvas.getContext("2d");
+    new Chart(ctx).Line({
+      labels : labels,
+      datasets : timesArray.map(function(times, i) {
+        return {
+          fillColor : 'rgba(255, 255, 255, 0)',
+          strokeColor : colors[i],
+          pointColor : colors[i],
+          pointStrokeColor : "#fff",
+          data : times
+        };
+      })
+    }, {
+      bezierCurve : false
+    });
+
+    goButton.disabled = false;
+    goButton.innerHTML = 'Run Benchmarks';
+    updateStatus();
+  }
+
+  function updateStatus(density, testType, runCount) {
+    if (!testType) {
+      statusSpan.innerHTML = '';
+      return;
+    }
+
+    statusSpan.innerHTML = testType + ' ' + (100 * density) +
+        '% binding density, ' + runCount + ' runs';
+  }
+
+  var width = Number(widthSelect.value);
+  var depth = Number(depthSelect.value);
+  var decoration = Number(decorationSelect.value);
+  var instanceCount = Number(instanceCountSelect.value);
+
+  var test = new MDVBenchmark(testDiv, width, depth, decoration, instanceCount);
+  var runner = new BenchmarkRunner(test,
+                                   bindingDensities,
+                                   testTypes,
+                                   benchmarkComplete,
+                                   updateStatus);
+  runner.go();
+});
+</script>
+</body>
+</html>