Gain insights into building reactive websites with RxJS. Delve into mastering observables and managing events efficiently to create fast, responsive applications while reducing bugs.

c.tar.gz

stopWatch2

codewidgetJobDetach

dcrx

stopWatch2-tmux

codewidgetJobDetach-copy

rx-photos-ng

Angular

rx-photos-ng-initial

rx-angular-pizza

rx-angular-perf

rx-angular-bad-perf

rx-angular-good-perf

rx-angular-pizza-copy

stopWatch2-tmux-serv2

fightergame

The list of requirements for frontend work keeps increasing. Websites that load quickly on shaky connections, render perfectly on mobile devices, and respond with lightning speed to user input are expected. All of these tasks require dealing with a high number of events from disparate sources, be it your Customer Relationship Management (CRM), late-breaking news, or just a chat room.

Observables is a new way of thinking about managing these events, even when they may occur sometime in the future.

In this course, you’ll learn how to delegate both the calls and control flow to RxJS, allowing you to focus on the rest of your application.

RxJS compartmentalizes eventing flows, encapsulating each action in a single function, providing many helper operators that keep an internal state, allowing you to outsource your state worries to the library.

By the end of this course, you will be able to build bigger, faster, and less-buggy applications for your users.

Build Reactive Websites with RxJS: Master Observables and Wrangle


# Flattening streams

## Flattening arrays
You may have heard of a `flatten` function. 

 `flatten` functions take an input of some sort and "unwrap" it. (In this case, _unwrapping_ an array is to pull out the elements in the array and use those.) 

This hypothetical code snippet returns `[2, 4, 7, 12]`:


```TypeScript
flatten([[2], [4, 7], 12])
```


> Usually, a single call to flatten only unwraps by one layer.



## Flattening promises and observables

 Flatten iterates through the array, unwrapping each item if possible. Usually, a single call to flatten only unwraps by one layer. The element `12` cannot be unwrapped, so flatten uses the raw value in the resulting collection.

  Flatten can be used with more than arrays: **promises** and **observables** also can be unwrapped by passing along the data within rather than the abstraction.  

### `Promise.all`

`Promise.all` is a type of flatten, taking an array of promises and returning a single promise that contains an array of all of the resulting data:

```JS
Promise.all([
  fetch('/endpoint/productA'),
  fetch('/endpoint/productB'),
  fetch('/endpoint/productC')
])
.then(arrayOfProducts => displayProducts(arrayOfProducts));
```



## `flatMap` operator

A common pattern is to combine a flattening function with a mapping one, called `flatMap`.  This type of function maps and _then_ flattens, so the name's backward. 

 Let's say you had a collection of friends who all had several favorite foods.  We can use `flatMap` to create an array of all the foods you should serve at your next party:




Flattening

Course Introduction

Creating Observables

Manipulating Streams

Managing Asynchronous Events

Advanced Async

Multiplexing Observables

Using HTTP in Angular

Building Reactive Forms in Angular

Advanced Angular

Reactive Game Development

Flattening

Flattening streams

Flattening arrays