Ember.js Did It Again. Single File Components Ahead Of The Competition

Tom Smykowski
2 min readFeb 19, 2024

For many years Ember used separate files for the template logic.

But it changed. Ember.js offers a format to which developers can slowly migrate.

The format will be contained in .gjs extension files. Each such file can host one, or more components.

The syntax is similar to what we know from other frameworks like Vue.js. There’s a special template tag that marks the piece of file that defines the template.

Since the new format uses standard Javascript exports some pieces of the file can remain private and some exported.

If there’s one component inside it is automatically exported.

Interestingly enought the format is simpler to use than class based or function based components know from other frameworks.

If a file contains only a template there’s no need for any boilerplate at all:

Even params don’t have to be defined explicitly, because Ember knows stuff.

Defining functions inside the new format also doesn’t require boilerplate:

There are already extensions for popular development environments supporting the new component authoring format.

The format is ahead of the game. Not having to define classes or functions or use more than one indicator tag makes it easy to use and makes components easier to read.

Thanks SAM George for color highlighted source codes!

source

--

--

Tom Smykowski

Software Engineer & Tech Editor. Top 2% on StackOverflow, 3mil views on Quora. Won Shattered Pixel Dungeon.