Slide 1

Slide 1 text

Async Patterns in Javascript

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Concurrency & Parallelism

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

Companion

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Callbacks

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Deferred Execution

Slide 10

Slide 10 text

Event Driven UI

Slide 11

Slide 11 text

Callback Problems

Slide 12

Slide 12 text

Pyramid of Doom ?

Slide 13

Slide 13 text

Better with CPS?

Slide 14

Slide 14 text

Not really...

Slide 15

Slide 15 text

Not reasonable

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Promises

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ES6 Native Promises Superset of Promise A+ specification

Slide 20

Slide 20 text

Promises in real life

Slide 21

Slide 21 text

Flow control Sequential Parallel

Slide 22

Slide 22 text

So what?

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Observables

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

How to build a searchbox?

Slide 29

Slide 29 text

Refined searchbox

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Generators

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Play & Pause Interface yield next

Slide 34

Slide 34 text

Live demo

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Synchronous Fashion

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Thunks

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Thunkify a file read

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Using with Generators

Slide 45

Slide 45 text

Communicating Sequential Processes

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Example

Slide 48

Slide 48 text

No content