├── .editorconfig
├── .gitignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── custom
    ├── main.js
    ├── scripts.js
    ├── startDemo.js
    └── styles.css
├── docs
    ├── features.md
    ├── images
    │   ├── logitech.png
    │   ├── material-canvas.png
    │   ├── material-printing.png
    │   ├── ribbon-canvas.png
    │   └── ribbon-printing.png
    ├── index.html
    ├── logitech.md
    ├── printing.md
    └── shortcuts.md
├── gulpfile.js
├── index.html
├── package-lock.json
├── package.json
└── pictures
    ├── 2requests.png
    ├── author.png
    ├── demo-2.gif
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon-96x96.png
    ├── fetch-cancel.png
    ├── iterator-pattern.png
    ├── observer-pattern.png
    ├── palpatin-50.png
    ├── pipe-3.gif
    ├── rx-stachka-table-1-bg-2.png
    ├── rx-stachka-table-1-bg-3.png
    ├── rx-stachka-table-1.png
    ├── rx-stachka-table-2.png
    ├── rx-stachka-table-3.png
    ├── rx-stachka-table-4.png
    ├── rx-stachka-table-5.png
    ├── rx-stachka-table-6.png
    ├── rxJs.png
    ├── rxjs-clicks-1.png
    ├── rxjs-clicks-2-2.png
    ├── rxjs-clicks-2.png
    ├── rxjs-clicks-3.png
    ├── rxjs-clicks-4.png
    ├── rxjs-logo.png
    ├── rxjs-qr.png
    ├── rxmarbles-combine-latest.png
    ├── rxmarbles-filter.png
    ├── rxmarbles-switch-map.png
    ├── table-1.png
    ├── table-2.png
    └── table-3.png


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | charset = utf-8
11 | 
12 | [{bower.json,package.json,.travis.yml}]
13 | indent_size = 2
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | prepared
4 | archive.zip
5 | .DS_Store
6 | .publish
7 | custom-scripts.js
8 | rxjs.todo
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "6"
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # The MIT License
 2 | 
 3 | Copyright © 2010–2015 Vadim Makeev, http://pepelsbey.net/
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 
11 | ---
12 | 
13 | # Лицензия MIT
14 | 
15 | Copyright © 2010–2015 Вадим Макеев, http://pepelsbey.net/
16 | 
17 | Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
18 | 
19 | Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
20 | 
21 | ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # RxJS: введение
 2 | 
 3 | ## Видео
 4 | 
 5 | [MoscowJS 42 – RxJS по косточкам](https://www.youtube.com/watch?v=3rEDHnqn-Cw)
 6 | 
 7 | ## **Важно: пожалуйста, оцените выступлениe**
 8 |  
 9 | Анкета на 5 минут: [https://goo.gl/forms/zxr41nHXqcHxaict2](https://goo.gl/forms/zxr41nHXqcHxaict2)
10 | 
11 | ## Cсылки
12 | 
13 | ### Observable
14 | - Введение в документацию [http://reactivex.io/rxjs/manual/overview.html](http://reactivex.io/rxjs/manual/overview.html)
15 | - Справочник операторов [https://www.learnrxjs.io/](https://www.learnrxjs.io/)
16 | - Понимание паттернов, из которых состоит Observable [http://anasfirdousi.com/understanding-observable-patterns-behind-observables-rxjs-rx.html](http://anasfirdousi.com/understanding-observable-patterns-behind-observables-rxjs-rx.html)
17 | 
18 | ### Subjects и multicast
19 | - Типы subject-ов [https://medium.com/@poudanen/%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5-rxjava-subject-publish-replay-behavior-%D0%B8-async-subject-35ad50cd1064](https://medium.com/@poudanen/%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D0%BD%D0%B8%D0%B5-rxjava-subject-publish-replay-behavior-%D0%B8-async-subject-35ad50cd1064)
20 | - Hot vs Cold Observables [https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339](https://medium.com/@benlesh/hot-vs-cold-observables-f8094ed53339)
21 | - RxJS: Understanding the publish and share Operators [https://blog.angularindepth.com/rxjs-understanding-the-publish-and-share-operators-16ea2f446635](https://blog.angularindepth.com/rxjs-understanding-the-publish-and-share-operators-16ea2f446635)
22 | - Документация multicast оператора [http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast)
23 | 
24 | ### Egghead
25 | 
26 | - Use Higher Order Observables in RxJS Effectively [https://egghead.io/courses/use-higher-order-observables-in-rxjs-effectively](https://egghead.io/courses/use-higher-order-observables-in-rxjs-effectively)
27 | - Save time avoiding common mistakes using RxJS [https://egghead.io/courses/save-time-avoiding-common-mistakes-using-rxjs](https://egghead.io/courses/save-time-avoiding-common-mistakes-using-rxjs)
28 | - RxJS Subjects and Multicasting Operators [https://egghead.io/courses/rxjs-subjects-and-multicasting-operators](https://egghead.io/courses/rxjs-subjects-and-multicasting-operators)
29 | 
30 | ### Не попали в категории
31 | - Rx Visualizer – песочница по визуализации Observable [https://rxviz.com/](https://rxviz.com/)
32 | - RxJS: Don’t Unsubscribe [https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87](https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87)
33 | 


--------------------------------------------------------------------------------
/custom/main.js:
--------------------------------------------------------------------------------
  1 | import {of} from 'rxjs';
  2 | import {delay, switchMap, takeUntil} from 'rxjs/operators';
  3 | import {startDemo} from './startDemo';
  4 | 
  5 | startDemo();
  6 | 
  7 | let START = new Date();
  8 | let isRunning = false;
  9 | const STEP = 50;
 10 | const TICK_MS = 500;
 11 | const MAX_TIME_MS = 6000;
 12 | const COLOR_SCHEME = [
 13 |     '#FB000D',
 14 |     '#009D91',
 15 |     '#8AB32D'
 16 | ];
 17 | 
 18 | const timelineTemplate = document.getElementById('timeline-template');
 19 | 
 20 | function createElementWithClass(className) {
 21 |     const element = document.createElement('div');
 22 | 
 23 |     element.classList.add(className);
 24 | 
 25 |     return element;
 26 | }
 27 | 
 28 | function createTimelineElement() {
 29 |     const element = timelineTemplate.content.cloneNode(true);
 30 |     return element.querySelector('.timeline');
 31 | }
 32 | 
 33 | function createEntryElement() {
 34 |     return createElementWithClass('entry');
 35 | }
 36 | 
 37 | function createCompleteElement() {
 38 |     return createElementWithClass('entry-complete');
 39 | }
 40 | 
 41 | function getTimeDiff() {
 42 |     return (new Date() - START) / TICK_MS;
 43 | }
 44 | 
 45 | function renderNext(value, timelineElement) {
 46 |     const newElement = createEntryElement();
 47 | 
 48 |     newElement.textContent = value;
 49 | 
 50 |     const offset = getTimeDiff() * STEP;
 51 | 
 52 |     newElement.style.left = offset + 'px';
 53 | 
 54 |     const last = timelineElement.lastElementChild;
 55 | 
 56 |     if (last) {
 57 |         const lastOffset = parseInt(last.style.left, 10);
 58 | 
 59 |         if (offset - lastOffset < 5) {
 60 |             newElement.classList.add('shift');
 61 |         }
 62 |     }
 63 | 
 64 |     timelineElement.appendChild(newElement);
 65 | }
 66 | 
 67 | function renderComplete(timelineElement) {
 68 |     timelineElement.style.width = getTimeDiff() * STEP + 'px';
 69 |     timelineElement.style.transitionDuration = '0s';
 70 | }
 71 | 
 72 | function renderCompleteElement(timelineElement) {
 73 |     const newElement = createCompleteElement();
 74 | 
 75 |     let offset = getTimeDiff() * STEP;
 76 | 
 77 |     const last = timelineElement.lastElementChild;
 78 | 
 79 |     if (last) {
 80 |         const lastOffset = parseInt(last.style.left, 10);
 81 | 
 82 |         if (offset - lastOffset < last.offsetWidth) {
 83 |             // offset += last.offsetWidth;
 84 |             newElement.classList.add('close-to-entry')
 85 |         }
 86 |     }
 87 | 
 88 |     newElement.style.left = offset + 'px';
 89 | 
 90 |     timelineElement.appendChild(newElement);
 91 | }
 92 | 
 93 | function setTimeline(parentElement) {
 94 |     parentElement.appendChild(createTimelineElement());
 95 | 
 96 |     const timelineElement = parentElement.lastElementChild;
 97 |     const index = (parentElement.childNodes.length - 1) % COLOR_SCHEME.length;
 98 | 
 99 |     // timelineElement.style.transitionDuration = MAX_TIME_MS + 'ms';
100 |     timelineElement.style.color = COLOR_SCHEME[index];
101 | 
102 |     setTimeout(() => {
103 |         timelineElement.style.width = '0px';
104 |     }, 0);
105 | 
106 |     setTimeout(() => {
107 |         timelineElement.style.width = (((MAX_TIME_MS) / TICK_MS) * STEP) + 'px';
108 |     }, 100);
109 | 
110 | 
111 |     parentElement.appendChild(timelineElement);
112 | 
113 |     return timelineElement;
114 | }
115 | 
116 | function startStream(parentElement, input$, delayTime = 0) {
117 |     const timelineElement = setTimeline(parentElement);
118 | 
119 |     const subscription = of(null)
120 |         .pipe(
121 |             delay(delayTime),
122 |             switchMap(() => input$),
123 |             takeUntil(
124 |                 of(null)
125 |                     .pipe(
126 |                         delay(MAX_TIME_MS)
127 |                     )
128 |             )
129 |         )
130 |         .subscribe({
131 |             next: (value) => {
132 |                 renderNext(value, timelineElement);
133 |             },
134 |             complete: () => {
135 |                 renderCompleteElement(timelineElement);
136 |             }
137 |         });
138 | 
139 |     const unsubscribe = subscription.unsubscribe;
140 | 
141 |     subscription.unsubscribe = function (...args) {
142 |         renderComplete(timelineElement);
143 | 
144 |         unsubscribe.apply(this, args);
145 |     };
146 | 
147 |     return subscription;
148 | }
149 | 
150 | function setSubjectTick1(subject) {
151 |     subject.next(0);
152 |     setTimeout(() => subject.next(1), 1000);
153 |     setTimeout(() => subject.next(2), 2000);
154 |     setTimeout(() => subject.next(3), 3000);
155 |     setTimeout(() => subject.next(4), 4000);
156 |     setTimeout(() => subject.complete(), 5000);
157 | }
158 | 
159 | function run(stepFn, btnElement) {
160 |     if (isRunning) {
161 |         return;
162 |     }
163 | 
164 |     START = new Date();
165 |     isRunning = true;
166 |     btnElement.disabled = true;
167 |     stepFn();
168 | 
169 |     setTimeout(() => {
170 |         isRunning = false;
171 |         btnElement.disabled = false;
172 |     }, MAX_TIME_MS);
173 | }
174 | 
175 | function logToOutput(outputElement, value) {
176 |     const logElement = document.createElement('div');
177 | 
178 |     logElement.textContent = value || '\xa0';
179 | 
180 |     outputElement.insertBefore(logElement, outputElement.firstChild);
181 | }
182 | 
183 | function logAllToOutput(outputElement, items) {
184 |     outputElement.innerHTML = '';
185 | 
186 |     items.forEach((item) => {
187 |         logToOutput(outputElement, item);
188 |     });
189 | }
190 | 
191 | function fetchData(url) {
192 |     if (!url) {
193 |         return of([]);
194 |     }
195 | 
196 |     const times = 1 + Math.floor(Math.random() * 7);
197 |     const result = new Array(times)
198 |         .fill(null)
199 |         .map(() => getRandomWord(url));
200 | 
201 |     return of(result)
202 |         .pipe(
203 |             delay(300 + Math.floor(Math.random() * 1000))
204 |         );
205 | }
206 | 
207 | function getRandomWord(source) {
208 |     return source + '_' + getRandomChar() + getRandomChar() + getRandomChar();
209 | }
210 | 
211 | function getRandomChar() {
212 |     const num = 97 + Math.floor(26 * Math.random());
213 | 
214 |     return String.fromCharCode(num);
215 | }
216 | 
217 | window.run = run;
218 | window.startStream = startStream;
219 | window.logToOutput = logToOutput;
220 | window.logAllToOutput = logAllToOutput;
221 | window.fetchData = fetchData;
222 | window.TICK_MS = TICK_MS;
223 | window.setSubjectTick1 = setSubjectTick1;
224 | 
225 | 


--------------------------------------------------------------------------------
/custom/scripts.js:
--------------------------------------------------------------------------------
  1 | let START = new Date();
  2 | let isRunning = false;
  3 | const STEP = 50;
  4 | const TICK_MS = 500;
  5 | const MAX_TIME_MS = 6000;
  6 | const COLOR_SCHEME = [
  7 |     '#FB000D',
  8 |     '#009D91',
  9 |     '#8AB32D'
 10 | ];
 11 | 
 12 | const timelineTemplate = document.getElementById('timeline-template');
 13 | 
 14 | function createElementWithClass(className) {
 15 |     const element = document.createElement('div');
 16 | 
 17 |     element.classList.add(className);
 18 | 
 19 |     return element;
 20 | }
 21 | 
 22 | function createTimelineElement() {
 23 |     const element = timelineTemplate.content.cloneNode(true);
 24 |     return element.querySelector('.timeline');
 25 | }
 26 | 
 27 | function createEntryElement() {
 28 |     return createElementWithClass('entry');
 29 | }
 30 | 
 31 | function createCompleteElement() {
 32 |     return createElementWithClass('entry-complete');
 33 | }
 34 | 
 35 | function getTimeDiff() {
 36 |     return (new Date() - START) / TICK_MS;
 37 | }
 38 | 
 39 | function renderNext(value, timelineElement) {
 40 |     const newElement = createEntryElement();
 41 | 
 42 |     newElement.textContent = value;
 43 | 
 44 |     const offset = getTimeDiff() * STEP;
 45 | 
 46 |     newElement.style.left = offset + 'px';
 47 | 
 48 |     const last = timelineElement.lastElementChild;
 49 | 
 50 |     if (last) {
 51 |         const lastOffset = parseInt(last.style.left, 10);
 52 | 
 53 |         if (offset - lastOffset < 5) {
 54 |             newElement.classList.add('shift');
 55 |         }
 56 |     }
 57 | 
 58 |     timelineElement.appendChild(newElement);
 59 | }
 60 | 
 61 | function renderComplete(timelineElement) {
 62 |     timelineElement.style.width = getTimeDiff() * STEP + 'px';
 63 |     timelineElement.style.transitionDuration = '0s';
 64 | }
 65 | 
 66 | function renderCompleteElement(timelineElement) {
 67 |     const newElement = createCompleteElement();
 68 | 
 69 |     let offset = getTimeDiff() * STEP;
 70 | 
 71 |     const last = timelineElement.lastElementChild;
 72 | 
 73 |     if (last) {
 74 |         const lastOffset = parseInt(last.style.left, 10);
 75 | 
 76 |         if (offset - lastOffset < last.offsetWidth) {
 77 |             // offset += last.offsetWidth;
 78 |             newElement.classList.add('close-to-entry')
 79 |         }
 80 |     }
 81 | 
 82 |     newElement.style.left = offset + 'px';
 83 | 
 84 |     timelineElement.appendChild(newElement);
 85 | }
 86 | 
 87 | function setTimeline(parentElement) {
 88 |     parentElement.appendChild(createTimelineElement());
 89 | 
 90 |     const timelineElement = parentElement.lastElementChild;
 91 |     const index = (parentElement.childNodes.length - 1) % COLOR_SCHEME.length;
 92 | 
 93 |     // timelineElement.style.transitionDuration = MAX_TIME_MS + 'ms';
 94 |     timelineElement.style.color = COLOR_SCHEME[index];
 95 | 
 96 |     setTimeout(() => {
 97 |         timelineElement.style.width = '0px';
 98 |     }, 0);
 99 | 
100 |     setTimeout(() => {
101 |         timelineElement.style.width = (((MAX_TIME_MS) / TICK_MS) * STEP) + 'px';
102 |     }, 100);
103 | 
104 | 
105 |     parentElement.appendChild(timelineElement);
106 | 
107 |     return timelineElement;
108 | }
109 | 
110 | function startStream(parentElement, input$, delay = 0) {
111 |     const timelineElement = setTimeline(parentElement);
112 | 
113 |     const subscription = Rx.Observable.of(null)
114 |         .delay(delay)
115 |         .switchMap(() => input$)
116 |         .takeUntil(Rx.Observable.of(null).delay(MAX_TIME_MS))
117 |         .subscribe({
118 |             next: (value) => {
119 |                 renderNext(value, timelineElement);
120 |             },
121 |             complete: () => {
122 |                 renderCompleteElement(timelineElement);
123 |             }
124 |         });
125 | 
126 |     const unsubscribe = subscription.unsubscribe;
127 | 
128 |     subscription.unsubscribe = function (...args) {
129 |         renderComplete(timelineElement);
130 | 
131 |         unsubscribe.apply(this, args);
132 |     };
133 | 
134 |     return subscription;
135 | }
136 | 
137 | function setSubjectTick1(subject) {
138 |     subject.next(0);
139 |     setTimeout(() => subject.next(1), 1000);
140 |     setTimeout(() => subject.next(2), 2000);
141 |     setTimeout(() => subject.next(3), 3000);
142 |     setTimeout(() => subject.next(4), 4000);
143 |     setTimeout(() => subject.complete(), 5000);
144 | }
145 | 
146 | function run(stepFn, btnElement) {
147 |     if (isRunning) {
148 |         return;
149 |     }
150 | 
151 |     START = new Date();
152 |     isRunning = true;
153 |     btnElement.disabled = true;
154 |     stepFn();
155 | 
156 |     setTimeout(() => {
157 |         isRunning = false;
158 |         btnElement.disabled = false;
159 |     }, MAX_TIME_MS);
160 | }
161 | 
162 | function logToOutput(outputElement, value) {
163 |     const logElement = document.createElement('div');
164 | 
165 |     logElement.textContent = value || '\xa0';
166 | 
167 |     outputElement.insertBefore(logElement, outputElement.firstChild);
168 | }
169 | 
170 | function logAllToOutput(outputElement, items) {
171 |     outputElement.innerHTML = '';
172 | 
173 |     items.forEach((item) => {
174 |         logToOutput(outputElement, item);
175 |     });
176 | }
177 | 
178 | function fetchData(url) {
179 |     if (!url) {
180 |         return Rx.Observable.of([]);
181 |     }
182 | 
183 |     const times = 1 + Math.floor(Math.random() * 7);
184 |     const result = new Array(times)
185 |         .fill(null)
186 |         .map(() => getRandomWord(url));
187 | 
188 |     return Rx.Observable.of(result).delay(300 + Math.floor(Math.random() * 1000));
189 | }
190 | 
191 | function getRandomWord(source) {
192 |     return source + '_' + getRandomChar() + getRandomChar() + getRandomChar();
193 | }
194 | 
195 | function getRandomChar() {
196 |     const num = 97 + Math.floor(26 * Math.random());
197 | 
198 |     return String.fromCharCode(num);
199 | }
200 | 


--------------------------------------------------------------------------------
/custom/startDemo.js:
--------------------------------------------------------------------------------
 1 | import {fromEvent} from 'rxjs';
 2 | import {map, filter} from 'rxjs/operators';
 3 | 
 4 | 
 5 | export function startDemo() {
 6 |     fromEvent(document, 'keyup')
 7 |         .pipe(
 8 |             map(({code}) => code),
 9 |             filter(code => code === 'KeyA')
10 |         )
11 |         .subscribe(res => {
12 |             const btnElt = document.querySelector('.shower.full .slide.active .btn-play');
13 | 
14 |             if (btnElt) {
15 |                 btnElt.click();
16 |             }
17 |         });
18 | }
19 | 


--------------------------------------------------------------------------------
/custom/styles.css:
--------------------------------------------------------------------------------
  1 | .rxjs-creation,
  2 | .rxjs-operator,
  3 | .rxjs-pipe,
  4 | .rxjs-subscribe {
  5 |     font-weight: 700;
  6 | }
  7 | 
  8 | .rxjs-creation {
  9 |     color: #c62828;
 10 | }
 11 | 
 12 | .rxjs-pipe {
 13 |     /*color: #283593;*/
 14 |     color: #00695c;
 15 | }
 16 | 
 17 | .rxjs-operator {
 18 |     color: #4f2c85;
 19 | }
 20 | 
 21 | .rxjs-subscribe {
 22 |     color: #00695c;
 23 | }
 24 | 
 25 | .stachka .slide::before {
 26 |     display: none;
 27 |     background: none;
 28 | }
 29 | 
 30 | .stachka .slide .slide-header::after {
 31 |     border-bottom: none;
 32 |     height: 4px;
 33 |     background: linear-gradient(90deg, #4f2c85, #ec0d8f);
 34 | }
 35 | 
 36 | .stachka .slide .cover-title {
 37 |     background: linear-gradient(90deg, #8c55e1, #ec0d8f);
 38 |     padding: 30px 50px;
 39 |     bottom: 60px;
 40 | }
 41 | 
 42 | .stachka .slide .cover-title h2 {
 43 |     margin: 0;
 44 |     line-height: 1;
 45 |     font-size: 60px;
 46 | }
 47 | 
 48 | .stachka .slide .cover-title::after {
 49 |     background: none;
 50 | }
 51 | 
 52 | .stachka .progress {
 53 |     background: linear-gradient(90deg, #4f2c85, #ec0d8f);
 54 |     height: 8px;
 55 |     border: none;
 56 |     clip: unset;
 57 |     padding: 0;
 58 |     left: 0;
 59 | }
 60 | 
 61 | .stachka .img-boxed {
 62 |     box-shadow: 0 0 0 1px #aaa;
 63 | }
 64 | 
 65 | .stachka .img-centered {
 66 |     display: block;
 67 |     margin: 0 auto;
 68 | }
 69 | 
 70 | /*.stachka .slide ul,*/
 71 | .stachka .slide p {
 72 |     font-size: 28px;
 73 |     line-height: 1.5;
 74 |     margin: 1em 0;
 75 | }
 76 | 
 77 | .stachka .slide pre code {
 78 |     /*font-size: 18px;*/
 79 |     font-size: 20px;
 80 |     line-height: 1.8;
 81 | }
 82 | 
 83 | .stachka .slide pre.pre-centered-big code {
 84 |     font-size: 26px;
 85 | }
 86 | 
 87 | .pre-centered-big {
 88 |     display: inline-block;
 89 |     margin-top: 25px;
 90 | }
 91 | 
 92 | .stachka .slide .text-big {
 93 |     font-size: 30px;
 94 | }
 95 | 
 96 | /*.stachka .slide li {*/
 97 | /*line-height: 1.5;*/
 98 | /*margin: 10px 0;*/
 99 | /*}*/
100 | 
101 | .stachka .shout.shout-small {
102 |     font-size: 60px;
103 | }
104 | 
105 | .shower {
106 |     font-size: 20px;
107 | }
108 | 
109 | .slide .shout {
110 |     font-size: 80px;
111 | }
112 | 
113 | .slide-description small {
114 |     margin-top: 10px;
115 |     display: block;
116 |     font-size: 14px;
117 | }
118 | 
119 | .slide .slide-header {
120 |     margin-bottom: 30px;
121 | }
122 | 
123 | .slide-description {
124 |     min-height: 70px;
125 |     position: relative;
126 |     padding-right: 35px;
127 | }
128 | 
129 | .slide-description.big {
130 |     min-height: 175px;
131 | }
132 | 
133 | .intro {
134 |     text-align: center;
135 | }
136 | 
137 | .playground {
138 |     padding: 10px 0;
139 |     min-height: 54px;
140 |     margin-bottom: 25px;
141 | }
142 | 
143 | .playground.playground-two-streams {
144 |     min-height: 98px;
145 | }
146 | 
147 | .playground.playground-three-streams {
148 |     min-height: 144px;
149 | }
150 | 
151 | .playground-clock .entry {
152 |     animation: clock ease-in-out .15s;
153 |     animation-iteration-count: 21;
154 |     transform-origin: center center;
155 | }
156 | 
157 | @keyframes clock {
158 |     0% {
159 |         padding-left: 0;
160 |         transform: rotate(-5deg);
161 |     }
162 | 
163 |     50% {
164 |         padding-left: 2px;
165 |         transform: rotate(5deg);
166 |     }
167 | }
168 | 
169 | .text-hot {
170 |     color: #C0504D;
171 | }
172 | 
173 | .text-cold {
174 |     color: #4F81BD;
175 | }
176 | 
177 | .text-muted {
178 |     color: #777;
179 | }
180 | 
181 | .text-center {
182 |     text-align: center;
183 | }
184 | 
185 | .relative-container {
186 |     position: relative;
187 | }
188 | 
189 | .relative-image {
190 |     position: absolute;
191 |     box-shadow: 0 0 0 2px #434343;
192 | }
193 | 
194 | .code-special {
195 |     position: absolute;
196 |     top: 0;
197 |     right: 0;
198 |     font-size: 11px;
199 |     padding: 10px;
200 |     padding-left: 35px;
201 |     padding-bottom: 0;
202 |     border: 1px solid #787878;
203 |     opacity: .7;
204 | }
205 | 
206 | .btn {
207 |     font-size: 20px;
208 |     padding: .3em .7em;
209 |     background: #ffcf0f;
210 |     color: #000000;
211 |     border: none;
212 |     cursor: pointer;
213 |     transition: background .2s, box-shadow .2s;
214 | }
215 | 
216 | .btn:hover {
217 |     background: #f5c400;
218 | }
219 | 
220 | .btn:active {
221 |     background: #dbaf00;
222 |     box-shadow: inset 0 0 .1em rgba(0, 0, 0, 0.5);
223 | }
224 | 
225 | .btn:focus {
226 |     outline: none;
227 | }
228 | 
229 | .btn[disabled] {
230 |     background: #c29b00;
231 |     opacity: .7;
232 |     cursor: default;
233 | }
234 | 
235 | .btn.hidden {
236 |     display: none;
237 | }
238 | 
239 | .btn-play {
240 |     position: absolute;
241 |     right: 0;
242 |     top: 0;
243 | }
244 | 
245 | .timeline {
246 |     color: red;
247 |     margin: 15px 0;
248 |     height: 4px;
249 |     background-color: currentColor;
250 |     position: relative;
251 |     z-index: 0;
252 |     transition: width linear 6s;
253 |     width: 0;
254 | }
255 | 
256 | .hidden {
257 |     display: none !important;
258 | }
259 | 
260 | .button {
261 |     margin: 20px 0;
262 |     display: inline-block;
263 |     padding: 8px 16px;
264 |     min-width: 120px;
265 |     color: #009D91;
266 |     border: 4px solid;
267 |     font-size: 20px;
268 |     font-weight: bold;
269 |     text-transform: uppercase;
270 |     border-radius: 8px;
271 | }
272 | 
273 | .button:active {
274 |     color: #FB000D;
275 | }
276 | 
277 | .button:focus {
278 |     outline: none;
279 | }
280 | 
281 | .button .button-text,
282 | .button:active .button-text-active {
283 |     display: inline;
284 | }
285 | 
286 | .button .button-text-active,
287 | .button:active .button-text {
288 |     display: none;
289 | }
290 | 
291 | .timeline + .timeline {
292 |     margin-top: 40px;
293 | }
294 | 
295 | .entry {
296 |     background-color: #ffffff;
297 |     position: absolute;
298 |     top: -14px;
299 |     margin-left: -15px;
300 |     left: 0;
301 |     display: inline-block;
302 |     vertical-align: top;
303 |     box-sizing: border-box;
304 |     width: 30px;
305 |     height: 30px;
306 |     line-height: 30px;
307 |     /*font-size: 13px;*/
308 |     font-size: 16px;
309 |     font-family: PT Mono, monospace, monospace;
310 |     box-sizing: border-box;
311 |     box-shadow: 0 0 0 2px currentColor;
312 |     text-align: center;
313 |     border-radius: 50%;
314 |     z-index: 1;
315 | }
316 | 
317 | .entry.shift {
318 |     top: -6px;
319 |     z-index: 2;
320 |     background: rgba(255, 255, 255, 0.6);
321 | }
322 | 
323 | .entry-complete {
324 |     width: 0;
325 |     height: 40px;
326 |     box-shadow: 0 0 0 2px currentColor;
327 |     position: absolute;
328 |     top: -19px;
329 |     z-index: 0;
330 | }
331 | 
332 | .entry-complete.close-to-entry {
333 | 
334 | }
335 | 
336 | .entry-start {
337 |     width: 0;
338 |     height: 0;
339 |     border: 4px solid transparent;
340 |     border-left: 8px solid red;
341 |     border-right: 0;
342 |     position: absolute;
343 | }
344 | 
345 | .slide-search {
346 |     display: flex;
347 | }
348 | 
349 | .search-code {
350 |     padding-right: 10px;
351 |     flex: 1 0 auto;
352 |     font-size: 22px;
353 | }
354 | 
355 | .search-playground {
356 |     width: 200px;
357 |     flex: 0 0 200px;
358 |     border: 2px solid #4f2c85;
359 | }
360 | 
361 | .search-input {
362 |     display: block;
363 |     width: 100%;
364 |     border: none;
365 |     border-bottom: 2px solid #4f2c85;
366 |     font-size: inherit;
367 |     line-height: 1;
368 |     padding: 10px;
369 |     height: 52px;
370 | }
371 | 
372 | .search-input:focus {
373 |     outline: none;
374 |     box-shadow: inset 0 0 0 1px #ec0d8f;
375 | }
376 | 
377 | .search-output {
378 |     overflow-x: hidden;
379 |     overflow-y: auto;
380 |     padding: 10px;
381 |     /*min-height: 54px;*/
382 |     /*max-height: 400px;*/
383 |     height: 380px;
384 | }
385 | 
386 | .search-output.search-loading {
387 |     background: url('../pictures/rxjs-logo.png') center center no-repeat;
388 |     background-size: 140px auto;
389 |     animation: 3s blink linear infinite;
390 | }
391 | 
392 | @keyframes blink {
393 |     0% {
394 |         opacity: .2;
395 |     }
396 | 
397 |     50% {
398 |         opacity: .7;
399 |     }
400 | 
401 |     100% {
402 |         opacity: .2;
403 |     }
404 | }
405 | 
406 | .search-output div {
407 |     white-space: nowrap;
408 |     text-overflow: ellipsis;
409 |     overflow: hidden;
410 | }
411 | 
412 | .emoji {
413 |     display: inline-block;
414 |     vertical-align: middle;
415 |     font-size: 50px;
416 | }
417 | 
418 | .nowrap {
419 |     white-space: nowrap;
420 | }
421 | 
422 | .excel {
423 |     font-size: 32px;
424 | }
425 | 
426 | .excel code {
427 |     background: none;
428 | }
429 | 
430 | .excel + .excel {
431 |     border-top: 2px solid #434343;
432 |     padding-top: 1.2em;
433 | }
434 | 
435 | .push-pull-example.next {
436 |     opacity: 0;
437 |     transform: translateY(100px);
438 |     transition: all .15s;
439 | }
440 | 
441 | .push-pull-example.next.active {
442 |     transform: translateY(0);
443 |     opacity: 1;
444 | }
445 | 
446 | .notify-clearfix {
447 |     overflow: hidden;
448 | }
449 | 
450 | .notify-wrap {
451 |     position: absolute;
452 |     padding: 0 0 20px 10px;
453 |     left: 0;
454 |     bottom: 0;
455 | }
456 | 
457 | .notify-baloon {
458 |     width: 320px;
459 |     color: #fff;
460 |     background: rgba(54, 56, 59, .96);
461 |     box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
462 |     border-radius: 4px;
463 |     font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
464 |     line-height: 1.154;
465 |     font-weight: 400;
466 |     font-size: 12.5px;
467 | }
468 | 
469 | .notify-head {
470 |     display: block;
471 |     padding: 10px 12px 0;
472 | }
473 | 
474 | .notify-wrap a {
475 |     color: #bfe2fe;
476 |     font-weight: 700;
477 |     -webkit-font-smoothing: antialiased;
478 |     -moz-osx-font-smoothing: grayscale;
479 | }
480 | 
481 | .notify-close {
482 |     float: right;
483 |     display: block;
484 |     padding: 10px;
485 |     margin: -10px -12px -11px 12px;
486 |     opacity: .65;
487 |     outline: none;
488 | }
489 | 
490 | .notify-title {
491 |     font-size: 12.5px;
492 |     color: inherit;
493 |     padding: 0;
494 |     margin: 0;
495 |     font-weight: 700;
496 | }
497 | 
498 | .notify-body {
499 |     padding: 12px;
500 | }
501 | 
502 | .notify-image-wrap {
503 |     float: left;
504 |     overflow: hidden;
505 |     width: 50px;
506 |     height: 50px;
507 |     max-height: 50px;
508 |     margin-right: 12px
509 | }
510 | 
511 | .notify-image {
512 |     width: 50px;
513 |     height: 50px;
514 |     border: 0;
515 |     color: transparent
516 | }
517 | 
518 | .notify-baloon-msg {
519 |     overflow: hidden;
520 |     line-height: 16px;
521 | }
522 | 
523 | .modal-container {
524 |     width: 480px;
525 |     box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
526 |     font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
527 |     line-height: 1.154;
528 |     font-weight: 400;
529 |     font-size: 12.5px;
530 |     background: #f7f7f7;
531 |     border-radius: 4px;
532 |     position: absolute;
533 |     right: 20px;
534 |     bottom: 20px;
535 |     z-index: 20;
536 | }
537 | 
538 | .modal-title-wrap {
539 |     position: relative;
540 |     padding: 0;
541 |     background-color: #5b88bd;
542 |     color: #fff;
543 |     overflow: hidden;
544 | }
545 | 
546 | .modal-close {
547 |     float: right;
548 |     padding: 17px 25px 21px 12px;
549 |     width: 12px;
550 |     height: 12px;
551 |     opacity: 0.75;
552 |     filter: alpha(opacity=75);
553 |     cursor: pointer;
554 |     outline: none
555 | }
556 | 
557 | .modal-title {
558 |     padding-left: 25px;
559 |     font-size: 14px;
560 |     color: #fff;
561 |     height: 48px;
562 |     line-height: 48px;
563 |     overflow: hidden;
564 |     text-overflow: ellipsis;
565 |     white-space: nowrap
566 | }
567 | 
568 | .modal-body {
569 |     padding: 16px 25px;
570 | }
571 | 
572 | .modal-user-info {
573 |     overflow: hidden;
574 | }
575 | 
576 | .modal-image-wrap {
577 |     width: 50px;
578 |     height: 50px;
579 |     overflow: hidden;
580 |     border-radius: 50%;
581 |     float: left;
582 | }
583 | 
584 | .modal-image {
585 |     width: 50px;
586 |     height: 50px;
587 | }
588 | 
589 | .modal-user-text {
590 |     padding-left: 13px;
591 |     overflow: hidden;
592 | }
593 | 
594 | .slide .modal-link {
595 |     color: #42648b;
596 |     text-decoration: underline;
597 |     background: none;
598 |     display: inline-block;
599 |     line-height: 1.27em;
600 |     padding: 6px 0 5px;
601 |     font-weight: 700;
602 |     -webkit-font-smoothing: antialiased;
603 |     -moz-osx-font-smoothing: grayscale
604 | }
605 | 
606 | .modal-user-status {
607 |     display: block;
608 |     color: #939393;
609 |     margin: 0;
610 |     padding: 0;
611 | }
612 | 
613 | .modal-msg {
614 |     background: #fff;
615 |     color: #000;
616 |     border: 1px solid #c0cad5;
617 |     height: 80px;
618 |     vertical-align: top;
619 |     margin: 15px 0;
620 |     overflow: hidden;
621 |     outline: 0;
622 |     cursor: text
623 | }
624 | 
625 | .modal-controls {
626 |     overflow: hidden;
627 | }
628 | 
629 | .modal-btn {
630 |     float: right;
631 |     padding: 7px 16px 8px;
632 |     margin: 0;
633 |     font-size: 13px;
634 |     display: inline-block;
635 |     cursor: pointer;
636 |     white-space: nowrap;
637 |     outline: none;
638 |     font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
639 |     vertical-align: top;
640 |     line-height: 15px;
641 |     text-align: center;
642 |     text-decoration: none;
643 |     background: none;
644 |     background-color: #5181b8;
645 |     color: #fff;
646 |     border: 0;
647 |     border-radius: 4px;
648 |     box-sizing: border-box
649 | }
650 | 
651 | .stachka.shower.full .slide .next.highlight {
652 |     visibility: visible;
653 | }
654 | 
655 | .stachka.shower.full .slide .next:not(.active) .next.highlight {
656 |     visibility: hidden;
657 | }
658 | 
659 | .stachka.shower.full .slide .next.highlight:not(.active) {
660 |     background: none;
661 | }
662 | 
663 | .stachka.shower.full .slide .next.invisible-next {
664 |     display: none;
665 | }
666 | 
667 | .stachka.shower.full .slide .next.invisible-next.active {
668 |     display: block;
669 | }
670 | 
671 | .invisible-next.active + .after-invisible-next {
672 |     display: none;
673 | }
674 | 
675 | .margin-0,
676 | .slide .margin-0 {
677 |     margin: 0;
678 | }
679 | 


--------------------------------------------------------------------------------
/docs/features.md:
--------------------------------------------------------------------------------
  1 | # Features
  2 | 
  3 | All theme’s features are demonstrated in the [index.html](index.html) file. Use it as a reference while building your presentation. More detailed features overview follows below.
  4 | 
  5 | - [Anatomy](#anatomy)
  6 | - [Common](#common)
  7 | 	- [Language](#language)
  8 | 	- [Canvas](#canvas)
  9 | 	- [Title](#title)
 10 | 	- [Badge](#badge)
 11 | 	- [Progress](#progress)
 12 | - [Slide](#slide)
 13 | 	- [Number](#number)
 14 | 	- [Types](#types)
 15 | 		- [White](#white)
 16 | 		- [Black](#black)
 17 | 		- [Grid](#grid)
 18 | 	- [Content](#content)
 19 | 		- [Header](#header)
 20 | 		- [Paragraphs](#paragraphs)
 21 | 		- [Inline](#inline)
 22 | 		- [Quotes](#quotes)
 23 | 		- [Lists](#lists)
 24 | 		- [Columns](#columns)
 25 | 		- [Tables](#tables)
 26 | 		- [Code](#code)
 27 | 	- [Elements](#elements)
 28 | 		- [Cover](#cover)
 29 | 		- [Shout](#shout)
 30 | 		- [Place](#place)
 31 | 		- [Notes](#notes)
 32 | 
 33 | ## Anatomy
 34 | 
 35 | Theme package consists of the following folders and files:
 36 | 
 37 | 2. `fonts` folder with fonts in WOFF format.
 38 | 3. `images` folder with decoration images.
 39 | 4. `pictures` folder with sample pictures.
 40 | 5. `styles` folder with built styles in 16×10 and 4×3 ratios.
 41 | 6. `index.html` file with demonstration of all features.
 42 | 
 43 | In addition to files theme’s repository contains source files:
 44 | 
 45 | 1. `source` folder with font source files in TTF and design in [Sketch](http://bohemiancoding.com/sketch/).
 46 | 2. `styles` folder also contains source styles in SCSS format.
 47 | 
 48 | ## Common
 49 | 
 50 | ### Language
 51 | 
 52 | The main presentation language is set on the root element of the document, please note it and set the right one:
 53 | 
 54 | 	<html lang="en">
 55 | 	<html lang="ru">
 56 | 
 57 | Appropriate typography traditions are used based on this value. `lang` attribute could also be set on separate slides or elements.
 58 | 
 59 | ### Canvas
 60 | 
 61 | The root presentation element has the main `shower` class and additional mode class: `list` for the list and `full` for the full screen. `list` mode is usually set by default, but if there’s no one, it’ll be set to `list` anyway and slides will be opened in the list mode. If `full` is set instead of `list` then slides will be opened in the full screen mode.
 62 | 
 63 | List:
 64 | 
 65 | 	<body class="shower list">
 66 | 
 67 | Full:
 68 | 
 69 | 	<body class="shower full">
 70 | 
 71 | Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed elements depending on current mode.
 72 | 
 73 | ### Caption
 74 | 
 75 | Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links.
 76 | 
 77 | 	<header class="caption">
 78 | 		<h1>Presentation Title</h1>
 79 | 		<p><a href="">Yours Truly</a>, Famous Inc.</p>
 80 | 	</header>
 81 | 
 82 | Caption is visible only in the list mode. Don’t forget to also specify presentation title in document’s `<title>` element.
 83 | 
 84 | ### Badge
 85 | 
 86 | Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element.
 87 | 
 88 | 	<footer class="badge">
 89 | 		<a href="…">Fork me on Github</a>
 90 | 	</footer>
 91 | 
 92 | Badge is visible only in the list mode.
 93 | 
 94 | ### Progress
 95 | 
 96 | Progress bar shows how much is left until presentation end and marked with `progress` element visible only in full screen mode:
 97 | 
 98 | 	<div class="progress"></div>
 99 | 
100 | To remove it from presentation just remove this element from document. There’s no way to hide it for specific slides.
101 | 
102 | ## Slide
103 | 
104 | Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, things could go wrong.
105 | 
106 | 	<section class="slide">
107 | 		…
108 | 	</section>
109 | 	<section class="slide">
110 | 		…
111 | 	</section>
112 | 
113 | There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate file `screen-4x3.css` or `screen-16x10.css`. Wide screen 16×10 format is included by default.
114 | 
115 | Slide width is 1024 px for the both ratios, for 16×10 height is 640 px, for 4×3 it’s 768. Bare in mind these sizes while preparing presentation pictures. In list mode slides are scaled down 2 or 4 times and in full screen mode they are scaled dynamically based on window size.
116 | 
117 | ### Number
118 | 
119 | Slide numbers help audience to remember slides for questions and open needed slide by changing number in address field. Numbers are generated automatically using CSS counters and could be turned off for specific slides.
120 | 
121 | You can hide number manually:
122 | 
123 | 	<section class="slide" id="off">
124 | 		<style>
125 | 			#off::after {
126 | 				visibility: hidden;
127 | 			}
128 | 		</style>
129 | 	</section>
130 | 
131 | Slide type `clear` could also hide slide number.
132 | 
133 | ### Types
134 | 
135 | Types are changing slide’s look. You can set type by adding class to the main `slide`. There are few built-in types available in the theme, you could also describe custom types for each presention or add it to your theme.
136 | 
137 | #### White
138 | 
139 | White type sets white background.
140 | 
141 | 	<section class="slide white">
142 | 
143 | #### Black
144 | 
145 | Black type sets black background.
146 | 
147 | 	<section class="slide black">
148 | 
149 | Please note that black slide type doesn’t change text color.
150 | 
151 | #### Clear
152 | 
153 | Clear type turns off slide number. Use it when you need a pure slide. May be mixed with `white` or `black` type.
154 | 
155 | 	<section class="slide clear">
156 | 
157 | #### Grid
158 | 
159 | Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns.
160 | 
161 | 	<section class="slide grid">
162 | 		…
163 | 	</section>
164 | 
165 | All theme elements are aligned by this grid and it’s recommended to follow it while changing or extending a theme.
166 | 
167 | ### Content
168 | 
169 | Simple content: headers, paragraphs, lists.
170 | 
171 | #### Header
172 | 
173 | Slide header is marked with `<h2>` element:
174 | 
175 | 	<section class="slide">
176 | 		<h2>Slide Header</h2>
177 | 	</section>
178 | 
179 | We haven’t introduced next heading levels to not provoke slides complexity.
180 | 
181 | #### Paragraphs
182 | 
183 | Paragraphs are marked with `<p>` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph:
184 | 
185 | 	<section class="slide">
186 | 		<p>Text</p>
187 | 		<p class="note">Note</p>
188 | 	</section>
189 | 
190 | #### Inline
191 | 
192 | There are following inline elements styled in the theme:
193 | 
194 | - `<a>` is underlined;
195 | - `<strong>` and `<b>` are bold;
196 | - `<em>` and `<i>` are italic;
197 | - `<code>`, `<samp>`, and `<kbd>` are monospaced;
198 | - `<sup>` and `<sub>` make superscript and subscript indexes;
199 | - `<mark>` highlights text with background color.
200 | 
201 | #### Quotes
202 | 
203 | Quotes are marked with `<blockquote>` element which contains one or more paragraphs:
204 | 
205 | 	<blockquote>
206 | 		<p>Flannel bicycle rights locavore selfies.</p>
207 | 	</blockquote>
208 | 
209 | To add quote’s author wrap a quote to a `<figure>` element and put a caption in the `<figcaption>` right after:
210 | 
211 | 	<figure>
212 | 		<blockquote>
213 | 			<p>Post-ironic fashion axe flexitarian</p>
214 | 		</blockquote>
215 | 		<figcaption>Yours Truly</figcaption>
216 | 	</figure>
217 | 
218 | #### Lists
219 | 
220 | For creating list you must use `ul` (`ol` for numerical list).
221 | 
222 | 	<ol>
223 | 		<li>Literally viral vegan</li>
224 | 		<li>Wes Anderson chillwave Marfa
225 | 			<ul>
226 | 				<li>Retro meh brunch aesthetic</li>
227 | 				<li>Messenger bag retro cred</li>
228 | 			</ul>
229 | 		</li>
230 | 	</ol>
231 | 
232 | You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation:
233 | 
234 | 	<h2>Inner navigation</h2>
235 | 	<ol>
236 | 		<li>I'll be seen right away.</li>
237 | 		<li>Just navigate to next slide and you'll see others.</li>
238 | 		<li class="next">Hey! It's all okay ?</li>
239 | 		<li class="next"> ... </li>
240 | 	</ol>
241 | 
242 | And even so:
243 | 
244 | 	<h2>Benefits</h2>
245 | 	<ol>
246 | 		<li class="next">The most important advantage</li>
247 | 		<li class="next">Less important advantage</li>
248 | 	</ol>
249 | 	<h2 class="next">Disadvantages</h2>
250 | 	<ol class="next">
251 | 		<li class="next">There's nothing here</li>
252 | 		<li class="next"> ... </li>
253 | 	</ol>
254 | 
255 | #### Columns
256 | 
257 | If you want to form text in two or three columns use `double` or `triple` class
258 | 
259 | 	<p class="double">
260 | 		Echo Park 8-bit sustainable umami deep v Kickstarter.
261 | 	</p>
262 | 
263 | Also work with lists:
264 | 
265 | 	<ul class="triple">
266 | 		<li>Occupy locavore blog</li>
267 | 		<li>Mustache you haven’t heard of</li>
268 | 		<li>Something else</li>
269 | 	</ul>
270 | 
271 | #### Tables
272 | 
273 | Create table by using usual `table`, `tr`, `th`
274 | 
275 | 	<table>
276 | 		<tr>
277 | 			<th scope="col">Gentrify</th>
278 | 			<th>Twee</th>
279 | 		</tr>
280 | 		<tr>
281 | 			<th scope="row">Messenger</th>
282 | 			<td>Mixtape</td>
283 | 		</tr>
284 | 	</table>
285 | 
286 | Class `striped` stylizes your table: even rows will turn gray background
287 | 
288 | 	<table class="striped">
289 | 
290 | #### Code
291 | 
292 | `Code` tag define your program code
293 | 
294 | 	<pre><code>function action() {
295 | 		// TODO
296 | 		return true;
297 | 	}</code></pre>
298 | 
299 | If you want to add lines numbers use next construction:
300 | 
301 | 	<pre>
302 | 		<code>function action() {</code>
303 | 		<code>	// TODO</code>
304 | 		<code>	return true;</code>
305 | 		<code>}<code>
306 | 	</pre>
307 | 
308 | When neccessary emphasize that code is commented, you need to use span element with `comment` class;
309 | If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background;
310 | 
311 | 	<pre><code>function <mark>action()</mark> {
312 | 		<span class="comment">// TODO<span>
313 | 		return <mark class="important">true</mark>;
314 | 	}</code></pre>
315 | 
316 | ### Elements
317 | 
318 | …
319 | 
320 | #### Cover
321 | 
322 | `Cover` class on img attribute indicates that picture will be background for slide
323 | 
324 | 	<section class="slide">
325 | 		<img class="cover" src="picture.png">
326 | 	</section>
327 | 
328 | To stretch the picture in width or height, you need to set a `width` or `height` class respectively;
329 | 
330 | Use both classes `width height`, if you want to stretch the picture in width and height
331 | 
332 | 	<img class="cover width" src="picture.png">
333 | 	<img class="cover height" src="picture.png">
334 | 	<img class="cover width height" src="picture.png">
335 | 
336 | Shortcut for `width`, `height`:
337 | 
338 | 	<img class="cover w" src="picture.png">
339 | 	<img class="cover h" src="picture.png">
340 | 
341 | To insert an image description, links to the author's site or other information use `figure` tag with `figcaption`
342 | 
343 | 	<figure>
344 | 		<img class="cover" src="picture.png">
345 | 		<figcaption class="white">
346 | 			© Yours Truly
347 | 		</figcaption>
348 | 	</figure>
349 | 
350 | #### Shout
351 | 
352 | There are slides, which need to be described in only a few words. Usually they display a call for action, define common themes, link to project or something else. To stylize this text, use the `shout` class.
353 | 
354 | 	<section class="slide">
355 | 		<h2 class="shout">Shout</h2>
356 | 	</section>
357 | 
358 | Add `grow` class to animate text from small to big size
359 | 
360 | 	<section class="slide">
361 | 		<h2 class="shout grow">Growing Shout</h2>
362 | 	</section>
363 | 
364 | Or, on the contrary, for animate text size from big to small add `shrink` class.
365 | 
366 | 	<section class="slide">
367 | 		<h2 class="shout shrink">Shrinking Shout</h2>
368 | 	</section>
369 | 
370 | #### Place
371 | 
372 | Use `place` class on img attribute give same effect as `cover` class - set background image
373 | 
374 | 	<section class="slide">
375 | 		<img class="place" src="picture.png">
376 | 	</section>
377 | 
378 | If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below
379 | 
380 | 	<img class="place top" src="picture.png">
381 | 	<img class="place right" src="picture.png">
382 | 	<img class="place bottom" src="picture.png">
383 | 	<img class="place left" src="picture.png">
384 | 
385 | You can also combine classes for location in corners:
386 | 
387 | 	<img class="place top left" src="picture.png">
388 | 	<img class="place top right" src="picture.png">
389 | 	<img class="place bottom left" src="picture.png">
390 | 	<img class="place bottom right" src="picture.png">
391 | 
392 | #### Notes
393 | 
394 | When neccessary to add some notes for slide, you may use `footer` class, that hide your notes at all time and show them when you hover to slide:
395 | 
396 | 	<section class="slide">
397 | 		<p>Retro meh brunch aesthetic.</p>
398 | 		<footer class="footer">
399 | 			<p>Cosby sweater Shoreditch.</p>
400 | 		</footer>
401 | 	</section>
402 | 
403 | 


--------------------------------------------------------------------------------
/docs/images/logitech.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/docs/images/logitech.png


--------------------------------------------------------------------------------
/docs/images/material-canvas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/docs/images/material-canvas.png


--------------------------------------------------------------------------------
/docs/images/material-printing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/docs/images/material-printing.png


--------------------------------------------------------------------------------
/docs/images/ribbon-canvas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/docs/images/ribbon-canvas.png


--------------------------------------------------------------------------------
/docs/images/ribbon-printing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/docs/images/ribbon-printing.png


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | test
2 | 


--------------------------------------------------------------------------------
/docs/logitech.md:
--------------------------------------------------------------------------------
 1 | # Logitech Spotlight
 2 | 
 3 | There’s a brand new [Logitech Spotlight](http://www.logitech.com/en-us/product/spotlight-presentation-remote) presentation remote, which is already fully compatible with Shower: you can switch between slides, hover and click your presentation. But you can make the most of it by enabling two additional shortcuts in Logitech Presentation application, available for macOS and Windows.
 4 | 
 5 | 1. [Download](http://support.logitech.com/en_us/software/logi-presentation) and install an app.
 6 | 2. Go to the main menu and locate additional shortcuts options.
 7 | 3. Change _Hold Next Button_ to `Cmd Enter` for macOS or `Shift F5` for Windows (just press it).
 8 | 4. Change _Hold Back Button_ to `Esc` (just press it).
 9 | 
10 | <img src="images/logitech.png" width="300" alt="Logitech Presenter application">
11 | 
12 | You might have to enable accessibility access on macOS in order to use this features. App will ask you once it’s needed.
13 | 
14 | Now when all is set you can:
15 | 
16 | - Start your presentation by holding next button: from the first slide (if none selected) or from the current slide (if there’s one).
17 | - Exit full screen mode by holding back button. It might be useful when you need to find a certain slide and navigate the list.
18 | 


--------------------------------------------------------------------------------
/docs/printing.md:
--------------------------------------------------------------------------------
 1 | # Printing
 2 | 
 3 | You can export your presentation to PDF by sending it to print in list mode in Chrome and Opera desktop browsers.
 4 | 
 5 | 1. Press `Cmd P` or `Ctrl P`
 6 | 2. Select PDF in targets list
 7 | 3. Save resulted file
 8 | 
 9 | ![Printing dialog](images/ribbon-printing.png)
10 | 
11 | ## Other options
12 | 
13 | You could also try [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) and such console utilities for printing, although not complete modern CSS features support and complicated configuration make them less convenient.
14 | 


--------------------------------------------------------------------------------
/docs/shortcuts.md:
--------------------------------------------------------------------------------
 1 | # Keyboard Shortcuts
 2 | 
 3 | You can navigate between slides, start and stop presentation using keyboard shortcuts.
 4 | 
 5 | - [Start and Stop](#start-and-stop)
 6 | - [Forward](#forward)
 7 | - [Backward](#backward)
 8 | - [First and Last](#first-and-last)
 9 | 
10 | ## Start and Stop
11 | 
12 | - Start from the current slide: `Cmd Enter`, `Shift F5`, `Cmd Option P`
13 | - Start from the first slide `Cmd Shift Enter`
14 | - Stop: `Esc` key
15 | 
16 | ## Forward
17 | 
18 | - `Right` and `Down` arrows
19 | - `Page Down` key or `Fn Down` on Mac
20 | - `N` for “next”, `J` or `L` keys
21 | - `Enter` key
22 | - `Space` key during presentation
23 | 
24 | ## Backward
25 | 
26 | - `Left` and `Up` arrows
27 | - `Page Up` key or `Fn Up` on Mac
28 | - `P` for “previous”, `K` or `H` keys, like in vim
29 | - `Shift Enter` key
30 | - `Shift Space` key during presentation
31 | 
32 | ## First and Last
33 | 
34 | - First slide: `Home` key or `Fn Left` on Mac
35 | - Last slide: `End` key or `Fn Right` on Mac
36 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | const del = require('del');
  2 | const fs = require('fs');
  3 | const gulp = require('gulp');
  4 | const merge = require('merge-stream');
  5 | const rename = require('gulp-rename');
  6 | const replace = require('gulp-replace');
  7 | const rsync = require('gulp-rsync');
  8 | const sequence = require('run-sequence');
  9 | const zip = require('gulp-zip');
 10 | const pages = require('gulp-gh-pages');
 11 | const browserSync = require('browser-sync').create();
 12 | const rollup = require('gulp-better-rollup');
 13 | const resolve = require('rollup-plugin-node-resolve');
 14 | 
 15 | gulp.task('scripts', () => {
 16 |     gulp.src([
 17 |         './custom/main.js'
 18 |     ])
 19 |         .pipe(rollup({
 20 |                 plugins: [
 21 |                     resolve({
 22 |                         customResolveOptions: {
 23 |                             moduleDirectory: 'node_modules'
 24 |                         }
 25 |                     }),
 26 |                 ],
 27 |                 external: ['rxjs']
 28 |             },
 29 |             'iife'
 30 |         ))
 31 |         .pipe(rename('custom-scripts.js'))
 32 |         .pipe(gulp.dest('./'));
 33 | });
 34 | 
 35 | gulp.task('prepare', () => {
 36 | 
 37 |     const shower = gulp.src([
 38 |         '**',
 39 |         '!docs{,/**}',
 40 |         '!node_modules{,/**}',
 41 |         '!prepared{,/**}',
 42 |         '!utils{,/**}',
 43 |         '!CONTRIBUTING.md',
 44 |         '!LICENSE.md',
 45 |         '!README.md',
 46 |         '!gulpfile.js',
 47 |         '!package.json',
 48 |         '!package-lock.json'
 49 |     ])
 50 |         .pipe(replace(
 51 |             /(<link.*href=")(node_modules\/tinkoff-shower)([^\/]*)\/(.*\.(css|png)">)/g,
 52 |             '$1shower/themes/tinkoff$3/$4', {skipBinary: true}
 53 |         ))
 54 |         .pipe(replace(
 55 |             /(<link rel="stylesheet" href=")(node_modules\/shower-)([^\/]*)\/(.*\.css">)/g,
 56 |             '$1shower/themes/$3/$4', {skipBinary: true}
 57 |         ))
 58 |         .pipe(replace(
 59 |             /(<script src=")(node_modules\/shower-core\/)(shower.min.js"><\/script>)/g,
 60 |             '$1shower/$3', {skipBinary: true}
 61 |         ))
 62 |         .pipe(replace(
 63 |             /(<script src=")(node_modules\/rxjs\/bundles\/)(rxjs.umd.min.js"><\/script>)/g,
 64 |             '$1dist/$3', {skipBinary: true}
 65 |         ));
 66 | 
 67 | 
 68 |     const core = gulp.src([
 69 |         'shower.min.js'
 70 |     ], {
 71 |         cwd: 'node_modules/shower-core'
 72 |     })
 73 |         .pipe(rename((path) => {
 74 |             path.dirname = 'shower/' + path.dirname;
 75 |         }));
 76 | 
 77 |     const rx = gulp.src([
 78 |         'rxjs.umd.min.js'
 79 |     ], {
 80 |         cwd: 'node_modules/rxjs/bundles'
 81 |     })
 82 |         .pipe(rename((path) => {
 83 |             path.dirname = 'dist/' + path.dirname;
 84 |         }));
 85 | 
 86 |     const material = gulp.src([
 87 |         '**', '!package.json'
 88 |     ], {
 89 |         cwd: 'node_modules/shower-material'
 90 |     })
 91 |         .pipe(rename((path) => {
 92 |             path.dirname = 'shower/themes/material/' + path.dirname;
 93 |         }))
 94 | 
 95 |     const ribbon = gulp.src([
 96 |         '**', '!package.json'
 97 |     ], {
 98 |         cwd: 'node_modules/shower-ribbon'
 99 |     })
100 |         .pipe(rename((path) => {
101 |             path.dirname = 'shower/themes/ribbon/' + path.dirname;
102 |         }));
103 | 
104 |     const tinkoff = gulp.src([
105 |         '**', '!package.json'
106 |     ], {
107 |         cwd: 'node_modules/tinkoff-shower'
108 |     })
109 |         .pipe(rename((path) => {
110 |             path.dirname = 'shower/themes/tinkoff/' + path.dirname;
111 |         }));
112 | 
113 |     const themes = merge(tinkoff)
114 |         .pipe(replace(
115 |             /(<script src=")(\/shower-core\/)(shower.min.js"><\/script>)/,
116 |             '$1../../$3', {skipBinary: true}
117 |         ));
118 | 
119 |     return merge(shower, rx, core, themes)
120 |         .pipe(gulp.dest('prepared'));
121 | 
122 | });
123 | 
124 | gulp.task('zip', () => {
125 |     return gulp.src('prepared/**')
126 |         .pipe(zip('archive.zip'))
127 |         .pipe(gulp.dest('.'));
128 | });
129 | 
130 | gulp.task('upload', () => {
131 |     return gulp.src('prepared/**')
132 |         .pipe(pages())
133 | });
134 | 
135 | gulp.task('archive', (callback) => {
136 |     sequence(
137 |         'prepare',
138 |         'zip',
139 |         'clean', callback
140 |     )
141 | });
142 | 
143 | gulp.task('publish', (callback) => {
144 |     sequence(
145 |         'prepare',
146 |         'upload',
147 |         'clean', callback
148 |     )
149 | });
150 | 
151 | gulp.task('clean', () => {
152 |     return del('prepared/**');
153 | });
154 | 
155 | gulp.task('serve', ['scripts'], () => {
156 |     browserSync.init({
157 |         ui: false,
158 |         notify: false,
159 |         port: 3000,
160 |         server: {
161 |             baseDir: '.'
162 |         }
163 |     });
164 | 
165 |     gulp.watch('index.html').on('change', () => {
166 |         browserSync.reload();
167 |     });
168 |     gulp.watch('custom/*.js', ['scripts']);
169 | });
170 | 
171 | gulp.task('default', ['serve']);
172 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <title>RxJS: введение</title>
   5 |     <meta charset="utf-8">
   6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
   7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
   8 |     <link rel="stylesheet" href="node_modules/tinkoff-shower/theme/styles.css">
   9 |     <link rel="stylesheet" href="custom/styles.css">
  10 | 
  11 |     <link rel="icon" sizes="16x16" href="pictures/favicon-16x16.png">
  12 |     <link rel="icon" sizes="32x32" href="pictures/favicon-32x32.png">
  13 |     <link rel="icon" sizes="96x96" href="pictures/favicon-96x96.png">
  14 | </head>
  15 | <body class="shower list stachka">
  16 | 
  17 | <template id="timeline-template" class="hidden">
  18 |     <div class="timeline" style="width: 0px;"></div>
  19 | </template>
  20 | 
  21 | <header class="caption">
  22 |     <h1>RxJS: введение</h1>
  23 | </header>
  24 | 
  25 | <section class="slide invert" id="cover">
  26 |     <div class="intro">
  27 |         <img width="300" class="intro-img" src="pictures/rxjs-logo.png" alt="RxJS">
  28 |     </div>
  29 |     <div class="cover-title">
  30 |         <h2>RxJS<br>введение</h2>
  31 |     </div>
  32 | </section>
  33 | 
  34 | <section class="slide">
  35 |     <h2 class="slide-header">Привет</h2>
  36 |     <div class="two-columns">
  37 |         <div>
  38 |             <img src="pictures/author.png" width="100%" alt="">
  39 |         </div>
  40 |         <div>
  41 |             <br>
  42 |             <h2>Андрей Алексеев</h2>
  43 |             <p class="nowrap">
  44 |                 <span class="emoji">👨‍💻</span>
  45 |                 <a href="https://www.tinkoff.ru/business/"
  46 |                    target="_blank"
  47 |                    rel="noopener noreferrer">Tinkoff business</a>
  48 |             </p>
  49 |             <p class="nowrap">
  50 |                 <span class="emoji">👨‍🏫</span>
  51 |                 <a href="https://fintech.tinkoff.ru/"
  52 |                    target="_blank"
  53 |                    rel="noopener noreferrer">Tinkoff Fintech School</a></p>
  54 |         </div>
  55 |     </div>
  56 | </section>
  57 | 
  58 | <section class="slide">
  59 |     <h2 class="slide-header">О чем поговорим</h2>
  60 |     <div class="slide-description">
  61 |         <ul>
  62 |             <li>Реактивный подход</li>
  63 |             <li>Observable</li>
  64 |             <li>Операторы Rx</li>
  65 |             <li>Демо</li>
  66 |             <li>Subjects</li>
  67 |         </ul>
  68 |     </div>
  69 | </section>
  70 | 
  71 | <section class="slide">
  72 |     <h2 class="slide-header">Реактивный подход</h2>
  73 |     <div class="slide-description">
  74 |         <img class="img-boxed" width="526" src="pictures/table-1.png" alt="A1 = 1; B1 = 3; C1 = A1 + B1 = 4">
  75 | 
  76 |         <div class="two-columns">
  77 |             <div>
  78 |                 <p class="excel next">
  79 |                     <code>A1 = 1; B1 = 3;</code>
  80 |                     <br>
  81 |                     <code>
  82 |                         <mark>C1 = A1 + B1;</mark>
  83 |                     </code>
  84 |                 </p>
  85 |             </div>
  86 |         </div>
  87 |     </div>
  88 | </section>
  89 | 
  90 | <section class="slide">
  91 |     <h2 class="slide-header">Реактивный подход</h2>
  92 |     <div class="slide-description">
  93 |         <img class="img-boxed" width="526" src="pictures/table-1.png" alt="A1 = 1; B1 = 3; C1 = A1 + B1 = 4">
  94 | 
  95 |         <div class="two-columns">
  96 |             <div>
  97 |                 <p class="excel">
  98 |                     <code>A1 = 1; B1 = 3;</code>
  99 |                     <br>
 100 |                     <code>C1 = A1 + B1;</code>
 101 |                     <br>
 102 |                     <code>
 103 |                         <mark>C1 ~ 4;</mark>
 104 |                     </code>
 105 |                 </p>
 106 |             </div>
 107 |         </div>
 108 |     </div>
 109 | </section>
 110 | 
 111 | <section class="slide">
 112 |     <h2 class="slide-header">Реактивный подход</h2>
 113 |     <div class="slide-description">
 114 |         <img class="img-boxed" width="526" src="pictures/table-2.png" alt="A1 = 2; B1 = 3; C1 = A1 + B1 = 4">
 115 | 
 116 |         <div class="two-columns">
 117 |             <div>
 118 |                 <p class="excel">
 119 |                     <code>A1 = 1; B1 = 3;</code>
 120 |                     <br>
 121 |                     <code>C1 = A1 + B1;</code>
 122 |                     <br>
 123 |                     <code>C1 ~ 4;</code>
 124 |                 </p>
 125 |                 <p class="excel">
 126 |                     <code>
 127 |                         <mark>A1 = 2;</mark>
 128 |                     </code>
 129 |                 </p>
 130 |             </div>
 131 |         </div>
 132 |     </div>
 133 | </section>
 134 | 
 135 | <section class="slide">
 136 |     <h2 class="slide-header">Реактивный подход</h2>
 137 |     <div class="slide-description">
 138 |         <img class="img-boxed" width="526" src="pictures/table-3.png" alt="A1 = 2; B1 = 3; C1 = A1 + B1 = 5">
 139 |         <div class="two-columns">
 140 |             <div>
 141 |                 <p class="excel">
 142 |                     <code>A1 = 1; B1 = 3;</code>
 143 |                     <br>
 144 |                     <code>C1 = A1 + B1;</code>
 145 |                     <br>
 146 |                     <code>C1 ~ 4;</code>
 147 |                 </p>
 148 |                 <p class="excel">
 149 |                     <code>A1 = 2;</code>
 150 |                     <br>
 151 |                     <code>
 152 |                         <mark>C1 ~ 5;</mark>
 153 |                     </code>
 154 |                 </p>
 155 |             </div>
 156 |         </div>
 157 |     </div>
 158 | </section>
 159 | 
 160 | <section class="slide">
 161 |     <h2 class="slide-header">Реактивный подход</h2>
 162 |     <div class="slide-description">
 163 |         <div class="two-columns">
 164 |             <div>
 165 |                 <p>
 166 |                     <strong>Push-стратегия</strong>
 167 |                 </p>
 168 |                 <p class="excel">
 169 |                     <code>A1 = 1; B1 = 3;</code>
 170 |                     <br>
 171 |                     <code>C1 = A1 + B1;</code>
 172 |                     <br>
 173 |                     <code>C1 ~ 4;</code>
 174 |                 </p>
 175 |                 <p class="excel">
 176 |                     <code>A1 = 2;</code>
 177 |                     <br>
 178 |                     <code>C1 ~ 5;</code>
 179 |                 </p>
 180 |             </div>
 181 |             <div>
 182 |             </div>
 183 |         </div>
 184 |     </div>
 185 | </section>
 186 | 
 187 | <section class="slide">
 188 |     <h2 class="slide-header">Императивный подход</h2>
 189 |     <div class="slide-description">
 190 |         <div class="two-columns">
 191 |             <div>
 192 |                 <p>
 193 |                     <strong>Push-стратегия</strong>
 194 |                 </p>
 195 |                 <p class="excel">
 196 |                     <code>A1 = 1; B1 = 3;</code>
 197 |                     <br>
 198 |                     <code>C1 = A1 + B1;</code>
 199 |                     <br>
 200 |                     <code>C1 ~ 4;</code>
 201 |                 </p>
 202 |                 <p class="excel">
 203 |                     <code>A1 = 2;</code>
 204 |                     <br>
 205 |                     <code>C1 ~ 5;</code>
 206 |                 </p>
 207 |             </div>
 208 |             <div>
 209 |                 <p>
 210 |                     <strong>Pull-статегия</strong>
 211 |                 </p>
 212 |                 <p class="excel next">
 213 |                     <code>A1 = 1; B1 = 3;</code>
 214 |                     <br>
 215 |                     <code>C1 = A1 + B1;</code>
 216 |                     <br>
 217 |                     <code class="next">C1 ~ 4;</code>
 218 |                 </p>
 219 |                 <p class="excel next">
 220 |                     <code>A1 = 2;</code>
 221 |                     <br>
 222 |                     <code class="next">
 223 |                         <mark>C1 ~ 4;</mark>
 224 |                     </code>
 225 |                 </p>
 226 |             </div>
 227 |         </div>
 228 |     </div>
 229 | </section>
 230 | 
 231 | <section class="slide">
 232 |     <h2 class="shout">
 233 |         Push / Pull
 234 |     </h2>
 235 |     <div class="notify-wrap push-pull-example next">
 236 |         <div class="notify-baloon">
 237 |             <div class="notify-head notify-clearfix"><a class="notify-close" role="link" title="Закрыть"
 238 |                                                         aria-label="Закрыть">
 239 |                 <svg width="12" height="12" viewPort="0 0 12 12" version="1.1"
 240 |                      xmlns="http://www.w3.org/2000/svg">
 241 |                     <line x1="1" y1="11"
 242 |                           x2="11" y2="1"
 243 |                           stroke="white"
 244 |                           stroke-width="2"/>
 245 |                     <line x1="1" y1="1"
 246 |                           x2="11" y2="11"
 247 |                           stroke="white"
 248 |                           stroke-width="2"/>
 249 |                 </svg>
 250 | 
 251 |             </a>
 252 |                 <span class="notify-title">Новое сообщение</span></div>
 253 |             <div class="notify-body notify-clearfix">
 254 |                 <div class="notify-image-wrap"><a href="https://reactivex.io/rxjs/"><img src="pictures/rxJs.png"
 255 |                                                                                          class="notify-image"></a></div>
 256 |                 <div class="notify-baloon-msg"><a href="https://reactivex.io/rxjs/">Реактивный подход</a>
 257 |                     прислал Вам личное сообщение.
 258 |                 </div>
 259 |             </div>
 260 |         </div>
 261 |     </div>
 262 | 
 263 |     <div class="modal-container push-pull-example next">
 264 |         <div class="modal-title-wrap">
 265 |             <div class="modal-close" aria-label="Закрыть" tabindex="0" role="button">
 266 |                 <svg width="12" height="12" viewPort="0 0 12 12" version="1.1"
 267 |                      xmlns="http://www.w3.org/2000/svg">
 268 |                     <line x1="1" y1="11"
 269 |                           x2="11" y2="1"
 270 |                           stroke="white"
 271 |                           stroke-width="2"/>
 272 |                     <line x1="1" y1="1"
 273 |                           x2="11" y2="11"
 274 |                           stroke="white"
 275 |                           stroke-width="2"/>
 276 |                 </svg>
 277 |             </div>
 278 |             <div class="modal-title">Новое сообщение</div>
 279 |         </div>
 280 |         <div class="modal-body">
 281 |             <div class="modal-user-info">
 282 |                 <div class="modal-image-wrap">
 283 |                     <img class="modal-image"
 284 |                          src="pictures/palpatin-50.png">
 285 |                 </div>
 286 |                 <div class="modal-user-text">
 287 |                     <a href="#" class="modal-link">Императивный подход</a>
 288 |                     <div class="modal-user-status"> был в докладе 1 слайд назад</div>
 289 |                 </div>
 290 |             </div>
 291 |             <div class="modal-msg"></div>
 292 |             <div class="modal-controls">
 293 |                 <button class="modal-btn">Отправить</button>
 294 |             </div>
 295 |         </div>
 296 |     </div>
 297 | </section>
 298 | 
 299 | <section class="slide">
 300 |     <h2 class="slide-header">Push value</h2>
 301 |     <div class="slide-description">
 302 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-1.png" alt="Единственное значение">
 303 |     </div>
 304 | </section>
 305 | 
 306 | <section class="slide">
 307 |     <h2 class="slide-header">Promise — асинхронное значение</h2>
 308 |     <div class="slide-description">
 309 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-2.png"
 310 |              alt="Асинхронное значение — Promise">
 311 |     </div>
 312 | </section>
 313 | 
 314 | <section class="slide">
 315 |     <h2 class="slide-header">Множественное значение</h2>
 316 |     <div class="slide-description">
 317 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-3.png"
 318 |              alt="Множественное значение">
 319 |     </div>
 320 | </section>
 321 | 
 322 | <section class="slide">
 323 |     <h2 class="slide-header">Iterable</h2>
 324 |     <div class="slide-description">
 325 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-4.png"
 326 |              alt="Множественное значение - Iterable">
 327 |     </div>
 328 | </section>
 329 | 
 330 | <section class="slide">
 331 |     <h2 class="slide-header">И множественное, и асинхронное?</h2>
 332 |     <div class="slide-description">
 333 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-5.png"
 334 |              alt="Асинхронное и множественное значение">
 335 |     </div>
 336 | </section>
 337 | 
 338 | <section class="slide">
 339 |     <h2 class="slide-header">Observable</h2>
 340 |     <div class="slide-description">
 341 |         <img width="800" class="img-centered" src="pictures/rx-stachka-table-6.png"
 342 |              alt="Observable">
 343 |     </div>
 344 | </section>
 345 | 
 346 | <section class="slide">
 347 |     <h2 class="shout shout-small">
 348 |         Поток событий
 349 |     </h2>
 350 | </section>
 351 | 
 352 | <section class="slide">
 353 |     <h2 class="slide-header">Поток событий</h2>
 354 |     <div class="slide-description">
 355 |         <img width="727" class="img-centered" src="pictures/rxjs-clicks-1.png" alt="Поток кликов">
 356 |     </div>
 357 | </section>
 358 | 
 359 | <section class="slide">
 360 |     <h2 class="slide-header">Поток событий</h2>
 361 |     <div class="slide-description">
 362 |         <img width="727" class="img-centered" src="pictures/rxjs-clicks-2.png" alt="Поток кликов">
 363 |     </div>
 364 | </section>
 365 | 
 366 | <section class="slide">
 367 |     <h2 class="slide-header">Поток событий</h2>
 368 |     <div class="slide-description">
 369 |         <img width="727" class="img-centered" src="pictures/rxjs-clicks-2-2.png" alt="Поток кликов">
 370 |     </div>
 371 | </section>
 372 | 
 373 | <section class="slide">
 374 |     <h2 class="slide-header">Поток событий</h2>
 375 |     <div class="slide-description">
 376 |         <img width="727" class="img-centered" src="pictures/rxjs-clicks-3.png" alt="Поток кликов">
 377 |     </div>
 378 | </section>
 379 | 
 380 | <section class="slide">
 381 |     <h2 class="slide-header">Поток событий</h2>
 382 |     <div class="slide-description">
 383 |         <img width="727" class="img-centered" src="pictures/rxjs-clicks-4.png" alt="Поток кликов">
 384 |     </div>
 385 | </section>
 386 | 
 387 | <section class="slide">
 388 |     <h2 class="slide-header">Поток событий</h2>
 389 |     <div class="slide-description">
 390 |         <pre>
 391 |             <code><mark><span
 392 |                 class="rxjs-creation">from</span>([{x: 11, y: 99}, {x: 91, y: 151}, {x: 152, y: 106}]).<span
 393 |                 class="rxjs-pipe">pipe</span>(</mark></code>
 394 |             <code class="next">    <span class="rxjs-operator">map</span>((value) => { ... }),</code>
 395 |             <code class="next">    <span class="rxjs-operator">filter</span>((value) => { ... }),</code>
 396 |             <code class="next">    <span class="rxjs-operator">reduce</span>((acc, curr) => { ... })</code>
 397 |             <div class="next">
 398 |                 <code>).<span class="rxjs-subscribe">subscribe</span>(result => {</code>
 399 |             <code>    console.log(result);</code>
 400 |             <code>});</code>
 401 |             </div>
 402 |         </pre>
 403 |     </div>
 404 | </section>
 405 | 
 406 | <section class="slide">
 407 |     <h2 class="shout shout-small">
 408 |         Поток событий
 409 |         <br>~<br>
 410 |         массив,
 411 |         распределенный
 412 |         во&nbsp;времени
 413 |         <br><br>
 414 |     </h2>
 415 | </section>
 416 | 
 417 | <section class="slide">
 418 |     <h2 class="shout">
 419 |         Observable
 420 |         <br>
 421 |         <small class="nowrap">Observer pattern + Iterator pattern</small>
 422 |     </h2>
 423 | </section>
 424 | 
 425 | <section class="slide">
 426 |     <h2 class="slide-header">Observer pattern</h2>
 427 |     <div class="slide-description">
 428 |         <small>
 429 |             <pre>
 430 |                 <code>class Subject {</code>
 431 |                 <div class="next">
 432 |                 <code>    constructor() {</code>
 433 |                 <code>        this.observers = [];</code>
 434 |                 <code>    }</code>
 435 |                 </div>
 436 |                 <code class="next">    add(observer) {...}</code>
 437 |                 <code class="next">    remove(observer) {...}</code>
 438 |                 <div class="next">
 439 |                 <code>    notify(value) {</code>
 440 |                 <code>        this.observers.forEach(observer => {</code>
 441 |                     <code>            observer.<mark>update(value)</mark></code>
 442 |                 <code>        });</code>
 443 |                 <code>    }</code>
 444 |                 </div>
 445 |                 <code>}</code>
 446 |             </pre>
 447 |         </small>
 448 |     </div>
 449 | </section>
 450 | 
 451 | <section class="slide">
 452 |     <h2 class="slide-header">Observer pattern</h2>
 453 |     <div class="slide-description">
 454 |         <br>
 455 |         <img width="798" class="img-centered" src="pictures/observer-pattern.png" alt="Observer">
 456 |     </div>
 457 | </section>
 458 | 
 459 | <section class="slide">
 460 |     <h2 class="slide-header">Observer pattern</h2>
 461 |     <div class="slide-description">
 462 |         <p><strong>Субъект</strong> изменяет значения.
 463 |             <br>
 464 |             Также называется <strong>Observable</strong>, наблюдаемый объект.</p>
 465 |         <p><strong>Наблюдатель (Observer)</strong> реагирует на&nbsp;изменения.</p>
 466 |     </div>
 467 | </section>
 468 | 
 469 | <section class="slide">
 470 |     <h2 class="slide-header">Iterator pattern</h2>
 471 |     <div class="slide-description">
 472 |         <small>
 473 |             <pre>
 474 |                 <code>class Iterator {</code>
 475 |                 <div class="next">
 476 |                 <code> </code>
 477 |                 <code>    next() {...}</code>
 478 |                 </div>
 479 |                 <div class="next">
 480 |                 <code> </code>
 481 |                 <code>    hasNext() {...}</code>
 482 |                 <code> </code>
 483 |                 <code>}</code>
 484 |                 </div>
 485 |             </pre>
 486 |         </small>
 487 |     </div>
 488 | </section>
 489 | 
 490 | <section class="slide">
 491 |     <h2 class="slide-header">Iterator pattern</h2>
 492 |     <div class="slide-description">
 493 |         <ul>
 494 |             <li>последовательный обход составных объектов</li>
 495 |             <li>не раскрывается внутреннее представление</li>
 496 |         </ul>
 497 |         <img width="798" class="img-centered" src="pictures/iterator-pattern.png" alt="Observer">
 498 |     </div>
 499 | </section>
 500 | 
 501 | <section class="slide">
 502 |     <h2 class="shout">
 503 |         Observable
 504 |     </h2>
 505 | </section>
 506 | 
 507 | <section class="slide">
 508 |     <h2 class="slide-header">Observable</h2>
 509 |     <div class="slide-description">
 510 |         <div class="playground" id="observableDef"></div>
 511 |         <button class="btn btn-play" onclick="run(observableDef, this)">▶</button>
 512 |     </div>
 513 |     <small>
 514 |         <pre>
 515 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((observer) => {</code>
 516 |                 <code>    observer.next(1);</code>
 517 |                 <code>    setTimeout(() => { observer.next(2);},    1000);</code>
 518 |                 <code>    setTimeout(() => { observer.next(3);},    2000);</code>
 519 |                 <code>    setTimeout(() => { observer.complete();}, 3000);</code>
 520 |                 <code>});</code>
 521 |                 <code>const subscribtion = stream$.<span class="rxjs-subscribe">subscribe</span>({</code>
 522 |                 <code>    next: (value) => renderNext(value),</code>
 523 |                 <code>    error: (error) => renderError(error),</code>
 524 |                 <code>    complete: () => renderComplete()</code>
 525 |                 <code>});</code>
 526 |         </pre>
 527 |     </small>
 528 |     <script>
 529 |         function observableDef() {
 530 |             const playgroundElement = document.getElementById('observableDef');
 531 |             playgroundElement.innerHTML = '';
 532 | 
 533 |             const stream$ = rxjs.Observable.create((observer) => {
 534 |                 observer.next(1);
 535 |                 setTimeout(() => {
 536 |                     observer.next(2);
 537 |                 }, 1000);
 538 |                 setTimeout(() => {
 539 |                     observer.next(3);
 540 |                 }, 2000);
 541 |                 setTimeout(() => {
 542 |                     observer.complete()
 543 |                 }, 3000);
 544 |             });
 545 | 
 546 |             startStream(playgroundElement, stream$);
 547 |         }
 548 |     </script>
 549 | </section>
 550 | 
 551 | <section class="slide">
 552 |     <h2 class="slide-header">Observable</h2>
 553 |     <div class="slide-description">
 554 |         <p>
 555 |             <mark>Observable</mark>
 556 |             – наблюдаемый объект, доставляет&nbsp;изменения в подписку.
 557 |         </p>
 558 |     </div>
 559 |     <small>
 560 |         <pre>
 561 |             <code>const <mark class="highlight next">stream$</mark> = <mark><span class="rxjs-creation">Observable.create</span></mark>((observer) => {...});</code>
 562 |             <code> </code>
 563 |             <code>const subscribtion = stream$.<mark class="highlight next"><span
 564 |                 class="rxjs-subscribe">subscribe</span></mark>(...);</code>
 565 |         </pre>
 566 |     </small>
 567 | </section>
 568 | 
 569 | <section class="slide">
 570 |     <h2 class="slide-header">Observable</h2>
 571 |     <div class="slide-description">
 572 |         <p>
 573 |             <mark>Observer</mark>
 574 |             – объект-наблюдатель,
 575 |             <br>
 576 |             опциональные обработчики next/error/complete
 577 |         </p>
 578 |     </div>
 579 |     <small>
 580 |         <pre>
 581 |             <code>const subscribtion = stream$.<span class="rxjs-subscribe">subscribe</span>(</code>
 582 |             <code>    {</code>
 583 |             <code>        next: <span class="next">(value) => renderNext(value),</span></code>
 584 |             <code>        error: <span class="next">(error) => renderError(error),</span></code>
 585 |             <code>        complete: <span class="next">() => renderComplete()</span></code>
 586 |             <code>    }</code>
 587 |             <code>);</code>
 588 |             <div class="next">
 589 |             <code>stream$.<span
 590 |                 class="rxjs-subscribe">subscribe</span>((value) => renderNext(value));</code>
 591 |             </div>
 592 |         </pre>
 593 |     </small>
 594 | </section>
 595 | 
 596 | <section class="slide">
 597 |     <h2 class="slide-header">Observable</h2>
 598 |     <div class="slide-description">
 599 |         <p>
 600 |             <mark>Функция создания</mark>
 601 |             определяет, <br>как наблюдатель
 602 |             будет получать значения.
 603 |         </p>
 604 |     </div>
 605 |     <small>
 606 |         <pre>
 607 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((<span class="rxjs-operator">observer</span>) => {</code>
 608 |             <code class="next">    <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">1</span>);</code>
 609 |             <code class="next">    setTimeout(() => { <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">2</span>);},    1000);</code>
 610 |             <code class="next">    setTimeout(() => { <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">3</span>);},    2000);</code>
 611 |             <code class="next">    setTimeout(() => { <span class="rxjs-operator">observer</span>.complete();}, 3000);</code>
 612 |             <code>});</code>
 613 |             <br>
 614 |             <code class="next">stream$.<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 615 |         </pre>
 616 |     </small>
 617 |     <div class="playground next">
 618 |         <div class="timeline" style="width: 300.8px; color: rgb(251, 0, 13); transition-duration: 0s;">
 619 |             <div class="entry" style="left: 0.6px;">1</div>
 620 |             <div class="entry" style="left: 100.7px;">2</div>
 621 |             <div class="entry" style="left: 200.7px;">3</div>
 622 |             <div class="entry-complete" style="left: 300.7px;"></div>
 623 |         </div>
 624 |     </div>
 625 | </section>
 626 | 
 627 | <section class="slide">
 628 |     <h2 class="slide-header">Observable</h2>
 629 |         <small>
 630 |         <pre>
 631 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((<span class="rxjs-operator">observer</span>) => {</code>
 632 |             <code>    <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">1</span>);</code>
 633 |             <code>    setTimeout(() => { <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">2</span>);},    1000);</code>
 634 |             <code>    setTimeout(() => { <span class="rxjs-operator">observer</span>.next(<span class="rxjs-operator">3</span>);},    2000);</code>
 635 |             <code>    setTimeout(() => { <span class="rxjs-operator">observer</span>.complete();}, 3000);</code>
 636 |             <code>});</code>
 637 |             <br>
 638 |             <code>const promise = new Promise((<span class="rxjs-operator">resolve</span>, <span class="rxjs-operator">reject</span>) => {</code>
 639 |             <code>  <span class="rxjs-operator">resolve</span>(<span class="rxjs-operator">1</span>);</code>
 640 |             <code>});</code>
 641 |         </pre>
 642 |         </small>
 643 | </section>
 644 | 
 645 | <section class="slide">
 646 |     <h2 class="slide-header">Observable</h2>
 647 |     <div class="slide-description">
 648 |         <p>
 649 |             <mark>Subscribtion</mark>
 650 |             – подписка. <br>Старт получения значений.
 651 |         </p>
 652 |     </div>
 653 |     <small>
 654 |         <pre>
 655 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((observer) => {...});</code>
 656 |             <code> </code>
 657 |             <code>const <mark>subscribtion</mark> = stream$.<span class="rxjs-subscribe">subscribe</span>(...);</code>
 658 |             <code class="next">subscribtion.<span class="rxjs-subscribe">unsubscribe</span>();</code>
 659 |         </pre>
 660 |     </small>
 661 | </section>
 662 | 
 663 | <section class="slide">
 664 |     <h2 class="slide-header">Observable</h2>
 665 |     <div class="slide-description">
 666 |         <p>
 667 |             <mark>unsubscribe</mark> – завершение получения значений.
 668 |         </p>
 669 |     </div>
 670 |     <small>
 671 |         <pre>
 672 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((observer) => {</code>
 673 |             <code>    const interval = setInterval(() => observer.next(1), 1000);</code>
 674 |             <div class="next invisible-next">
 675 |             <code> </code>
 676 |             <code>    <mark>return function unsubscribe()</mark> { </code>
 677 |             <code>        clearInterval(interval);</code>
 678 |             <code>    }</code>
 679 |             </div>
 680 |             <code>});</code>
 681 |             <code> </code>
 682 |             <code>const subscribtion = stream$.<span class="rxjs-subscribe">subscribe</span>(...);</code>
 683 |             <code>subscribtion.<mark><span class="rxjs-subscribe">unsubscribe</span>();</mark></code>
 684 |         </pre>
 685 |     </small
 686 | </section>
 687 | 
 688 | <section class="slide">
 689 |     <h2 class="slide-header">Observable</h2>
 690 |     <div class="slide-description">
 691 |         <p>
 692 |             Нет подписки — нет потока
 693 |         </p>
 694 |     </div>
 695 |     <small>
 696 |         <pre>
 697 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((observer) => {...});</code>
 698 |             <div class="next">
 699 |             <code> </code>
 700 |             <code>const subscribtionA = stream$.<span class="rxjs-subscribe">subscribe</span>(observerA);</code>
 701 |             </div>
 702 |         </pre>
 703 |     </small>
 704 | </section>
 705 | 
 706 | <section class="slide">
 707 |     <h2 class="slide-header">Observable</h2>
 708 |     <div class="slide-description">
 709 |         <p>
 710 |             Каждый observer создаст свой поток значений
 711 |             <br>
 712 |             Подписки не зависят друг от друга
 713 |         </p>
 714 |     </div>
 715 |     <small>
 716 |         <pre>
 717 |             <code>const stream$ = <span class="rxjs-creation">Observable.create</span>((observer) => {...});</code>
 718 |             <div class="next">
 719 |             <code> </code>
 720 |             <code>const subscribtionA = stream$.<span class="rxjs-subscribe">subscribe</span>(observerA);</code>
 721 |             </div>
 722 |             <code class="next">const subscribtionB = stream$.<span class="rxjs-subscribe">subscribe</span>(<mark>observerBC</mark>);</code>
 723 |             <code class="next">const subscribtionC = stream$.<span class="rxjs-subscribe">subscribe</span>(<mark>observerBC</mark>);</code>
 724 |         </pre>
 725 |     </small>
 726 | </section>
 727 | 
 728 | <section class="slide">
 729 |     <h2 class="slide-header">Observable</h2>
 730 |     <div class="slide-description next">
 731 |         <div class="playground">
 732 |             <div class="timeline" style="width: 300.8px; color: rgb(251, 0, 13); transition-duration: 0s;">
 733 |                 <div class="entry" style="left: 0.6px;">1</div>
 734 |                 <div class="entry" style="left: 100.7px;">2</div>
 735 |                 <div class="entry" style="left: 200.7px;">3</div>
 736 |                 <div class="entry-complete" style="left: 300.7px;"></div>
 737 |             </div>
 738 |         </div>
 739 |     </div>
 740 |     <small>
 741 |         <pre>
 742 |             <div class="next">
 743 |             <code>const <mark class="highlight next">stream$</mark> = <mark class="highlight next"><span class="rxjs-creation">Observable.create</span></mark>((observer) => {</code>
 744 |             <code>    <mark class="highlight next">observer.next(1);</mark></code>
 745 |             <code>    setTimeout(() => { <mark class="highlight next">observer.next(2);</mark>},    1000);</code>
 746 |             <code>    setTimeout(() => { <mark class="highlight next">observer.next(3);</mark>},    2000);</code>
 747 |             <code>    setTimeout(() => { <mark class="highlight next">observer.complete();</mark>}, 3000);</code>
 748 |             <code>});</code>
 749 |             </div>
 750 |             <div class="next">
 751 |             <code>const <mark class="highlight next">subscribtion</mark> = stream$.<mark class="highlight next"><span class="rxjs-subscribe">subscribe</span></mark>({</code>
 752 |             <code>    next: <mark class="highlight next">(value) => renderNext(value)</mark>,</code>
 753 |             <code>    error: (error) => renderError(error),</code>
 754 |             <code>    complete: <mark class="highlight next">() => renderComplete()</mark></code>
 755 |             <code>});</code>
 756 |             </div>
 757 |         </pre>
 758 |     </small>
 759 | </section>
 760 | 
 761 | 
 762 | <section class="slide">
 763 |     <h2 class="shout">
 764 |         Ок, что дальше?
 765 |     </h2>
 766 | </section>
 767 | 
 768 | 
 769 | <section class="slide">
 770 |     <h2 class="slide-header">Дальше — 120+ операторов. 120, Карл!</h2>
 771 |     <div class="slide-description">
 772 |         <ul>
 773 |             <li>cоздание</li>
 774 |             <li>преобразование одного потока</li>
 775 |             <li>комбинирование потоков</li>
 776 |             <li>Observable высшего порядка</li>
 777 |         </ul>
 778 |     </div>
 779 | </section>
 780 | 
 781 | <section class="slide">
 782 |     <h2 class="slide-header">Cоздание Observable</h2>
 783 |     <div class="slide-description">
 784 |         <pre>
 785 |             <code class="text-muted">import {<span class="rxjs-creation">of</span>} from 'rxjs';</code>
 786 |             <code><span class="rxjs-creation">of</span>('foo');</code>
 787 |             <code class="next text-muted">// ---foo-|</code>
 788 |             <div class="next">
 789 |             <code> </code>
 790 |             <code class="text-muted">import {<span class="rxjs-creation">from</span>} from 'rxjs';</code>
 791 |             <code><span class="rxjs-creation">from</span>(['foo', 'bar', 'baz']);</code>
 792 |             <code class="next text-muted">// ---foo---bar---baz-|</code>
 793 |             </div>
 794 |             <div class="next">
 795 |             <code> </code>
 796 |             <code class="text-muted">import {<span class="rxjs-creation">timer</span>} from 'rxjs';</code>
 797 |             <code><span class="rxjs-creation">timer</span>(100, 500);</code>
 798 |             <code class="next text-muted">// -0---1---2---3--...</code>
 799 |             </div>
 800 |         </pre>
 801 |         </small>
 802 |     </div>
 803 | </section>
 804 | 
 805 | <section class="slide">
 806 |     <h2 class="slide-header">Cоздание Observable</h2>
 807 |     <div class="slide-description">
 808 |         <pre>
 809 |             <code class="text-muted">import {<span class="rxjs-creation">from</span>} from 'rxjs';</code>
 810 |             <code>const promise = new Promise((resolve) => { resolve('foo')});</code>
 811 |             <code><span class="rxjs-creation">from</span>(promise);</code>
 812 |             <code class="next text-muted">// ----------------foo-|</code>
 813 |             <div class="next">
 814 |             <code> </code>
 815 |             <code class="text-muted">import {<span class="rxjs-creation">fromEvent</span>} from 'rxjs';</code>
 816 |             <code>const btnElement = document.getElementById('btn');</code>
 817 |             <code><span class="rxjs-creation">fromEvent</span>(btnElement, 'click');</code>
 818 |             <code class="next text-muted">// --evt-evt------evt----evt--...</code>
 819 |             </div>
 820 |         </pre>
 821 |         </small>
 822 |     </div>
 823 | </section>
 824 | 
 825 | <section class="slide">
 826 |     <h2 class="slide-header">Операторы преобразования</h2>
 827 |     <div class="slide-description">
 828 |         <div class="playground playground-two-streams" id="operatorsExample1"></div>
 829 |         <button class="btn btn-play" onclick="run(operatorsExample1, this)">▶</button>
 830 |     </div>
 831 |     <small>
 832 |         <pre>
 833 |             <code class="text-muted">import {<span class="rxjs-operator">take</span>, <span
 834 |                 class="rxjs-operator">filter</span>} from 'rxjs/operators';</code>
 835 |             <code><span class="rxjs-creation">timer</span>(0, 500).<span class="rxjs-pipe">pipe</span>(</code>
 836 |             <code>    <span class="rxjs-operator">take</span>(12)</code>
 837 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 838 |             <div class="next">
 839 |                 <code> </code>
 840 |                 <code><span class="rxjs-creation">timer</span>(0, 500).<span class="rxjs-pipe">pipe</span>(</code>
 841 |                 <code>    <span class="rxjs-operator">take</span>(12),</code>
 842 |                 <code>    <span class="rxjs-operator">filter</span>(() => Math.random() < 0.3)</code>
 843 |                 <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 844 |             </div>
 845 |         </pre>
 846 |     </small>
 847 |     <script>
 848 |         function operatorsExample1() {
 849 |             const playgroundElement = document.getElementById('operatorsExample1');
 850 |             playgroundElement.innerHTML = '';
 851 | 
 852 |             const streamA$ = rxjs.timer(0, 500)
 853 |                 .pipe(
 854 |                     rxjs.operators.take(12)
 855 |                 );
 856 | 
 857 |             const streamB$ = rxjs.timer(0, 500)
 858 |                 .pipe(
 859 |                     rxjs.operators.take(12),
 860 |                     rxjs.operators.filter(() => Math.random() < 0.3)
 861 |                 );
 862 | 
 863 |             startStream(playgroundElement, streamA$);
 864 |             startStream(playgroundElement, streamB$);
 865 |         }
 866 |     </script>
 867 | </section>
 868 | 
 869 | <section class="slide">
 870 |     <h2 class="slide-header">Pipe</h2>
 871 |     <div class="slide-description">
 872 |         <pre class="margin-0">
 873 |             <code>.<span class="rxjs-pipe">pipe</span>(</code>
 874 |         </pre>
 875 |         <img class="img-boxed img-centered" style="margin-top: 10px; margin-bottom: 10px;" width="600" src="pictures/pipe-3.gif"
 876 |              alt="pipe в реальном мире">
 877 |         <pre class="margin-0">
 878 |             <code>).<span class="rxjs-subscribe">subscribe</span>(...)</code>
 879 |         </pre>
 880 |     </div>
 881 | </section>
 882 | 
 883 | <section class="slide">
 884 |     <h2 class="slide-header">Rx Marble Diagram</h2>
 885 |     <div class="slide-description text-center">
 886 |         <img class="img-boxed img-centered" style="margin-top: 50px;" width="650" src="pictures/rxmarbles-filter.png"
 887 |              alt="Rx Marble Diagram: filter">
 888 |         <pre class="pre-centered-big next">
 889 |             <code>---2--30--22--5--60--1-----|</code>
 890 |             <code>filter(x => x > 10)         </code>
 891 |             <code>------30--22-----60--------|</code>
 892 |         </pre>
 893 |     </div>
 894 | </section>
 895 | 
 896 | <section class="slide">
 897 |     <h2 class="slide-header">Операторы преобразования</h2>
 898 |     <div class="slide-description">
 899 |         <div class="playground playground-two-streams" id="operatorsExample2"></div>
 900 |         <button class="btn btn-play" onclick="run(operatorsExample2, this)">▶</button>
 901 |         <pre>
 902 |             <code><span class="rxjs-creation">timer</span>(0, 250).<span class="rxjs-pipe">pipe</span>(</code>
 903 |             <code>    <span class="rxjs-operator">take</span>(40),</code>
 904 |             <code>    <span class="rxjs-operator">filter</span>(() => Math.random() < 0.3),</code>
 905 |             <code>    <mark><span class="rxjs-operator">debounceTime</span>(500)</mark></code>
 906 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 907 |         </pre>
 908 |     </div>
 909 |     <script>
 910 |         function operatorsExample2() {
 911 |             const playgroundElement = document.getElementById('operatorsExample2');
 912 |             playgroundElement.innerHTML = '';
 913 | 
 914 |             const streamA$ = rxjs.timer(0, 250)
 915 |                 .pipe(
 916 |                     rxjs.operators.take(40),
 917 |                     rxjs.operators.filter(() => Math.random() < 0.3),
 918 |                     rxjs.operators.share()
 919 |                 );
 920 | 
 921 |             const streamB$ = streamA$
 922 |                 .pipe(
 923 |                     rxjs.operators.debounceTime(500)
 924 |                 );
 925 | 
 926 |             startStream(playgroundElement, streamA$);
 927 |             startStream(playgroundElement, streamB$);
 928 |         }
 929 |     </script>
 930 | </section>
 931 | 
 932 | <section class="slide">
 933 |     <h2 class="slide-header">Комбинирование: merge</h2>
 934 |     <div class="slide-description">
 935 |         <div class="playground playground-three-streams" id="operatorMerge"></div>
 936 |         <button class="btn btn-play" onclick="run(operatorMerge, this)">▶</button>
 937 |         <pre>
 938 |             <code>const streamA$ = <span class="rxjs-creation">timer</span>(0, 1500).<span class="rxjs-pipe">pipe</span>(<span
 939 |                 class="rxjs-operator">take</span>(4));</code>
 940 |             <code>const streamB$ = <span class="rxjs-creation">timer</span>(800, 1000).<span
 941 |                 class="rxjs-pipe">pipe</span>(</code>
 942 |             <code>    <span class="rxjs-operator">take</span>(6),</code>
 943 |             <code>    <span class="rxjs-operator">map</span>((i) => 'abcdef'[i])</code>
 944 |             <code>);</code>
 945 |             <code><span class="rxjs-creation">merge</span>(streamA$, streamB$)</code>
 946 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 947 |         </pre>
 948 |     </div>
 949 |     <script>
 950 |         function operatorMerge() {
 951 |             const playgroundElement = document.getElementById('operatorMerge');
 952 |             playgroundElement.innerHTML = '';
 953 | 
 954 |             const streamA$ = rxjs.timer(0, 1500)
 955 |                 .pipe(
 956 |                     rxjs.operators.take(4)
 957 |                 );
 958 | 
 959 |             const streamB$ = rxjs.timer(800, 1000)
 960 |                 .pipe(
 961 |                     rxjs.operators.take(6),
 962 |                     rxjs.operators.map((value) => 'abcdef'[value])
 963 |                 );
 964 | 
 965 |             const streamAB$ = rxjs.merge(streamA$, streamB$);
 966 | 
 967 |             startStream(playgroundElement, streamA$);
 968 |             startStream(playgroundElement, streamB$);
 969 |             startStream(playgroundElement, streamAB$);
 970 |         }
 971 |     </script>
 972 | </section>
 973 | 
 974 | <section class="slide">
 975 |     <h2 class="slide-header">Комбинирование: combineLatest</h2>
 976 |     <div class="slide-description">
 977 |         <div class="playground playground-three-streams" id="operatorCombineLatest"></div>
 978 |         <button class="btn btn-play" onclick="run(operatorCombineLatest, this)">▶</button>
 979 |         <pre>
 980 |             <code>const streamA$ = <span class="rxjs-creation">timer</span>(0, 1500).<span class="rxjs-pipe">pipe</span>(<span
 981 |                 class="rxjs-operator">take</span>(4));</code>
 982 |             <code>const streamB$ = <span class="rxjs-creation">timer</span>(800, 1000).<span
 983 |                 class="rxjs-pipe">pipe</span>(</code>
 984 |             <code>    <span class="rxjs-operator">take</span>(6),</code>
 985 |             <code>    <span class="rxjs-operator">map</span>((i) => 'abcdef'[i])</code>
 986 |             <code>);</code>
 987 |             <code><span class="rxjs-creation">combineLatest</span>(streamA$, streamB$).<span
 988 |                 class="rxjs-pipe">pipe</span>(</code>
 989 |             <code>    <span class="rxjs-operator">map</span>(([a, b]) => a + b)</code>
 990 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
 991 |         </pre>
 992 |     </div>
 993 |     <script>
 994 |         function operatorCombineLatest() {
 995 |             const playgroundElement = document.getElementById('operatorCombineLatest');
 996 |             playgroundElement.innerHTML = '';
 997 | 
 998 |             const streamA$ = rxjs.timer(0, 1500)
 999 |                 .pipe(
1000 |                     rxjs.operators.take(4)
1001 |                 );
1002 | 
1003 |             const streamB$ = rxjs.timer(800, 1000)
1004 |                 .pipe(
1005 |                     rxjs.operators.map((value) => 'abcdef'[value]),
1006 |                     rxjs.operators.take(6)
1007 |                 );
1008 | 
1009 |             const streamAB$ = rxjs.combineLatest(streamA$, streamB$)
1010 |                 .pipe(
1011 |                     rxjs.operators.map(([a, b]) => a + b)
1012 |                 );
1013 | 
1014 |             startStream(playgroundElement, streamA$);
1015 |             startStream(playgroundElement, streamB$);
1016 |             startStream(playgroundElement, streamAB$);
1017 |         }
1018 |     </script>
1019 | </section>
1020 | 
1021 | <section class="slide">
1022 |     <h2 class="slide-header">Операторы высшего порядка: mergeMap</h2>
1023 |     <div class="slide-description">
1024 |         <div class="playground playground-two-streams" id="operatorMergeMap"></div>
1025 |         <button class="btn btn-play" onclick="run(operatorMergeMap, this)">▶</button>
1026 |         <pre>
1027 |             <code><span class="rxjs-creation">timer</span>(0, 1500).<span class="rxjs-pipe">pipe</span>(</code>
1028 |             <code>    <span class="rxjs-operator">take</span>(3),</code>
1029 |             <code>    <span class="rxjs-operator">map</span>((i) => 'abcd'[i]),</code>
1030 |             <code>    <mark><span class="rxjs-operator">mergeMap</span></mark>(letter => {</code>
1031 |             <code>        return <span class="rxjs-creation">timer</span>(0, 450).<span
1032 |                 class="rxjs-pipe">pipe</span>(</code>
1033 |             <code>            <span class="rxjs-operator">take</span>(6),</code>
1034 |             <code>            <span class="rxjs-operator">map</span>(digit => letter + digit));</code>
1035 |             <code>    })</code>
1036 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
1037 |         </pre>
1038 |     </div>
1039 |     <script>
1040 |         function operatorMergeMap() {
1041 |             const playgroundElement = document.getElementById('operatorMergeMap');
1042 |             playgroundElement.innerHTML = '';
1043 | 
1044 |             const streamA$ = rxjs.timer(0, 1500)
1045 |                 .pipe(
1046 |                     rxjs.operators.take(3),
1047 |                     rxjs.operators.map((value) => 'abcd'[value])
1048 |                 );
1049 | 
1050 |             const streamB$ = streamA$
1051 |                 .pipe(
1052 |                     rxjs.operators.mergeMap(value => {
1053 |                         return rxjs.timer(0, 450)
1054 |                             .pipe(
1055 |                                 rxjs.operators.take(6),
1056 |                                 rxjs.operators.map(innerValue => value + innerValue)
1057 |                             );
1058 |                     })
1059 |                 );
1060 | 
1061 |             startStream(playgroundElement, streamA$);
1062 |             startStream(playgroundElement, streamB$);
1063 |         }
1064 |     </script>
1065 | </section>
1066 | 
1067 | <section class="slide">
1068 |     <h2 class="slide-header">Операторы высшего порядка: switchMap</h2>
1069 |     <div class="slide-description">
1070 |         <div class="playground playground-two-streams" id="operatorSwitchMap"></div>
1071 |         <button class="btn btn-play" onclick="run(operatorSwitchMap, this)">▶</button>
1072 |     </div>
1073 |     <small>
1074 |         <pre>
1075 |             <code><span class="rxjs-creation">timer</span>(0, 1500).<span class="rxjs-pipe">pipe</span>(</code>
1076 |             <code>    <span class="rxjs-operator">take</span>(3),</code>
1077 |             <code>    <span class="rxjs-operator">map</span>((i) => 'abcd'[i]),</code>
1078 |             <code>    <mark><span class="rxjs-operator">switchMap</span></mark>(letter => {</code>
1079 |             <code>        return <span class="rxjs-creation">timer</span>(0, 450).<span
1080 |                 class="rxjs-pipe">pipe</span>(</code>
1081 |             <code>            <span class="rxjs-operator">take</span>(6),</code>
1082 |             <code>            <span class="rxjs-operator">map</span>(digit => letter + digit));</code>
1083 |             <code>    })</code>
1084 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
1085 |         </pre>
1086 |     </small>
1087 |     <script>
1088 |         function operatorSwitchMap() {
1089 |             const playgroundElement = document.getElementById('operatorSwitchMap');
1090 |             playgroundElement.innerHTML = '';
1091 | 
1092 |             const streamA$ = rxjs.timer(0, 1500)
1093 |                 .pipe(
1094 |                     rxjs.operators.take(3),
1095 |                     rxjs.operators.map((value) => 'abcd'[value])
1096 |                 );
1097 | 
1098 |             const streamB$ = streamA$
1099 |                 .pipe(
1100 |                     rxjs.operators.switchMap(value => {
1101 |                         return rxjs.timer(0, 450)
1102 |                             .pipe(
1103 |                                 rxjs.operators.take(6),
1104 |                                 rxjs.operators.map(innerValue => value + innerValue)
1105 |                             );
1106 |                     })
1107 |                 );
1108 | 
1109 |             startStream(playgroundElement, streamA$);
1110 |             startStream(playgroundElement, streamB$);
1111 |         }
1112 |     </script>
1113 | </section>
1114 | 
1115 | <section class="slide">
1116 |     <h2 class="slide-header">Rx Marble Diagram</h2>
1117 |     <div class="slide-description text-center">
1118 |         <img class="img-boxed img-centered"
1119 |              style="margin-top: 50px;"
1120 |              width="700"
1121 |              src="pictures/rxmarbles-switch-map.png"
1122 |              alt="Rx Marble Diagram: switchMap">
1123 |     </div>
1124 | </section>
1125 | 
1126 | 
1127 | <section class="slide">
1128 |     <h2 class="shout">
1129 |         SwitchMap
1130 |     </h2>
1131 | </section>
1132 | 
1133 | <section class="slide">
1134 |     <h2 class="slide-header">Promise <--> Observable</h2>
1135 |     <div class="slide-description">
1136 |         <div class="playground playground-clock" id="promiseObservable"></div>
1137 |         <button class="btn btn-play" onclick="run(promiseObservable, this)">▶</button>
1138 |         <pre>
1139 |             <code>const getPromise = (value) => new Promise((resolve) => {</code>
1140 |             <code>    setTimeout(() => {</code>
1141 |             <code>        resolve(value);</code>
1142 |             <code>    }, 1500);</code>
1143 |             <code>});</code>
1144 |             <code> </code>
1145 |             <code><span class="rxjs-creation">from</span>(getPromise('⏰'))</code>
1146 |             <code>    .subscribe(renderNext);</code>
1147 |         </pre>
1148 |     </div>
1149 |     <script>
1150 |         function promiseObservable() {
1151 |             const playgroundElement = document.getElementById('promiseObservable');
1152 |             playgroundElement.innerHTML = '';
1153 | 
1154 |             const getPromise = (value, time) => new Promise((resolve) => {
1155 |                 setTimeout(() => {
1156 |                     resolve(value);
1157 |                 }, time);
1158 |             });
1159 | 
1160 |             const stream$ = rxjs.from(getPromise('⏰', 1500));
1161 | 
1162 |             startStream(playgroundElement, stream$);
1163 |         }
1164 |     </script>
1165 | </section>
1166 | 
1167 | <section class="slide">
1168 |     <h2 class="slide-header">SwitchMap + Promise</h2>
1169 |     <div class="slide-description">
1170 |         <div class="playground playground-two-streams" id="promiseSwitchMap"></div>
1171 |         <button class="btn btn-play" onclick="run(promiseSwitchMap, this)">▶</button>
1172 |     </div>
1173 |     <small>
1174 |         <pre>
1175 |             <code>const streamA$ = <span class="rxjs-creation">Observable.create</span>((observer) => {</code>
1176 |             <code>    observer.next(1);</mark></code>
1177 |             <code>    setTimeout(() => { observer.next(2);}, 2000);</code>
1178 |             <code>    setTimeout(() => { observer.next(3);}, 3000);</code>
1179 |             <code>    setTimeout(() => { observer.complete()}, 4000);</code>
1180 |             <code>})</code>
1181 |             <code>const streamB$ = streamA$.<span class="rxjs-pipe">pipe</span>(</code>
1182 |             <code>    <mark><span class="rxjs-operator">switchMap</span>((value) => getPromise(value))</mark></code>
1183 |             <code>).<span class="rxjs-subscribe">subscribe</span>(renderNext);</code>
1184 |         </pre>
1185 |     </small>
1186 |     <script>
1187 |         function promiseSwitchMap() {
1188 |             const playgroundElement = document.getElementById('promiseSwitchMap');
1189 |             playgroundElement.innerHTML = '';
1190 | 
1191 |             const getPromise = (value, time) => new Promise((resolve) => {
1192 |                 setTimeout(() => {
1193 |                     resolve(value);
1194 |                 }, time);
1195 |             });
1196 | 
1197 |             const streamA$ = rxjs.Observable.create((observer) => {
1198 |                 observer.next(1);
1199 |                 setTimeout(() => {
1200 |                     observer.next(2);
1201 |                 }, 2000);
1202 |                 setTimeout(() => {
1203 |                     observer.next(3);
1204 |                 }, 3000);
1205 |                 setTimeout(() => {
1206 |                     observer.complete()
1207 |                 }, 4000);
1208 |             });
1209 | 
1210 |             const streamB$ = streamA$
1211 |                 .pipe(
1212 |                     rxjs.operators.switchMap((value) => getPromise(value, 1500))
1213 |                 );
1214 | 
1215 |             startStream(playgroundElement, streamA$);
1216 |             startStream(playgroundElement, streamB$);
1217 |         }
1218 |     </script>
1219 | </section>
1220 | 
1221 | 
1222 | <section class="slide">
1223 |     <h2 class="slide-header">SwitchMap и отписки</h2>
1224 |     <div class="slide-description">
1225 |         <p><strong>SwitchMap</strong> автоматически отписывает внутренний поток — вызывает subscription.<span
1226 |             class="rxjs-subscribe">unsubscribe</span>()
1227 |         </p>
1228 |         <p class="next">Можем написать отменяемые запросы:</p>
1229 |         <ul>
1230 |             <li class="next">Angular HttpClient</li>
1231 |             <li class="next">Fetch + AbortController</li>
1232 |             <li class="next">XMLHttpRequest -> xhr.abort()</li>
1233 |         </ul>
1234 |     </div>
1235 | </section>
1236 | 
1237 | <section class="slide">
1238 |     <h2 class="slide-header">Пример: отменяемый fetch</h2>
1239 |     <div class="slide-description">
1240 |         <pre>
1241 |             <code>const request$ = <span class="rxjs-creation">Observable.create</span>((observer) => {</code>
1242 |             <div class="next">
1243 |             <code>    const controller = <mark>new AbortController();</mark></code>
1244 |             <code>    const signal = controller.signal;</code>
1245 |             </div>
1246 |             <div class="next">
1247 |             <code> </code>
1248 |             <code>    fetch(url, <mark>{signal}</mark>).then(res => res.json())</code>
1249 |             </div>
1250 |             <div class="next">
1251 |             <code>        .then(data => {</code>
1252 |             <code>                observer.next(data);</code>
1253 |             <code>                observer.complete();</code>
1254 |             <code>            });</code>
1255 |             </div>
1256 |             <div class="next">
1257 |             <code> </code>
1258 |             <code>    <mark>return function unsubscribe() {</mark></code>
1259 |             <code>        <mark>controller.abort();</mark></code>
1260 |             <code>    <mark>};</mark></code>
1261 |             </div>
1262 |             <code>});</code>
1263 |         </pre>
1264 |     </div>
1265 | </section>
1266 | 
1267 | <section class="slide">
1268 |     <h2 class="slide-header">SwitchMap и запросы</h2>
1269 |     <div class="slide-description">
1270 |         <br>
1271 |         <img class="img-boxed img-centered" width="650" src="pictures/fetch-cancel.png" alt="Отмена fetch-запросов">
1272 |     </div>
1273 | </section>
1274 | 
1275 | <section class="slide">
1276 |     <h2 class="shout">
1277 |         ДЕМО
1278 |     </h2>
1279 | </section>
1280 | 
1281 | <section class="slide">
1282 |     <h2 class="slide-header">Демо — поиск</h2>
1283 |     <div class="slide-description">
1284 |         <img class="img-boxed img-centered" width="750" src="pictures/demo-2.gif" alt="демо">
1285 |     </div>
1286 | </section>
1287 | 
1288 | <section class="slide">
1289 |     <h2 class="slide-header">Демо: поток ввода</h2>
1290 |     <div class="slide-search">
1291 |         <pre class="search-code">
1292 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1293 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1294 |             <code class="next">        <span class="rxjs-operator">map</span>((event) => event.target.value)</code>
1295 |             <div class="next">
1296 |             <code>    )</code>
1297 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1298 |             </div>
1299 |         </pre>
1300 |         <div class="search-playground" id="searchDemo1">
1301 |             <input type="text" class="search-input" onfocus="searchDemo1()">
1302 |             <div class="search-output">
1303 |             </div>
1304 |         </div>
1305 |     </div>
1306 | 
1307 |     <script>
1308 |         function searchDemo1() {
1309 |             const playgroundElement = document.getElementById('searchDemo1');
1310 |             const inputElement = playgroundElement.querySelector('.search-input');
1311 |             const outputElement = playgroundElement.querySelector('.search-output');
1312 |             const onHashChange$ = rxjs.fromEvent(window, 'hashchange')
1313 |                 .pipe(
1314 |                     rxjs.operators.take(1)
1315 |                 );
1316 |             const blur$ = rxjs.fromEvent(inputElement, 'blur')
1317 |                 .pipe(
1318 |                     rxjs.operators.take(1)
1319 |                 );
1320 | 
1321 |             return rxjs.fromEvent(inputElement, 'input')
1322 |                 .pipe(
1323 |                     rxjs.operators.map((event) => event.target.value),
1324 |                     rxjs.operators.takeUntil(onHashChange$),
1325 |                     rxjs.operators.takeUntil(blur$)
1326 |                 )
1327 |                 .subscribe({
1328 |                     next: (value) => logToOutput(outputElement, value),
1329 |                     complete: () => {
1330 |                         inputElement.value = '';
1331 |                         outputElement.innerHTML = ''
1332 |                     }
1333 |                 });
1334 |         }
1335 |     </script>
1336 | </section>
1337 | 
1338 | <section class="slide">
1339 |     <h2 class="slide-header">Демо: дебаунс</h2>
1340 |     <div class="slide-search">
1341 |         <pre class="search-code">
1342 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1343 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1344 |             <code>        <span class="rxjs-operator">map</span>((event) => event.target.value),</code>
1345 |             <code>        <mark><span class="rxjs-operator">debounceTime</span>(500)</mark></code>
1346 |             <code>    )</code>
1347 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1348 |         </pre>
1349 |         <div class="search-playground" id="searchDemo3">
1350 |             <input type="text" class="search-input" onfocus="searchDemo3()">
1351 |             <div class="search-output">
1352 |             </div>
1353 |         </div>
1354 |     </div>
1355 | 
1356 |     <script>
1357 |         function searchDemo3() {
1358 |             const playgroundElement = document.getElementById('searchDemo3');
1359 |             const inputElement = playgroundElement.querySelector('.search-input');
1360 |             const outputElement = playgroundElement.querySelector('.search-output');
1361 |             const onHashChange$ = rxjs.fromEvent(window, 'hashchange')
1362 |                 .pipe(
1363 |                     rxjs.operators.take(1)
1364 |                 );
1365 |             const blur$ = rxjs.fromEvent(inputElement, 'blur')
1366 |                 .pipe(
1367 |                     rxjs.operators.take(1)
1368 |                 );
1369 | 
1370 | 
1371 |             return rxjs.fromEvent(inputElement, 'input')
1372 |                 .pipe(
1373 |                     rxjs.operators.map((event) => event.target.value),
1374 |                     rxjs.operators.debounceTime(500),
1375 |                     rxjs.operators.takeUntil(onHashChange$),
1376 |                     rxjs.operators.takeUntil(blur$)
1377 |                 )
1378 |                 .subscribe({
1379 |                     next: (value) => logToOutput(outputElement, value),
1380 |                     complete: () => {
1381 |                         inputElement.value = '';
1382 |                         outputElement.innerHTML = ''
1383 |                     }
1384 |                 });
1385 |         }
1386 |     </script>
1387 | </section>
1388 | 
1389 | <section class="slide">
1390 |     <h2 class="slide-header">Демо: фильтрация совпадений</h2>
1391 |     <div class="slide-search">
1392 |         <pre class="search-code">
1393 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1394 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1395 |             <code>        <span class="rxjs-operator">map</span>((event) => event.target.value),</code>
1396 |             <code>        <span class="rxjs-operator">debounceTime</span>(500),</code>
1397 |             <code>        <mark><span class="rxjs-operator">distinctUntilChanged</span>()</mark></code>
1398 |             <code>    )</code>
1399 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1400 |         </pre>
1401 |         <div class="search-playground" id="searchDemo4">
1402 |             <input type="text" class="search-input" onfocus="searchDemo4()">
1403 |             <div class="search-output">
1404 |             </div>
1405 |         </div>
1406 |     </div>
1407 | 
1408 |     <script>
1409 |         function searchDemo4() {
1410 |             const playgroundElement = document.getElementById('searchDemo4');
1411 |             const inputElement = playgroundElement.querySelector('.search-input');
1412 |             const outputElement = playgroundElement.querySelector('.search-output');
1413 |             const onHashChange$ = rxjs.fromEvent(window, 'hashchange')
1414 |                 .pipe(
1415 |                     rxjs.operators.take(1)
1416 |                 );
1417 |             const blur$ = rxjs.fromEvent(inputElement, 'blur')
1418 |                 .pipe(
1419 |                     rxjs.operators.take(1)
1420 |                 );
1421 | 
1422 | 
1423 |             return rxjs.fromEvent(inputElement, 'input')
1424 |                 .pipe(
1425 |                     rxjs.operators.map((event) => event.target.value),
1426 |                     rxjs.operators.debounceTime(500),
1427 |                     rxjs.operators.distinctUntilChanged(),
1428 |                     rxjs.operators.takeUntil(onHashChange$),
1429 |                     rxjs.operators.takeUntil(blur$)
1430 |                 )
1431 |                 .subscribe({
1432 |                     next: (value) => logToOutput(outputElement, value),
1433 |                     complete: () => {
1434 |                         inputElement.value = '';
1435 |                         outputElement.innerHTML = ''
1436 |                     }
1437 |                 });
1438 |         }
1439 |     </script>
1440 | </section>
1441 | 
1442 | <section class="slide">
1443 |     <h2 class="slide-header">Демо: запрос данных</h2>
1444 |     <div class="slide-search">
1445 |         <pre class="search-code">
1446 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1447 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1448 |             <code>        <span class="rxjs-operator">map</span>((event) => event.target.value),</code>
1449 |             <code>        <span class="rxjs-operator">debounceTime</span>(500),</code>
1450 |             <code>        <span class="rxjs-operator">distinctUntilChanged</span>(),</code>
1451 |             <code>        <mark><span class="rxjs-operator">switchMap</span>(query => fetchData(query))</mark></code>
1452 |             <code>    )</code>
1453 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1454 |         </pre>
1455 |         <div class="search-playground" id="searchDemo5">
1456 |             <input type="text" class="search-input" onfocus="searchDemo5()">
1457 |             <div class="search-output">
1458 |             </div>
1459 |         </div>
1460 |     </div>
1461 | 
1462 |     <script>
1463 |         function searchDemo5() {
1464 |             const playgroundElement = document.getElementById('searchDemo5');
1465 |             const inputElement = playgroundElement.querySelector('.search-input');
1466 |             const outputElement = playgroundElement.querySelector('.search-output');
1467 |             const onHashChange$ = rxjs.fromEvent(window, 'hashchange')
1468 |                 .pipe(
1469 |                     rxjs.operators.take(1)
1470 |                 );
1471 |             const blur$ = rxjs.fromEvent(inputElement, 'blur')
1472 |                 .pipe(
1473 |                     rxjs.operators.take(1)
1474 |                 );
1475 | 
1476 | 
1477 |             return rxjs.fromEvent(inputElement, 'input')
1478 |                 .pipe(
1479 |                     rxjs.operators.map((event) => event.target.value),
1480 |                     rxjs.operators.debounceTime(500),
1481 |                     rxjs.operators.distinctUntilChanged(),
1482 |                     rxjs.operators.switchMap(value => fetchData(value)),
1483 |                     rxjs.operators.takeUntil(onHashChange$),
1484 |                     rxjs.operators.takeUntil(blur$)
1485 |                 )
1486 |                 .subscribe({
1487 |                     next: (items) => logAllToOutput(outputElement, items),
1488 |                     complete: () => {
1489 |                         inputElement.value = '';
1490 |                         outputElement.innerHTML = ''
1491 |                     }
1492 |                 });
1493 |         }
1494 |     </script>
1495 | </section>
1496 | 
1497 | <section class="slide">
1498 |     <h2 class="slide-header">Демо: лоадер</h2>
1499 |     <div class="slide-search">
1500 |         <pre class="search-code">
1501 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1502 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1503 |             <code>        <span class="rxjs-operator">map</span>((event) => event.target.value),</code>
1504 |             <code>        <span class="rxjs-operator">debounceTime</span>(500),</code>
1505 |             <code>        <span class="rxjs-operator">distinctUntilChanged</span>(),</code>
1506 |             <code>        <mark><span class="rxjs-operator">tap</span>(() => setLoading(true))</mark>,</code>
1507 |             <code>        <span class="rxjs-operator">switchMap</span>(query => fetchData(query)),</code>
1508 |             <code>        <mark><span class="rxjs-operator">tap</span>(() => setLoading(false))</mark></code>
1509 |             <code>    )</code>
1510 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1511 |         </pre>
1512 |         <div class="search-playground" id="searchDemo6">
1513 |             <input type="text" class="search-input" onfocus="searchDemo6()">
1514 |             <div class="search-output">
1515 |             </div>
1516 |         </div>
1517 |     </div>
1518 | 
1519 |     <script>
1520 |         function searchDemo6() {
1521 |             const playgroundElement = document.getElementById('searchDemo6');
1522 |             const inputElement = playgroundElement.querySelector('.search-input');
1523 |             const outputElement = playgroundElement.querySelector('.search-output');
1524 |             const onHashChange$ = rxjs.fromEvent(window, 'hashchange')
1525 |                 .pipe(
1526 |                     rxjs.operators.take(1)
1527 |                 );
1528 |             const blur$ = rxjs.fromEvent(inputElement, 'blur')
1529 |                 .pipe(
1530 |                     rxjs.operators.take(1)
1531 |                 );
1532 | 
1533 |             const setLoading = (flag) => {
1534 |                 outputElement.classList.toggle('search-loading', flag);
1535 |             };
1536 | 
1537 |             return rxjs.fromEvent(inputElement, 'input')
1538 |                 .pipe(
1539 |                     rxjs.operators.tap(() => {
1540 |                         outputElement.innerHTML = ''
1541 |                     }),
1542 |                     rxjs.operators.map((event) => event.target.value),
1543 |                     rxjs.operators.debounceTime(500),
1544 |                     rxjs.operators.distinctUntilChanged(),
1545 |                     rxjs.operators.tap(() => setLoading(true)),
1546 |                     rxjs.operators.switchMap(value => fetchData(value)),
1547 |                     rxjs.operators.tap(() => setLoading(false)),
1548 |                     rxjs.operators.takeUntil(onHashChange$),
1549 |                     rxjs.operators.takeUntil(blur$)
1550 |                 )
1551 |                 .subscribe({
1552 |                     next: (items) => logAllToOutput(outputElement, items),
1553 |                     complete: () => {
1554 |                         inputElement.value = '';
1555 |                         outputElement.innerHTML = ''
1556 |                     }
1557 |                 });
1558 |         }
1559 |     </script>
1560 | </section>
1561 | 
1562 | <section class="slide">
1563 |     <h2 class="slide-header">Демо: результаты</h2>
1564 |     <div class="slide-search">
1565 |         <pre class="search-code">
1566 |             <code><span class="rxjs-creation">fromEvent</span>(inputElement, 'input')</code>
1567 |             <code>    .<span class="rxjs-pipe">pipe</span>(</code>
1568 |             <code>        <span class="rxjs-operator">map</span>((event) => event.target.value),</code>
1569 |             <code>        <span class="rxjs-operator">debounceTime</span>(500),</code>
1570 |             <code>        <span class="rxjs-operator">distinctUntilChanged</span>(),</code>
1571 |             <code>        <span class="rxjs-operator">tap</span>(() => setLoading(true)),</code>
1572 |             <code>        <span class="rxjs-operator">switchMap</span>(query => fetchData(query)),</code>
1573 |             <code>        <span class="rxjs-operator">tap</span>(() => setLoading(false))</code>
1574 |             <code>    )</code>
1575 |             <code>    .<span class="rxjs-subscribe">subscribe</span>(logToOutput)</code>
1576 |         </pre>
1577 |     </div>
1578 | </section>
1579 | 
1580 | <section class="slide">
1581 |     <h2 class="slide-header">Демо: результаты</h2>
1582 |     <div class="slide-description">
1583 |         <p>Работаем с потоками, <br>
1584 |             а не с промежуточными состояниями</p>
1585 |         <ul>
1586 |             <li>видна вся последовательность обработки</li>
1587 |             <li>минимум сайд эффектов</li>
1588 |             <li>самодостаточный компонент</li>
1589 |         </ul>
1590 |     </div>
1591 | </section>
1592 | 
1593 | <section class="slide">
1594 |     <h2 class="shout">
1595 |         SUBJECTS
1596 |     </h2>
1597 | </section>
1598 | 
1599 | <section class="slide">
1600 |     <h2 class="slide-header">1 подписка - 1 поток значений</h2>
1601 |     <div class="slide-description">
1602 |         <div class="playground playground-three-streams" id="observableMultiSubs"></div>
1603 |         <button class="btn btn-play" onclick="run(observableMultiSubs, this)">▶</button>
1604 |     </div>
1605 |     <small>
1606 |         <pre>
1607 |             <code>const stream$ = <span class="rxjs-creation">timer</span>(0, 500).<span class="rxjs-pipe">pipe</span>(</code>
1608 |                 <code>    <span class="rxjs-operator">take</span>(5),</code>
1609 |                 <code>    <span class="rxjs-operator">map</span>(() => random()));</code>
1610 |                 <code class="next">stream$.<span class="rxjs-subscribe">subscribe</span>(/* ... */);</code>
1611 |                 <code class="next">stream$.<span class="rxjs-subscribe">subscribe</span>(/* ... */);</code>
1612 |                 <div class="next">
1613 |                 <code>setTimeout(() => {</code>
1614 |                     <code>    stream$.<span class="rxjs-subscribe">subscribe</span>(/* ... */);</code>
1615 |                 <code>}, 800);</code>
1616 |                 </div>
1617 |         </pre>
1618 |     </small>
1619 |     <script>
1620 |         function observableMultiSubs() {
1621 |             const playgroundElement = document.getElementById('observableMultiSubs');
1622 |             playgroundElement.innerHTML = '';
1623 | 
1624 |             const stream$ = rxjs.timer(0, TICK_MS)
1625 |                 .pipe(
1626 |                     rxjs.operators.take(5),
1627 |                     rxjs.operators.map(() => Math.random().toString().substr(2, 2))
1628 |                 );
1629 | 
1630 |             startStream(playgroundElement, stream$);
1631 |             startStream(playgroundElement, stream$);
1632 |             startStream(playgroundElement, stream$, 800);
1633 |         }
1634 |     </script>
1635 | </section>
1636 | 
1637 | <section class="slide">
1638 |     <h2 class="slide-header">Subject</h2>
1639 |     <div class="slide-description">
1640 |         <p>Объединение Observable и Observer. <br>Передает значение всем подписчикам</p>
1641 |     </div>
1642 |     <div class="relative-container">
1643 |         <small>
1644 |             <pre>
1645 |                 <code>const subject = new <span class="rxjs-creation">Subject</span>();</code>
1646 |                 <code> </code>
1647 |                 <code>subject.next(0);</code>
1648 |                 <code>setTimeout(() => subject.next(1), 1000);</code>
1649 |                 <code>setTimeout(() => subject.next(2), 2000);</code>
1650 |                 <code>setTimeout(() => subject.next(3), 3000);</code>
1651 |                 <code>setTimeout(() => subject.next(4), 4000);</code>
1652 |                 <code>setTimeout(() => subject.complete(), 5000);</code>
1653 |             </pre>
1654 |         </small>
1655 |     </div>
1656 | </section>
1657 | 
1658 | <section class="slide">
1659 |     <h2 class="slide-header">Subject</h2>
1660 |     <div class="slide-description">
1661 |         <div class="playground playground-three-streams" id="subjectIntro"></div>
1662 |         <button class="btn btn-play" onclick="run(subjectIntro, this)">▶</button>
1663 |     </div>
1664 |     <div class="relative-container">
1665 |         <small>
1666 |         <pre>
1667 |                 <code>const subject = new <span class="rxjs-creation">Subject</span>();</code>
1668 |                 <code>setSubjectTick(subject);</code>
1669 |                 <code>&nbsp;</code>
1670 |                 <code>subject.<span class="rxjs-subscribe">subscribe</span>();</code>
1671 |                 <code>setTimeout(() => subject.<span class="rxjs-subscribe">subscribe</span>(/* ... */), 1500);</code>
1672 |                 <code>setTimeout(() => subject.<span class="rxjs-subscribe">subscribe</span>(/* ... */), 2500);</code>
1673 |         </pre>
1674 |         </small>
1675 |     </div>
1676 |     <script>
1677 |         function subjectIntro() {
1678 |             const playgroundElement = document.getElementById('subjectIntro');
1679 |             playgroundElement.innerHTML = '';
1680 | 
1681 |             const subject = new rxjs.Subject();
1682 |             setSubjectTick1(subject);
1683 | 
1684 |             startStream(playgroundElement, subject);
1685 |             startStream(playgroundElement, subject, 1500);
1686 |             startStream(playgroundElement, subject, 2500);
1687 |         }
1688 |     </script>
1689 | </section>
1690 | 
1691 | <!--<section class="slide">-->
1692 |     <!--<h2 class="slide-header">Разновидности Subject</h2>-->
1693 |     <!--<ol>-->
1694 |         <!--<li>Subject</li>-->
1695 |         <!--<li class="next">BehaviorSubject(value)</li>-->
1696 |         <!--<li class="next">ReplaySubject(buffer)</li>-->
1697 |         <!--<li class="next">AsyncSubject()</li>-->
1698 |     <!--</ol>-->
1699 | <!--</section>-->
1700 | 
1701 | <section class="slide">
1702 |     <h2 class="slide-header">Пример - автоотписка</h2>
1703 |     <div class="slide-description">
1704 |         <pre>
1705 |             <code>const subscription = streamA$.<span class="rxjs-pipe">pipe</span>(</code>
1706 |             <code>    <span class="rxjs-operator">map</span>(...),</code>
1707 |             <code>    <span class="rxjs-operator">switchMap</span>(...)</code>
1708 |             <code>).<span class="rxjs-subscribe">subscribe</span>(...);</code>
1709 |             <div class="next">
1710 |             <code>...</code>
1711 |             <code>onDestroy() {</code>
1712 |                 <code>    subscription.<span class="rxjs-subscribe">unsubscribe</span>();</code>
1713 |                 <code class="next">    subscription2.<span class="rxjs-subscribe">unsubscribe</span>();</code>
1714 |                 <code class="next">    subscription3.<span class="rxjs-subscribe">unsubscribe</span>();</code>
1715 |                 <code class="next">    subscription4.<span class="rxjs-subscribe">unsubscribe</span>();</code>
1716 |                 <div class="next">
1717 |                 <code>    ...</code>
1718 |                 <code>}</code>
1719 |                 </div>
1720 |             </div>
1721 |         </pre>
1722 |     </div>
1723 | </section>
1724 | 
1725 | <section class="slide">
1726 |     <h2 class="slide-header">Пример - автоотписка</h2>
1727 |     <div class="slide-description">
1728 |         <pre>
1729 |             <code>const destroy$ = new <span class="rxjs-creation">Subject</span>();</code>
1730 |             <div class="next">
1731 |             <code>streamA$.<span class="rxjs-pipe">pipe</span>(</code>
1732 |             <code>    <span class="rxjs-operator">map</span>(...),</code>
1733 |             <code>    <span class="rxjs-operator">switchMap</span>(...),</code>
1734 |             <code>    <span class="rxjs-operator">takeUntil</span>(<mark>destroy$</mark>)</code>
1735 |             <code>).<span class="rxjs-subscribe">subscribe</span>()</code>
1736 |             <code>...</code>
1737 |             </div>
1738 |             <div class="next">
1739 |             <code>onDestroy() {</code>
1740 |             <code>    destroy$.<span class="rxjs-subscribe">next</span>();</code>
1741 |             <code>}</code>
1742 |             </div>
1743 |         </pre>
1744 |     </div>
1745 | </section>
1746 | 
1747 | <section class="slide">
1748 |     <h2 class="slide-header">Пример - авторизация</h2>
1749 |     <div class="slide-description">
1750 |         <pre>
1751 |             <code>class StateService {</code>
1752 |             <code>  private <mark>authSubject</mark> = new <span class="rxjs-creation">BehaviorSubject</span>&lt;boolean&gt;(false);</code>
1753 |             <div class="next">
1754 |             <code> </code>
1755 |             <code>  setAuthState(state: boolean) {</code>
1756 |             <code>    this.authSubject.<span class="rxjs-subscribe">next</span>(state);</code>
1757 |             <code>  }</code>
1758 |             </div>
1759 |             <code>}</code>
1760 |         </pre>
1761 |     </div>
1762 | </section>
1763 | 
1764 | <section class="slide">
1765 |     <h2 class="slide-header">Пример - авторизация</h2>
1766 |     <div class="slide-description">
1767 |         <pre>
1768 |             <code>class StateService {</code>
1769 |             <code>  private <mark>authSubject</mark> = new <span class="rxjs-creation">BehaviorSubject</span>&lt;boolean&gt;(false);</code>
1770 |             <code>  setAuthState(state: boolean) {...}</code>
1771 |             <div class="next">
1772 |             <code> </code>
1773 |             <code>  getStateChange(): Observable&lt;boolean&gt; {</code>
1774 |             <code>    return this.authSubject.<span class="rxjs-subscribe">asObservable</span>();</code>
1775 |             <code>  }</code>
1776 |             </div>
1777 |             <code>}</code>
1778 |         </pre>
1779 |     </div>
1780 | </section>
1781 | 
1782 | <section class="slide">
1783 |     <h2 class="slide-header">Пример - авторизация</h2>
1784 |     <div class="slide-description">
1785 |         <pre>
1786 |             <code>class StateService {</code>
1787 |             <code>  private <mark>authSubject</mark> = new <span class="rxjs-creation">BehaviorSubject</span>&lt;boolean&gt;(false);</code>
1788 |             <code>  setAuthState(state: boolean) {...}</code>
1789 |             <code>  getStateChange(): Observable&lt;boolean&gt; {...}</code>
1790 |             <code> </code>
1791 |             <div class="next">
1792 |             <code>  getCurrentState(): boolean {</code>
1793 |             <code>    return this.authSubject.<span class="rxjs-subscribe">getValue</span>();</code>
1794 |             <code>  }</code>
1795 |             </div>
1796 |             <code>}</code>
1797 |         </pre>
1798 |     </div>
1799 | </section>
1800 | 
1801 | <section class="slide">
1802 |     <h2 class="slide-header">Пример - кеширование</h2>
1803 |     <div class="slide-description">
1804 |         <pre>
1805 |             <code>let cachingSubject;</code>
1806 |             <code> </code>
1807 |             <code>getResource() {</code>
1808 |             <div class="next">
1809 |             <code>    if (!cachingSubject) {</code>
1810 |             <div class="next">
1811 |             <code>      cachingSubject = new <span class="rxjs-creation">ReplaySubject</span>(1);</code>
1812 |             </div>
1813 |             <div class="next">
1814 |             <code> </code>
1815 |             <code>      loadData().<span class="rxjs-subscribe">subscribe</span>((result) => {</code>
1816 |             <code>          this.cachingSubject.<span class="rxjs-subscribe">next</span>(result);</code>
1817 |             <code>        });</code>
1818 |             </div>
1819 |             <code>    }</code>
1820 |             </div>
1821 |             <div class="next">
1822 |             <code> </code>
1823 |             <code>    return this.cachingSubject.<span class="rxjs-subscribe">asObservable</span>();</code>
1824 |             </div>
1825 |             <code>}</code>
1826 |         </pre>
1827 |     </div>
1828 | </section>
1829 | 
1830 | <section class="slide">
1831 |     <h2 class="shout">
1832 |         ИТОГИ
1833 |     </h2>
1834 | </section>
1835 | 
1836 | <section class="slide">
1837 |     <h2 class="slide-header">Итоги</h2>
1838 |     <div class="slide-description">
1839 |         <ul>
1840 |             <li>Push / pull</li>
1841 |             <li class="next">Observable = Observer + Iterator</li>
1842 |             <li class="next">Observable - паттерн для работы с потоками данных</li>
1843 |             <li class="next">Операторы: преобразования, комбинирования потоков</li>
1844 |             <li class="next">Observable высшего порядка</li>
1845 |             <li class="next">Как сделать отменяемые запросы</li>
1846 |             <li class="next">Поле поиска через цепочку операторов</li>
1847 |             <li class="next">Subjects – один поток на множество подписчиков</li>
1848 |         </ul>
1849 |     </div>
1850 | </section>
1851 | 
1852 | <section class="slide">
1853 |     <h2 class="slide-header">Спасибо!</h2>
1854 |     <div class="text-center">
1855 |         <br>
1856 |         <img width="320" src="pictures/rxjs-qr.png" alt="https://github.com/aalexeev239/rxjs-intro">
1857 |         <br>
1858 |         <h2><a href="https://github.com/aalexeev239/rxjs-intro"
1859 |                target="_blank" rel="noopener noreferrer">github.com/aalexeev239/rxjs-intro</a>
1860 |         </h2>
1861 |     </div>
1862 | </section>
1863 | 
1864 | <footer class="badge">
1865 |     <a href="https://github.com/aalexeev239/rxjs-intro">GitHub</a>
1866 | </footer>
1867 | 
1868 | <div class="progress"></div>
1869 | 
1870 | <script src="node_modules/shower-core/shower.min.js"></script>
1871 | <script src="node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
1872 | <script src="./custom-scripts.js"></script>
1873 | <!-- Copyright © 2018 Andrey Alexeev -->
1874 | </body>
1875 | </html>
1876 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rxjs-intro-talk",
 3 |   "description": "RxJS intro",
 4 |   "version": "0.0.1",
 5 |   "author": {
 6 |     "name": "Andrey Alexeev",
 7 |     "url": "http://aalexeev.ru"
 8 |   },
 9 |   "dependencies": {
10 |     "rxjs": "^6.2.1",
11 |     "shower-core": "^2.1.0",
12 |     "shower-material": "^1.1.0",
13 |     "tinkoff-shower": "git+git@github.com:lekzd/tinkoff-shower.git"
14 |   },
15 |   "devDependencies": {
16 |     "browser-sync": "^2.18.12",
17 |     "del": "^3.0.0",
18 |     "fs": "0.0.2",
19 |     "gulp": "^3.9.1",
20 |     "gulp-better-rollup": "^3.3.0",
21 |     "gulp-gh-pages": "^0.5.4",
22 |     "gulp-rename": "^1.2.2",
23 |     "gulp-replace": "^0.6.1",
24 |     "gulp-rsync": "0.0.8",
25 |     "gulp-zip": "^4.0.0",
26 |     "merge-stream": "^1.0.0",
27 |     "path-exists-cli": "^1.0.0",
28 |     "rollup-plugin-node-resolve": "^3.3.0",
29 |     "run-sequence": "^2.1.0"
30 |   },
31 |   "scripts": {
32 |     "start": "gulp",
33 |     "prepare": "gulp prepare",
34 |     "archive": "gulp archive",
35 |     "publish": "gulp publish",
36 |     "test": "npm run prepare && ls prepared && npm run archive && path-exists archive.zip"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/pictures/2requests.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/2requests.png


--------------------------------------------------------------------------------
/pictures/author.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/author.png


--------------------------------------------------------------------------------
/pictures/demo-2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/demo-2.gif


--------------------------------------------------------------------------------
/pictures/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/favicon-16x16.png


--------------------------------------------------------------------------------
/pictures/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/favicon-32x32.png


--------------------------------------------------------------------------------
/pictures/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/favicon-96x96.png


--------------------------------------------------------------------------------
/pictures/fetch-cancel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/fetch-cancel.png


--------------------------------------------------------------------------------
/pictures/iterator-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/iterator-pattern.png


--------------------------------------------------------------------------------
/pictures/observer-pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/observer-pattern.png


--------------------------------------------------------------------------------
/pictures/palpatin-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/palpatin-50.png


--------------------------------------------------------------------------------
/pictures/pipe-3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/pipe-3.gif


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-1-bg-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-1-bg-2.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-1-bg-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-1-bg-3.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-1.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-2.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-3.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-4.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-5.png


--------------------------------------------------------------------------------
/pictures/rx-stachka-table-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rx-stachka-table-6.png


--------------------------------------------------------------------------------
/pictures/rxJs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxJs.png


--------------------------------------------------------------------------------
/pictures/rxjs-clicks-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-clicks-1.png


--------------------------------------------------------------------------------
/pictures/rxjs-clicks-2-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-clicks-2-2.png


--------------------------------------------------------------------------------
/pictures/rxjs-clicks-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-clicks-2.png


--------------------------------------------------------------------------------
/pictures/rxjs-clicks-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-clicks-3.png


--------------------------------------------------------------------------------
/pictures/rxjs-clicks-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-clicks-4.png


--------------------------------------------------------------------------------
/pictures/rxjs-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-logo.png


--------------------------------------------------------------------------------
/pictures/rxjs-qr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxjs-qr.png


--------------------------------------------------------------------------------
/pictures/rxmarbles-combine-latest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxmarbles-combine-latest.png


--------------------------------------------------------------------------------
/pictures/rxmarbles-filter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxmarbles-filter.png


--------------------------------------------------------------------------------
/pictures/rxmarbles-switch-map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/rxmarbles-switch-map.png


--------------------------------------------------------------------------------
/pictures/table-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/table-1.png


--------------------------------------------------------------------------------
/pictures/table-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/table-2.png


--------------------------------------------------------------------------------
/pictures/table-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aalexeev239/rxjs-intro/edc61370aabb0491f69e817e3f74c133560cd3a5/pictures/table-3.png


--------------------------------------------------------------------------------