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?

Great question!

Let's explore

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()

async callDogs()

So JS is sort of multi-threaded!

How can we take advantage of JSs' multiple threads?

Callbacks

Promises

and

Callbacks

Promises

and

Callbacks

Do this...

Then this, whenever you finish.

Callbacks

Not Bad 🙂

But

Callbacks

Also look like this

😱

😭

Callbacks

Handle Async

Chainable

Multi-value

Cancellable

✔

𝘅

Callbacks

𝘅

👎

Callbacks

Promises

and

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

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

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:

This is for many types of iterables

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

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

fetch the content

write the content to files

Write the source to a file!

Get data for each of the templates.