Ember Times-Issue 164


👋 Humanitarian! 🐹

Hacktoberfest + The Ember Times ✍️, a new reference page for Ember CLI commands🔖, migration from mixin in Ember Octane👋, asynchronous data and automatic tracking in Ember Octane✨, automatic tracking developer experience🔥, ember-concurrency 2.0.0. beta-1 🎉, last but not least, EmberJS with REST API 💪!


Hacker Oktoberfest It is a celebration of open source to everyone in the global GitHub community. Whether you are a developer, a student learning to code, an event organizer, or a company of any size, you can help promote the development of open source and make positive contributions to the growing community. Encourage people of all backgrounds and skill levels to complete the challenge!

Need ideas from Hacktoberfest? Or want to start using open source?We suggest to cooperate with us The next issue of “Ember Times”!As you know, “Ember Times” is an official newsletter People BlogAs a writer, you will play an active role in the Ember community and keep up with the latest events and discoveries. No experience in technical writing is required, as we are happy to provide you with guidance and matching. We also encourage everyone from all over the world to join; if English is your second language (or third language, etc.), don’t worry.

Are you interested? You can contact the team in several different ways:

In addition to supporting Ember and open source, participants will also receive limited edition T-shirts or can choose to plant trees! We look forward to hearing from you! 🥰


The Ember CLI guide has a new web page that lists All Ember CLI commands. Please bookmark it for reference and new developer onboarding.

As you can imagine, the list of commands and command options grows over time, so documenting it for the CLI guide is not a trivial task.We want to recognize Tim (@fozy81) For their amazing contribution. 💯

As always, you can check the commands and command options in the terminal by running ember --help. Please feel free to provide feedback for new pages.If you see incorrect or missing information, you can cli-guides Repurchase.


Greetings from the headquarters of Ember Times!We have a Reader questions Come in:

What is the recommended alternative Ember.Mixin Octane?

In Classic Ember, if you want to define a DOM behavior that can be reused throughout the application, you can define a component Mixin Appropriate life cycle hooks are implemented. Starting from Ember 3.15, the Ember project recommends Ember Octane for new applications and plugins. The usual Octane recommends that you avoid using mixins.Back to Octane is here, Yehuda Katz (@wycats) Give an example of migration. Element modifiers provide a new way to reuse DOM behavior without some of the disadvantages of mixins.

Before (Classic Ember): Hybrid

import Mixin from '@ember/object/mixin';

export default Mixin.create({
  didInsertElement() {
    this._super();
    activateTabs(this.element);
  }

  willDestroyElement() {
    this._super();
    deactivateTabs(this.element);
  }
})

Then you would use Mixin In such a component:

import Component from '@ember/component';

export default Component.extend(Tabs, {
  // ...
});

After (Ember Octane): element modifier

This is ours Tabs When reimplemented as a modifier, the mixin looks like.

import { modifier } from 'ember-modifier';

export default modifier(element => {
  activateTabs(element);

  return () => deactivateTabs(element);
});

Because element modifiers apply to any element, you don’t need to create an entire component to create reusable DOM behaviors. You can use this element modifier syntax to use modifiers on any element.

<div {{tabs}}></div>

Continue to discuss the theme of mixin, Chris Kriecho (@chriskrycho) Recently wrote an article about Migrate PromiseProxyMixin in Ember Octane. A common pattern in many classic Ember apps and plugins is to use PromiseProxyObject versus ObjectProxy The status of the promise is disclosed to the end user, and access to the parsed data is more convenient.Please be sure to read Blog post Learn more about some suggested ways to rewrite using lightweight, automatic tracking, and Octane-ready solutions.

PS Hope that there is no mixin in your code base, is it future-oriented?We recommend enabling convenient The no-mixins rule on eslint-plugin-ember.


New blog post from Chris Kriecho (@chriskrycho) talk Asynchronous data and automatic tracking in Ember Octane. This blog post is about Migrate PromiseProxyMixin in Ember Octane, It describes a way to strip mixin and inheritance to support composition.Chris uses Loading assistant And a new AsyncData Structure.

New blog processed AsyncData As normal data, but make sure to handle all states (loading, loading, errors). By integrating with tracked attributes, AsyncData The class reacts to its modeled state and internal structure and handles this transition for us. This allows us to access the data returned from the loading assistant as normal data and react according to its state.

