16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/content/basic-async.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Basic Async
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Earlier, we saw that `fromFetch` will create an observable from the Fetch API. Knowing what we now know about promises. Can you head over to the [playground](/applications/playground) and implement an observable that hits our Pokémon API?
7 |
8 | Here is what you need to know:
9 |
10 | - The API should be running on `http://localhost:3333/api/pokemon`.
11 | - Remember: You need to call the observable `example` and export it using `export const` for it to work.
12 |
13 | **Nota bene**: If you're struggling to get your local server up and running, the API is also hosted at https://rxjs-api.glitch.me/api/pokemon.
14 |
--------------------------------------------------------------------------------
/applications/merging-timelines/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Merging Timelines
4 |
5 |
6 |
Merging Timelines
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/shared/lesson.scss:
--------------------------------------------------------------------------------
1 | @import './colors.scss';
2 |
3 | body {
4 | margin-bottom: 8em;
5 | }
6 |
7 | pre {
8 | padding: 1em;
9 | }
10 |
11 | pre,
12 | code {
13 | background-color: #111111;
14 | }
15 |
16 | .lesson,
17 | .lesson-header {
18 | margin: auto;
19 | max-width: 800px;
20 | h1 {
21 | font-size: 40px;
22 | }
23 | pre {
24 | font-size: 20px;
25 | }
26 | }
27 |
28 | .lesson-header {
29 | margin-bottom: 1em;
30 | }
31 |
32 | .navigation {
33 | padding: 0.5em;
34 | position: sticky;
35 | color: white;
36 | background-color: black;
37 | }
38 |
39 | .navigation a {
40 | font-family: 'Press Start 2P', sans-serif;
41 | color: white;
42 | text-decoration: none;
43 | &:hover {
44 | color: lighten($blue, 20%);
45 | }
46 | &:active {
47 | color: lighten($blue, 10%);
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/applications/from-event/script.js:
--------------------------------------------------------------------------------
1 | import { fromEvent } from 'rxjs';
2 |
3 | const button = document.getElementById('create-notification');
4 | const notificationMessages = document.getElementById('notification-messages');
5 |
6 | const createNotificationElement = () => {
7 | const element = document.createElement('article');
8 | element.innerText = 'Something happened.';
9 | return element;
10 | };
11 |
12 | const addMessageToDOM = () => {
13 | const notification = createNotificationElement();
14 | notificationMessages.appendChild(notification);
15 | };
16 |
17 | /**
18 | * Your mission:
19 | *
20 | * - Use `fromEvent` to create an observable that streams click events.
21 | * - Subscribe to that observable.
22 | * - Use `addMessageToDOM` to add a useless message to the DOM whenever the
23 | * stream emits a value.
24 | */
25 |
--------------------------------------------------------------------------------
/applications/playground/style.scss:
--------------------------------------------------------------------------------
1 | @import '../../shared/colors.scss';
2 |
3 | pre {
4 | padding: 0;
5 | margin: 0.5em;
6 | text-align: left;
7 | }
8 |
9 | pre.raw {
10 | background-color: white;
11 | color: darken($fuschia, 20%);
12 | border: 1px solid $fuschia;
13 | padding: 0.5em;
14 | }
15 |
16 | pre.raw > code {
17 | width: 100%;
18 | }
19 |
20 | .playground {
21 | display: flex;
22 | gap: 1em;
23 | }
24 |
25 | .controls {
26 | border-width: 0;
27 | padding: 0;
28 | margin: 0;
29 | width: 300px;
30 | display: block;
31 | button {
32 | display: inline-block;
33 | }
34 | }
35 |
36 | #result {
37 | width: 100%;
38 | }
39 |
40 | .playground-event {
41 | background-color: $coral;
42 | color: white;
43 | border: 1px solid darken($coral, 10%);
44 | text-align: center;
45 | margin-bottom: 1em;
46 | }
47 |
--------------------------------------------------------------------------------
/content/manipulating-time-exercise.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Markdown Renderer (Exercise)
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Most applications that have some kind of autosave functionality don't automatically save your work on every keystroke. Instead, they will save at regular intervals.
7 |
8 | At the same time, there is no point saving if nothing have changed. We don't have a server, but we could use the same ideas to build a simple markdown renderer that only renders Markdown to the page when the user has stopped typing for a bit.
9 |
10 | Can you implement the following in `applications/manipulating-time`:
11 |
12 | - Listen for `input` events on the `textarea`.
13 | - Map the event object to the value of the `textarea`.
14 | - When our author has stopped typing for a bit go ahead and render the resulting Markdown using the `renderMarkdown` helper.
15 |
--------------------------------------------------------------------------------
/content/switch-map-solution.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Switch Map (Solution)
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | You can see an implementation of this [here](/applications/basic-counter-with-switch-map/index.html).
7 |
8 | ```js
9 | import { fromEvent, interval, merge, NEVER } from 'rxjs';
10 | import { switchMap, mapTo, scan } from 'rxjs/operators';
11 | import { setCount, startButton, pauseButton } from './utilities';
12 |
13 | const start$ = fromEvent(startButton, 'click').pipe(mapTo(true));
14 | const pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));
15 |
16 | const counter$ = merge(start$, pause$).pipe(
17 | switchMap((isRunning) => {
18 | return isRunning ? interval(1000) : NEVER;
19 | }),
20 | scan((count) => count + 1, 0),
21 | );
22 |
23 | counter$.subscribe(setCount);
24 | ```
25 |
26 | There aren't really any major flaws anymore with our counter.
27 |
--------------------------------------------------------------------------------
/applications/counter/index.html:
--------------------------------------------------------------------------------
1 |
2 | Counter
3 |
4 |
5 |
6 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/applications/manipulating-time/utilities.js:
--------------------------------------------------------------------------------
1 | import MarkdownIt from 'markdown-it';
2 | import { createElement } from '../../utilities/dom-manpulation';
3 |
4 | const markdown = new MarkdownIt();
5 |
6 | export const button = document.getElementById('create-notification');
7 | export const panicButton = document.getElementById('panic-button');
8 | export const notificationMessages = document.getElementById(
9 | 'notification-messages',
10 | );
11 | export const deepThoughtInput = document.getElementById('deep-thought');
12 | export const deepThoughtRendered = document.getElementById(
13 | 'deep-thought-rendered',
14 | );
15 | export const deepThroughtStatus = document.getElementById(
16 | 'deep-thought-status',
17 | );
18 |
19 | export const addMessageToDOM = () => {
20 | const notification = createElement('Something happened');
21 | notificationMessages.appendChild(notification);
22 | };
23 |
24 | export const renderMarkdown = (content) => {
25 | deepThoughtRendered.innerHTML = markdown.render(content);
26 | };
27 |
28 | export const setStatus = (content) => {
29 | deepThroughtStatus.innerHTML = content;
30 | };
31 |
--------------------------------------------------------------------------------
/content/paginated-fetching.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Pagination
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Here is a quick bonus recipe that I'm throwing into the mix because I literally needed to use it the other day. But, also I think it demonstrates a time when we might use `concat` and it's also our first appearance of `EMPTY`.
7 |
8 | So, that Pokémon API. There is that next page token. Could we iterate down the pages?
9 |
10 | ```js
11 | const endpoint = 'http://localhost:3333/api/pokemon?delay=100';
12 |
13 | export const getData = (url = endpoint) => {
14 | return fromFetch(url).pipe(
15 | mergeMap((response) => response.json()),
16 | mergeMap((response) => {
17 | const next$ = response.nextPage
18 | ? getData(endpoint + '&page=' + response.nextPage)
19 | : EMPTY;
20 | return concat(of(response.pokemon), next$);
21 | }),
22 | filter(Boolean),
23 | take(4),
24 | tap(addResults),
25 | catchError(console.error),
26 | );
27 | };
28 |
29 | const fetch$ = fromEvent(form, 'submit').pipe(
30 | switchMap(() => getData(endpoint)),
31 | );
32 |
33 | fetch$.subscribe(console.log);
34 | ```
35 |
--------------------------------------------------------------------------------
/applications/pixel-editor/utilities.js:
--------------------------------------------------------------------------------
1 | import './style.scss';
2 |
3 | export const canvas = document.getElementById('canvas');
4 | export const color = document.getElementById('color');
5 | export const panel = document.getElementById('panel');
6 |
7 | export const ctx = canvas.getContext('2d');
8 |
9 | export const roundDown = (n) => Math.floor(n / 10) * 10;
10 | export const roundDownPoints = (points) => points.map(roundDown);
11 | export const pointsAreEqual = (previous, current) => {
12 | return previous[0] === current[0] && previous[1] === current[1];
13 | };
14 |
15 | export const getCoordinates = (event) => [event.offsetX, event.offsetY];
16 |
17 | export const drawLine = ([point, color]) => {
18 | const [x, y] = point;
19 | ctx.fillStyle = color;
20 | ctx.fillRect(x, y, 10, 10);
21 | };
22 |
23 | export const drawCircle = ([points, color]) => {
24 | ctx.fillStyle = color;
25 | const [startX, startY] = points.start;
26 | const [currentX, currentY] = points.current;
27 |
28 | ctx.beginPath();
29 | ctx.arc(
30 | startX,
31 | startY,
32 | Math.abs(Math.ceil(startX - currentX, startY - currentY)),
33 | 0,
34 | 2 * Math.PI,
35 | false,
36 | );
37 | ctx.fill();
38 | };
39 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [RxJS Fundamentals](https://frontendmasters.com/courses/rx-js/)
2 |
3 | This respository contains the exercises and sample applications used in [Steve's](https://twitter.com/stevekinney) RxJS Fundamentals course for [Frontend Masters](https://frontendmasters.com).
4 |
5 | All of the lessons can be found at https://rxjs-fundamentals.netlify.app.
6 |
7 | ## Node Requirements
8 |
9 | The recommended Node version for this course is `16.19.0`. You can use the [Node Version Manager or nvm](https://github.com/nvm-sh/nvm) to install the correct Node version.
10 |
11 | ## Getting Started
12 |
13 | You can get _everything_ started by running `npm start` and heading over to `http://localhost:1234`. If for some reason the combined command is giving you trouble, then you can run each of the following separate terminal windows for the same effect.
14 |
15 | There are four major components to this repository.
16 |
17 | - Sample applications: `npm run ui`.
18 | - API: `npm run api`.
19 | - Lessons: `npm run lessons` (Although, you probably just want to visit [the website](https://rxjs-fundamentals.netlify.app) for that.)
20 | - Tests: `npm test`.
21 |
22 | Alternatively, you can spin up both the sample applications and the server at the same time using `npm run both`.
23 |
--------------------------------------------------------------------------------
/applications/loading-states/utilities.js:
--------------------------------------------------------------------------------
1 | import { tap, of, delay } from 'rxjs';
2 | import './style.scss';
3 |
4 | export const form = document.querySelector('form');
5 |
6 | export const loadingStatus = document.getElementById('loading-status');
7 | export const responseTimeField = document.getElementById('response-time');
8 | export const showLoadingAfterField =
9 | document.getElementById('show-loading-after');
10 | export const showLoadingForAtLeastField = document.getElementById(
11 | 'show-loading-for-at-least',
12 | );
13 |
14 | export const fetchData = () => {
15 | const responseTime = +responseTimeField.value;
16 | const showAfter = +showLoadingAfterField.value;
17 | const showFor = +showLoadingForAtLeastField.value;
18 |
19 | return of(true).pipe(
20 | tap(() => console.log('Fetching…', responseTime)),
21 | delay(responseTime),
22 | tap(() => {
23 | console.log('Data: Recieved');
24 | }),
25 | );
26 | };
27 |
28 | export const showLoading = (loading) => {
29 | console.log({ loading });
30 | if (loading) {
31 | loadingStatus.innerHTML = '
Loading…
';
32 | } else {
33 | loadingStatus.innerHTML = '';
34 | }
35 | };
36 |
37 | form.addEventListener('submit', (event) => {
38 | event.preventDefault();
39 | });
40 |
--------------------------------------------------------------------------------
/applications/pokemon-paginated/script.js:
--------------------------------------------------------------------------------
1 | import {
2 | debounceTime,
3 | distinctUntilChanged,
4 | fromEvent,
5 | map,
6 | mergeMap,
7 | switchMap,
8 | tap,
9 | of,
10 | merge,
11 | from,
12 | filter,
13 | catchError,
14 | concat,
15 | take,
16 | EMPTY,
17 | retry,
18 | pluck,
19 | concatMap,
20 | } from 'rxjs';
21 |
22 | import { fromFetch } from 'rxjs/fetch';
23 |
24 | import {
25 | addResults,
26 | addResult,
27 | clearResults,
28 | endpointFor,
29 | search,
30 | form,
31 | } from '../pokemon/utilities';
32 |
33 | const endpoint = 'http://localhost:3333/api/pokemon?delay=100';
34 |
35 | export const getData = (url = endpoint) => {
36 | return fromFetch(url).pipe(
37 | mergeMap((response) => response.json()),
38 | mergeMap((response) => {
39 | const next$ = response.nextPage
40 | ? getData(endpoint + '&page=' + response.nextPage)
41 | : EMPTY;
42 | return concat(of(response.pokemon), next$);
43 | }),
44 | tap(console.log),
45 | filter(Boolean),
46 | tap(addResults),
47 | catchError((error) => {
48 | console.error(error);
49 | return EMPTY;
50 | }),
51 | );
52 | };
53 |
54 | const fetch$ = fromEvent(form, 'submit').pipe(
55 | switchMap(() => getData(endpoint)),
56 | );
57 |
58 | fetch$.subscribe();
59 |
--------------------------------------------------------------------------------
/content/combining-operators.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Combining Obervables with Operators
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Some operators will subscribe to other observables. `takeUntil` and `skipUntil` are like that.
7 |
8 | ```js
9 | const startingTime = Date.now();
10 |
11 | const firstTimer$ = timer(2000);
12 | const secondTimer$ = timer(7000);
13 |
14 | const example$ = interval(1000).pipe(
15 | skipUntil(firstTimer$),
16 | takeUntil(secondTimer$),
17 | );
18 |
19 | example$.subscribe(() => console.log(Date.now() - startingTime));
20 |
21 | // Logs: 2004, 3000, 4000, 5001, 6002
22 | ```
23 |
24 |
25 |
26 | ## Exercise: Improving Our Counter
27 |
28 | Alright, so we have a few new tricks up our sleeves.
29 |
30 | - We know how to create observables that fire at regular intervals using `timer` and `interval`.
31 | - We know how to unsubscribe from an observable.
32 | - We know how to create observables from DOM events using `fromEvent`.
33 |
34 | Given the _very_ simple UI in `applications/counter-basic`, can you wire up this simple counter.
35 |
36 | It should be able to do the following:
37 |
38 | - Hitting the start button should create an `interval` observable that updates the value of the counter.
39 | - Hitting stop should… umm… stop the counter.
40 |
--------------------------------------------------------------------------------
/content/basic-counter-solution.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Basic Counter (Solution)
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Here is one possible solution.
7 |
8 | ```js
9 | startButtonClicks$.subscribe(() => {
10 | interval(1000).subscribe(setCount);
11 | });
12 | ```
13 |
14 | This works, but it has a lot of problems. Mostly, there isn't really a great way to stop it once it gets started.
15 |
16 | Could we do some hack like store a variable outside of the scope of the subscription and then unsubscribe from it when another button was hit? We _could_, but that kind of defeats the purpose. There is a better way to do this, but we just need to learn a little bit more first.
17 |
18 | **Disclaimer**: You should not do this something like the code below.
19 |
20 | ```js
21 | let interval$;
22 |
23 | startButtonClicks$.subscribe(() => {
24 | interval$ = interval(1000).subscribe(setCount);
25 | });
26 |
27 | stopButtonClicks$.subscribe(() => {
28 | interval$.unsubscribe();
29 | });
30 | ```
31 |
32 | It will work, but it's _not_ idiomatic. Let's table this and come back to it a little later.
33 |
34 | The answer is that we need some more tools. We need the ability to work with and manipulate observable streams. (For those of you that cannot live with not knowing how this story ends, you might want to take a look at [`switchMap`](/lessons/switch-map).)
35 |
--------------------------------------------------------------------------------
/shared/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
12 |
13 |
14 | RxJS Fundamentals Example
15 |
16 |
17 |
18 |
19 |
25 |
26 |
to ${value}.`)),
174 | );
175 | ```
176 |
177 | ## Your Mission
178 |
179 | In `exercises/basic-operators.test.js`, there are a series of quick exercises. Your job is to make the tests pass.
180 |
--------------------------------------------------------------------------------
/content/mapping-follow-along.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Adventures in Mapping (Follow Along)
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | Whether it's with arrays or observables, mapping values is a common endeavor. So far in this workshop, we've mapped values into other values, but things can get a little tricky when we want to map values into other observables.
7 |
8 | We end up with nested observables.
9 |
10 | We know that we can turn a promise into an observable pretty easily.
11 |
12 | ```js
13 | const character$ = from(getCharacter(1)).pipe(pluck('name'));
14 |
15 | character$.subscribe(render);
16 | ```
17 |
18 | But, what if we wanted to get multiple characters?
19 |
20 | ```js
21 | const characters$ = of(1, 2, 3, 4).pipe(map((id) => getCharacter(id)));
22 |
23 | characters$.subscribe(render);
24 | ```
25 |
26 | Well, that gives me back an array of promises, which I guess I could turn into observables or something?
27 |
28 | ```js
29 | const characters$ = of(1, 2, 3, 4).pipe(
30 | map((id) => getCharacter(id)),
31 | map((promise) => from(promise)),
32 | );
33 |
34 | characters$.subscribe(render);
35 | ```
36 |
37 | Ugh. Now I have an observable full of observables. If only I had a way to get them into one stream. Do we know of any way to do that?
38 |
39 | Conceptually `merge` is the right choice. But we need it as an operator and not as a creator.
40 |
41 | ## mergeAll
42 |
43 | What we want to do is take all of the observables in my stream and merge them back into the main timeline.
44 |
45 | ```js
46 | const characters$ = of(1, 2, 3, 4).pipe(
47 | map((id) => getCharacter(id)),
48 | map((promise) => from(promise)),
49 | mergeAll(),
50 | pluck('name'),
51 | );
52 | ```
53 |
54 | ## mergeMap
55 |
56 | This is a common enough thing that we actually have a operator that combines mapping and merging into one operator.
57 |
58 | It's called `mergeMap`.
59 |
60 | ```js
61 | const characters$ = of(1, 2, 3, 4).pipe(
62 | map((id) => getCharacter(id)),
63 | mergeMap((promise) => from(promise)),
64 | );
65 |
66 | characters$.subscribe(render);
67 | ```
68 |
69 | We could even make this a little shorter by wrapping those promises with `from` in one single operation.
70 |
71 | ```js
72 | const characters$ = of(1, 2, 3, 4).pipe(
73 | mergeMap((id) => from(getCharacter(id))),
74 | );
75 |
76 | characters$.subscribe(render);
77 | ```
78 |
79 | We can now go about our business as we did before.
80 |
81 | ```js
82 | const characters$ = of(1, 2, 3, 4).pipe(
83 | mergeMap((id) => from(getCharacter(id))),
84 | pluck('name'),
85 | );
86 | ```
87 |
88 | ## Returning Observables
89 |
90 | Let's just play around with this just a little more.
91 |
92 | This doesn't work.
93 |
94 | ```js
95 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
96 | map((value, index) => interval(index * 1000).pipe(take(4))),
97 | );
98 |
99 | example$.subscribe(render);
100 | ```
101 |
102 | But this does.
103 |
104 | ```js
105 | const example$ = of(1, 2, 3, 4).pipe(
106 | mergeMap((value, index) => interval(index * 1000).pipe(take(4))),
107 | );
108 |
109 | example$.subscribe(render);
110 | ```
111 |
112 | We can even get a little crazier with the mapping.
113 |
114 | ```js
115 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
116 | mergeMap((beatle, index) =>
117 | interval(index * 1000).pipe(
118 | take(4),
119 | map((i) => `${beatle} ${i}`),
120 | ),
121 | ),
122 | );
123 |
124 | example$.subscribe(render);
125 | ```
126 |
127 | ## concatMap
128 |
129 | This works, just like `concat`. It plays through each one in the order that it was received.
130 |
131 | ```js
132 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
133 | concatMap((beatle, index) =>
134 | interval(index * 1000).pipe(
135 | take(4),
136 | map((i) => `${beatle} ${i}`),
137 | ),
138 | ),
139 | );
140 |
141 | example$.subscribe(render);
142 | ```
143 |
144 | ## switchMap
145 |
146 | Anytime a new observable comes through the map, `switchMap` unsubscribes from the previous observable and switches to the new one.
147 |
148 | ```js
149 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
150 | switchMap((beatle, index) =>
151 | interval(index * 1000).pipe(
152 | take(4),
153 | map((i) => `${beatle} ${i}`),
154 | ),
155 | ),
156 | );
157 |
158 | example$.subscribe(render);
159 | ```
160 |
161 | Since the John, Paul, George, and Ringo are shooting through the pipe synchronously, `switchMap` quickly switches between them and ends up only subscribing to Ringo.
162 |
163 | ## exhaustMap
164 |
165 | This is pretty much the opposite. `exhaustMap` grabs onto to the first one and ignores everything else until it is done doing what it's doing.
166 |
167 | ```js
168 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
169 | exhaustMap((beatle, index) =>
170 | interval(index * 1000).pipe(
171 | take(4),
172 | map((i) => `${beatle} ${i}`),
173 | ),
174 | ),
175 | );
176 |
177 | example$.subscribe(render);
178 | ```
179 |
180 | ### combineLatestAll
181 |
182 | `combineLatestAll` is a bit like `scan`. It will give you an array of the latest value emitted by each of the child observables. The only caveat is that each of them must have emitted once first.
183 |
184 | ```js
185 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
186 | map((beatle, index) =>
187 | interval(index * 1000).pipe(
188 | take(4),
189 | map((i) => `${beatle} ${i}`),
190 | ),
191 | ),
192 | combineLatestAll(),
193 | );
194 | ```
195 |
196 | You'll notice that we don't hear anything until Ringo, the last to emit, emits a value.
197 |
198 | If needed, we can kick things off with `startWith`.
199 |
200 | ```js
201 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
202 | map((beatle, index) =>
203 | interval(index * 1000).pipe(
204 | startWith('(Not Started)'),
205 | take(5),
206 | map((i) => `${beatle} ${i}`),
207 | ),
208 | ),
209 | combineLatestAll(),
210 | );
211 |
212 | example$.subscribe(render);
213 | ```
214 |
215 | **Bonus**: We also have `endWith` that we could use.
216 |
217 | ```js
218 | const example$ = of('John', 'Paul', 'George', 'Ringo').pipe(
219 | map((beatle, index) =>
220 | interval(index * 1000).pipe(
221 | startWith('(Not Started)'),
222 | take(6),
223 | endWith('(Done)'),
224 | map((i) => `${beatle} ${i}`),
225 | ),
226 | ),
227 | combineLatestAll(),
228 | );
229 |
230 | example$.subscribe(render);
231 | ```
232 |
233 | ## Conclusion
234 |
235 | Okay, that's all kind of silly. Let's review some of the operators and then we'll build some more practical things.
236 |
--------------------------------------------------------------------------------
/content/fetching-dog-facts.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Fetching from an API
3 | layout: layouts/lesson.njk
4 | ---
5 |
6 | First, let's make it work with that button, shall we? Let's create a stream out of clicks on that button, shall we?
7 |
8 | **Nota bene**: If you're struggling to get your local server up and running, the API is also hosted at https://rxjs-api.glitch.me/api/facts.
9 |
10 | ```js
11 | const endpoint = 'http://localhost:3333/api/facts';
12 |
13 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
14 | mergeMap(() =>
15 | fromFetch(endpoint).pipe(mergeMap((response) => response.json())),
16 | ),
17 | );
18 | ```
19 |
20 | Great, it works, but this is nothing special.
21 |
22 | ## Dealing with Chaos
23 |
24 | Let's say that there are some "imperfect" network conditions.
25 |
26 | ```js
27 | const endpoint = 'http://localhost:3333/api/facts?delay=3000&chaos=1';
28 | ```
29 |
30 | This adds a slight delay and a little bit of randomness to our response times. Go ahead and click on the button a few times. This is mildly annoying in our sample application, but can become a lot worse in a real-world application.
31 |
32 | So, how would we deal with that?
33 |
34 | The answer to that question ultimately depends on how you want to solve for it. Should the last request win or should we finish what we started in before loading more onto the page?
35 |
36 | Since this is just displaying random facts and it's likely—but not guaranteed—that the first request will come back first.
37 |
38 | When we worked on the counter, we used `switchMap` to take the latest event from stream. On the flip side, we can use `exhaustMap` to wait until the first observable has completed.
39 |
40 | Let's take it for a spin.
41 |
42 | ```js
43 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
44 | exhaustMap(() =>
45 | fromFetch(endpoint).pipe(mergeMap((response) => response.json())),
46 | ),
47 | );
48 | ```
49 |
50 | Now, you can slam on that button as many times as you want and it doesn't matter.
51 |
52 | You _could_ throttle the clicks, but this is probably a terrible idea. You don't care about a certain amount of time. You care whether or not the last request came back. If it came back super fast, then you don't want to ignore subsequent clicks completely, right?
53 |
54 | Here is some code anyway:
55 |
56 | ```js
57 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
58 | throttleTime(1000),
59 | tap(console.log),
60 | exhaustMap(() =>
61 | fromFetch(endpoint).pipe(mergeMap((response) => response.json())),
62 | ),
63 | );
64 | ```
65 |
66 | ### Dealing with Errors
67 |
68 | What happens if the request fails?
69 |
70 | ### Fetching at an Interval
71 |
72 | So, what if wanted to refresh this data every so often? (Keep in mind, we're keeping chaos mode turned on, here. So, all of the previous issues will remain.)
73 |
74 | Let's start with just a super simple approach that does not involve learning anything new.
75 |
76 | ```js
77 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
78 | tap(clearError),
79 | exhaustMap(() =>
80 | fromFetch(endpoint).pipe(
81 | mergeMap((response) => {
82 | if (response.ok) {
83 | return response.json();
84 | } else {
85 | return of({ error: 'Something went wrong!' });
86 | }
87 | }),
88 | ),
89 | ),
90 | );
91 |
92 | fetch$.subscribe(({ facts, error }) => {
93 | if (error) {
94 | return (errorStatus.innerText = error);
95 | }
96 | clearFacts();
97 | facts.forEach(addFact);
98 | });
99 | ```
100 |
101 | This works in the way that error handling works in Node: we ignore the built in error-handling in JavaScript and just create our own abstraction.
102 |
103 | Okay, but like errors can still happen and I should probably teach you what RxJS gives you in order to handle when they do happen.
104 |
105 | Also, what if you want to recover from this error?
106 |
107 | ```js
108 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
109 | tap(() => clearError()),
110 | exhaustMap(() =>
111 | fromFetch(endpoint).pipe(
112 | mergeMap((response) => {
113 | if (response.ok) {
114 | return response.json();
115 | } else {
116 | throw new Error('Something went wrong!');
117 | }
118 | }),
119 | catchError((error) => {
120 | console.error(error);
121 | return of({ error: 'The stream caught an error. Cool, right?' });
122 | }),
123 | ),
124 | ),
125 | );
126 | ```
127 |
128 | ### Retrying
129 |
130 | Okay, so here is where it gets cool. We can retry a set number of times. So, let's start by breaking out the actual stream of fetching the data from responding to the clicks in our click stream.
131 |
132 | ```js
133 | const fetchData = () =>
134 | fromFetch(endpoint).pipe(
135 | mergeMap((response) => {
136 | if (response.ok) {
137 | return response.json();
138 | } else {
139 | throw new Error('Something went wrong!');
140 | }
141 | }),
142 | retry(4),
143 | catchError((error) => {
144 | console.error(error);
145 | return of({ error: 'The stream caught an error. Cool, right?' });
146 | }),
147 | );
148 |
149 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
150 | tap(() => clearError()),
151 | exhaustMap(fetchData),
152 | );
153 | ```
154 |
155 | Okay, nothing new to see here. Let's keep going.
156 |
157 | So, the simplest possible answer is to create a stream that will finish one stream and move on to the next one.
158 |
159 | ```js
160 | concat(response.json(), fetchData());
161 | ```
162 |
163 | If we wanted to buy ourselves some time, we can do that too. This is where we harken back to our timer example from before. We know that we can map intervals into other observables.
164 |
165 | ```js
166 | const fetch$ = fromEvent(fetchButton, 'click').pipe(
167 | tap(() => clearError()),
168 | exhaustMap(fetchData),
169 | switchMap((results) =>
170 | concat(of(results), interval(5000).pipe(mergeMap(fetchData)), take(1)),
171 | ),
172 | );
173 | ```
174 |
175 | So, this is cool. We'll switch over to the latest set of results, but then we'll tack on another request 5 seconds later.
176 |
177 | ## Pausing the Fetching
178 |
179 | We're seen this movie before.
180 |
181 | ```js
182 | const fetch$ = fromEvent(fetchButton, 'click').pipe(mapTo(true));
183 | const stop$ = fromEvent(stopButton, 'click').pipe(mapTo(false));
184 |
185 | const factStream$ = merge(fetch$, stop$).pipe(
186 | startWith(false),
187 | switchMap((shouldFetch) => {
188 | return shouldFetch
189 | ? timer(0, 5000).pipe(
190 | tap(() => clearError()),
191 | tap(() => clearFacts()),
192 | exhaustMap(fetchData),
193 | )
194 | : NEVER;
195 | }),
196 | );
197 |
198 | factStream$.subscribe(addFacts);
199 | ```
200 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | RxJS Fundamentals
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |