DEV Community

Orbit Websites
Orbit Websites

Posted on

Ember 6.12: What's New and Noteworthy in the Latest Ember Release

#webdev #javascript #beginners #programming

Ember 6.12: What's New and Noteworthy in the Latest Ember Release

Ember.js continues to evolve with Ember 6.12, bringing performance improvements, developer experience enhancements, and a few exciting new APIs. Whether you're a long-time Ember developer or just getting started, this release has something for you.

In this hands-on guide, we’ll walk through the key updates in Ember 6.12 with real code examples, step-by-step explanations, and practical tips to help you upgrade and use the new features effectively.

✅ Step 1: Upgrade to Ember 6.12

Before diving into new features, let’s make sure your app is on the latest version.

# Navigate to your Ember project
cd my-ember-app

# Upgrade Ember CLI and dependencies
npm install --save-dev ember-cli@latest
ember update
Enter fullscreen mode Exit fullscreen mode

Alternatively, use the interactive upgrade tool:

npx ember-cli-update
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to upgrade to 6.12. After upgrading, verify your version:

ember --version
# Should output: ember-cli 6.12.0
Enter fullscreen mode Exit fullscreen mode

💡 Tip: Always back up your project or use version control (like Git) before upgrading.

🚀 What’s New in Ember 6.12

1. Stable <template>-Only Components (No More .js Files!)

One of the most exciting changes is that template-only components are now stable and don’t require a backing JavaScript class.

✅ Before (Ember < 6.12)

You needed a .js file even for simple components:

// app/components/hello-user.js
import Component from '@glimmer/component';

export default class HelloUserComponent extends Component {}
Enter fullscreen mode Exit fullscreen mode 
<!-- app/components/hello-user.hbs -->
<p>Hello, {{@name}}!</p>
Enter fullscreen mode Exit fullscreen mode

✅ Now (Ember 6.12)

You can create a component with only a .hbs file:

<!-- app/components/greet-user.hbs -->
<div class="greeting">
  👋 Welcome, <strong>{{@name}}</strong>!
</div>
Enter fullscreen mode Exit fullscreen mode

And use it directly in any template:

<!-- app/templates/application.hbs -->
<GreetUser @name="Alex" />
Enter fullscreen mode Exit fullscreen mode

✅ No JavaScript file needed. Cleaner, simpler, and faster to prototype.

2. Enhanced @use and @classicDecorator Warnings (Prep for Octane+)

Ember 6.12 improves deprecation messages for legacy patterns, helping you migrate to modern Octane syntax.

Example: Classic Object Model Deprecation

If you're still using Ember.Object, you’ll now see clearer warnings:

// app/components/old-component.js
import EmberObject from '@ember/object';

export default EmberObject.extend({
  name: 'Legacy',
  sayHello() {
    console.log(`Hello from ${this.name}`);
  }
});
Enter fullscreen mode Exit fullscreen mode

After upgrading, you’ll see a deprecation warning like:

DEPRECATION: Usage of EmberObject.extend is deprecated. Use native classes instead.

✅ Fix: Migrate to Native Classes 

// app/components/modern-component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ModernComponent extends Component {
  name = 'Modern';

  @action
  sayHello() {
    console.log(`Hello from ${this.name}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

3. **New {{perform}} Syntax in ember-concurrency (Now Built-in!)

ember-concurrency is now officially integrated into Ember 6.12, bringing first-class async task support.

✅ Install (if not already included) 

ember install ember-concurrency
Enter fullscreen mode Exit fullscreen mode

✅ Use perform in Templates 

// app/components/async-button.js
import Component from '@glimmer/component';
import { task } from 'ember-concurrency';

export default class AsyncButtonComponent extends Component {
  @task
  *fetchData() {
    yield timeout(1000); // simulate API call
    console.log('Data loaded!');
  }
}
Enter fullscreen mode Exit fullscreen mode 
<!-- app/components/async-button.hbs -->
<button
  type="button"
  {{on "click" (perform this.fetchData)}}
  disabled={{this.fetchData.isRunning}}
>
  {{if this.fetchData.isRunning "Loading..." "Click Me"}}
</button>
Enter fullscreen mode Exit fullscreen mode

✅ No more .perform() in JavaScript — use (perform) directly in templates!

4. Improved Error Handling in Templates

Ember 6.12 provides better error messages when you make common template mistakes.

Example: Invalid Modifier Usage 

<!-- Before: Silent failure or unclear error -->
{{on "click" this.handleClick}} <!-- Missing parentheses -->

<!-- Now: Clear error message -->
Enter fullscreen mode Exit fullscreen mode

✅ Correct usage:

{{on "click" this.handleClick}}
Enter fullscreen mode Exit fullscreen mode

Or with arguments:

{{on "click" (fn this.handleClick "arg1")}}
Enter fullscreen mode Exit fullscreen mode

You’ll now get helpful messages like:

Template Error: Expected a function for {{on}}, but got undefined. Did you forget @ for an argument?

5. Faster Builds with Vite Support (Experimental)

Ember 6.12 introduces experimental Vite support for faster development builds.

✅ Enable Vite (Experimental

☕ Professional

Top comments (0)