kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson

Compare JavaScript Promises and RxJS Observables to find the one that meets your needs.



**TL;DR:** Have you ever thought to yourself, which should I use, JavaScript Promises or RxJS Observables? In this article, we are going to go over some pros and cons of each one. We'll see which one might be better for a project. Remember, this is a constant debate, and there are so many different points to cover. I will be covering only five points in this article. 

## The On-Going Debate

There has been an on-going debate in the world of developers, and that is which is better: JavaScript Promises or RxJS Observables? Each one can bring so much value to different projects. It's a good idea to have a good understanding of each and how it could benefit a project. But before we start looking at some comparisons, let's do a quick overview of what each one is.

### What is a Promise?

A [JavaScript Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) is an object that produces a single value, asynchronously. Data goes in, and a single value is emitted and used. Easy, straightforward way to handle incoming data.

Promises are very eager. If we had a callback function provided to a Promise, once the Promise is resolved, the `.then` gets executed. If we were to demonstrate that in an API call, it would look something like this:

```javascript
fetch('my-api-goes-here')
  .then(resp => resp.json());
```

That raises a question: are we wasting resources with that eagerness? 

<include src="TweetQuote" quoteText="JavaScript Promises are very eager!"/>

### What is an Observable?

An Observable takes in a stream of data and emits multiple bits of data over time.

Observables are very lazy. They don't do much until called upon. Or how we like to say in the Observable world, are "subscribed" to. To create an Observable, we create a function, and this function will return the data.

If we were to demonstrate an Observable, it would look something like this:

```javascript
const data$ = new Observable("stuff here")

data$.subscribe(data => {
  // do some stuff here
})
```

We create the Observable, and then it will wait to be subscribed to. Once that happens, it handles the data and emits whatever values get returned. So the subscribe is essential because that is what wakes the Observables up.

Is that more efficient? We'll see.

<include src="TweetQuote" quoteText="Which to use? JavaScript Promises or RxJS Observables?"/>

## The Great Comparison

Let's look at a handful of comparables between the two. Again, remember there are many different ways we could look at this, but I will be covering only five in this article.

## Simplicity

The best thing about Promises is that they come built-in with JavaScript. That means we don't have to add anything to our package size. There's no third-party library, it's just there, waiting, making it pretty easy to get started with using Promises in a project.

