index_prez3.html

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>RxJS</title>

	<link rel="stylesheet" href="css/reveal.css">
	<link rel="stylesheet" href="css/theme/black.css">

	<!-- Theme used for syntax highlighting of code -->
	<link rel="stylesheet" href="lib/css/zenburn.css">

	<!-- Printing and PDF exports -->
	<script>
		var link = document.createElement('link');
		link.rel = 'stylesheet';
		link.type = 'text/css';
		link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
		document.getElementsByTagName('head')[0].appendChild(link);
	</script>

	<style>
		.rxjsc {
			color: #C1185A;
		}

		.slides {
			width: 80% !important;
		}

		.med-text {
			font-size: 60px;
		}

		.large-text {
			font-size: 100px;
		}
	</style>
</head>

<body>
	<div class="reveal">
		<div class="slides">
			<section>
				<h2>Reactive Extentions</h2>
				<span class="rxjsc large-text">RxJS</span>
			</section>

			<section>
				<img class="stretch" data-src="content/whaaat.gif">
			</section>

			<section>
				<img class="stretch" data-src="content/pondus/lazy.jpg">
			</section>

			<section>
				<h3>RxJS in a nutshell</h3>
				<ui>
					<li class="fragment">THE library for <span class="rxjsc">event driven</span> programming</li>
					<li class="fragment">The best way to work with <span class="rxjsc">async</span> data</li>
					<li class="fragment"><span class="rxjsc">Observer</span> pattern</li>
					<!-- <li class="fragment">A function is executed each time new data arrives</li> -->
					<li class="fragment">Can <span class="rxjsc">manipulate</span> data before it arrives, functionally
					</li>
					<li class="fragment">Think of <span class="rxjsc">RxJS</span> as Lodash for events</li>
				</ui>
			</section>

			<section>
				<h2>Getting data...</h2>
			</section>

			<section>
				<section>
					<h1>Pull</h1>
				</section>

				<section>
					Function
					<pre><code class="TypeScript" data-trim contenteditable>
						function myFunction(someVal){
						    return someVal * 2
						}
						myFunction(5) // 10
					</code></pre>
				</section>

				<section>
					Iterators and generators
					<pre><code class="TypeScript" data-trim contenteditable>
function* myFunction() {
    yield 5;
    yield 10;
    yield 15;
}

var generator = myFunction();

console.log(generator.next().value); // 5
console.log(generator.next().value); // 10
console.log(generator.next().value); // 15
					</code></pre>
				</section>
			</section>

			<section>
				<section>
					<h1>Push</h1>
				</section>

				<section>
					Promise
					<pre><code class="TypeScript" data-trim contenteditable>
							let willIGetNewPhone = new Promise((resolve, reject) => {
							    setTimeout(() => {
							        resolve(true)
							    }, 1000)
							});

							willIGetNewPhone.then(value => {
							    console.log("Got a new phone!") //prints after 1 sec
							});
						</code></pre>
				</section>

			</section>
			<img class="fragment" class="stretch" data-src="content/broken.gif">
			<section>
				<table>
					<thead>
						<tr>
							<th></th>
							<th>Single</th>
							<th>Multiple</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Pull</td>
							<td>Function</td>
							<td>Iterator</td>
						</tr>
						<tr>
							<td>Push</td>
							<td>Promise</td>
							<td class="fragment rxjsc">Observable</td>
						</tr>
					</tbody>
				</table>
			</section>

			<section>
				<h2>Now entering <span class="rxjsc">RxJS</span></h2>
				<img class="fragment" class="stretch" data-src="content/rxjs.gif">
			</section>


			<section>

				<section>
					<h3><span class="rxjsc">Subscribing</span> to future data</h3>
				</section>

				<section>
					<h3>Data sources</h3>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						fromEvent(searchBox, 'keydown')
						fromEvent(window, 'mousemove')
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						timer(1000) // 1 sec intervall
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						http.get // in Angular
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						webSocket("ws://localhost:8081")
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						of(1, 2, 3) // get each item independently
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						from(somePromise) // Create from promise
					</code></pre>
					<h3 class="fragment">And many more</h3>
				</section>

				<section>
					<h3>.subscribe</h3>
					<p class="fragment">Callback for each new value</p>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						dataSources.subscribe({
							next(value){ console.log('got value ' + value); },
							error(err) { console.error('Error: ' + err); },
							complete() { console.log('done'); }
						});
					</code></pre>
				</section>

				<section>
					<h3>Search box</h3>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						<input type="text" placeholder="Search for something">
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						@ViewChild('searchBox') searchBox;

						const dataSource = fromEvent(searchBox, 'keydown')
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
							dataSource.subscribe({
								next: keyPressed => {
									console.log(keyPressed);
								}
							});
					</code></pre>
				</section>

				<section>
					<h3>Observable</h3>
					<pre><code class="TypeScript" data-trim contenteditable>
