Composable Ember Concurrency Tasks
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.
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:
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!
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.
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.
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:
- ember-concurrency-test-waiter
- ember-concurrency-retryable
- ember-concurrency-scroll
- Throttling Ember Data with Ember Concurrency
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!
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!
