index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Performance Comparison</title>
  <link rel="stylesheet" href="src/theme.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
  <script src="src/picker.js"></script>
  <script src="src/runner.js"></script>
  <script src="src/add-complete-delete.js"></script>
</head>

<body>
  <iframe id="benchmark-frame"></iframe>
  <div id="sidebar"></div>
  <div id="benchmark-results">
    <h1>Performance Comparison - TodoMVC</h1>
    <p>This page lets you test the results of <a href="http://elm-lang.org/blog/blazing-fast-html-round-two">Blazing Fast HTML</a> for yourself.
    </p>
    <p>Controls are on the right. Pick which implementations you want to race and press run. Try it in different browsers!
    </p>
    <h3>Methodology Notes</h3>
    <p>To compare different frontend tools, you need to implement something in each one with exactly the same functionality. The <a href="http://todomvc.com">TodoMVC</a> project is nice because you often get idiomatic implementations from people close to the various projects. So the code is fair, and the app itself is complex <i>enough</i> that you can do some benchmarking that can reasonably be generalized. Is modifying items in the middle of a list fast? Can the implementation tell the difference between remove-the-first-item and change-99-items-and-remove-the-last-one? Etc.
    </p>
    <p>Check out <a href="http://elm-lang.org/blog/blazing-fast-html-round-two">this blog post</a> for more information on the methodology we used to make these comparisons as fair as possible.
    </p>
  </div>

  <script type="text/javascript">
    function impl(name, version, optimized, url)
    {
      return {
        name: name,
        version: version,
        optimized: optimized,
        url: 'implementations/' + url
      };
    }

    var div = document.getElementById('sidebar');
    
    var picker = Elm.Picker.init({
      flags: [
        impl('React', '19.1.0', false, 'react-19.1.0/dist/index.html'),
        impl('Elm', '0.19.1', false, 'elm-0.19.1/dist/index.html'),
        impl('Gren', '0.5.5', false, 'gren-0.5.5/index.html'),
      ],
      node: div
    });

    picker.ports.start.subscribe(function(impls) {
      runBenchmarks(impls, suite, function() {
        picker.ports.end.send(null);
      });
    });
  </script>

</body>

</html>