of(42, 200).subscribe(next => {
	console.log(next); // 42, 200
});
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
	var myObservable =  new Observable(observer => {
	    observer.next(42);  // "return" a value instantly
	    observer.next(200); // "return" a value instantly
	});

	myObservable.subscribe(next => {
		console.log(next); // 42, 200
	});
						</code></pre>
				</section>

				<section>
					<h3>Each subscription is independent</h3>
					<pre><code class="TypeScript" data-trim contenteditable>
						myObservable = of(42, 200);

						myObservable.subscribe(next => {
							console.log(next); // 42, 200
						});

						myObservable.subscribe(next => {
							console.log(next); // 42, 200
						});

						myObservable.subscribe(next => {
							console.log(next); // 42, 200
						});
						</code></pre>
				</section>

				<section>
					<h3>Nothing happens until someone subscribes</h3>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						http.get('vg.no') // nothing (Cold)
					</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						http.get('vg.no').subscribe(...) // get call is executed (Hot)
					</code></pre>
					<h3 class="fragment">Cold vs Hot</h3>
				</section>

				<section>
					<h3>Unsubscribe</h3>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
							const subscription = event.subscribe({
								next: keyPressed => {
									console.log(keyPressed);
								}
							});

							// sometime later
							subscription.unsubscribe();
					</code></pre>
				</section>

			</section>

			<section>
				<section>
					<h2>Complete examples</h2>
				</section>
				<section>
					of( values )
					<pre><code class="TypeScript" data-trim contenteditable>
of(1, 2, 3)
.subscribe(next => {
    console.log(next); // 1, 2, 3
})
						</code></pre>
				</section>
				<section>
					from( array, promise, or iterable )
					<pre><code class="TypeScript" data-trim contenteditable>
from([1, 2, 3])
.subscribe(next => {
    console.log(next); // 1, 2, 3
})
						</code></pre>
				</section>
				<section>
					fromEvent(element, evenet)
					<pre><code class="TypeScript" data-trim contenteditable>
fromEvent(window, 'mousemove')
.subscribe(next => {
    console.log("Mouse movement");
});
						</code></pre>
				</section>
				<section>
					Web Socket
					<pre><code class="TypeScript" data-trim contenteditable>
						webSocket("ws://localhost:8081")
						.subscribe(next => {
							console.log(next) // web socket message
						})
					</code></pre>
				</section>
				<section>
					interval( time_ms )
					<pre><code class="TypeScript" data-trim contenteditable>
interval(1000)
.subscribe(next => {
    console.log(next) //0, 1, 2, 3....
})
						</code></pre>
				</section>
				<section>
					Creating your own
					<pre><code class="TypeScript" data-trim contenteditable>
const myObservable = new Observable(observer => {
    let counter = 0;
    setInterval(() => {
        observer.next( counter++ );
    }, 1000);
});
myObservable.subscribe(next => {
    console.log(next) // 0, 1, 2, 3.....
})
						</code></pre>
				</section>
				<section>
					The same result
					<pre><code class="TypeScript" data-trim contenteditable>
interval(1000)
.subscribe(next => {
    console.log(next) //0, 1, 2, 3....
})
					</code></pre>
					<pre><code class="TypeScript" data-trim contenteditable>
const myObservable = new Observable(observer => {
    let counter = 0;
    setInterval(() => {
        observer.next( counter++ );
    }, 1000);
});
myObservable.subscribe(next => {
    console.log(next) // 0, 1, 2, 3.....
})
						</code></pre>
				</section>
			</section>

			<section>
				<h3>But what if you want to <span class="rxjsc">change</span> the data before it arrives?</h3>
			</section>

			<section>
				<h2>Streams and time axis</h2>
				<img class="stretch" data-src="content/stream.png">
			</section>

			<section>
				<section>
					<h3>Operators</h3>
					<pre><code class="TypeScript" data-trim contenteditable>
							dataSource
							.pipe( operator, operator, operator... )
							.subscribe

							Operators
							map()
							filter()
							skip()
							delay()
							throttleTime()
							debounceTime()
							switchMap()
							retry()
							catch()
						</code></pre>
				</section>

				<section>
					<a href="http://reactivex.io/documentation/operators/map.html" target="_blank">map(function)</a>
					<img class="stretch" data-src="content/operators/map.png">
				</section>

				<section>
					filter(function)
					<img class="stretch" data-src="content/operators/filter.png">
				</section>

				<section>
					skip(number)<br />
					take(number)
					<img class="stretch" data-src="content/operators/skip.png">
				</section>

				<section>
					delay(ms)
					<img class="stretch" data-src="content/operators/delay.png">
				</section>

				<section>
					throttleTime(ms)
					<img class="stretch" data-src="content/operators/throttleTime.png">
				</section>

				<section>
					debounceTime(ms)
					<img class="stretch" data-src="content/operators/debounce.png">
				</section>

				<section>
					<!-- TODO improve! -->
					switchMap(function => { return Observable to switch })
					<img class="stretch" data-src="content/operators/switchmap.png">
					<h2 class="fragment">RxJS on next level</h2>
				</section>
				<!-- 
				<section>
					<p class="fragment">Using result from one observable to <span class="rxjsc">switch</span> to another
					</p>
					<p class="fragment">Getting user info in order to retrieve something else</p>
				</section> -->

				<section>
					<h3>Error Handling</h3>
				</section>

				<section>
					retry(number)
					<img class="stretch" data-src="content/operators/retry.png">
				</section>

				<section>
					catch(return new Observer)
					<img class="stretch" data-src="content/operators/catch.png">
				</section>


			</section>

			<section>
				<h3>Angular HttpClient</h3>
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
					http.get(....).pipe(...).subscribe(...)

					http.post(...).pipe(...).subscribe(...)
				</code></pre>
			</section>

			<section>
				<h3>Search box</h3>

				<pre class=""><code class="TypeScript" data-trim contenteditable>
						fromEvent(searchBox, 'keydown')
						.subscribe({
							next: keyPressed => {
								this.http.get('localhost:1337/api').subscribe(...)
							}
						});
					</code></pre>
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
						fromEvent(searchBox, 'keydown')
						pipe(debounceTime(500)) // half a second
						.subscribe({
							next: keyPressed => {
								this.http.get('localhost:1337/api').subscribe(...);
							}
						});
					</code></pre>

			</section>

			<section>
				Creating a timer that executes each second, for 5 seconds
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
interval(1000)
.pipe(take(5))
.subscribe(next => {
    console.log(next)
});
					</code></pre>
			</section>

			<!-- <section>
					Polling a backend service each 5 seconds
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
const myObservable = new Observable(observer => {
    Observable.interval(5000).subscribe(next => {
        this._http.get("www.ulv.no").subscribe(value  => {
            observer.next(value);
        })
    });
});

myObservable
.subscribe(value => {
    console.log(value);
})
					</code></pre>
				</section> -->


			<section>
				Only execute some code after no mouse movement for 1 second
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
fromEvent(window, 'mousemove')
.pipe(debounceTime(1000))
.subscribe(next => {
	console.log("No movement for one sec!")
});
				</code></pre>
			</section>

			<!-- <section>
				Polling an unstable backend that crashes all the time
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
interval(5000)
.pipe(
	switchMap(() => {
    		return this.http.get("www.ulv.no")
		.catch(error => empty())
	})
)
.subscribe(data => {
    console.log(data);
})
					</code></pre>
			</section> -->

			<section>
				Map server response <span class="rxjsc">before</span> passing it on
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
					this.http.get('localhost:1337/api')
					.pipe(map(blogPost => {
						return {
							...data,
							addedDate = new Date(blogPost.addedDate as string)
						}
					}))
					.subscribe(blogPost => {
						console.log(blogPost);
						// blogPost.addedDate is now a date
						// even if backend returned a string
					})
				</code></pre>
			</section>

			<section>
				Only get the relevant web socket messages and data <br>
				+ max one per second
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
					webSocket("ws://localhost:8081")
					.pipe(
						filter(message => message.type === 'action'),
						map(message => message.data),
						throttleTime(1000)
					)
					.subscribe(message => {
						console.log(message); // max one relevant message per second
					})
				</code></pre>
			</section>

			<section>
				But what if you want to <span class="rxjsc">control</span> when data is emitted?
				<img class="stretch" data-src="content/pondus/whatif.jpg">
			</section>

			<section>
				<h2>Subject</h2>
				<p class="fragment">
					<span class="rxjsc">Active</span> observables
				</p>
				<p class="fragment">
					<span class="rxjsc">Shared</span> by default
				</p>
				<p class="fragment">
					Multicasted to all subscribers
				</p>
			</section>

			<section>
				Observable with next inside
				<pre><code class="TypeScript" data-trim contenteditable>
new Observable(observer => {
    observer.next(42);
})
.subscribe(next => {
    console.log(next); // 42
});
					</code></pre>
			</section>


			<section>
				Subject
				<pre><code class="TypeScript" data-trim contenteditable>
let mySubject = new Subject();
mySubject.subscribe(next => {
	console.log(next); // 42, 200
});

mySubject.next(42); // next is outside!

mySubject.subscribe(next => {
	console.log(next); // 200
});

mySubject.next(200);

					</code></pre>

				<p class="fragment">
					Works really similar to <span class="rxjsc">EventEmitter</span>
				</p>

			</section>

			<section>
				<pre><code class="TypeScript" data-trim contenteditable>
					// Observable
					const myObservable = new Observable(observer => {
						observer.next(42);
					})

					// Subject
					let mySubject = new Subject();
					mySubject.next(42);
				</code></pre>
			</section>

			<!-- <section>
				<section>
					Easy to use it wrong
					<img class="stretch" data-src="content/wrong.gif">
				</section>
			</section> -->

			<section>
				<h3>Behavior Subject</h3>
				Subject <span class="rxjsc">variable</span>, with a current value<br />
				<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
username: BehaviorSubject = new BehaviorSubject("Greger");

username.subscribe(next => {
    console.log(next) //Greger, Tom
})

username.next('Tom')

username.subscribe(next => {
    console.log(next) // Tom
})
					</code></pre>

				<blockquote class="fragment">
					A stream of birthdays is a Subject, but the stream of a person's age would be a BehaviorSubject.
				</blockquote>

			</section>

			<section>
				<h3>Replay Subject</h3>
				<h3 class="fragment">Async Subject</h3>
			</section>

			<!-- <section>
				<h3>When to use a subject over observales?</h3>
				<p class="fragment">
					When you need a shared observable that can push/next() values from outside the observable
				</p>
				<p class="fragment">
					When need behavior of replay or behavior subject
				</p>
			</section> -->

			<!-- <section>

					Async Subject: Only send last data pushed to stream/next on complete

					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
let asyncSubject = new AsyncSubject();
asyncSubject.subscribe(
    next =>  {console.log(next)}, //2
    error => {console.log("error")},
    () =>    {console.log("complete")}
);

asyncSubject.next("1");
asyncSubject.next("2");
asyncSubject.complete();
					</code></pre>

				</section> -->

			<!-- <section>
				<section>
					Subject examples
				</section>
				<section>
					A service that can receive data and next it to a subject stream
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
todoSubject: Subject = new Subject();

addItem(newItem){
    this.listOftodos.push(newItem);
    this.todoSubject.next({
        todoItems: this.listOftodos
    });
}
						</code></pre>

					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
this._todoService.getStream()
.subscribe(next => {
    this.todoListLocal = next;
});
						</code></pre>
				</section>
				<section>
					A active user stream that all new subscribers need the last value from
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
private userSubject: BehaviorSubject = new BehaviorSubject("Guest")
newUser(newUser){
    this.userSubject.next(newUser);
}
						</code></pre>
					<pre class="fragment"><code class="TypeScript" data-trim contenteditable>
this._todoService.getUserStream().subscribe(next => {
    console.log(next);
});
						</code></pre>
				</section>
			</section> -->

			<section>
				Remember to <span class="rxjsc">unsubscribe</span>, espessially in a Single Page Application
				<pre><code class="TypeScript" data-trim contenteditable>
						let subscription = observable.subscribe(......)

						//Some time later, for example on component destoy/unmount

						subscription.unsubscribe()
					</code></pre>
			</section>

			<section>
				<section>
					<h2>Do not overuse RxJS</h2>
				</section>
				<section>
					Only where it provides a <span class="rxjsc">benefit</span>, and for the most part limited to async
					code execution
				</section>

			</section>

			<section>
				<h2>
					Reactive Extentions
				</h2>
				<span class="rxjsc large-text">RxJS</span><br />
				<p class="fragment">
					<img class="stretch" data-src="content/wow.gif">
				</p>
			</section>


			<section>
				Jan Greger Hemb <br />
				www.github.com/JGH153<br />
				<a href="http://reactivex.io/" target="_blank">reactivex.io</a><br />
				<a href="http://reactivex.io/rxjs/" target="_blank">reactivex.io/rxjs</a>
			</section>

			<section>
				Questions?<br>
				<img class="stretch" data-src="content/pondus/question.jpg">
			</section>

			<section>
				This page is intentionally left blank
			</section>

		</div>
	</div>

	<script src="lib/js/head.min.js"></script>
	<script src="js/reveal.js"></script>

	<script>
		// More info about config & dependencies:
		// - https://github.com/hakimel/reveal.js#configuration
		// - https://github.com/hakimel/reveal.js#dependencies
		Reveal.initialize({
			history: true,
			dependencies: [
				{ src: 'plugin/markdown/marked.js' },
				{ src: 'plugin/markdown/markdown.js' },
				{ src: 'plugin/notes/notes.js', async: true },
				{ src: 'plugin/highlight/highlight.js', async: true, callback: function () { hljs.initHighlightingOnLoad(); } }
			]
		});
	</script>
</body>

</html>