Composable Ember Concurrency Tasks

Isaac Ezer
Apr 1 · 4 min read

At EmberConf 2019 I gave a talk about creating composable concurrency tasks using Ember Concurrency. You can watch the talk on YouTube. Here’s a summary of that talk.

First a little bit about me. I’ve been using Ember since 2013 in the pre-beta days and the first Ember app that I worked on was called to.be. It’s an art platform in the browser where you can make digital works of art called fields. Here’s a Field by Jamie White made up of photos of all the attendees from the first EmberConf in 2014. It’s still live on the web.

To Be Field with EmberConf 2014 headshots. Look how much younger everybody looks!

After to.be I went on to work as a consultant at 201 Created for four years and I worked with about a dozen companies in the Ember community.

Now, if you’re not familiar with Ember Concurrency, it is a fantastic library that uses generators to simplify asynchronous actions. Most Ember users have found it to be a huge help. Ember Concurrency has great documentation so I recommend that you start there. I also recommend reading the MDN Guides on Iterators and Generators. The React world has a similar library called Sagas.

In my talk, in addition to introducing Ember Concurrency, I talked about how ES6 Generators can be useful on their own. One example that I gave was of using generators to iterate over graph edges. Here’s a JSBin showing this technique in an implementation of Dijkstra’s Algorithm for shortest path discovery. And here’s another example:

Example code using generators to iterate over a graph

Generators are supported in all modern browsers. But not Blackberry Browser. Sorry to my Canadian, Blackberry-using friends :( Thankfully there are also polyfills available.

Ember Concurrency allows early promise cancelation using yield, which is not possible using async/await. In this example, if a component is destroyed during the second yield this.slowApiCall(++i); no further API calls will be executed. That’s the magic of generators!

Yield instead of async/await or .then for early cancelation

The core of my talk was demonstrating PR 117 on Ember Concurrency (authored by Ben Dembosky) which made it possible to create task wrappers. The test in this PR show everything that you need to know.

Tests for task wrapper in PR 117

I used this technique to make an Ember Concurrency task wrapper to handle loading spinners and error notifications. Here’s the demo and code in an ember-twiddle.

Demo for loading spinner and flash messages
progress task wrapper

Finally, there are already several community add-ons that use this technique. I covered the first two in my talk, and have since discovered another two:

When I gave a practice version of this talk at Ember.js Berlin, unbeknownst to me the author of ember-concurrency-retryable, Max Fierke, was in the audience!

Me (left) meeting Max Fierke, author of ember-concurrency-retryable, at Ember.js Berlin (Kloeckner’s office)

I’d like to thank Alex Matchneer for creating Ember Concurrency, as well as Lauren Tan, Ben Dembosky, Max Fierke, and everyone else who has contributed to Ember Concurrency and/or some of the add-ons that I mentioned.

If you have any questions or other interesting use cases, please free to comment or contact me. Happy task wrapping!

Isaac Ezer

Written by

Ember.js coder living in New York. Lindy hopper and jazz addict.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade