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 full-size slide

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

    View full-size slide

  3. Concurrency & Parallelism

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Deferred Execution

    View full-size slide

  8. Event Driven UI

    View full-size slide

  9. Callback Problems

    View full-size slide

  10. Pyramid of Doom ?

    View full-size slide

  11. Better with CPS?

    View full-size slide

  12. Not really...

    View full-size slide

  13. Not reasonable

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. ES6 Native Promises
    Superset of Promise A+ specification

    View full-size slide

  17. Promises in real life

    View full-size slide

  18. Flow control
    Sequential Parallel

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. How to build a searchbox?

    View full-size slide

  24. Refined searchbox

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. Play & Pause Interface
    yield next

    View full-size slide

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

    View full-size slide

  29. Synchronous Fashion

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. Thunkify a file read

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. Using with Generators

    View full-size slide

  37. Communicating Sequential
    Processes

    View full-size slide

  38. 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 full-size slide