Template Only vs Class Components

Folks often hear that template-only components are faster than class-based components. But is it true?

Here is the setup,

• the js-framework-benchmark app.

  • this benchmark focuses on testing the rendering of large tables, measuring CPU, Memory, etc while also measuring time to first render as well as time to update across certain common behaviors of these large tables. Normally, Large tables aren't something you want in a real app -- almost always you want pagination, and/or virtualized content. However, this is a decent stress test for "large amount of data rendered at once".

• two copies of the code with the "row" content extracted to its own component.

  • the template-only version of the component looks like this

     const Row =
       <template>
         <tr class={{if @isSelected 'danger'}}>
           <td class='col-md-1'>{{@item.id}}</td>
           <td class='col-md-4'><a {{on 'click' @select}}>{{@item.label}}</a></td>
           <td class='col-md-1'><a {{on 'click' @remove}}><span
                 class='glyphicon glyphicon-remove'
                 aria-hidden='true'
               ></span></a></td>
           <td class='col-md-6'></td>
         </tr>
       </template>;
  

  • the class-version of the component looks like this:

     class Row extends Component {
       <template>
         <tr class={{if @isSelected 'danger'}}>
           <td class='col-md-1'>{{@item.id}}</td>
           <td class='col-md-4'><a {{on 'click' @select}}>{{@item.label}}</a></td>
           <td class='col-md-1'><a {{on 'click' @remove}}><span
                 class='glyphicon glyphicon-remove'
                 aria-hidden='true'
               ></span></a></td>
           <td class='col-md-6'></td>
         </tr>
       </template>
     }
  

The delta between the two components is this:

-  const Row =
+  class Row extends Component {
    <template>
      <tr class={{if @isSelected 'danger'}}>
        <td class='col-md-1'>{{@item.id}}</td>
        <td class='col-md-4'><a {{on 'click' @select}}>{{@item.label}}</a></td>
        <td class='col-md-1'><a {{on 'click' @remove}}><span
              class='glyphicon glyphicon-remove'
              aria-hidden='true'
            ></span></a></td>
        <td class='col-md-6'></td>
      </tr>
-    </template>;
+    </template>
+  }

Why?

When using TypeScript a question came up about the ergonomics of typing either of these components.

Here is what typing the template-only component looks like:

import { TOC } from '@ember/component/template-only';

interface Signature {
  Args: {
    item: { id: string; label: string };
    select: () => void;
    remove: () => void;
  }
}

const Row: TOC<Signature> = <template> ... </template>;

And here is what typing the class component looks like

interface Signature {
  Args: {
    item: { id: string; label: string };
    select: () => void;
    remove: () => void;
  }
}

// The Component was already imported from `@glimmer/component`
class Row extends Component<Signature> { ... };

This post isn't about the ergonomics of each of these, or which I prefer, but this is why I wanted to get actual hard data about the claims we've been hearing for years about template-only vs class-based.

But! having to make make a const for the default-export case, is extra work, as you must make a const. However, in a fully gjs/gts-using app, there does not need to be any default exports at as, as there would be no loose mode (classic, hbs files). Using gjs / gts in routes, your regular component files with one export could look like:

// app/components/my-component.gts
export const MyComponent: TOC<Signature> = <template>...</template>;

and then imported:

import Route from 'ember-route-template';
import { MyComponent } from 'my-app/components/my-component';

export default Route(
  <template>
      <MyComponent>
          {{outlet}}
      </MyComponent>
  </template>
);

But anyway, getting back to answering the question I've yet to mention,

if someone prefers empty class components (which are linted against) for usage in TypeScript, is there anything they're missing out on by not using template-only components?

The tl;dr: is yes. But actual results will vary based on your actual app and use cases.

template-only components are 7-26% faster

(for this particular benchmark and depending on which thing you're measuring).

As always, please test in your own apps. Tracerbench is a statistically sound tool that uses the built in performance.mark() apis.

This does not mean that this is always going to be the case. There has been increased activity in work happening in the VM to speed things up. For example, one such option that is being investigated is avoiding destruction callbacks on class components if the class didn't implement a destruction method (as well as removing the parent node before runnig destruction on child nodes (this would improve rendering brand new content or navigating to a new page)). Also at the time of writing, there already exists a good number of perf-related PRs, if anyone is interested: on the glimmer-vm repo

For the js-framework-benchmark, here are the actual results.

And the table of the results here:

My system at the time of running the benchmark(s):

❯ google-chrome --version
Google Chrome 120.0.6099.109 

❯ uname -srp
Linux 6.2.0-39-generic x86_64


❯ lsb_release -csd
Ubuntu 23.04
lunar

info from screenfetch:

CPU: AMD Ryzen 9 7900X 12-Core @ 24x 4.7GHz
GPU: NVIDIA GeForce RTX 4080
RAM:  / 63438MiB