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



- **Why do I want to read this?**
    - This chapter tackles two big things: multiplexing observables, and building
     an Observable infrastructure for one's application.
- **What will I learn?**
   - The difference between hot/cold observables and when to use each, as well
     as how they fit into a full application.
- **What will I be able to do that I couldn’t do before?**
    - Take information from a single source and pass it out to many subscribers
     all at once.
- **Where are we going next, and how does this fit in?**
    - A purely Rx architecture isn't pretty - next, we'll learn how to use
  Angular to structure a fuller application.





# Cold observables

So far you've learned that a new subscriber creates an entirely new observable stream, including rerunning the constructor. The term for this kind of observable is a **cold observable**, and it's the default in RxJS.  

# Hot observables
However, sometimes you may want to create only a single source for an observable stream (such as the web socket example in [Advanced Async](https://www.educative.io/courses/reactive-websites-rxjs/building-a-stock-ticker)).  

 You don’t want to create a pile of new web socket connections if all of a page’s components want to listen to the stream. In this case, you need a **hot observable**.


## Multicasting

A hot observable contains a single stream that every subscriber listens to. This is called *multicasting*.


## `publish`
 These hot observables can be created by piping through `publish` on a regular observable or by creating a **subject**, which is hot by default.  

This sounds complicated, but if you take it step-by-step, you'll do just fine.  You'll learn these concepts by building this chapter's big project: a chat system.  Time to dive in!



# The Problem with Cold Observables

Let’s see what the problem with cold observables is.

## `Creation Function`
So far, you've learned that each new subscription to an observable runs the root creation function:





Let's see the difference between cold and hot observables and the problem associated with cold observables.

The Problem with Cold Observables

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

The Problem with Cold Observables