Hello

Eric Adamski

🐦 @zealigan

MB3

Software Developer

Before I forget

github/ericadamski/forwardjs-2018

Welcome to

Overcome the async struggle

with RxJS

Why?

Why, consider different async options?

Handle Async

Chainable

Multi-value

Cancellable

Handle Async

Make API calls, write and read files, etc..

Chainable

Readable, reasonable code - we do async a lot

Multi-value

JS array operations are good, use them as async operations

Cancellable

fine grain control of our async flow

Handle Async

Chainable

Multi-value

Cancellable

Disclaimer

I am not doing an in-depth analysis of ALL possible async options

Disclaimer

Come and talk to me after for more detailed discussions

What do you think about when I say ...

Asynchronous JavaScript

Callback hell! 🤬

Don't worry, I am going to try and change your mind

So what is:

Asynchronous JS?

🤔

How does it work?

🤔

This is your program

It has a:

Stack

Shout out to Mary Snow!

The stack has function calls

startTheProgram()

callDogs()

callOtherDogs()

maybeConsole.log('things')

These are all

Synchronous

startTheProgram()

callDogs()

callOtherDogs()

maybeConsole.log('things')

So what does Asynchronous look like?

startTheProgram()

callDogs()

callOtherDogs()

maybeConsole.log('things')

Because this doesn't work!

A Stack operates synchronous &

First-In-Last-Out

startTheProgram()

async callDogs()

callOtherDogs()

maybeConsole.log('things')

async callDogs()

So how is JS async?

you must be thinking

it only has a

single thread?

This one!

You are right!

Mostly

This is the main JS event loop

These are your computers threads

This is the main JS event loop

They each have their own stack

NodeJS / Browser facilitate communication

startTheProgram()

async callDogs()

callOtherDogs()

maybeConsole.log('things')

Kernal Thread Pool

callDogs()

So JS is sort of multi-threaded!

How can we take advantage of JSs' multiple threads?

Callbacks

Promises

and

Callbacks

Callbacks

Callbacks

Do this...

Then this, whenever you finish.

Callbacks

Callbacks

Not Bad 🙂

But

Callbacks

Also look like this

😱

😭

Callbacks

Handle Async

Chainable

Multi-value

Cancellable

✔

𝘅

𝘅

𝘅

Callbacks

𝘅

👎

Promises

Promises

Promises

Do this ...

Do this when there is an error

Do this when there is no error

Promises

Whats nice is each

.then

implicitly returns a promise!

Promises

Promises

This makes chaining really nice!

Since this returns a promise...

we can nest them!

Now that is a LOT better than callbacks!

😉

And you can even handle all errors in one place!

😇

Promises

With

async & await

Promises look pretty synchronous!

Promises

Promises

Pretty synchronous 🤙

async/await

Promises

offers us a lot of flexibility

Handle Async

Chainable

Multi-value

Cancellable

✔

𝘅

𝘅

Promises

✔

Promises

👍

✔

Now, you might be asking

if promises are good enough why are you still here?

🤔

For photos 📸

😆

But really, why?

Handle Async

Chainable

Multi-value

Cancellable

✔

𝘅

𝘅

Our best solution only provides some of what we require out of asynchronous JS

✔

So what is the answer to all of your async woes?

What technology will give the async YOU want

async thats:

Chainable, Multi-value, and Cancellable

My pick ...

ReactiveX!

Or more generalized

The

Observable Stream Programming Paradigm

words 🤯

Streams!

not native 🤷‍♂️

not native, yet 👏

There are a few libs doing this in JS right now:

• RxJS

• XStream

• Callbag

This is for many types of iterables

• RxJS

👏

How does RxJS solve our asynchronous problems?

Remember this?

It doesn't look too different!

Before we get a taste of the power of streams...

What are Observables?

How we usually represent data in JS:

How we can represent data with lists in JS:

How we can represent data with lists in JS:

How we can represent data with Observables in JS:

How we can represent data with Observables in JS:

Lists and Observables are very similar, conceptually!

You can also do the same operations!

This is async!

😳

can you feel the power?

List operations on all asynchronous data!

OK. But a little more realistic example would be nice

🌎

No Problem!

Let's manipulate this

Gitignore template API from Github

Let us get every template Github has ...

and write them all to files.

First fetch the data.

Get the JSON.

switchMap? 😳

We have this

[fetchObject]

We have this

[fetchObject]

This returns a promise

We don't want to end up with

[fetchObject, fetchJSON]

same data, different format

Replaces the stream.

So now we have this:

[fetchJSON]

At this point

[
  "Actionscript",
  "Android",
  "AppceleratorTitanium",
  "Autotools",
  "Bancha",
  "C",
  "C++",
  /*...*/
]

Which is the same as this

Which is conceptually this

Which is a single value, which is what promises do

We want to work with each element of that list

An Observable of multiple values

So we do a lift of sorts

Now we can work

with each individual value!

Let's fetch the content and write them all to file.

Handle Async

Chainable

Multi-value

Cancellable

✔

✔

✔

✔

RxJS

Quickly

✔

RxJS

Cancellable

Handle Async 🤪

Chainable

Multi-value

Cancellable

✔

✔

✔

✔

RxJS

There is so much power!

Can you feel it?

It's clean,

declarative,

and functional!

RxJS

🤩

Recap!

Callbacks

Served a purpose, but their time has passed.

Promises

Work really well, but only allow you to work with data as JS objects.

RxJS

Allows you to manipulate async data on the fly, retry, and cancel async operations

Thank you.