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




# Stock ticker project

In the previous few [lessons](https://www.educative.io/courses/reactive-websites-rxjs/typeahead-application-using-debounced-function), we built a typeahead.  It covers only one kind of asynchronous flow. The frontend always triggers the initiating event and then waits for a response.  

The backend never provides new data unless the frontend specifically asks for it.

In the next few lessons, you're going to build a stock market viewer, which will display the (randomly-generated) prices of several fake stocks in real-time.

  The server will send data to the frontend at any time, and the code needs to be ready to react to new events.  In addition, the Rx stream needs to track the current state of each stock ticker for display on the page.  

As a cherry on top to let you really flex your Rx muscles, we'll add some on-page filters that require their own streams.


# Constructor for web sockets
This is your biggest challenge yet.  The first thing to write is the constructor.  A constructor that’s specifically built for WebSockets in RxJS:

``` Typescript
let endpoint = 'ws://localhost:3000/api/advancedAsync/stock-ws';
// No semicolon at the end here - this is continued in the next snippet
let stockStream$ = webSocket(endpoint)
``` 
___

>  <span style="font-size: 2em">📝</span> 
  **Subjects**
> 
 > `stockStream$` isn't a standard observable like you've seen so far, rather, it's a `Subject`, an object that's a turbocharged observable.  For the purposes of this section, `stockStream$` acts just like a regular observable. In [Multiplexing Observables](https://www.educative.io/courses/reactive-websites-rxjs/the-problem-with-cold-observables), you'll learn about the other neat tricks subjects have up their sleeves.





# Reducing streams using `scan`

So the graph of stock values can render the stock's value changes over time; next, we need to record the last ten values this observable emitted.  When a stream wants to accumulate values, you will turn to `reduce` or `scan`.  

In this case, we want to use `scan`, because it emits a new value for every event on the stream, whereas `reduce` waits for the stream to complete.  This stream never ends, so we use `scan`.

> We can also use `scan` to accumulate a limited number of values by adding a check for the total length of the array. You need to adjust the data from time-based buckets into stock-based buckets with an extra `map`.








# Stock ticker project

In the previous few [lessons](https://www.educative.io/courses/reactive-websites-rxjs/typeahead-application-using-debounced-function), we built a typeahead.  It covers only one kind of asynchronous flow. The frontend always triggers the initiating event and then waits for a response.  

The backend never provides new data unless the frontend specifically asks for it.

In the next few lessons, you're going to build a stock market viewer, which will display the (randomly-generated) prices of several fake stocks in real-time.

  The server will send data to the frontend at any time, and the code needs to be ready to react to new events.  In addition, the Rx stream needs to track the current state of each stock ticker for display on the page.  

As a cherry on top to let you really flex your Rx muscles, we'll add some on-page filters that require their own streams.


# Constructor for web sockets
This is your biggest challenge yet.  The first thing to write is the constructor.  A constructor that’s specifically built for WebSockets in RxJS:

``` Typescript
let endpoint = 'ws://localhost:3000/api/advancedAsync/stock-ws';
// No semicolon at the end here - this is continued in the next snippet
let stockStream$ = webSocket(endpoint)
``` 
___

>  <span>📝</span> 
  **Subjects**
> 
 > `stockStream＄` isn't a standard observable like you've seen so far, rather, it's a `Subject`, an object that's a turbocharged observable.  For the purposes of this section, `stockStream＄` acts just like a regular observable. In [Multiplexing Observables](https://www.educative.io/courses/reactive-websites-rxjs/the-problem-with-cold-observables), you'll learn about the other neat tricks subjects have up their sleeves.





# Reducing streams using `scan`

So the graph of stock values can render the stock's value changes over time; next, we need to record the last ten values this observable emitted.  When a stream wants to accumulate values, you will turn to `reduce` or `scan`.  

In this case, we want to use `scan`, because it emits a new value for every event on the stream, whereas `reduce` waits for the stream to complete.  This stream never ends, so we use `scan`.

> We can also use `scan` to accumulate a limited number of values by adding a check for the total length of the array. You need to adjust the data from time-based buckets into stock-based buckets with an extra `map`.





Let's build a stock ticker project, which displays stock prices in real-time. 

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

Building a Stock Ticker

Stock ticker project