`.perform()`ing the `task()`
using ember-concurrency
"ember-concurrency is a small but powerful library that supplements Ember's existing tools and conventions for handling concurrency and asynchrony."
- ember-concurrency.com
put simply:
ember-concurrency is analternative to using actions.
actions
ember-concurrency
import { task } from 'ember-concurrency';
export default /**/.extend({
myAwesomeTask: task(function * () {
// stuff
})
});
export default /**/.extend({
action: {
myAwesomeAction() {
// stuff
}
}
});
actions
ember-concurrency
<button
onclick={{perform myAwesomeTask}}
>
Do something awesome
</button>
<button
onclick={{action 'myAwesomeAction'}}
>
Do something awesome
</button>
actions
ember-concurrency
export default /**/.extend({
coolFunction() {
this.get('myAwesomeTask').perform();
}
});
export default /**/.extend({
coolFunction() {
this.send('myAwesomeAction');
}
});
so what does it get you?
tasks have state
<button
onclick={{perform myAwesomeTask}}
disabled={{myAwesomeTask.isRunning}}
>
Do something awesome
</button>
yield beats promise chains beats callbacks
import { task } from 'ember-concurrency';
export default /**/.extend({
saveSomething: task(function * (something) {
const isValid = yield validateSomething(something);
if (!isValid) {
throwError();
}
yield something.save();
notifyUserThatSomethingWasSaved();
})
});
tasks can be cancelled manually
import { task } from 'ember-concurrency';
export default /**/.extend({
interruptSaveSomething() {
const saveSomething = this.get('saveSomething');
saveSomething.cancelAll();
saveSomething.perform(somethingElseToSaveInstead);
},
saveSomething: task(function * (something) {
const isValid = yield validateSomething(something);
if (!isValid) {
throwError();
}
yield something.save();
notifyUserThatSomethingWasSaved();
})
});
tasks can be cancelled automatically
import { task } from 'ember-concurrency';
export default Component.extend({
saveSomething: task(function * (something) {
const isValid = yield validateSomething(something);
// no `if (this.get('isDestroyed')) { return; }` necessary
if (!isValid) {
throwError();
}
yield something.save();
// no `if (this.get('isDestroyed')) { return; }` necessary
notifyUserThatSomethingWasSaved();
})
});
task modifiers
- `.restartable()`
- `.enqueue()`
- `.drop()`
- `.keepLatest()`
- `.maxConcurrency(5)`
downsides
- Work better on Controllers than Routes because you can bind to their state more easily. (only a downside if you prefer your actions to be on the Route)
examples
is anyone else already using it? how?
questions?
Performing the Task Using ember-concurrency
By Jimmy Lauzau
Performing the Task Using ember-concurrency
An introduction to ember-concurrency, where in your projects are good places to start using tasks, and real-world examples.
- 1,407