Merge pull request krausest#4 from krausest/master

merge master

Author: snowbldr

README.md

@@ -261,11 +261,15 @@ Contributions are very welcome. Please use the following rules:
 * Please don't commit any of the result file webdriver-ts/table.html, webdriver-ts-results/src/results.ts or webdriver-ts-results/table.html. I use to run the benchmarks after merging and publish updated (temporary) results.
 * The latest stable chrome can be used regarding web features and language level (babel-preset-env "last 1 chrome versions")
 * The vanillajs implementations and some others include code that try to approximate the repaint duration through javascript code. Implemenatations are not required to include that measurement. Remember: The real measurements are taken by the automated test driver by examining chrome timeline entries.
-* **Please don't over-optimize. Other contributors will review your implementation so beware of discussions ([#521](https://github.com/krausest/js-framework-benchmark/pull/521), [#519](https://github.com/krausest/js-framework-benchmark/pull/519), [#430](https://github.com/krausest/js-framework-benchmark/issues/430)) and rejection if the community finds you cheating. When are you safe?**
-  * If the initial rendering is able to render the selection state
-  * The implementation uses only the idiomatic style of its library
-  * If you don't use userland hacks in your implementation like dom manipulations or request animation frame calls
-Tip: If you start with your implementation do not take vanillajs as the reference. It violates those rules and serves only as a performance baseline and not as a best practice implementation.
+* **Please don't over-optimize.** This benchmark is most useful if you apply an idiomatic style for the framework you're using. We've sharpened the rules what kind of implementation is considered correct and will add errors or notes when an implementations handles things wrongly (errors) or in a way that looks like a shortcut (notes). 
+  * The html must be identical with the one created by the reference implemenation vanillajs. It also must include all the aria-hidden attributes. Otherwise the implemenation is considered erroneous and will be marked with issue [#634](https://github.com/krausest/js-framework-benchmark/issues/634).
+  * Keyed implementations must pass the `npm run isKeyed` test in the test driver otherwise they are erroneous. Not that this test might not be sufficient, but just necessary to be keyed (from time to time we find new loop holes). There's error [#694](https://github.com/krausest/js-framework-benchmark/issues/694) for such cases.
+  * Using request animation frame calls in client code, especially when applied only for some benchmark operations, is considered bad style and gets note [#796](https://github.com/krausest/js-framework-benchmark/issues/796) applied. Note that frameworks are free to choose whether they use RAF of not.
+  * Manual DOM manipulation (like setting the danger class directly on the selected row) lead to some controversial debates. Depending on the framework you're using it might be idiomatic style or not. In any case it gets note [#772](https://github.com/krausest/js-framework-benchmark/issues/772) applied.
+  * Implementations should keep the selected rows in the state (i.e. not a flag for each row, but one reference, id or index for the table) and use that information for rendering. Keeping a selection flag for each row might be faster, but it's considered bad style. Thus those implemenations get note [#800](https://github.com/krausest/js-framework-benchmark/issues/800).
+  * Explicit event delegation is another area where many discussions came up. Implemenations that use explicit event delegation in client code get note [#801](https://github.com/krausest/js-framework-benchmark/issues/801). Frameworks themselves are free to use event delegation.
+
+Tip: If you start with your implementation do not take vanillajs as the reference. It uses direct dom manipulation (and thus has note 772) and serves only as a performance baseline but not as a best practice implementation.
 
 This work is derived from a benchmark that Richard Ayotte published on https://gist.github.com/RichAyotte/a7b8780341d5e75beca7 and adds more framework and more operations. Thanks for the great work.
 

frameworks/keyed/ember/app/components/fast-each.hbs

@@ -0,0 +1,9 @@
+<table {{did-insert this.createRef}} ...attributes>
+</table>
+{{#if this.fragment}}
+  {{#-in-element this.fragment}}
+    <tbody>
+    {{#each @items key="id" as |item|}}{{yield item}}{{/each}}
+    </tbody>
+  {{/-in-element}}
+{{/if}}

frameworks/keyed/ember/app/components/fast-each.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { scheduleOnce, cancel } from '@ember/runloop';
+export default class FastEachComponent extends Component {
+  @tracked fragment = null;
+  t1 = null;
+  t2 = null;
+  @action createRef(node) {
+    this.node = node;
+    this.fragment = document.createDocumentFragment();
+    this.t1 = scheduleOnce('afterRender', this, this.runAppend);
+  }
+  willDestroy() {
+    cancel(this.t1);
+    clearTimeout(this.t2);
+  }
+  @action runAppend() {
+    this.t2 = setTimeout(()=>{
+      this.appendFragment();
+    });
+  }
+  @action appendFragment() {
+    this.node.appendChild(this.fragment);
+  }
+}

frameworks/keyed/ember/app/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Ember v3.20.4</title>
+    <title>Ember v3.22.0</title>
     <meta name="description" content="">
 
     {{content-for "head"}}

frameworks/keyed/ember/app/templates/components/my-table.hbs

@@ -1,7 +1,7 @@
 <div class="jumbotron">
   <div class="row">
     <div class="col-md-6">
-      <h1>Ember v3.20.4</h1>
+      <h1>Ember v3.22.0</h1>
     </div>
     <div class="col-md-6">
       <div class="row">
@@ -42,13 +42,9 @@
 
 
 {{#if this.data.length}}
-  <table class="table table-hover table-striped test-data">
-    <tbody>
-      {{#each this.data key="id" as |item|}}
-        <TableRow @item={{item}} @onSelect={{fn this.select item.id}} @onRemove={{fn this.remove item.id}} />
-      {{/each}}
-    </tbody>
-  </table>
+  <FastEach class="table table-hover table-striped test-data" @items={{this.data}} as |item|>
+    <TableRow @item={{item}} @onSelect={{fn this.select item.id}} @onRemove={{fn this.remove item.id}} />
+  </FastEach>
 {{/if}}