Now Observables, on the other hand, are inside of the RxJS library. We are going to have to add that third party library now. No biggie, right? Now the [minified bundle size of RxJS is 45.6kB](https://bundlephobia.com/result?p=rxjs@6.5.3). That doesn't seem like a lot, but every byte counts when we talk about performance. 

> Note: There is talk of adding Observables in the ECMAScript standard. That GitHub proposal can be found [here](https://github.com/tc39/proposal-observable).

So that poses the question, is adding in the entire RxJS library worth it? It all depends on how much data we are handling, how much use we are going to get out of the Observables, and if we can make that 45.6kB worth it.

If our project is small or we only need a Promise or two, maybe sticking with Promises would be worth it. It'll keep our project light and quick, and that is a goal in all web development.

## Unicast and Multicast

Before we show how Promises and Observables use Unicast and Multicast, let's first discuss what they do.

### Unicast

Unicast is a one-to-one communication process. That means there is one sender and one receiver for each bit of data, that's it. So if multiple receivers are there, each one will get a different line of communication, and it's own unique data sent to it even if it's the same data that gets sent out. A cool way to remember it is that unicast is "unique-cast"; every single receiver will get a "unique" bit of data.

![Diagram of Unicast](https://images.ctfassets.net/23aumh6u8s0i/75XR9gid7SDTNb8gdeSa1Z/8092880d9d1ff7ead98fb9216d17aac4/unicast)

### Multicast

Multicast is a one-to-many communication process. Multicast has one sender and many receivers. If we had one bit of data we needed to send out, then it's as if all the receivers are on the same line and sharing that information that gets sent out. 

![Diagram of Multicast](https://images.ctfassets.net/23aumh6u8s0i/47F5ioP8XaFaY1JYQ3OdPH/51032fc0b6e5169ce3b375835060cb93/multicast)

### Unicast and Multicast in the world of Promises vs. Observables

Promises are multicast, only. Like we talked above, Promises are very eager; they get super excited to send their information to anyone who wants it. They have that line of communication open, and anyone who jumps onto the call will hear the data.

Observables are also multicast but unicast as well. By default, Observables are unicast, making every result get passed to a single, unique subscriber. But Observables allow for the developer to utilize both unicast and multicast benefits. Observables don't care; they just want to get that information out when it's subscribed to.

## Functionality

So far, with this information, there are some clear benefits to using both. Another relevant comparison is the functionality of each one. They both take in data, and they both produce an output. Let's look at how Promises and Observables would each handle an API call.

### The Promises way

Both Promises and Observables will "fetch" the data from the API. Let's see how Promises would handle that data.

To fetch that data, we should see something like this:

```javascript
function fetchTheData(){
  return fetch('my-api-call-here');
}
```

Once we have that data, let's unwrap that data in a `.then` so we can use it:

```javascript
function fetchTheData() {
  return fetch('my-api-call-here');
    .then(resp => resp.json()); // added line
}
```

If we wanted to, we could use an outside function to help handle the data. That would look like this:

```javascript
function fetchTheData() {
  return fetch('my-api-call-here');
    .then(resp => resp.json());
    .then(outsideFunction); // added line
}

// our outside function
function outsideFunction(){
  // stuff here
}
```

Sometimes there can be a lot of data coming in, and we want to filter through it all. Let's add on the `filter` method and see how that would change things:

```javascript
function fetchTheData() {
  return fetch('my-api-call-here');
    .then(resp => resp.json())
    .then(data => data.filter('callback here')) // added line
    .then(outsideFunction);
}

function outsideFunction() {
  // stuff here
}
```

> Something we do not want to forget is that we have `async/await` that we could use. We can learn more about [async here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) and [await here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await).

Now with this example, we have done three things.

1. Grabbed data
2. Unwrapped the data
3. Filtered through said data

Next, let's look at how the code would be with Observables!

### The Observables way

We want to try and accomplish the same thing that we just did with the Promises. Let's fetch some data! Only this time we'll be using [`fromFetch`](https://rxjs-dev.firebaseapp.com/api/fetch/fromFetch) that uses the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):

```javascript
fromFetch('my-api-call-here');
```

There are many ways to unpack data from an API call, and in today's example, we'll use [`switchMap`](https://rxjs-dev.firebaseapp.com/api/operators/switchMap). The benefit of using `switchMap` is that it can cancel any redundant HTTP requests. There are others like [`map`](https://rxjs-dev.firebaseapp.com/api/operators/map), [`flatMap`](https://rxjs-dev.firebaseapp.com/api/operators/flatMap), and [`concatMap`](https://rxjs-dev.firebaseapp.com/api/operators/concatMap) but we are not going to go over those. Also, what are all these methods that we are using? We'll chat about that in a moment.

```javascript
fromFetch('my-api-call-here')
  .pipe(
    switchMap(resp => resp.json());
  )
```
Like we did with Promises, let's look at how we could filter through that data:

```javascript
fromFetch('my-api-call-here');
  .pipe(
    switchMap(resp => resp.json());
    filter('filterstuffhere')
  )
```

> Note: These must be "subscribed" to as well.

## Operators

Okay, let's talk about Operators for a second. When we used `switchMap`, that was an RxJS Operator. Operators are what make RxJS super convenient. Adding an Operator can give a lot of complex code with just a few lines or a few words even. Operators can promote a functional way to process data and this is important from a unit testing perspective. There are many Operators, and learning or understanding them can be a steep learning curve. But once we can wrap our heads around them or at least understand a good chunk of them, we'll be shocked at how much they can do.

Want to learn more about Operators? Visit [this link](https://rxjs-dev.firebaseapp.com/guide/operators)!

### Functionality overview

We have now demonstrated how to fetch data, unwrap that data, and filter through it using both Promises and Observables. Both can get the job done, but let's note that once things get more complicated, Promises need a lot of the logic written out, whereas Observables have the power of Operators. Is that a benefit? Maybe. Maybe not. With that steep learning curve and so many Operators to "filter" (😂) through, it could slow the project down. 

I'll leave you to decide which one you think adds the most value here.

## Ability to Cancel

When a Promise or Observable is running, how do we make it stop? How do we cancel that function from continuing to run?

Both can be canceled but in such different ways. Let's check them out.

A Promise is not cancellable, naturally. Can it be? Yes. There is a nifty third-party library that we can add to our project that can help in canceling a Promise. If we were to look at the [bluebird.js docs](http://bluebirdjs.com/docs/api/cancellation.html), it would show us exactly how to use it to cancel a Promise. We won't go over it in this article, but we can visit that link if we want to learn more.

It's pretty straightforward, although it does add a lot of extra stuff to the project. 

With Observables, those are cancellable. Let's see how:

```javascript
Observable$.unsubscribe()
```

And that's it! To wake up an Observable, we would `.subscribe()` to it, and to cancel the process, we would `.unsubscribe()` from it. That makes for quick and even more straightforward cancellation.

## Promise.race() vs race 

In our final comparison, we will look at `Promise.race()` and the `race` Operator. We'll demonstrate this with the game: Which `console.log()` Would Get Logged First!

> Note: To learn more about these, please visit [this link for `Promise.race()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) and [this link for `race`](https://www.learnrxjs.io/operators/combination/race.html).

### A look at the Promises way

Let's say we have two Promises that need to run. We'll put them both within a `Promise.race()` and see what happens.

What we are trying to accomplish here is what returns (or consoles in our example) first.

```javascript
Promise.race([
  fastPromise.then(() => console.log('This is a race.'))
         .then(() => 'Who will win?'),
  slowPromise.then(() => console.log('Am I the winner?'))
])
.then(x => console.log(x))
```

The output for this would be as follows:

* "This is a race."
* "Who will win?"
* "Am I the winner?"

Although this is only a little bit of data that consoles, this could be a problem in larger-scale apps. Like we talked about before, Promises are not cancellable by default, so the entire thing has to run. What if we only wanted the fastest, first response to be recorded and returned? We could be wasting time and the user's time because we are trying to load everything at once.

### A look at the Observables way

If Observables wanted to race, we would want to use the `race` operator. Whichever Observable wins the "race" is what gets emitted.

```javascript
race(
  fast$.pipe(tap(() => console.log('This is a race.')), 
    map(() => 'Who will win?')),
  slow$.pipe(tap(() => console.log('Am I the winner?'))
)
.subscribe(x => console.log(x))
```

This output would be:

* "This is a race."
* "Who will win?"

The moment we have a winner, the race is over, and we get our desired information. Observables are cancellable, so they cancel the slower Observable because we only want the quickest data.

Is our project needing only the winning data? If so, Observables might be a better way because of how it cancels once that winner is declared.

## So Which to Use?

Eh, this is still tough. Honestly, it all depends on the project.

RxJS has a steep learning curve, and Promises come built into JavaScript. But then we get Operators with RxJS, and those are so convenient! It's a toss-up! 

Some reasons why we would want to use a Promise:

* We need to handle the event, no matter what. We want that response.
* We want only one event handling to occur.

Some reasons why we would want to use an Observable:

* We want to be able to "unsubscribe" from a stream of data.
* The ability to accept multiple events from the same source.

<include src="asides/JavascriptAtAuth0" />

## Conclusion

So which to use, Promises or Observables? The world may never know the answer. But we sure can keep up on the knowledge of how one could benefit our project. It's good to understand both and know when one would be more beneficial than the other.

Let me know your thoughts in the comments below. What are some other comparisons you've seen that must be brought to the table?

---


JavaScript Promises vs. RxJS Observables

But it didn't stay in Vegas! Learn about the talks that took place and the RxJS ideas that we want to spread around the development world.



The first RxJS conference was held this year, 2019, in Las Vegas, Nevada. Speakers from all over the world joined together to deliver content on different RxJS concepts. The core RxJS team, including Ben Lesh and Tracy Lee, gave very informative talks. Ben gave us updates on RxJS 7's timeline and Tracy discussed real-world cases for some of the operators.

There were also a handful of talks given by Auth0 peeps: Kapehe Jorgenson, Kim Maida, and Sam Julien. Yes, that list includes me! 

<AmpContent>
  <include src="TweetQuote" quoteText="I couldn't be more excited for this first ever #RxJS conference, @rxjslive, this week! It's really the first time I've met some of the amazing folks that are coming in person. Going to be so many great discussions!http://RxJS.live (@BenLesh)"/>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I couldn&#39;t be more excited for this first ever <a href="https://twitter.com/hashtag/RxJS?src=hash&amp;ref_src=twsrc%5Etfw">#RxJS</a> conference, <a href="https://twitter.com/rxjslive?ref_src=twsrc%5Etfw">@rxjslive</a>, this week! It&#39;s really the first time I&#39;ve met some of the amazing folks that are coming in person. Going to be so many great discussions!<a href="https://t.co/wrMf0AbTHt">https://t.co/wrMf0AbTHt</a></p>&mdash; Ben Lesh (@BenLesh) <a href="https://twitter.com/BenLesh/status/1168313787121905665?ref_src=twsrc%5Etfw">September 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

## Keynote &mdash; Ben Lesh

The keynote talk was by [Ben Lesh](https://twitter.com/BenLesh), RxJS core team member. He spoke on the future of RxJS; things we all get to look forward to. For example, RxJS 7's alpha stage will be released in the next couple of weeks!

RxJS is ten years old and a lot has happened for the reactive library in that time. The core team has done so much to get RxJS to where it is today and that also includes the contributions from the community. Ben encouraged that continuation of help from the community. From helping write lint transforms to updating the docs! 

<AmpContent>
  <include src="TweetQuote" quoteText="Great talk by @BenLesh about the Future of RxJS. And if you're interested in helping out with the library, see this list of things they need help with. (@aaronfrost)"/>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Great talk by <a href="https://twitter.com/BenLesh?ref_src=twsrc%5Etfw">@BenLesh</a> about the Future of RxJS. And if you&#39;re interested in helping out with the library, see this list of things they need help with. <a href="https://t.co/xyZyeuWGRj">pic.twitter.com/xyZyeuWGRj</a></p>&mdash; Frosty (@aaronfrost) <a href="https://twitter.com/aaronfrost/status/1169653422905184256?ref_src=twsrc%5Etfw">September 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

## Auth0 Team Member Talks

### Kapehe

The first Auth0 team member to hit the stage was me! My talk was titled, "The Battle of House Promises vs. House Observables" with a fun emphasis on the "Game of Thrones" show. There were four battles that Promises and Observables went through and, in the end, a winner was declared. I went over unicast/multicast, functionality, simplicity, and the ability to cancel its processing of data. Observables came out the winner in the end by beating out Promises in all categories except for simplicity.

<AmpContent>
  <include src="TweetQuote" quoteText="I absolutely loved @kapehe_ok's talk on promises vs observables at @rxjslive! Fun, informative, and entertaining! I may start sending people to this talk when it's online and this argument comes up. (@BenLesh)"/>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I absolutely loved <a href="https://twitter.com/kapehe_ok?ref_src=twsrc%5Etfw">@kapehe_ok</a>&#39;s talk on promises vs observables at <a href="https://twitter.com/rxjslive?ref_src=twsrc%5Etfw">@rxjslive</a>! Fun, informative, and entertaining! I may start sending people to this talk when it&#39;s online and this argument comes up. <a href="https://t.co/f4OcrOKYBg">pic.twitter.com/f4OcrOKYBg</a></p>&mdash; Ben Lesh (@BenLesh) <a href="https://twitter.com/BenLesh/status/1169711347451326465?ref_src=twsrc%5Etfw">September 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

### Kim Maida

Kim gave two different talks:

1. Subjecting State to Good Behavior &mdash; Using the excellent NASA API, Kim showed us how to manage state with RxJS. Her slides are unreal! She showed sample apps that update the store using RxJS and how robust it could scale up to be.
2. RxWAT?!? &mdash; Joint talk with Sam Julien &mdash; This hilarious, meme filled talk gave a fun view on how RxJS can be complicated and challenging. They went over some unfortunately named operators and multiple marble diagrams! 

<AmpContent>
  <include src="TweetQuote" quoteText="What do you get when you put @KimMaida and @samjulien (two professional speakers) in the same talk -> The funniest talk of @rxjslive , but also full of valuable insights! (@Mike_BeastCode)"/>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">What do you get when you put <a href="https://twitter.com/KimMaida?ref_src=twsrc%5Etfw">@KimMaida</a> and <a href="https://twitter.com/samjulien?ref_src=twsrc%5Etfw">@samjulien</a> (two professional speakers) in the same talk -&gt; The funniest talk of <a href="https://twitter.com/rxjslive?ref_src=twsrc%5Etfw">@rxjslive</a> , but also full of valuable insights! <a href="https://t.co/IgTAfj6N6B">pic.twitter.com/IgTAfj6N6B</a></p>&mdash; Mike_BeastCode @RxJsLive (@Mike_BeastCode) <a href="https://twitter.com/Mike_BeastCode/status/1170131302802001921?ref_src=twsrc%5Etfw">September 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

### Sam Julien

Sam gave two joint talks this conference:

1. RxWAT?!? &mdash; Joint talk with Kim Maida &mdash; see above!
2. What Groups By in Vegas Stays in Vegas &mdash; joint talk with Mike Ryan &mdash; This joint talk went over some cool features that come with the "groupBy" operator. They also created animations that really helped understand this advanced operator.

<AmpContent>
  <include src="TweetQuote" quoteText="Really beautiful visualizations from @MikeRyanDev and @samjulien at @rxjslive with the different *Map operators and groupBy (@mattpodwysocki)"/>

</AmpContent>

<NonAmpContent>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Really beautiful visualizations from <a href="https://twitter.com/MikeRyanDev?ref_src=twsrc%5Etfw">@MikeRyanDev</a> and <a href="https://twitter.com/samjulien?ref_src=twsrc%5Etfw">@samjulien</a> at <a href="https://twitter.com/rxjslive?ref_src=twsrc%5Etfw">@rxjslive</a> with the different *Map operators and groupBy <a href="https://t.co/YJfHQbBAln">pic.twitter.com/YJfHQbBAln</a></p>&mdash; λ Calrissian (@mattpodwysocki) <a href="https://twitter.com/mattpodwysocki/status/1169714725652819968?ref_src=twsrc%5Etfw">September 5, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</NonAmpContent>

## Two Days of RxJS Info

Attendees were able to gain a lot of information about RxJS in the two days.

The list of speakers include:

### Day 1

1. [Ben Lesh](https://twitter.com/BenLesh) &mdash; The Future of RxJS
2. [Tracy Lee](https://twitter.com/ladyleet) &mdash; RxJS &mdash; Operator, What's Your Real World Use Case? Important Operators in RxJS Explained
3. [Michael Hladky](https://twitter.com/Michael_Hladky) &mdash; A Deep Dive into Subjects
4. [Nicholas Jamieson](https://twitter.com/ncjamieson) &mdash; Tools for an Awesome RxJS Developer Experience
5. [Kapehe](https://twitter.com/kapehe_ok) &mdash; The Battle of House Promises vs. House Observables
6. [Sam Julien](https://twitter.com/samjulien) & [Mike Ryan](https://twitter.com/MikeRyanDev) &mdash; What Groups By in Vegas Stay in Vegas
7. [Kim Maida](https://twitter.com/KimMaida) &mdash; Subjecting State to Good Behavior
8. [Michael Madsen](https://twitter.com/mmadsen87) &mdash; Reactive Responsive Design
9. [Joe Eames](https://twitter.com/josepheames) &mdash; Understanding RxJS Error Handling

### Day 2

1. [Matt Podwysocki](https://twitter.com/mattpodwysocki) &mdash; Advanced RxJS Wizardry
2. [Hannah Howard](https://twitter.com/techgirlwonder) &mdash; Reactive Architecture with Signal Graphs
3. [Jay Phelps](https://twitter.com/_jayphelps) &mdash; Backpressure: Resistance is NOT Futile
4. [Dean Radcliffe](https://twitter.com/deaniusol) &mdash; Making React Forms Reactive
5. Kim Maida & Sam Julien &mdash; RxWAT?!?
6. Michael Gerakis &mdash; Demystifying and Harnessing the Power of the Multicasted Observable
7. [Jan-Niklas Wortmann](https://twitter.com/niklas_wortmann) &mdash; Fixing Asynchrony with RxJS
8. [David Khourshid](https://twitter.com/davidkpiano) &mdash; The (Finite) State of Reactive Animations
9. RxJS Core Team &mdash; Q&A

![RxJS Core Team Q&A](https://images.ctfassets.net/23aumh6u8s0i/2andv1uFgZ9Y2Km68wqii3/237d268f1fcff5f28c7f6303034d551f/core-team-qa)
(RxJS Core Team and others at the Q&A Session)

## RxJS with Auth0

What to know how to implement the RxJS library with Auth0? Here are some great examples of doing that!

1. [Build a React Application using RxJS](https://auth0.com/blog/build-a-react-application-using-rxjs/)
2. [Building an Audio Player app with Angular and RxJS](https://auth0.com/blog/building-an-audio-player-app-with-angular-and-rxjs/)
3. [RxJS Advanced Tutorial With Angular & Web Speech: Part 1](https://auth0.com/blog/rxjs-advanced-tutorial-with-angular-web-speech-part-1/)
4. [RxJS Advanced Tutorial With Angular & Web Speech: Part 2](https://auth0.com/blog/rxjs-advanced-tutorial-with-angular-web-speech-part-2/)

All the videos of the talks can be found on the [YouTube channel for RxJS Live](https://www.youtube.com/channel/UCmvhqGbbqkhJ63V3g-l-5Gg).

<include src="asides/AboutAuth0" />

---


The World's First RxJS Conference Just Happened in Vegas

indermohan-singh

Indian expat living and working in Vienna, Austria. Besides programming,  I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.

Mobile Developer

Indermohan Singh

Learn how to create an Audio Player app using Angular, Material Design and RxJS.

Building an Audio Player app with Angular and RxJS

Learn how to develop modern mobile apps with Angular, Ionic, RxJS and NgRx. Follow this tutorial to create a mobile audio player app.

Building An Audio Player App with Ionic, Angular, RxJS, and NgRx

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

RxJs 6 is out to provide developers with improvements in modularity, a boost in performance and easier to debug call stacks.



RxJs 6 is out and with it new exciting additions and changes! [Ben Lesh](https://twitter.com/BenLesh) [highlights that RxJS 6](https://twitter.com/BenLesh/status/988922021705756672) brings cleaner imports while having a smaller API, a backward compatibility package to update without changing your code, and automatic code migration for TypeScript.

These changes provide developers with improvements in modularity, a boost in performance and easier to debug call stacks. The RxJS team has made a solid effort on making this release as backward compatible as possible. However, in an effort to reduce the API surface of the RxJS library, some breaking changes were introduced.

<include src="TweetQuote" quoteText="RxJS 6 brings improvements in modularity, a boost in performance and easier to debug call stacks. The RxJS team has made a solid effort on making this release as backward compatible as possible"/>

Let's explore what the RxJS team has included and changed in this new release.

## RxJS 6 Backward Compatibility

To make the migration path from RxJS 5 to RxJS 6, the RxJS team has released a sibling package called `rxjs-compat`. This package creates a compatibility layer between the APIs of `v6` and `v5`.

The team recommends that most developer upgrade existing applications by installing both `rxjs` and [`rxjs-compat`](https://www.npmjs.com/package/rxjs-compat) at `^6.0.0`:

```bash
npm install rxjs@6 rxjs-compat@6 --save
```

This package allows you to continue running your existing codebase without issues while you implement the RxJS 6 upgrades. It supports functionality that is removed with the release of RxJS 6.

The bundle size of your application will increase with the installation of `rxjs-compat`; this effect is amplified if your project also integrates with Webpack < `4.0.0`. Therefore, it is recommended that `rxjs-compat` is removed from your project once the upgrade process has been completed.

<include src="TweetQuote" quoteText="rxjs-compat makes it easy to upgrade to RxJS 6 as it creates a compatibility layer between the APIs of v6 and v5. This layer provides your codebase with functionality that is being removed in v6 so that you can upgrade gradually."/>

> Upgrading to RxJS 6 may introduce type errors in your codebase that were not previously shown.

## Limitations of Upgrading to RxJS with rxjs-compat

There are only two breaking changes that are not covered by the `rxjs-compat` package:

### TypeScript prototype operators

In the rare instance that your codebase defines its own TypeScript prototype operators and modifies the `Observable` namespace, your operator code would need to be updated in order for TypeScript to compile.

From the release notes examples, a user-defined prototype operator can be created as follows:

```javascript
Observable.prototype.userDefined = () => {
  return new Observable((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.userDefined().subscribe();
```

To compile the previously custom operator, the following changes would need to be made:

```javascript
const userDefined = <T>() => (source: Observable<T>) => new Observable<T>((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.pipe(
  userDefined(),
)
```

### Synchronous error handling

Calling `Observable.subscribe()` within a `try/catch` block is no longer supported. Instead, replace the `try/catch` block with asynchronous error handling done with the `error` callback in the `Observable.subscribe()` method.

As shown in the release notes:

```javascript
// deprecated
try {
  source$.subscribe(nextFn, undefined, completeFn);
} catch (err) {
  handleError(err);
}

// use instead
source$.subscribe(nextFn, handleError, completeFn);
```

`Observable.subscribe()` now _must_ define an `error` callback to handle errors asynchronously.

## Changes to Make Before Dropping the RxJS Compatibility Layer

As mentioned earlier, `rxjs-compat` provides a temporary compatibility layer between the APIs of `v5` and `v6`. Essentially, `rxjs-compat` provisions your codebase with functionality from `v5` that it relies on, allowing you to gradually upgrade your codebase to `v6`. To complete the upgrade process and remove the `rxjs-compat` dependency from your project, your codebase would need to be refactored to stop relying on that `v5` functionality which includes:

### Changes to `import` paths

The recommendation for TypeScript developers is to use [`rxjs-tslint`](https://github.com/reactivex/rxjs-tslint) to refactor `import` paths.

The following rules have been designed by the RxJS team to help JavaScript developers refactor `import` paths:

- `rxjs`: Contains creation methods, types, schedulers, and utilities.

```javascript
import {
  Observable,
  Subject,
  asapScheduler,
  pipe,
  of,
  from,
  interval,
  merge,
  fromEvent
} from "rxjs";
```

- `rxjs/operators`: Contains all pipeable operators.

```javascript
import { map, filter, scan } from "rxjs/operators";
```

- `rxjs/webSocket`: Contains the web socket subject implementation.

```javascript
import { webSocket } from "rxjs/webSocket";
```

- `rxjs/ajax`: Contains the Rx ajax implementation.

```javascript
import { ajax } from "rxjs/ajax";
```

- `rxjs/testing`: Contains the testing utilities for RxJS.

```javascript
import { TestScheduler } from "rxjs/testing";
```

<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Have you tried updating your app using rxjs-tslint?</p>&mdash; Ben Lesh 🛋️👑🔥 (@BenLesh) <a href="https://twitter.com/BenLesh/status/989268922556862464?ref_src=twsrc%5Etfw">April 25, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### Use Piping Instead of Chaining

Use piping instead of chaining as new operator syntax. The result of one operator is piped into another operator.

Don't remove `rxjs-compat` until you have refactored all chained operators into piped operators. If you are a TypeScript user, `ts-lint` can automate this refactoring to some extent for well-typed code.

During [ng-conf 2018](https://www.ng-conf.org/sessions/introducing-rxjs6/), Ben Lesh explained [why we should use pipeable operators](https://youtu.be/JCXZhe6KsxQ?t=2m30s):

![Ben Lesh explains why developers should use pipeable operators](https://images.ctfassets.net/23aumh6u8s0i/3WMn85RnW3N0ztWOCEhYJr/d5de9ed4df276d7f126daad274d4688d/ng-conf-ben-lesh-rxjs-6)

Follow these steps to reactor your operator chains into pipes:

- Install all operators used from `rxjs/operators`.

> **Note** Some operators have a name change due to name collisions with JavaScript reserved words! These include: `do` -> `tap`, `catch` -> `catchError`, `switch` -> `switchAll`, `finally` -> `finalize`.

```javascript
import { map, filter, catchError, mergeMap } from "rxjs/operators";
```

- Attach a [`pipe()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pipe) method to the source and wrap all the operators within it. Ensure that the `.` is removed from each operator name and that they are comma-delimited. Remember that some operators need to change their names.

The following is an example of a pipeable refactoring from the release notes:

```javascript
// an operator chain
source
  .map(x => x + x)
  .mergeMap(n =>
    of(n + 1, n + 2)
      .filter(x => x % 1 == 0)
      .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of("error found"))
  .subscribe(printResult);

// must be updated to a pipe flow

source
  .pipe(
    map(x => x + x),
    mergeMap(n =>
      of(n + 1, n + 2).pipe(
        filter(x => x % 1 == 0),
        scan((acc, x) => acc + x, 0)
      )
    ),
    catchError(err => of("error found"))
  )
  .subscribe(printResult);
```

Notice how we use `pipe()` twice in the above code as internal sources are also piped.

### Use Functions instead of Classes

Functions have replaced classes that operate on observables. All [observable classes](https://github.com/ReactiveX/rxjs/tree/5.5.8/src/observable) have been removed. Their functionality is replaced by existing operators, new operators, or functions. Each of their replacement has the same functionality that each class had.

For example:

```javascript
// removed
ArrayObservable.create(myArray)

// use instead

from(myArray)

// you may also use

new operator fromArray().
```

For a complete list of the `v6` creation functions that replace `v5` classes, please visit the [RxJS documentation](https://github.com/ReactiveX/rxjs).

**Special case:**

- [`ConnectableObservable`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/ConnectableObservable.ts) is hidden from direct use in `v6`. To access it, use the operators [`multicast`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast), [`publish`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publish), [`publishReplay`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publishReplay), [`publishLast`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publishLast).
- [`SubscribeOnObservable`](https://github.com/ReactiveX/rxjs/blob/master/spec/observables/SubscribeOnObservable-spec.ts) is hidden from direct use in `v6`. To access it, use the operator [`subscribeOn`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-subscribeOn).

### Removing resultSelector

Result selectors are a RxJS feature that is not widely used and in some cases wasn't even documented. However, result selectors did bloat the codebase significantly; thus, the RxJS team decided to deprecate or remove them.

For developers making use of result selectors, they would need to replace the `resultSelector` parameter with external result-selection code.

For two functions, [`first()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first) and [`last()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last) these parameters have been removed and must be updated before removing `rxjs-compat`.

For other functions that have `resultSelector` as a parameter, such as mapping operators, this parameter has been deprecated and their implementation has been re-written in a much more compact form. If you remove `rxjs-compat`, these function will continue to work; however, the RxJS team states that they must be removed before the `v7` release.

For more details on this rare implementation, please visit the [RxJS documentation](https://github.com/ReactiveX/rxjs).

## Other RxJS 6 Deprecations

### `Observable.if` and `Observable.throw`.

[`Observable.if`](http://reactivex.io/rxjs/file/es6/observable/if.js.html) has been replaced by [`iif()`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts) and [`Observable.throw`](http://reactivex.io/rxjs/file/es6/observable/throw.js.html) is now [`throwError()`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts). You can use `rxjs-tslint` to convert these deprecated `Observable` method calls into function calls.

The release notes gives us the following example:

#### Observable.if > iif()

```javascript
// deprecated
Observable.if(test, a$, b$);

// use instead

iif(test, a$, b$);
```

#### Observable.error > throwError()

```javascript
// deprecated
Observable.throw(new Error());

//use instead

throwError(new Error());
```

### Deprecated Methods

According to the migration guide, other methods have been deprecated and refactored:

**merge**

```javascript
import { merge } from "rxjs/operators";
a$.pipe(merge(b$, c$));

// becomes

import { merge } from "rxjs";
merge(a$, b$, c$);
```

**concat**

```javascript
import { concat } from "rxjs/operators";
a$.pipe(concat(b$, c$));

// becomes

import { concat } from "rxjs";
concat(a$, b$, c$);
```

**combineLatest**

```javascript
import { combineLatest } from "rxjs/operators";
a$.pipe(combineLatest(b$, c$));

// becomes

import { combineLatest } from "rxjs";
combineLatest(a$, b$, c$);
```

**race**

```javascript
import { race } from "rxjs/operators";
a$.pipe(race(b$, c$));

// becomes

import { race } from "rxjs";
race(a$, b$, c$);
```

**zip**

```javascript
import { zip } from "rxjs/operators";
a$.pipe(zip(b$, c$));

// becomes

import { zip } from "rxjs";
zip(a$, b$, c$);
```

## Recap

RxJS 6 brings some breaking changes but they are mitigated by the addition of the `rxjs-compat` package that allows you to gradually migrate while keeping your `v5` code operational. For TypeScript users, which cover the majority of Angular developers, `tslint` offers a great deal of automated refactoring to make the transition even easier.

As always, any upgrades and code changes may invite bugs into the codebase or even make elusive ones resurface. Solid testing practices should always be in place to ensure that your users keep receiving the same quality experience that you were providing them when `v5` was part of your codebase.

Watch the complete introduction to RxJS 6 by Ben Lesh:

<p style="text-align: center;">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JCXZhe6KsxQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</p>

<include src="asides/AboutAuth0" />


RxJS 6: What's new and what has changed?

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Build an app to learn about the power and flexibility of RxJS in Angular while exploring speech recognition with Web Speech API.

RxJS Advanced Tutorial: Use the Madlibs API

RxJS Advanced Tutorial: Create a Web Speech Service

In this tutorial series, we'll learn how to build a small app with some big concepts. We'll cover reactive programming with [Reactive Extensions (Rx*)](http://reactivex.io/), JS framework component interaction in [Angular](https://angular.io), and speech recognition with the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). The completed Madlibs app code can be found at [this GitHub repo](https://github.com/auth0-blog/madlibs).

---

In this part, we will cover the following:

* Introduction to reactive programming with Rx* and observables
* Setting up our Angular app

Let's get started!

## What We'll Learn About

The concepts and tools we'll use and learn about include:

* Component communication in [Angular](https://angular.io) JavaScript framework
* Managing streams with [RxJS](http://reactivex.io/rxjs/) ReactiveX for JavaScript (packaged with Angular)
* [Annyang](https://github.com/TalAter/annyang) library for [Web API Speech Recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
* Accessing a prebuilt [Node API](https://github.com/kmaida/madlibs-api) to generate random words

Let's begin with some core concepts to facilitate the use of these tools.

## Reactive Programming with RxJS and Observables

[Angular](https://angular.io) brought the ReactiveX [RxJS](http://reactivex.io/rxjs/) library to the forefront for JavaScript Single Page Application (SPA) developers. RxJS is packaged with Angular, and while it was unfamiliar to many at first, the concept of reactive programming with _observables_ in JS has gained traction and popularity with increased Angular adoption.

### Observables Are Streams

_Observables_ are a vital part of RxJS and now Angular. When learning about observables, the first concept to reconcile is that observables are _streams_. What does this mean?

Consider an array. An array is a collection of values. With a normal array, you theoretically have the collection of all values available to you from the beginning. Of course, we know this isn't always the case: in fact, it's common practice to _push_ additional values to an array in response to events, or to create new arrays _from_ other arrays with methods like [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). Traditionally, if we do this with a normal array, we need to use _callbacks_ in order to tell our scripting code that the array has a new value.

On the other hand, an observable "stream" represents a _collection over time_. A stream may (or may not) have an initial value, and over time, more values are added to it. We can _subscribe_ to the observable stream to be notified whenever a new value has been added. This is an ideal way to react to collections over time.

<include src="TweetQuote" quoteText="An observable is a stream that represents a collection over time."/>

For example, say we have a shopping cart. Every time a user successfully adds an item to their cart, we then want to run some code. (This code might display a toast with the name of the item, update a count of all items in the cart, update the cart subtotal, etc.) We could do this with a state container such as [Redux](http://redux.js.org/) or [@ngrx/store](https://github.com/ngrx/platform/blob/master/docs/store/README.md), or we could simply use an observable and subscribe to it to react each time a new value is added.

We'll implement several observables in the app that we'll build in this tutorial. To see additional examples right now, look over the [Observables section of the Glossary of Modern JavaScript Concepts](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#observables). You should also check out [Rob Wormald's](https://twitter.com/robwormald) ["Everything is a Stream" slides](http://slides.com/robwormald/everything-is-a-stream) and [presentation](https://www.youtube.com/watch?v=UHI0AzD_WfY).

### Reactive Programming and RxJS

[ReactiveX, or Rx*](http://reactivex.io/rxjs/), is an API for asynchronous programming with observable streams. The JavaScript implementation is [RxJS, which is available on GitHub](https://github.com/reactivex/rxjs). As mentioned, Angular comes packaged with RxJS, so it's to our great advantage to make use of it wherever it might help.

_Reactive programming_, in a nutshell, is based on propagating and responding to incoming events over time in a [declarative](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#imperative-declarative) manner. Observables, which are streams of collections over time, are ideal for this.

<include src="TweetQuote" quoteText="Reactive programming is based on propagating and responding to incoming events over time, declaratively."/>

You can read more about [reactive programming here](https://auth0.com/blog/glossary-of-modern-javascript-concepts/#reactive-programming).

## Web Speech API

The [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) is an in-draft feature that enables the incorporation of voice data into web apps. It's still an [experimental technology](https://dvcs.w3.org/hg/speech-api/raw-file/tip/webspeechapi.html) at the time of writing, however, so cross-browser support is limited.

For our app, we're specifically interested in the [speech recognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) interface of the Web Speech API. This technology allows the browser to start listening via the user's microphone, assess speech using language and grammar dictionaries, and then execute functionality (as defined by the developer) in response.

At the time of writing, this is [only supported in Chrome](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility), so we will build our app with progressive enhancement in mind.

We will use the lightweight [Annyang](https://github.com/TalAter/annyang) JS library to work with speech recognition more easily in our application.

## What We'll Build

We're going to build an [ad libitum](https://en.wikipedia.org/wiki/Ad_libitum) web app inspired by [Mad Libs games](https://en.wikipedia.org/wiki/Mad_Libs)! Our own Madlibs app will have the following features:

* The app requires 5 nouns, 5 verbs, and 5 adjectives to generate a short, silly story.
* Words can be generated automatically through a provided Node [madlibs-api](https://github.com/kmaida/madlibs-api).
* Words can be typed in manually by the user.
* If the user's browser supports it, words can be entered through speech recognition using the computer's microphone.
* The app will then automatically fetch supplemental pronouns and use the user's words to generate and then display the story.

In Chrome, our app will look like this when it's finished:

![Madlibs app with Angular and speech recognition](https://images.ctfassets.net/23aumh6u8s0i/6W07LfYGGUdaJf2NVrcqHu/ad8d56f679900f1ba1d74648054b74c2/final-chrome)

> **Note:** In other browsers that don't support speech recognition, the "Speak to Play" feature will not be displayed. Users will still be able to generate words using the API or type them manually.

Though our Madlibs app is relatively small, it has a lot of features and robust functionality, so we'll build it over a short series of two tutorial articles.

> **Note:** This tutorial moves quickly over the core Angular concepts. It's recommended that you have some experience with Angular before tackling the Madlibs app. You can check out the [Angular Tour of Heroes tutorial](https://angular.io/tutorial) or my [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) to learn about Angular in-depth before beginning this tutorial.

Let's get started!

## Dependencies and Setup

The first thing we need to do is install dependencies. You'll need:

* [Node.js](https://nodejs.org) with npm
* [Angular CLI](https://github.com/angular/angular-cli#installation) - follow the README instructions to install the CLI globally

You should also clone the [madlibs-api](https://github.com/kmaida/madlibs-api) to your local machine. Once installed, you can start the API server by running the following command from the project's root folder:

```bash
$ node server
```

The API will then be accessible in the browser at `http://localhost:8084/api` with the endpoints specified in the [madlibs-api README](https://github.com/kmaida/madlibs-api).

### Create a New Angular Project

We'll use the Angular CLI to generate a new Angular project. In a folder of your choosing, run the following command:

```bash
$ ng new madlibs --style=scss
```

A new Angular project called `madlibs` will be generated with SCSS support. To start the app's server, navigate into the new project folder and run the `serve` command like so:

```bash
$ cd madlibs
$ ng serve
```

The app will run at `http://localhost:4200` and should look something like this in the browser:

![new Angular app works](https://images.ctfassets.net/23aumh6u8s0i/V1G0tbxhMi7gAz04ptRjj/3828aec3fce492ee0bb0545b0a505909/app-works)

### Add Bootstrap and Annyang From CDN

We'll add [Bootstrap](https://v4-alpha.getbootstrap.com/) for CSS styling and [Annyang](https://github.com/TalAter/annyang) for speech recognition using CDNs.

> **Note:** This tutorial uses an alpha version of Bootstrap v4, latest available at the time of writing. If a newer v4 release is available at the time of reading, please feel free to upgrade and make changes as necessary to the CSS in your app.

Open your app's `index.html` file and add the following CDN links to the document `<head>`:

``` html  

<!doctype html>
<html lang="en">
<head>
  ...
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  
  <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
  ...
```

We now have access to Bootstrap's styles and Annyang's Web Speech API helpers in our application. We're ready to start development!

RxJS Advanced Tutorial: Getting Started

a28d70be6ae2b9389db9ad815cab510e

Guest Author

Wojciech Kwiatek

Angular is built on the top of RxJS. Learn how you can make use of RxJS in your Angular apps for a clearer and more maintainable codebase.

<div class="alert alert-danger alert-icon">
  <i class="icon-budicon-500"></i>
  <strong>This post is out of date.</strong> Angular 5+ replaced `Http` with `HttpClient` and RxJS 6 introduced many changes to operators. Check out the [Real-World Angular Series](https://auth0.com/blog/real-world-angular-series-part-1/) and [RxJS 6: What's new and what has changed?](https://auth0.com/blog/whats-new-in-rxjs-6/) for more recent content.
</div>

---

**TL;DR** Angular, [previously known as Angular 2](http://angularjs.blogspot.com/2017/01/branding-guidelines-for-angular-and.html), incorporates RxJS and uses it internally. We can make use of some RxJS goodies and introduce FRP to write more robust code in our apps.

---

If you're new to RxJS, I recommend reading [Understanding Reactive Programming and RxJS](https://auth0.com/blog/understanding-reactive-programming-and-rxjs/) before proceeding.

RxJS is all about streams, operators to modify them, and observables.

## Functional Reactive Programming (FRP)
FRP has recently become a buzzword. To give you a deeper understanding on that topic, there is an awesome post from Andre Stalz -- [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754). What is the key takeaway from the this comprehensive post? Reactive programming is actually programming with asynchronous data streams. But where does the word *functional* come into play? Functional is about how we can modify these streams to create new sets of data. A stream can be used as an input to another stream. We have a bunch of operators in RxJS to do things like this. So, can we do some of FRP with RxJS? The short answer is: yes! And we'll do so with Angular.

## RxJS in Angular
To get started with RxJS in Angular, all we need to do is import the operators we want to use. TRxJS is itself an Angular dependency so it's ready to use out of the box.

### Passing observables to the view
We are about to start with some observables created ad hoc. Let's create an observable from the JavaScript array:

```ts
const items = Observable.of([1, 2, 3])
```

Now, we can use the created observable as a component's property and pass it into the view. Angular introduced a new filter, which will be a perfect fit here. It's called `async`. Its purpose is to unwrap promises and observables. In the case of an observable it'll pass the last value of the observable:


```ts
import { Component } from '@angular/core'
import { Observable } from 'rxjs/Rx'

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of items | async">
        {{ item }}
      </li>
    </ul>
  `
})
export class AppComponent {
  public items = Observable.of([1, 2, 3])
}
```

We should see a list of elements in the browser.

This is our *hello world* example to see how async works and how we can use it.

### Http
Angular relies on RxJS for some of its internal features. One of the most well-known services is *Http*. In Angular 1.x, *Http* was a promise-based service. In Angular 2+, it's based on observables. This means that we can also make use of the `async` pipe here. Let's try to create a real-world example with a service. We want to fetch a list of repos authored by Auth0 on GitHub:

```ts
import { Injectable } from '@angular/core'
import { Http } from '@angular/http'
import { Observable } from 'rxjs/Rx'
import 'rxjs/add/operator/map'

@Injectable()
export class RepoService {
  constructor(private _http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this._http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
  }
}
```

Here, we have the service, which exposes the `getReposForUser` method to make an http call. Note the return type of the method -- it's an `Observable<any>`. Now, we can add it into the module and use it in the component:

```ts
import { RepoService } from './repo.service.js'

@Component({
  selector: 'my-app',
  template: `

  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    console.log(this.repos)
  }
}
```

Something important has just happened. You can take a look into the *Network* tab of your developer tools in the browser. No call was made. Let's add the `for` loop with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let repo of repos | async">
        {{ repo.name }}
      </li>
    </ul>
  `,
})
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
  }
}
```

Now the call for repositories is fired, and we can see that the list of repos has been fetched correctly. Why is that?

## Hot and Cold Observables
The `http.get` observable above is **cold**: that means each subscriber sees the same events from the beginning. It's independent of any other subscriber. It also means that if there's no subscriber, no value is emitted! See this one in action:

```ts
export class AppComponent {
  public repos: Observable<any>

  constructor(repoService: RepoService) {
    this.repos = repoService.getReposForUser('auth0')
    this.repos.subscribe()
    this.repos.subscribe()
  }
}
```

Now you'll be able to see three calls. You can now see one more thing -- `async` makes a subscription under the hood.

On the other hand, we have **hot** observables. The difference is, no matter how many subscribers there are, the observable starts just once. And we can make our observable hot, instead of cold, by using the `share` operator:

```ts
// ...
import 'rxjs/add/operator/share'

@Injectable()
export class RepoService {
  constructor(private http: Http) {}

  getReposForUser(user: string): Observable<any> {
    return this.http
      .get(`https://api.github.com/users/${user}/repos`)
      .map((res: any) => res.json())
      .share()
  }
}
```

Now you should see just one call. If you want to go deeper with the topic, here is a [Hot vs Cold Observables](http://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339) article by Ben Lesh.

## Programming the reactive way in Angular

### Handling events
We've covered how you've probably used RxJS observables for *Http* in Angular, even if you weren't aware of it. However, there are many more things you can do with streams, even if Angular doesn't require you to do so. Now we move on to the *on click* events. The traditional, imperative way of handling click events in Angular is as follows:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="handleButtonClick(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  handleButtonClick(value: number) {
    console.log(value)
  }
}
```

We can create a stream of click events using RxJS `Subject`. *Subject* is both an observer and an observable at the same time. It means it can emit value (using `.next()`), and you can subscribe to it (using `subscribe`).

Here, you can see the same case achieved with functional approach using RxJS:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

It's not much different than the previous one, though. Let's try to add some more logic there. Like making sum of clicks and printing some text instead of just number.

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
  `,
})
export class AppComponent {
  public counter$: Observable<string> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
    .map((value: number): string => `Sum of clicks: ${value}`)

  constructor() {
    this.counter$.subscribe(console.log.bind(console))
  }
}
```

The key point is that *we define how the clicks stream will behave.* We say that we don't really need clicks but only the sum of them with some prepended text. And this sum will be our stream, not the pure click events. And we subscribe to the stream of summed values. In other words, *the key of functional programming is to make the code declarative, not imperative.*

### Communication between components
Let's briefly address communication between Angular components using an RxJS approach. It's actually about dumb components in the RxJS approach of an Angular world. Last time I described the [change detection of Angular](https://auth0.com/blog/understanding-angular-2-change-detection/) and what we can do with it to fine-tune the app. We'll add the component with `clicks$` stream as the input.

```ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'

@Component({
  selector: 'my-score',
  template: 'Summary: {{ score }}',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ScoreComponent {
  @Input() public score: number
}
```

Note that the component has `ChangeDetectionStrategy.OnPush` turned on, so this means that we assume that the new reference will come as the input. The component accepts a numeric parameter, but there is no reference to streams. We can handle this with the `async` pipe:

```ts
@Component({
  selector: 'my-app',
  template: `
    <button (click)="counter$.next(1)">
      Up Vote
    </button>
    <my-score [score]="counter$ | async"></my-score>
  `,
})
export class AppComponent {
  public counter$: Observable<number> = new Subject<number>()
    .scan((acc: number, current: number): number => acc + current)
}
```

### Forms
Another place when you can use the power of RxJS is forms. We can use all of the knowledge that we have gained up to this point and see how we can create a reactive login form.

First, let's start with adding `ReactiveFormsModule` from `@angular/forms` to the module. Then we can make use of the reactive forms introduced in Angular. Here's how it can look:

```ts
import { FormBuilder, FormGroup } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })
  }
}
```

We now have a few additional blocks:
- `formControlName` -- added to match names from templates to the appropriate fields in the controller
- `formBuilder.group` -- creates the form
- `[formGroup]` -- connects the template and the controller

We can now use the `valueChanges` observable:

```ts
// ...
    this.loginForm.valueChanges.subscribe(console.log.bind(console))
// ...
```

Now, each changed field will emit an event and will be logged to the console. This offers many possibilities since we can take advantage of any operator that RxJS provides. In this example, let's focus on submitting the form in a reactive way. We can put `(submit)` on the form:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
    
  `
})
// ...
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

// ...
```

We now have a stream of submit events and a stream of values. All that remains is to combine these streams. The resulting stream will emit the current state of the fields when the form is submitted. The desired behavior can be achieved by using the [withLatestFrom](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom) operator of RxJS. The combined stream is as follows:

```ts
// ...
    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
// ...
```

We now have combined streams, and the logic is consolidated. It can be written in a single line. Just to recap, here is the final code for the form component:

```ts
@Component({
  selector: 'my-app',
  template: `
    <form
      [formGroup]="loginForm"
      (submit)="submit$.next()"
    >
      <label>Login:</label>
      <input
        formControlName="login"
        type="text"
      >

      <label>Password:</label>
      <input
        formControlName="password"
        type="password"
      >

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  public loginForm: FormGroup
  private submit$: Observable<any> = new Subject()

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      login: '',
      password: '',
    })

    this.submit$
      .withLatestFrom(this.loginForm.valueChanges, (_, values) => values)
      .subscribe(values => {
        console.log('submitted values', values)
      })
  }
}
```

<include src="asides/Angular" />

## Conclusion
Angular has a lot more features than meets the eye. RxJS is, in my personal opinion, one of the best of them. It can rocket the app to the next level in term of maintainability and clarity. The future is more declarative, less imperative code.

RxJS can appear intimidating at first, but once you’re familiar with its functionality and operators, it supplies many benefits (such as defining logic at the declaration time). All of this is to say, the code is easier to understand compared to imperative code. RxJS requires a different mode of thinking, but it is very worthwhile to learn and use.

Making use of RxJS in Angular

6c0654e56c8c73ffee8f76fe03d18ccf?s=80 avatar

6c0654e56c8c73ffee8f76fe03d18ccf?s=80

Alex Sears

Using Reactive programming and RxJS, you can simplify your programming logic and make your programs easier to understand. Let's build a weather app to show this off!

Understanding Reactive Programming and RxJS

ryan-chenkie

Ryan is a full-stack JavaScript developer and trainer who mainly works with React, Angular, Node, and GraphQL. He runs a consultancy where he builds apps for companies and also helps established dev teams with their modern JavaScript challenges.<br /><br />Ryan is a Google Developer Expert, the host of the Entrepreneurial Coder Podcast, the author of Securing Angular Applications, and an all-around fanatic about application security.

Developer

Ryan Chenkie

Learn the differences between $http in Angular 1.x and Http in Angular 2. Find out how to use the RxJS Observables that Http returns.



---
**TL;DR:** Making **HTTP requests in Angular 2 apps** looks somewhat different than what we're used to from Angular 1.x, a key difference being that Angular 2's **Http** returns **observables**. In this tutorial, we cover how to use Http to make requests and how to handle the responses. We'll also see how we can do basic authentication for an Angular 2 app. Check out [the repo](https://github.com/auth0/angular2-http) for the tutorial to see the code.

This is Part 3 in our Angular 2 series. Be sure to check out [Part 1 on Pipes](https://auth0.com/blog/2015/09/03/angular2-series-working-with-pipes/) and [Part 2 on Models](https://auth0.com/blog/2015/09/17/angular-2-series-part-2-domain-models-and-dependency-injection/).

---

It's fair to say that most of Angular 2 looks and feels completely different than Angular 1.x, and the **Http** API is no exception. The **$http** service that Angular 1.x provides works very nicely for most use cases, and is fairly intuitive to use. Angular 2's Http requires that we learn some new concepts, including how to work with **observables**.

In this tutorial, we'll look at some of the key differences in the way that Angular 1.x and 2 implement **HTTP requests**, and we'll also see how to make requests and handle responses. Incidentally, the sample we use to test out **Http** will also let us see the basics of adding authentication to an Angular 2 app.

It's important to note that the Http implementation for Angular 2 is still a [work in progress](https://github.com/angular/angular/issues/2793), and a lot of things are still in flux or aren't complete yet.

## Differences between Angular 1.x $http and Angular 2 Http

**Angular 2's Http implementation** again provides a fairly straightforward way of handling requests, but there are some key differences. For starters, **HTTP calls in Angular 2** by default return observables through [RxJS](https://github.com/Reactive-Extensions/RxJS), whereas $http in Angular 1.x returns promises. Using observable streams gives us the benefit of greater flexibility when it comes to handling the responses coming from HTTP requests. For example, we have the potential of tapping into useful RxJS operators like `retry` so that a failed HTTP request is automatically re-sent, which is useful for cases where users have poor or intermittent network communication. We'll see later in the article how we can implement RxJS operators in our Http observables.

In Angular 2, Http is accessed as an injectable class from `angular2/http` and, just like other classes, we `import` it when we want to use it in our components. Angular 2 also comes with a set of injectable providers for Http, which are imported via `HTTP_PROVIDERS`. With these we get providers such as `RequestOptions` and `ResponseOptions`, which allow us to modify requests and responses by extending the base class for each. In Angular 1.x, we would do this by providing a `transformRequest` or `transformResponse` function to our `$http` options.

In Angular 1.x we can transform requests globally in the application's `config`.

```js
.config(function($httpProvider) {
  $httpProvider.defaults.transformRequest = function(data) {
    return JSON.stringify({name: "Ryan"});
  }
});
```

Whereas in Angular 2, we would extend the `BaseRequestOptions`.

```js
class MyOptions extends BaseRequestOptions {
  body: string = JSON.stringify({name: "Ryan"});
}

bootstrap(App, [HTTP_PROVIDERS, provide(RequestOptions, {useClass:MyOptions})]);
```

## Http in Action

Let's take a look at how we can perform some basic requests with Http. We'll see how to work with `POST` and `GET` requests by using our trusty [NodeJS Chuck Norris quote backend](https://github.com/auth0/nodejs-jwt-authentication-sample), which will require us to retrieve and store a JWT, and thereby implement basic authentication.

## Getting Started

As we have in our other Angular 2 articles, we'll use [Pawel Kozlowski's](https://twitter.com/pkozlowski_os) [ng2-play](https://github.com/pkozlowski-opensource/ng2-play/) repo for this tutorial. To get started, clone the repo and run `npm install`, then `gulp play`.

We also need to get our random quote server running. With the Angular 2 seed project installed, let's clone and install the quote server in the root of our project.

We also need to set up our `app` component by importing what we need and providing a template.

```js
// app.ts

import {Component, View} from 'angular2/angular2';
import {Http, Headers} from 'angular2/http';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
  selector: 'app'
})

@View({
  directives: [ CORE_DIRECTIVES, FORM_DIRECTIVES ],  
  template: `
  <header>
    <h1 class="title">Angular 2 HTTP</h1>
  </header>

  <section>
    <h2>Login</h2>
    <form #f="form" (ng-submit)="authenticate(f.value)">
      <div ng-control-group="credentials">
          <label for="username">Username</label>
          <input
            type="text"
            id="username"
            ng-control="username"
            required>

          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            ng-control="password"
            required>
      </div>

      <button>Login!</button>

    </form>

  </section>

  <section>
    <h2>Random Quote</h2>
    <hr>
      <h3>{{ "{{randomQuote" }}}}</h3>
    <button (click)="getRandomQuote()">Get Random Quote!</button>
  <section>

  <section>
    <h2>Secret Quote</h2>
    <hr>
    <h3>{{ "{{secretQuote" }}}}</h3>
    <button (click)="getSecretQuote()">Get Secret Quote!</button>
  <section>
  `
})

export class App {

  constructor(public http: Http) {

  }

}

bootstrap(App, [HTTP_BINDINGS])
```

As you can see, we've imported some familiar pieces like `Component` and `View`, but we are also pulling in `Http` and `Headers`. We'll see it later on, but we can modify the headers we send in our requests with the `Headers` class.

We're making use of a form for the user to eventually provide their credentials. The form calls an `authenticate` method on submit.

In the `App` class, we're passing `Http` to the constructor so that we can use it in our class methods.

## Simple GET Request

Let's start with a simple `GET` request to the `api/random-quote` route which doesn't require authentication.

```js
getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

logError(err) {
  console.error('There was an error: ' + err);
}
```

The `getRandomQuote` method starts off looking pretty familiar--we do an `http.get` request by passing in a URL as an argument. Remembering `$http` from Angular 1.x, this is where we would tap into the promise that gets returned by using `.then`, but as you can see here, we're doing something pretty different.

As was mentioned earlier, **HTTP calls in Angular 2** return observables, so we need to use RxJS methods to operate on them. The first thing we do is map the values that are returned as text, since our call to the `api/random-quote` endpoint returns text. If we were expecting a JSON response, we would call `res.json()` instead. After this, we need to **subscribe** to it so that we can **observe** values that are returned.

<include src="TweetQuote" quoteText="HTTP calls in Angular 2 return observables, so we need to use RxJS methods to operate on them."/>

An observable subscription takes three functions to handle what happens as the stream is observed. The first function is the **next** case, or what happens when the HTTP call is successful. If the call is successful, we're saying that the data returned should be put on a property `randomQuote` so it can be displayed in the view. The second function is the **error** case, and in our example we are logging any error messages to the console by calling our `logError` method. Finally, the third function defines what happens once the call is **complete**, and here we are simply logging out the things are finished.

Let's test that out to make sure it works.

![angular2 http $http example](https://images.ctfassets.net/23aumh6u8s0i/3OP3Z3TjFP2iMFkiVN3XAD/b75a0e2b9229dc18e43fee1ff97be2fc/angular2-http-1)

## POST Request with Modified Content Type

Our `authenticate` method will need to make a `POST` request to the back end and specify the content type so that we can send our credentials. For this, we'll use `Headers`.

```js
// app.ts

...

class CredentialsModel {
  username: string;
  password: string;
}

...

authenticate(data) {
  var username = data.credentials.username;
  var password = data.credentials.password;

  var creds = "username=" + username + "&password=" + password;

  var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

  this.http.post('http://localhost:3001/sessions/create', creds, {
    headers: headers
    })
    .map(res => res.json())
    .subscribe(
      data => this.saveJwt(data.id_token),
      err => this.logError(err),
      () => console.log('Authentication Complete')
    );
}

saveJwt(jwt) {
  if(jwt) {
    localStorage.setItem('id_token', jwt)
  }
}

...
```

The `authenticate` method accepts `data` that is passed down from the view when the form is submitted. We're grabbing the username and password from it and making a `creds` string in the form that the server expects.

We need to say that the content type should be `application/x-www-form-urlencoded` and this can be done by appending a header onto our `headers` instance. Then we simply pass this as a header in the options object when we make the `POST` request. From here, the returned observable is handled in the same way that we saw in the `GET` request, but this time the response is JSON, so we use `res.json()`. We also call the `saveJwt` method and pass it the token that is received to save it in local storage.

## GET Request with Authorization Header

Now that we know how to modify headers, sending the JWT as an `Authorization` header is simple.

```js
// app.ts

...

getSecretQuote() {

  var jwt = localStorage.getItem('id_token');
  var authHeader = new Headers();
  if(jwt) {
    authHeader.append('Authorization', 'Bearer ' + jwt);      
  }

  this.http.get('http://localhost:3001/api/protected/random-quote', {
    headers: authHeader
  })
  .map(res => res.text())
  .subscribe(
    data => this.secretQuote = data,
    err => this.logError(err),
    () => console.log('Secret Quote Complete')
  );

}

...

```

We can check this in the browser to make sure our call to the protected endpoint works.

![angular2 http $http observables rxjs](https://images.ctfassets.net/23aumh6u8s0i/7MDfOrK8h8fqU4MkXg98Zq/aa05c56ac6ec9575ea934901e66c3e14/angular2-http-2)

## What Can We Do with Observables?

You might be wondering why Http doesn't just return promises like it used to, so we can stick to our familiar methods for resolving HTTP calls. The fact of the matter is that we can do much more with observables than promises. With observables, we have a [whole bunch of operators](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md) to pull from, which let us customize our streams in nearly any way we want.

If you haven't worked with observables before, you can get an idea of how they work in our recent post on [Authenticable Observables](https://auth0.com/blog/2015/09/10/jwt-authentication-with-observables/).

It should be noted that the [Angular team is still deciding](https://github.com/angular/angular/issues/4390) on the best way of implementing the RxJS operators with Http, which means these operators aren't all available for use just yet.

We can get a taste for how they work by plugging in some simple operators. For example, in our `GET` call to `api/random-quote`, we can attach a filter.

```js
// app.ts

...

getRandomQuote() {
  var count = 0;
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .filter(x => x.length > 100)
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

...
```

Now only quotes with a length greater than 100 characters will come through. If we click the "Get Random Quote" button a few times, we see it at work.

We can also delay our subscription if we want. Here we wait two seconds before printing the quote to the screen.

```js
// app.ts

...

  .map(res => res.text())
  .delay(2000)
  .subscribe(
    data => this.randomQuote = data,
    err => this.logError(err),
    () => console.log('Random Quote Complete')
  );

...
```

While that might not be the most useful, what we will really benefit from once Http is solidified are operators like `retry`. If we were expecting network connectivity issues, we could define a number of times to retry the request.

```js
// app.ts

...

  .retry(3)
  .map(res => res.text())
  .subscribe(
    data => this.randomQuote = data,
    err => this.logError(err),
    () => console.log('Random Quote Complete')
  );

...
```

Another benefit of observables is that they can be cancelled. This can be useful for situations where HTTP requests are going on for a long time, perhaps to an unresponsive server somewhere. This is something that isn't easily done with promises, and something that the [Fetch API has yet to implement](https://github.com/whatwg/fetch/issues/27).


## Aside: Using Angular with Auth0

Auth0 issues [JSON Web Tokens](http://jwt.io) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [single sign-on](https://auth0.com/docs/sso/single-sign-on), user management, support for social identity providers (Facebook, Github, Twitter, etc.), enterprise identity providers (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code. We implemented a tight integration with Angular 1. Angular 2 integration is coming as soon as it's on Beta! You can read the [documentation here](https://auth0.com/docs/client-platforms/angularjs) or you can checkout the [SDK on Github](https://github.com/auth0/auth0-angular).

<img src="https://images.ctfassets.net/23aumh6u8s0i/2rne3k2iZ3EtRRpLuafLhM/67acd166eb2dcacba5d573863f1b0b06/angular-and-auth0" style="border: 1px solid #ccc;padding: 10px;"/>

## Wrapping Up

**HTTP requests in Angular 2** definitely look different than they did in Angular 1.x, but with the change comes a big boost in capability. Having requests return observables is great because we will be able to use RxJS's operators to get the returned streams behave the way we like. We'll be able to use operators like `retry` to automatically start a request again if there are network issues.

In this tutorial we saw how Http can be used to make `GET` and `POST` requests, but we can also use other HTTP verbs like `PUT`, `DELETE`, and `PATCH`. We also saw how we can customize the headers we send with the `Headers` class.

As with Angular 2 in general, Http is always going through changes. The Angular team keeps a very good [backlog of Http issues and feature implementations](https://github.com/angular/angular/issues/2793), which is a good place to keep updated on how Http progresses.


Using Angular $Http and Angular 2 Http - Angular 2 Series Part 3

Learn how to make a reactive application and add authentication to it with RxJS and the Fetch API

---

**TL;DR:** Reactive programming is powerful and is becoming increasingly popular with libraries such as RxJS. We can make a stream out of just about anything, including API communication and authentication. Check out the [repo for this tutorial](https://github.com/auth0/auth-observables) to see the code.

---

Reactive programming has been gaining a lot of popularity in recent years. In the Reactive paradigm, data is handled as **streams** that can be composed of anything from events to simple variables and everything in between. Much like a stream of flowing water is a continuous phenomenon, a data stream in Reactive programming is also continuous and can be observed. When we observe streams over time, we are most interested in the events emitted from them, which happen asynchronously. In this way, the streams become "observable", and we can subscribe to them to react in whichever ways we specify when the events are emitted.

In this tutorial, we'll see how we can implement Reactive programming by creating a simple app that fetches and displays data. We'll also see how we can handle authentication in our app and have what we'll call "authenticable observables". Our goal throughout this tutorial is to see how we can shift our thinking about app architecture. We'll move away from the simple Promise-based asynchronous models we're used to and see how we can benefit from working with Observables.

<include src="TweetQuote" quoteText="In the Reactive paradigm, data is handled as streams that can be composed of anything from variables to events"/>

## Building Our Reactive App

We'll make use of Auth0's trusty [NodeJS backend](https://github.com/auth0/nodejs-jwt-authentication-sample) that serves us both public and private Chuck Norris quotes. The API uses JWT authentication, which is perfect for our case, as we'll want to see how we can use observables to handle JWTs. We'll also be using [The Reactive Extensions for JavaScript](https://github.com/Reactive-Extensions/RxJS), otherwise known as RxJS, which is a set of libraries that provide a wealth of tooling for working with observables. To actually retrieve data, we'll use the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

In the interest of brevity, we won't deal with error conditions. However, the Fetch API and RxJS both have methods for handling errors, as would be expected. Also, since we want to focus mainly on how to handle observables for our sample application, we'll keep things simple and won't worry too much about any kind of routing or other ways we could polish the app. Instead, we'll provide some simple controls for the user to log in and retrieve public and private quotes.

## Setting up the HTML

Let's first set up the HTML. We'll include RxJS from the CDN and use Bootstrap for styling as well:

```html
  

  ...

  <nav class="navbar navbar-default">
    <div class="container">
      <div class="row">
        <div class="col-sm-4">
          <input id="username" class="form-control" type="text" placeholder="Enter your username">          
        </div>

        <div class="col-sm-4">
          <input id="password" class="form-control" type="password" placeholder="Enter your password">          
        </div>

        <div class="col-sm-4">
          <button id="login-button" class="btn btn-primary">Login</button>          
        </div>
      </div>
    </div>
  </nav>

  <div class="container">    

    <button id="quote-button" class="btn btn-primary">
      Get a Quote!
    </button>
    <button id="secret-quote-button" class="btn btn-primary">
      Get a Secret Quote!
    </button>

    <h1></h1>

  </div>

  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.22/rx.all.js"></script>
  <script src="app.js"></script>

  ...
```

![reactive](https://images.ctfassets.net/23aumh6u8s0i/4FC6VpAiet1xVS6clBYRXN/2d6961fd6ca9675f9557f7df8ca20632/auth-observables-1-1)

## Creating the Click Streams

RxJS gives us a `fromEvent` method that allows us to create streams from any kind of event. In our case, we'll need to observe click events on our three buttons. We first need to select the buttons using `querySelector` and then pass that selection into the `fromEvent` method as the first argument, along with `'click'` as the second argument.

```js
// app.js

...

// Selectors for our buttons
var loginButton = document.querySelector('#login-button');  
var quoteButton = document.querySelector('#quote-button');
var secretQuoteButton = document.querySelector("#secret-quote-button");

// We can create streams from click events on our buttons using
// Rx's 'fromEvent' method
var quoteClickStream = Rx.Observable.fromEvent(quoteButton, 'click');
var secretQuoteClickStream = Rx.Observable.fromEvent(secretQuoteButton, 'click');
var loginClickStream = Rx.Observable.fromEvent(loginButton, 'click');

...
```
With these streams set up, we could at this point `subscribe` to the events and respond in some simple way when they are observed. However, for our purposes, we'll need to create additional streams out of them first.

## Creating New Streams

When working with streams, we will often need to combine or create new streams out of existing ones. RxJS gives us many useful ways of doing this, and one of them is `map`. This method projects a value we pass into it into a new stream that is dependent on an existing stream.

![reactive](https://images.ctfassets.net/23aumh6u8s0i/589b6CjOZvfIy0hQ0YVDi7/0c5a3a41e77c4e6c69ca278fc53dc0cf/auth-observables-map)

Let's make a new stream called `quoteStream` that takes care of getting the publicly accessible quotes. We'll need to create a new stream that maps a value (in this case an object with a `route` key) to the `quoteClickStream`.

```js
// app.js

...

// Here we want to map the endpoint for where we'll get our public quotes
var quoteStream = quoteClickStream
  .map(function() {
    return {
      route: 'http://localhost:3001/api/random-quote'
    }
  });

...
```
The map operation transforms the `quoteClickStream` into a new stream.

![reactive](https://images.ctfassets.net/23aumh6u8s0i/5SwMkdQAjVFWFgrhn414Nz/2209c9224e6e52b40da30a228e598578/auth-observables-stream-1)

![reactive](https://images.ctfassets.net/23aumh6u8s0i/1ZbrnbzC91F6zYTdsMXuwN/b5e081149227402d1761b8b6afc1e5e0/auth-observables-stream-2)

## Getting Public Quotes

We'll need to create another stream after this that is responsible for calling a function that fetches data from the API. We'll call this one `quoteResponseStream` because it is responsible for getting responses.

```js
// app.js

...

// We need a response stream that handles the fetch operation
var quoteResponseStream = quoteStream
  // flatMap flattens the new stream such that we can get access
  // to JSON data returned from the fetch operation
  .flatMap(function(request) {
    return fetchQuote(request);
  });

...
```

The `quoteResponseStream` relies on the `quoteStream`, which, as we saw above, maps an object with a `url` key that can be passed to the `fetchQuote` method to make the request. Since the values emitted by the `map` method are themselves streams, we need a way to get access the actual data. In this new stream we are using `flatMap` which effectively flattens the emitted values and gives us access to the JSON returned by the `fetch` operation.

We are returning the `fetchQuote` function with the request URL but we haven't yet set it up.

 ```js   
// app.js

...

function fetchQuote(request) {
  return fetch(request.route).then(function(data) {
    return data.text().then(function(text) {
      return text;
    });
  });
}

...
```

The `fetchQuote` function makes a `GET` request to the route we pass in and returns the data as text.

With this set up, we're now ready to subscribe to the `quoteResponseStream` and observe events. We can do whatever we want with the returned responses, and in this case we'll simply print them on the page.

```js
// app.js

...

// We subscribe to the quoteResponseStream, listen
// for quotes that get returned, and put them on the page
quoteResponseStream.subscribe(function(text) {
  document.querySelector('.container h1').innerHTML = text;
});

...
```

If we now click the "Get a Quote!" button, we get a public quote back.

![reactive](https://images.ctfassets.net/23aumh6u8s0i/7c1va1xZ3GyiospAeYgKuX/092c2da80d185000ea19f74ae1e729ae/auth-observables-1-2)

## Setting up the Auth Streams

To authenticate the user and receive a JWT, we could follow the same approach we saw above, in which we would map a route and then call a function to fetch the JWT. However, we can also create a custom RxJS operator to abstract those details away. Let's take the latter approach and create an `authenticate` operator that will retrieve a JWT for the user and put it in local storage.

First, we'll need to create a new stream called `loginStream` out of the existing `loginClickStream`.

```js
// app.js

...

// .map will create a new stream that is dependent on the first
// and will project a value that we pass it. The login stream needs to
// map a string that contains values from the username and password input boxes
var loginStream = loginClickStream
  .map(function() {
    var loginPath = 'http://localhost:3001/sessions/create';
    var username = document.querySelector('#username').value;
    var password = document.querySelector('#password').value;
    var method = 'POST';
    var headers = { 'Content-Type':'application/x-www-form-urlencoded' };
    return {
      loginPath: loginPath,
      username: username,
      password: password,
      method: method,
      headers: headers
    }
  })
  .authenticate(function(config) {
    return config;
  });

...
```

Here we're setting up some configuration for the `authenticate` operator, including the path to use for authentication, the username, and the password. After mapping that configuration to the `loginClickStream`, we use an anonymous function to return it for the `authenticate` operator to use.

We can define a new operator on `Rx.Observable.prototype`.

```js
// app.js
...

Rx.Observable.prototype.authenticate = function(config) {

  // We need a function to handle the fetch request for the JWT
  function getJwt(config) {
    var body;

    // Check the content type header and format the request data accordingly
    if(config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      body = 'username=' + config.username + '&password=' + config.password;
    }

    // We need some config to specify that this is to be a POST request
    // We set the content type and put the passed-in credentials as the body
    var init = {
      method: config.method,
      headers: config.headers,
      body: body
    }

    return fetch(config.loginPath, init).then(function(data) {
      return data.json().then(function(jwt) {
        localStorage.setItem('id_token', jwt.id_token);
        localStorage.setItem('access_token', jwt.access_token);
      });
    });        
  }

  return this.flatMap(function(credentials) {
    return getJwt(credentials);
  });    
}

...
```

Here we are accepting a configuration object and setting up the request type, headers, and body that we want to send to the API. Once the request resolves, we set the returned tokens into local storage.

We can now log in with our credentials. For this simple example, we don't have a way to register users (although the NodeJS example back end allows it), so we'll just use the default username of "gonto" and a password of "gonto".

![reactive](https://images.ctfassets.net/23aumh6u8s0i/3capaFhtDkVD2AZZcs6Rcv/14219fb703f768454e2cc48ea3d86531/auth-observables-1-3)

## Retrieving Secret Quotes

Now that we've got our authentication in place and we have an `id_token` and `access_token` saved in local storage, let's set up the streams that handle secret quotes. We'll need a way to check whether there is a JWT `access_token` in local storage before we send the request. Let's once again abstract this task away into a custom operator called `authenticated`.

```js
// app.js

...

Rx.Observable.prototype.authenticated = function(route) {

  var jwt = localStorage.getItem('id_token');

  // Return the JWT if it exists
  if(jwt != undefined && jwt != null) {
    return this.map(function() {
      return {
        route: route,
        jwt: jwt
      }
    });
  }
  // If there is no JWT, throw an error
  else return Rx.Observable.throw(new Error('No JWT in Local Storage!'));
}
...
```

The `authenticated` operator will check for a JWT `access_token` in local storage, and if there is one, it will return an observable by mapping out an object with the route for our request and the JWT.

Next, we can make use of this operator in our `secretQuoteStream` by passing in the route we want to make the request to. In this case, it's the route for secret quotes.

```js
// app.js

...

// We need a separate stream for the secret quotes which
// checks authentication
var secretQuoteStream = secretQuoteClickStream
  .authenticated('http://localhost:3001/api/protected/random-quote');

...
```

## The Secret Quote Response

We could set up a separate response stream for our secret quotes that simply mimics the `quoteResponseStream`, but instead of repeating ourselves, let's use RxJS's `merge` method to combine the `quoteStream` and the `secretQuoteStream` into one single `quoteResponseStream`. This gives us the benefit of only needing to subscribe to a single stream that will observe events for public and private quotes.

```js
// app.js

...

// We need a response stream that handles the fetch operation
var quoteResponseStream = quoteStream
  .flatMap(function(request) {
    return fetchQuote(request);
  })
  // Instead of setting up a separate stream for the secret quotes, we
  // can simply merge the secretQuoteStream in and apply the same flatMap
  .merge(secretQuoteStream
    .flatMap(function(request) {
      return fetchQuote(request);
    })
  );

...
```

We just need to modify the `fetchQuote` function so that it properly handles the JWT that *might* be present. If the JWT is there, it will be included as an `Authorization` header and sent to the API.

```js
// app.js

...

// One fetch function will handle getting both the public and private quotes
function fetchQuote(request) {
  // We just need to check whether a JWT was sent in as part of the
  // config object. If it was, we'll include it as an Authorization header
  if(request.jwt) {
    var config = {
      headers: {
        "Authorization": "Bearer " + request.jwt
      }
    }
  }

  return fetch(request.route, config).then(function(data) {
    return data.text().then(function(text) {
      return text;
    });
  });
}

...
```
Since we merged the `secretQuoteStream` into the `quoteResponseStream`, we don't need to modify the subscription at all. Testing this out, we see that we now get secret quotes.

![reactive](https://images.ctfassets.net/23aumh6u8s0i/Xu8IACoy9q4DCkenQN7wI/0d05dee98ffa5f418ceb66ae9bab453f/auth-observables-1-4)

## Aside: Using Authenticable Observables with Auth0

Auth0 issues [JSON Web Tokens](http://jwt.io) on every login for your users. This means that you can have a solid [identity infrastructure](https://auth0.com/docs/identityproviders), including [Single Sign On](https://auth0.com/docs/sso/single-sign-on), User Management, support for Social (Facebook, Github, Twitter, etc.), Enterprise (Active Directory, LDAP, SAML, etc.) and your own database of users with just a few lines of code.

The custom `authenticate` operator we created above can be extended for use with Auth0's authentication API very easily. Let's see this in action with an example using Auth0's test API.

First, let's add a check to the `getJwt` method within `authenticate` to see if Auth0 should be the provider:

```js
// app.js

...

if(config.headers['Content-Type'] === 'application/json') {
  if(config.provider === 'Auth0') {
    body = JSON.stringify({
        client_id: config.client_id,
        username: config.username,
        password: config.password,
        connection: config.connection,
        grant_type: config.grant_type,
        scope: config.scope
      });          
  }
}

...
```

Next, let's adjust the `loginStream` to map info that is specific to Auth0's test API.

```js
// app.js

...

var loginStream = loginClickStream
  .map(function() {
    var provider = 'Auth0';
    var loginPath = 'https://samples.auth0.com/oauth/ro'
    var client_id = 'BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC';
    var username = document.querySelector('#username').value;
    var password = document.querySelector('#password').value;
    var connection = 'Username-Password-Authentication';
    var grant_type = 'password';
    var scope = 'openid';
    var headers = { 'Content-Type':'application/json' };
    var method = 'POST';
    return {
      loginPath: loginPath,
      client_id: client_id,
      connection: connection,
      grant_type: grant_type,
      scope: scope,
      username: username,
      password: password,
      method: method,
      headers: headers
    }
  })
  .authenticate(function(config) {
    return config;
  });

...

```
If we enter a username of "hello@bye.com" and password of "hello", we see that we get a JWT back.

![reactive](https://images.ctfassets.net/23aumh6u8s0i/2xlgwsjjyFVNSLOcPrksWA/cb688e537777ecacd2082c53b910ce8c/auth-observables-1-5)

**Important API Security Note:** If you want to use Auth0 authentication to authorize _API requests_, note that you'll need to use [a different flow depending on your use case](https://auth0.com/docs/api-auth/which-oauth-flow-to-use). Auth0 `idToken` should only be used on the client-side. [Access tokens should be used to authorize APIs](https://auth0.com/blog/why-should-use-accesstokens-to-secure-an-api/). You can read more about [making API calls with Auth0 here](https://auth0.com/docs/apis).


If you'd like to explore Auth0's API further, head over to the [docs](https://auth0.com/docs/auth-api). For help while working with JWT's you can also check out [Auth0's JWT debugger](http://jwt.io/).

## Wrapping Up

You might be wondering why we'd bother architecting our applications using observables. It seems like we just used a lot more code than was really necessary and that we could have been more succinct using more-familiar methods. While that might be true, observables offer so much more power and flexibility than Promises that making the switch can be worthwhile. For example, if we wanted to provide better support for network latency or other constraints where a request and response might not go through as expected, we could tap into RxJS's `retry` method, which would allow us to set the number of times we wanted to retry a request before having it error out.

With this tutorial we've really just skimmed the surface. The possibilities that we have with Reactive programming and supporting libraries such as RxJS are huge. If you like the idea of turning nearly all the parts of your application into data streams, it would certainly be beneficial to explore Reactive programming further.

Big thanks to [André Staltz](https://twitter.com/andrestaltz) for his [article on Reactive programming](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754), which informed many of these examples.

"rxjs 5"