<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Lazy.js - v<%= version %></title>

  <%= stylesheet_link_tag("all") %>
  <%= javascript_include_tag("all") %>
  <%= javascript_include_tag("main_all") %>
  <% spec_files.each do |file| %>
  <%= javascript_include_tag("lib/spec/#{file}") %>
  <% end %>
</head>

<body>
  <header>
    <h1><a href="./">lazy.js</a> <small class="version"><%= version %></small></h1>
    <a href="https://github.com/dtao/lazy.js" class="github-ribbon"></a>
  </header>

  <nav data-sections=".top-level-section">
    <ul>
      <li class="selected"><a href="#about">About</a></li>
      <li><a href="#demos">Demos</a></li>
      <li><a href="#benchmark-results">Benchmark Results</a></li>
      <li><a href="#test-results">Spec Results</a></li>
      <li><a href="docs/">API Docs</a></li>
    </ul>
  </nav>

  <section id="about" class="top-level-section">
    <%= about %>
  </section>

  <section id="demos" class="top-level-section" style="display: none;">
    <ul>
      <li><a href="demos/events">Treating DOM events as a sequence</a></li>
      <li><a href="demos/json">Parsing JSON lazily</a></li>
      <li><a href="demos/primes">Generating prime numbers asynchronously</a></li>
      <li><a href="demos/generators">Wrapping ES6 Harmony generators</a></li>
      <li><a href="demos/xhr">Making HTTP requests</a></li>
    </ul>
  </section>

  <section id="benchmark-results" class="top-level-section" style="display: none;">
    <nav class="subnav" data-sections=".benchmark-results-section">
      <ul>
        <li class="selected"><a href="#benchmark-results-10">10 elements</a></li>
        <li><a href="#benchmark-results-100">100 elements</a></li>
        <li><a href="#benchmark-results-other">Other</a></li>
      </ul>
    </nav>

    <form>
      <p>
        Select the tests you want to run below, choose either
        <label><input id="test-each" type="radio" checked="checked"><code>each</code></input></label> or
        <label><input id="test-to-array" type="radio"><code>toArray</code></input></label>
        <a class="why-to-array-vs-each" href="javascript:void(0);">(why?)</a>, and
        <button class="start-benchmarking">start benchmarking</button>
        to compare Lazy.js, Underscore <span class="underscore-version"></span>,
        and Lodash <span class="lodash-version"></span>.
      </p>

      <p>
        You can also choose to display results in
        <label><input id="test-absolute" type="radio" checked="checked">absolute ops/second</input></label>,
        <label><input id="test-proportional" type="radio">in proportion to the fastest method</input></label>, or
        <label><input id="test-proportional-lodash" type="radio">in proportion to Lodash</input></label>
        (which is generally the fastest of the popular JS utility libraries). Proportional results
        will likely be easier to read when you've selected many benchmarks.
      </p>
    </form>

    <div id="why-to-array-vs-each">
      <p>
        Comparing the performance of Lazy.js to other libraries like Underscore and Lodash is
        unfortunately not black and white. On the one hand, calling <code>toArray</code> on the
        result of a Lazy sequence will give you an actual JavaScript array, which you might need if,
        e.g., you're passing the result to a function from an external library. However, in most
        cases when you use methods like <code>map</code> or <code>filter</code>, you are probably
        just going to do something while iterating over the result. In this case, you don't need an
        array at all; calling <code>each</code> on a <code>Lazy.Sequence</code> will be functionally
        indistinguishable from calling <code>_.each</code> on an array.
      </p>
      <p>
        Generally speaking, Lazy.js performs best (and "wins" more performance races) when you
        <em>don't</em> have to call <code>toArray</code>. However, when chaining methods together
        it's often still the fastest solution regardless.
      </p>
    </div>

      <section id="benchmark-results-10"
        
        class="benchmark-results-section">
      
        <div id="benchmark-results-chart-10" class="column-chart"
          data-title="Ops/second - 10 elements"
          data-source="#benchmark-results-table-10"
          data-transpose="true"
          data-row-filter="benchmarkChartRowFilter"
          data-options="benchmarkChartOptions">
        </div>
      
        <p>
          Select:
          <button class="select-all">All</button>
          <button class="select-none">None</button>
          <button class="clear-selected">Clear</button>
        </p>
      
        <table id="benchmark-results-table-10" class="benchmark-results-table">
          <tr>
            <th>Test</th>
            <th>Underscore</th>
            <th>Lodash</th>
            <th>Lazy.js</th>
          </tr>
        </table>
      </section>
      <section id="benchmark-results-100"
        style="display: none;"
        class="benchmark-results-section">
      
        <div id="benchmark-results-chart-100" class="column-chart"
          data-title="Ops/second - 100 elements"
          data-source="#benchmark-results-table-100"
          data-transpose="true"
          data-row-filter="benchmarkChartRowFilter"
          data-options="benchmarkChartOptions">
        </div>
      
        <p>
          Select:
          <button class="select-all">All</button>
          <button class="select-none">None</button>
          <button class="clear-selected">Clear</button>
        </p>
      
        <table id="benchmark-results-table-100" class="benchmark-results-table">
          <tr>
            <th>Test</th>
            <th>Underscore</th>
            <th>Lodash</th>
            <th>Lazy.js</th>
          </tr>
        </table>
      </section>
      <section id="benchmark-results-other"
        style="display: none;"
        class="benchmark-results-section">
      
        <div id="benchmark-results-chart-other" class="column-chart"
          data-title="Ops/second - Other"
          data-source="#benchmark-results-table-other"
          data-transpose="true"
          data-row-filter="benchmarkChartRowFilter"
          data-options="benchmarkChartOptions">
        </div>
      
        <p>
          Select:
          <button class="select-all">All</button>
          <button class="select-none">None</button>
          <button class="clear-selected">Clear</button>
        </p>
      
        <table id="benchmark-results-table-other" class="benchmark-results-table">
          <tr>
            <th>Test</th>
            <th>Underscore</th>
            <th>Lodash</th>
            <th>Lazy.js</th>
          </tr>
        </table>
      </section>
  </section>

  <section id="test-results" class="top-level-section" style="display: none;">
    <nav class="subnav">
      <ul>
        <li class="selected"><a class="show-all-specs nav-link" href="javascript:void(0);">All</a></li>
        <li><a class="show-failing-specs nav-link" href="javascript:void(0);">Failures</a></li>
      </ul>
    </nav>

    <table id="test-results-table" class="empty">
      <tr>
        <th>Test</th>
        <th>Success</th>
      </tr>
    </table>
  </section>
</body>

</html>
