marco/.agents/skills/ember-best-practices/rules/component-use-glimmer.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use Glimmer Components Over Classic Components	HIGH	30-50% faster rendering	components, glimmer, performance, reactivity

Use Glimmer Components Over Classic Components

Glimmer components are lighter, faster, and have a simpler lifecycle than classic Ember components. They don't have two-way bindings or element lifecycle hooks, making them more predictable and performant.

Incorrect (classic component):

// app/components/user-card.js
import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  tagName: 'div',
  classNames: ['user-card'],

  fullName: computed('user.{firstName,lastName}', function () {
    return `${this.user.firstName} ${this.user.lastName}`;
  }),

  didInsertElement() {
    this._super(...arguments);
    // Complex lifecycle management
  },
});

Correct (Glimmer component):

// app/components/user-card.gjs
import Component from '@glimmer/component';

class UserCard extends Component {
  get fullName() {
    return `${this.args.user.firstName} ${this.args.user.lastName}`;
  }

  <template>
    <div class="user-card">
      <h3>{{this.fullName}}</h3>
      <p>{{@user.email}}</p>
    </div>
  </template>
}

Glimmer components are 30-50% faster, have cleaner APIs, and integrate better with tracked properties.

Reference: Glimmer Components