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

Async Patterns & Paradigms in Javascript

Async Patterns & Paradigms in Javascript

We examine some common and some quite new async patterns in Javascript. Inspired by a great workshop in advanced JS by Kyle Simpson

Project companion: https://github.com/th3hunt/js-async-patterns

Stratos Pavlakis

January 29, 2016
Tweet

More Decks by Stratos Pavlakis

Other Decks in Technology

Transcript

  1. Concurrency VS Parallelism Concurrency Two or more tasks are happening

    at the same interval Parallelism Two or tasks are happening at the exact same instant (e.g. multicore processors)
  2. Callbacks • An executable piece of code • Passed as

    an argument • Expected to be “called back” at some point in time
  3. • Grant control to another party • Loss of trust

    ◦ Truly async? ◦ # of executions ◦ Execution context ◦ Error handling Inversion of Control
  4. Promises • A future value representation that emits completion events

    • Facilitate sequential and parallel flow control • Chainable through a “thenable” interface • Allows deferring callback setup
  5. Promise Trust • Always async, even if already settled •

    Encapsulate state • Either success or fail • Always resolve or reject only once • Become immutable once resolved • Facilitate error handling
  6. Always async? Tasks Triggers such as DOM events and setTimeout

    enqueue tasks Microtasks Scheduled for things that should happen straight after the currently executing task. Promise callbacks are usually called as microtasks.
  7. Promise Toolbelt • ES6 Polyfill - github.com/jakearchibald/es6-promise/ • Q -

    github.com/kriskowal/q • Bluebird - github.com/petkaantonov/bluebird • And many more - promisesaplus.com/implementations
  8. Observables • Lazy event streams which can emit zero or

    more events, and may or may not finish • Values can be Promises or other Observables • EventEmitter API + Iterable API = Pub/Sub model on steroids
  9. Observables • Frameworks ◦ RxJS - github.com/Reactive-Extensions/RxJS ◦ BaconJS -

    baconjs.github.io ◦ Cycle.js - cycle.js.org ◦ Kefir.js - rpominov.github.io/kefir • 9th GreeceJS speakerdeck.com/pavlakis/introduction-to-frp
  10. Generators • A special coroutine in the form of an

    iterable function • Preserves its context across re-entrances
  11. Why Generators? • Handle asynchronicity in a synchronous fashion by

    yielding promises • Alleviate the need for callbacks • Elegant error handling - throw & try/catch wrapping
  12. Generators in Practice • Allow async tasks to suspend the

    execution of their caller ◦ File handling ◦ Sockets ◦ Sleeps ◦ Network requests ◦ Animations • Koa framework - koajs.com
  13. Thunks • A function that wraps some behavior for later

    execution • Accepts only a callback as an argument • Enforces the CPS paradigm • May return another thunk - aka chainable
  14. Origins - call by name • Assists the call to

    another subroutine • Wraps the unevaluated argument in a function • Enables lazy evaluation
  15. Why thunks? • Thunks can be used as yieldable structures

    for generator based flow controllers as an alternative to Promises • Co - github.com/tj/co • Redux-thunk - github.com/gaearon/redux-thunk
  16. CSP • Coordination via message passing based on channels •

    Channels are 2-way streams (default buffer = 1) • A channel cannot accept a message unless someone on the other side is reading • JS-CSP: Operations on channels are yieldable from inside generators