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. Async Patterns
    in Javascript

    View Slide

  2. Stratos Pavlakis
    Workable UI Tech Lead
    [email protected]
    Async Patterns in JS
    Sokratis Vidros
    Senior Software Engineer @ Workable
    [email protected]

    View Slide

  3. Concurrency & Parallelism

    View Slide

  4. 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)

    View Slide

  5. Companion

    View Slide

  6. Companion
    Scenarios
    ● South Park
    ● Aragorn Lineage
    https://github.com/th3hunt/js-async-patterns

    View Slide

  7. Callbacks

    View Slide

  8. Callbacks
    ● An executable piece of code
    ● Passed as an argument
    ● Expected to be “called back” at some point in
    time

    View Slide

  9. Deferred Execution

    View Slide

  10. Event Driven UI

    View Slide

  11. Callback Problems

    View Slide

  12. Pyramid of Doom ?

    View Slide

  13. Better with CPS?

    View Slide

  14. Not really...

    View Slide

  15. Not reasonable

    View Slide

  16. ● Grant control to another party
    ● Loss of trust
    ○ Truly async?
    ○ # of executions
    ○ Execution context
    ○ Error handling
    Inversion of Control

    View Slide

  17. Promises

    View Slide

  18. Promises
    ● A future value representation that emits
    completion events
    ● Facilitate sequential and parallel flow control
    ● Chainable through a “thenable” interface
    ● Allows deferring callback setup

    View Slide

  19. ES6 Native Promises
    Superset of Promise A+ specification

    View Slide

  20. Promises in real life

    View Slide

  21. Flow control
    Sequential Parallel

    View Slide

  22. So what?

    View Slide

  23. 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

    View Slide

  24. 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.

    View Slide

  25. 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

    View Slide

  26. Observables

    View Slide

  27. 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

    View Slide

  28. How to build a searchbox?

    View Slide

  29. Refined searchbox

    View Slide

  30. 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

    View Slide

  31. Generators

    View Slide

  32. Generators
    ● A special coroutine in the
    form of an iterable function
    ● Preserves its context across
    re-entrances

    View Slide

  33. Play & Pause Interface
    yield next

    View Slide

  34. Live demo

    View Slide

  35. Why Generators?
    ● Handle asynchronicity in a synchronous fashion
    by yielding promises
    ● Alleviate the need for callbacks
    ● Elegant error handling - throw & try/catch
    wrapping

    View Slide

  36. Synchronous Fashion

    View Slide

  37. Generators in Practice
    ● Allow async tasks to suspend the execution of their caller
    ○ File handling
    ○ Sockets
    ○ Sleeps
    ○ Network requests
    ○ Animations
    ● Koa framework - koajs.com

    View Slide

  38. Thunks

    View Slide

  39. 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

    View Slide

  40. Thunkify
    github.com/tj/node-thunkify
    github.com/thunks/thunks

    View Slide

  41. Thunkify a file read

    View Slide

  42. Origins - call by name
    ● Assists the call to another subroutine
    ● Wraps the unevaluated argument in a function
    ● Enables lazy evaluation

    View Slide

  43. 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

    View Slide

  44. Using with Generators

    View Slide

  45. Communicating Sequential
    Processes

    View Slide

  46. 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

    View Slide

  47. Example

    View Slide

  48. View Slide