Overview of
Ember-concurrency
through a concrete usage
#5
Here at MakeMusic…
Music education platform that connects teachers and students.
-
LMS (Ember apps)
-
Augmented Music Sheets (React app)
Dashboard
First implementation
- Create a route
- Call a set of store methods and GET calls
- Use route model() hook
Demo
Pros vs. cons
We achieved what we wanted
… but it's slow 🐌 and frustrating 🤯 !
🚨 What if one of the call failed?
⏳ What if we don't need to wait for all responses?
Second implementation
We could move fetch logic to the component:
- Use init() hook to make a GET
Pros vs. cons
- It works
- … unless you don't mind merging presentational and fetching logic
- You need to setup Mirage to test it correctly.
- You have to handle everything by yourself.
Third implementation
Using… Ember-concurrency! 🎉
Generators
function* idMaker() {
let index = 0;
while (index < index+1)
yield index++;
}
let gen = idMaker();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
// ...Syntax
import { task } from 'ember-concurrency';
export default RouteComponentOrWhatever.extend({
// defining a task instance
taskInstance: task(function* (arg) {
// return yield this.store.findAll('someModel');
// yield new Promise((resolve, reject) => { });
}),
init() {
this._super(...arguments);
this.get('taskInstance').perform(arg);
}
});
// template syntax
// <button type="button" onclick={{perform taskInstance}}>Perform</button>Going further
- loading state:
taskInstance.isRunning / taskInstance.isIdle
- error state:
taskInstance.isError
- user-friendly data-refresh