Performance

[amk221]

Are there any performance optimisations that can be made?

Asking because, I'd like the ability to be able to chose a tag, but not at the expense of a slower component if I decide not to chose a tag.

I'm trying to avoid something like:

{{! my-component.hbs}}
{{#if @tag}}
  {{#let (element @tag) as |Tag|}}
    <Tag></Tag>
  {{/let}}
{{else}}
  <div></div>
{{/if}}

Given

{{#each this.oneThousandItems}}
  <MyComponent />
{{/each}}

{{#each this.oneThousandItems}}
  <MyComponent @tag="button" />
{{/each}}

Although the above looks fine, one has to duplicate actions and attributes etc placed on <Tag>, and <div>.

Thanks for any insight.

I'm seeing a decrease in speed from ~400ms to render to ~700ms

[betocantu93]

I went as far as https://github.com/prysmex/ember-eui/blob/master/packages/core/addon/components/text-block/index.hbs... performance matters for UI components, I guess it depends, as always.

[amk221]

@betocantu93 ooh, that's a nice styleguide.

[betocantu93]

:D thanks! its mostly template only components and glimmer classes when needed, and no js animations, so its fast!!

[chancancode]

In your case if it really matters (and that you benchmarked it to confirm it’s worth it), then you can wrap your snippet into a template-only component, and that shouldn’t add too much overhead while avoiding your duplication issue