import Component from '@glimmer/component';
import { load } from 'my-app/helpers/load';
import { fetchSomeData } from 'my-app/data/fetchers';

export default class Neato extends Component {
  get data() {
    return load(fetchSomeData(this.args.userId));
  }

  get displayData() {
    switch (this.data.state) {
      case 'LOADING':
        return 'loading...';
      case 'LOADED':
        return this.data.value;
      case 'ERROR':
        return `Whoops! Something went wrong! ${this.data.error.message}`;
    }
  }
}

Read more about Full blog post on Chris’ blog.


If you can’t get enough Chris Kriecho (@chriskrycho),there are more! 😄

How does the automatic tracking in Ember or Glimmer work? How does it improve the developer experience? What computer science concepts make it possible? (Answer: Lamport Clock🤯)

If you are ready to learn more about the efficiency of the automatic tracking system in the Ember or Glimmer app, you should continue reading postal.

Rest assured, this is a very approachable explanation of some complex topics that we as Ember users benefit from in the Octane world. Encourage everyone to check it out!


Have a New beta release of ember-concurrency!Thank you for your hard work Maxfierke (@maxfierke) 2.0.0.beta-1 introduction @tracked On Ember 3.16+, direct use is deleted {{action}} Helper and delete get with set Compatible method comes from Task, TaskGroup, with TaskInstance.

As Max mentioned in his tweet, 2.x is largely compatible with 1.x.For users whose maintenance depends on the plugin ember-concurrency, It would be very helpful if you can use a wider range of versions so that some people can try the 2.x beta, while others can upgrade when they can.

For more information about this and upgrading to 2.0.0-beta.1 and other future 2.x versions, see a.

Go ahead and give freed Read the notes.


John Costanzo (@jrock2004) Wrote a blog with the title EmberJS with REST APIThis blog explains how to make your API work with Ember Data out of the box, provided it follows the REST API conventions. If your API does not follow REST conventions, this article will detail how to modify your Ember application serializer to use it with Ember data.

The blog also discusses using keyForAttribute Make some manual work easier, so you don’t have to map every API property to an Ember model property.Go to Blog post Read it today.


This week we want to thank Amy Lin (@amyrlam), Ben Denboski (@bendemboski), Brian Mishkin (@bmish), Jan Bobisjan (@bobisjan), Chad Hietala (chadhietala), Godfrey Chan (@chancancode), Chris Wu (@chrisrng), Corey Loken (@cloke), Dmytro Krekota (@dmytro-krekota), Tim (@fozy81), Ava Gaiety Wroten (@hergaiety), Isaac Lee (@ijlee2), @JamesS-M, Jared Galanis (@jaredgalanis), Jane Weber (@jenweber), Jacob (@jfdnc), Kategengler (@kategengler), Kelly Selden (@kellyselden), Dave Laird (@kiwiupover), Ilya Lachenko (@knownasilya), Chris Manson (@mansona), @patricklx, Chris Garrett (@pzuraq), Raido Kuli (@raido), Ruslan Hrabovyi (@ro0gr), Volodymyr Radchenko (@rreckonerr), Robert Jackson (@rwjblue), SergeAstapov (@SergeAstapov), Scott Newcomer (@snewcomer), Nicholas Fleuron (@tempo22), with Yehuda Katz (@wycats) Thanks for their contributions to Ember and related repositories! 💖


Want to know about Ember, Ember Data, Glimmer, or plugins in the Ember ecosystem, but don’t know where to consult? Readers’ questions are only answered for you!

Submit your own Short and sweet problem under bit.ly/ask-ember-coreDon’t worry, there are no stupid questions, we thank them-guaranteed! 🤞

Want to write for Ember Times? Any suggestions for next week’s problem?join us #support-ember-times in Ember community discord Or ping us @embertimes On Twitter.

Subscribe to our channel to get the latest news from Emberland this week Email newsletter!You can also find our posts in the following locations People Blog.


That is another package! ✨

Be kind,

Abhilash LR, Chris Ng, Jared Galanis, Isaac Lee, Amy Lam and the learning team



Leave a Reply

Your email address will not be published. Required fields are marked *