Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ember-concurrency: an experience report

ember-concurrency: an experience report

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

F8f7496052d3bf856e944aec64cfbb99?s=128

Reg Braithwaite

June 05, 2017
Tweet

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.