Testing Reken's Performance

While I was completing Reken's functionality, I came across a JavaScript framework performance benchmarking tool called js-framework-benchmark. I always suspected that Reken would be faster than React. Avoiding the overhead of React's virtual DOM was a key design goal in building Reken. Using this benchmark would be an excellent opportunity to confirm that intuition.

Reken - Fast reactive HTML First web pages
Reken - Fast reactive HTML First web pages. Explore advanced HTML techniques with data-driven approaches: Update HTML text dynamically using javascript templates, control styles and classes, manage conditional content, and repeat HTML elements with iterators. Effortlessly handle events, use timers a…
Try Reken

The benchmark includes test implementations and results for over a hundred frameworks. Regularly, the benchmark results are published.

Subset of the large table

The benchmark evaluates performance by creating a large table and executing various operations on it. The benchmark includes the following sub-tests, simulating real-life scenarios:

  1. Create a thousand table rows with three columns: the row ID, a label, and a column with an icon to delete the row.
  2. Replace the row ID and label for all 1,000 rows.
  3. Update the label of every 10th row in the 1,000-row table.
  4. Select a row in the 1,000-row table.
  5. Swap two rows in the 1,000-row table.
  6. Remove one row from the 1,000-row table.
  7. Create a 10,000-row table with the same three columns as in point 1.
  8. Add 1,000 rows to the 10,000-row table.
  9. Finally, remove all 10,000 rows, i.e., empty the table.

The tests are run by a test driver, executed multiple times, and the median of the results is taken.

To run the tests on Reken, I had to clone the js-framework-benchmark, add the Reken framework test folder, and, since Reken is a non-keyed implementation, add it to the non-keyed folder. In addition to adding the reken.js library, I implemented the provided test page index.html. It contains a standard set of buttons that initiate the operations mentioned above, as well as the empty table.

<table class="table table-hover table-striped test-data">
  <tbody id="tbody" data-for="row:store.data">
    <tr data-class="danger:store.selected===row.item.id">
      <td class="col-md-1" data-text="${row.item.id}"></td>
      <td class="col-md-4">
        <a class="lbl" data-text="${row.item.label}"
           data-action="store.select(row.item.id)">
        </a>
      </td>
      <td class="col-md-1">
        <a class="remove" data-action="store.delete(row.item.id)">
          <span class="remove glyphicon glyphicon-remove"
                aria-hidden="true">
          </span>
        </a>
      </td>
      <td class="col-md-6"></td>
    </tr>
  </tbody>
</table>
Reken Table code

After running the benchmark on Reken and comparing, analyzing, and profiling, I identified a few areas for improvement, especially in the data-for code. With these improvements in place, I submitted my implementation for the official benchmark.

You might be wondering how Reken compared to other frameworks. While I wish I could say, Reken was the fastest, unfortunately, it was not. Reken ranked 23rd out of 59 non-keyed frameworks with a weighted mean of 1.31. Reken was faster than React, which ranked 39th with a weighted mean of 1.65, and also faster than well-known frameworks such as Elm and Vue.

Looking at individual sub-tests, Reken performed even better, particularly in more heavy-duty operations, and less in short (single) row operations. Reken also scored very well in time to first paint (startup performance) and reasonably well in the compressed total size of the implementation.

Benchmark testRankWeighted MeanTime(ms)
Create 1000 rows15th1.0242.9
Replace 1000 rows19th1.0319.1
Update every 10th row37th1.0422.5
Select row34th1.146.6
Swap rows36th1.0618.1
Delete row34th 1.1438.8
Create 10,000 rows12th 1.02 441.9
Append 1000 rows 13th1.02 50.4
First Paint (Startup)11th 1.57 68.1
Compressed bytes transferred29th 4.1 8.9kb

To learn more about Reken check out our Reken Developer Handbook

Reken Developer Handbook: Mastering Reken: Effortless Creation of Interactive and Dynamic Web Pages 1, van den Broek, Henry, eBook - Amazon.com
Reken Developer Handbook: Mastering Reken: Effortless Creation of Interactive and Dynamic Web Pages - Kindle edition by van den Broek, Henry. Download it once and read it on your Kindle device, PC, phones or tablets. Use features like bookmarks, note taking and highlighting while reading Reken Devel…