ember-concurrency: an experience report

An informal talk given at the EmberTO meetup in June, 2017

Transcript

1. ember-concurrency "an experience report" Reginald @raganwald Braithwaite, PagerDuty Inc.
2. ember-concurrency ember-concurrency is an Ember Addon that makes it easy to write concise, robust, and beautiful asynchronous code. --http://ember-concurrency.com/ Reginald @raganwald Braithwaite, PagerDuty Inc.
3. tasks and instances aTask = task(function * () { const { geolocation, store } = this.get(...); const coords = yield geolocation.getCoords(); const result = yield store.getNearbyStores(coords); this.set('result', result); }); anInstance = someTask.perform(); Reginald @raganwald Braithwaite, PagerDuty Inc.
4. problems ember-concurrency solves, easily Reginald @raganwald Braithwaite, PagerDuty Inc.
5. mashing the "submit" button on an update Reginald @raganwald Braithwaite, PagerDuty Inc.
6. ! Reginald @raganwald Braithwaite, PagerDuty Inc.
7. concurrency protocols task(function * () { // ... }).drop() (ember-concurrency calls these "modifiers") Reginald @raganwald Braithwaite, PagerDuty Inc.
8. ! Reginald @raganwald Braithwaite, PagerDuty Inc.
9. displaying a loading spinner Reginald @raganwald Braithwaite, PagerDuty Inc.
10. ! this.set('isLoading', true); this.xhr = fetch(id).then( success => { this.set('isLoading', false); // ... }, failure => { this.set('isLoading', false); // ... }); Reginald @raganwald Braithwaite, PagerDuty Inc.
11. ! isLoading: reads('fetchTask.isRunning') Reginald @raganwald Braithwaite, PagerDuty Inc.
12. using ember-concurrency to solve other problems Reginald @raganwald Braithwaite, PagerDuty Inc.
13. chunking updates to our api Reginald @raganwald Braithwaite, PagerDuty Inc.
14. progress const chunks = _.chunk(incidents, CHUNK_SIZE); let done = 0; this.set('done', done); for (const theseIncidents of chunks) { yield this.resolve(theseIncidents); done = done + theseIncidents.length); this.set('done', done); } Reginald @raganwald Braithwaite, PagerDuty Inc.
15. Reginald @raganwald Braithwaite, PagerDuty Inc.
16. cancellation aTask.cancelAll(); anInstance.cancel(); Reginald @raganwald Braithwaite, PagerDuty Inc.
17. a bigger challenge Reginald @raganwald Braithwaite, PagerDuty Inc.
18. In JavaScript, AJAX requests happen concurrently. Reginald @raganwald Braithwaite, PagerDuty Inc.
19. Reginald @raganwald Braithwaite, PagerDuty Inc.
20. ⛈ websocket ping: [-----------------] submit update: [-----------] Reginald @raganwald Braithwaite, PagerDuty Inc.
21. ☀ Reginald @raganwald Braithwaite, PagerDuty Inc.
22. sharing one task task(function * (promissoryThunk) { let result; yield promissoryThunk().then(value => { result = value; }); return result; }).enqueue() Reginald @raganwald Braithwaite, PagerDuty Inc.
23. serialized results websocket ping: [--------] submit update: [-------] Reginald @raganwald Braithwaite, PagerDuty Inc.
24. ⁉ Reginald @raganwald Braithwaite, PagerDuty Inc.
25. task groups tasks: taskGroup().enqueue(), handlePing: task(function * () { // ... }).group('tasks'), submitUpdate: task(function * () { // ... }).group('tasks') Reginald @raganwald Braithwaite, PagerDuty Inc.
26. ember-concurrency conclusion Reginald @raganwald Braithwaite, PagerDuty Inc.
27. Simple things are easy, complex things are possible. Reginald @raganwald Braithwaite, PagerDuty Inc.
28. Reginald @raganwald Braithwaite, PagerDuty Inc.