Three Reasons to Switch to Angle Bracket Syntax in Ember Octane

Ember recently released a new set of features in what they’re calling the Octane edition. My teammate and I have started tinkering with new features to gain familiarity before upgrading our system to the new edition.

One feature that has particularly caught my attention is angle bracket syntax—a new way of rendering Ember components that looks like classic HTML syntax.

Old syntax:

{{my-component}}

New syntax:

<MyComponent/>

On my current project, we’ve started adopting angle bracket syntax a little bit at a time. Any time we add a new component to a template, we opt for angle bracket syntax instead of classic component syntax.

Why Switch to Angle Bracket Syntax?

Still uncertain of this new syntax? I’ve found three compelling reasons to make the switch.

1. Named Parameters

Need I say more? Angle bracket syntax has only named parameters, so you always have a one-to-one pairing of parameter name and value. This increases readability and reduces the amount of time spent digging through Ember docs trying to remember what each positional parameter does. (I’ve spent more time than I care to admit looking at the link-to documentation to recall how each position argument is used by Ember.)

2. Cleaner Separation Between HTML Parameters & Component Parameters

Angle bracket syntax uses an annotation is to indicate that a parameter is being passed to the component. Standard HTML attributes don’t require an annotation. This is another improvement in readability because it’s easy to see what you’re passing into your component and what you expect HTML to handle. Here’s an example using the class HTML attribute and a myTitle parameter to the component.

Old syntax:

{{my-component class=”my-component-class” myTitle=”Blog Post”}}

New syntax:

<MyComponent class=”my-component-class” @myTitle=”Blog Post”/>

3. Cleaner Spacing/Indentation Pattern

The new syntax has improved the code formatting readability of my team’s frontend. We put each parameter on if we’re passing several parameters into a component.

In classic invocation syntax, we always left the closing braces on the same line as the final parameter. Moving those to their own line created some readability problems because there are braces everywhere in Handlebars templates. Keeping the braces on their own line was problematic too, though. It wasn’t easy to see where the final parameter was passed, and it was irritating to move closing braces when adding new parameters.

Old syntax:

{{my-component
    class=”my-component-class”
    myTitle=”Blog Post”}}

With the new syntax, it makes more sense to leave the closing tag on its own line because angle brackets are only used for rendering (be it component or HTML element). I find it much easier to find the open and close of my components with this formatting change. It’s also easier to add/remove new parameters to the component. This is particularly helpful during the experimentation and refactoring steps of creating a new component.

New syntax:

<MyComponent
    class=”my-component-class”
    @myTitle= "Blog Post"
/>

A Few Things to Remember

There’s a Codemod for This

If you want to clean up all your classic invocation syntax at once, you can run the codemod that’s designed to clean this up. I personally haven’t tried it since we’re taking a more incremental approach on my project.

Beware of Quirks

In one case, I used angle bracket syntax, and my component wasn’t working as expected. I tried rendering the component using classic invocation syntax, and it worked perfectly. I’m still unsure what caused the failure, but keep an eye out for quirks and remember that you can fall back to classic invocation syntax if needed. Ember docs indicate that classic invocation syntax will remain a part of Ember for the foreseeable future.

To read more about upgrading to angle bracket syntax, check out the template docs for Ember’s Octane edition.