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


Data manipulation in observables is one of the important tasks of RxJS. Right now, you have a collection of almost-right data that needs just one little tweak for it to be correct. 

# `map` operator

Generally speaking, a `map` function takes two parameters (a collection and another function), applies the function to each item, and returns a *new* collection containing the results.  
A simple implementation looks something like this:



function map(oldArr, someFunc) {
  let newArr = [];
  for (let i = 0; i < oldArr.length; i++) {
    newArr.push(someFunc(oldArr[i]));
  }
  return newArr;
}

JavaScript provides a built-in `map` for arrays that only takes a single parameter (the function). The `map` method is called on the `oldArr`:


 
```TypeScript
let newArr = oldArr.map(someFunc);
```


This example only works with synchronous arrays. Conceptually, *map* works on any type of collection.  

Observables are just such a collection and Rx provides a `map` operator of its own.  It's piped through a source observable, takes a function, and returns a new observable that emits the result of the passed-in function.  

# Passing `map` function in `pipe`

Importantly, the modification in `map` is *synchronous*.  Even though new data arrives over time, this map immediately modifies the data and passes it on.  Syntax-wise, the only major difference is that the RxJS example uses `pipe` to pass in `map`:


```TypeScript
let newObservable$ = oldObservable$.pipe(
  map(someFunc)
);
```


# Intervals
We can apply this mapping concept to `tenthSecond$`.  The source observable will be the interval created earlier.  The modification is to divide the incoming number by 10.  
The result looks something like this:




JavaScript provides a built-in `map` for arrays that only takes a single parameter (the function). The `map` method is called on the `oldArr`:


 
```TypeScript
let newArr = oldArr.map(someFunc);
```


This example only works with synchronous arrays. Conceptually, *map* works on any type of collection.  

Observables are just such a collection and Rx provides a `map` operator of its own.  It's piped through a source observable, takes a function, and returns a new observable that emits the result of the passed-in function.  

# Passing `map` function in `pipe`

Importantly, the modification in `map` is *synchronous*.  Even though new data arrives over time, this map immediately modifies the data and passes it on.  Syntax-wise, the only major difference is that the RxJS example uses `pipe` to pass in `map`:


```TypeScript
let newObservable$ = oldObservable$.pipe(
  map(someFunc)
);
```


# Intervals
We can apply this mapping concept to `tenthSecond＄`.  The source observable will be the interval created earlier.  The modification is to divide the incoming number by 10.  
The result looks something like this:




Let's see how we can manipulate the data using the map operator and build our first observable for the stopwatch project.

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

Manipulating Data in Flight with map

`map` operator