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

Reg Braithwaite

June 05, 2017
Tweet

More Decks by Reg Braithwaite

Other Decks in Programming

Transcript

  1. ember-concurrency
    "an experience report"
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  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.

    View Slide

  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.

    View Slide

  4. problems ember-concurrency
    solves, easily
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  5. mashing the "submit" button on an update
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  6. !
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  7. concurrency protocols
    task(function * () {
    // ...
    }).drop()
    (ember-concurrency calls these "modifiers")
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  8. !
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  9. displaying a loading spinner
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  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.

    View Slide

  11. !
    isLoading: reads('fetchTask.isRunning')
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  12. using ember-concurrency to solve
    other problems
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  13. chunking updates to our api
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  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.

    View Slide

  15. Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  16. cancellation
    aTask.cancelAll();
    anInstance.cancel();
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  17. a bigger challenge
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  18. In JavaScript, AJAX requests
    happen concurrently.
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  19. Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide


  20. websocket ping: [-----------------]
    submit update: [-----------]
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide


  21. Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  22. sharing one task
    task(function * (promissoryThunk) {
    let result;
    yield promissoryThunk().then(value => {
    result = value;
    });
    return result;
    }).enqueue()
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  23. serialized results
    websocket ping: [--------]
    submit update: [-------]
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide


  24. Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  25. task groups
    tasks: taskGroup().enqueue(),
    handlePing: task(function * () {
    // ...
    }).group('tasks'),
    submitUpdate: task(function * () {
    // ...
    }).group('tasks')
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  26. ember-concurrency
    conclusion
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  27. Simple things are easy, complex things are
    possible.
    Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide

  28. Reginald @raganwald Braithwaite, PagerDuty Inc.

    View Slide