The Ember Times - Issue No. 156

👋 Emberistas! 🐹

Read the blog post on using ember-concurrency with TypeScript 🤝, reusable DOM behavior in React vs Ember 🪔, and last, but not least, Mirage JS with GraphQL 🏝!

Using ember-concurrency with TypeScript 🤝

James C. Davis (@jamescdavis) wrote a blog post summarizing how to use TypeScript with ember-concurrency as well as some best practices.

ember-concurrency is an addon that manages asynchronous tasks in Ember applications. The addon traditionally exports a task function which is used similarly to a computed property.

import { task } from 'ember-concurrency';

export default Component.extend({
  myTask: task(function*() {
    yield foo;
    return bar;
  })
}

The blog post goes through how to use ember-concurrency with Ember Octane and TypeScript. For Octane, we need to use Native Class Syntax. The ember-concurrency-decorators package was created to make this work for ember-concurrency.

However, decorators cannot change the type of the thing they decorate. To allow TypeScript, the ember-concurrency-ts package was created to provide a couple of utility functions such as taskFor.

Finally, the ember-concurrency-async package provides a Babel transform that allows you to define ember-concurrency tasks using async/await rather than generator function. This simplifies using taskFor on assignment while providing complete type-safety for ember-concurrency tasks.

Read the full blog post with all the tips and tricks and try it out yourself today!

Reusable DOM behavior in React vs Ember 🪔

Raja SK wrote a blog post comparing React and Ember's approach to creating reusable components that deal with DOM behaviors. He talks about how to approach the same using the following patterns:

• React's class-based and functional component approach
• Ember's mixin and modifier approach.

He also talks about how to use the ember-modifier addon if you have been using the Ember mixin patterns so far for DOM behaviors and sharing code between components.

Read the full blog post today!

Mirage JS with GraphQL 🏝

Have you been wanting to use Mirage JS with GraphQL?

Thanks to Rocky Neurock (@jneurock), Mirage GraphQL provides the ability to create a GraphQL route handler based on your GraphQL and Mirage schemas.

Mirage GraphQL does a bunch of things:

• It fulfills GraphQL requests by fetching data from Mirage's database.
• It filters records from Mirage's database by using arguments from your GraphQL queries.
• It handles create, update and delete type mutations automatically based on some conventions.
• It allows you to supply your own resolvers (for cases where the automatic query and mutation resolution isn't sufficient).

There's plenty of examples on how to get started using GraphQL with Mirage JS using Mirage GraphQL over at the repo, go ahead and check them out for yourself.

Contributors' corner 👏

This week we'd like to thank @kiwiupover, @rwjblue, @pzuraq, @rjschie, @arthirm, @kategengler, @richgt, @JoaoDsv, @snewcomer, @igorT, @st-h, @mansona, @pdud, @mehulkar, @bmish, @jaredgalanis, @abhilashlr, @chrisrng, @jenweber, @nickschot, @sly7-7, @superlou, @amyrlam, @hergaiety for their contributions to Ember and related repositories! 💖

Connect with us! 🤓

Wondering about something related to Ember, Ember Data, Glimmer, or addons in the Ember ecosystem, but don't know where to ask? Readers’ Questions are just for you!

Submit your own short and sweet question under bit.ly/ask-ember-core. And don’t worry, there are no silly questions, we appreciate them all - promise! 🤞

Want to write for the Ember Times? Have a suggestion for next week's issue? Join us at #support-ember-times on the Ember Community Discord or ping us @embertimes on Twitter.

Keep on top of what's been going on in Emberland this week by subscribing to our e-mail newsletter! You can also find our posts on the Ember blog.

That's another wrap! ✨

Be kind,

Chris Ng, Abhilash LR, Jared Galanis, Amy Lam and the Learning Team